diff --git a/.github/workflows/lock.yml b/.github/workflows/lock.yml
index c429098564543..5420e829b39fe 100644
--- a/.github/workflows/lock.yml
+++ b/.github/workflows/lock.yml
@@ -25,13 +25,5 @@ jobs:
         with: 
           issue-inactive-days: '30'
           issue-lock-reason: 'resolved'
-          issue-comment: >
-            This issue has been automatically locked since there
-            has not been any recent activity after it was closed.
-            Please open a new issue for related bugs.
           pr-inactive-days: '30'
           pr-lock-reason: 'resolved'
-          pr-comment: >
-            This pull request has been automatically locked since there
-            has not been any recent activity after it was closed.
-            Please open a new issue for related bugs.
diff --git a/Gemfile b/Gemfile
index e377866f7f5a3..ec57da19302f5 100644
--- a/Gemfile
+++ b/Gemfile
@@ -96,12 +96,12 @@ gem 'koala'
 # slack client
 gem 'slack-ruby-client', '~> 2.2.0'
 # for dialogflow integrations
-gem 'google-cloud-dialogflow-v2'
+gem 'google-cloud-dialogflow-v2', '>= 0.24.0'
 gem 'grpc'
 # Translate integrations
 # 'google-cloud-translate' gem depends on faraday 2.0 version
 # this dependency breaks the slack-ruby-client gem
-gem 'google-cloud-translate-v3'
+gem 'google-cloud-translate-v3', '>= 0.7.0'
 
 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
@@ -116,7 +116,7 @@ gem 'sentry-ruby', require: false
 gem 'sentry-sidekiq', '>= 5.19.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.3.0'
+gem 'sidekiq', '>= 7.3.1'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
 
@@ -165,7 +165,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-google-oauth2', '>= 1.1.2'
+gem 'omniauth-google-oauth2', '>= 1.1.3'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
 
 ## Gems for reponse bot
@@ -200,7 +200,7 @@ group :development do
   gem 'rack-mini-profiler', '>= 3.2.0', require: false
   gem 'stackprof'
   # Should install the associated chrome extension to view query logs
-  gem 'meta_request', '>= 0.8.0'
+  gem 'meta_request', '>= 0.8.3'
 end
 
 group :test do
@@ -228,7 +228,7 @@ group :development, :test do
   gem 'mock_redis'
   gem 'pry-rails'
   gem 'rspec_junit_formatter'
-  gem 'rspec-rails', '>= 6.1.3'
+  gem 'rspec-rails', '>= 6.1.5'
   gem 'rubocop', require: false
   gem 'rubocop-performance', require: false
   gem 'rubocop-rails', require: false
diff --git a/Gemfile.lock b/Gemfile.lock
index 19f6e76c3e35a..70bee91706823 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -169,7 +169,7 @@ GEM
     climate_control (1.2.0)
     coderay (1.1.3)
     commonmarker (0.23.10)
-    concurrent-ruby (1.3.3)
+    concurrent-ruby (1.3.4)
     connection_pool (2.4.1)
     crack (1.0.0)
       bigdecimal
@@ -230,7 +230,7 @@ GEM
       ruby2_keywords
     email_reply_trimmer (0.1.13)
     erubi (1.13.0)
-    et-orbi (1.2.7)
+    et-orbi (1.2.11)
       tzinfo
     execjs (2.8.1)
     facebook-messenger (2.0.1)
@@ -257,7 +257,7 @@ GEM
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
-    faraday-retry (2.1.0)
+    faraday-retry (2.2.1)
       faraday (~> 2.0)
     fcm (1.0.8)
       faraday (>= 1.0.0, < 3.0)
@@ -268,10 +268,10 @@ GEM
       rake
     flag_shih_tzu (0.3.23)
     foreman (0.87.2)
-    fugit (1.9.0)
-      et-orbi (~> 1, >= 1.2.7)
+    fugit (1.11.1)
+      et-orbi (~> 1, >= 1.2.11)
       raabro (~> 1.4)
-    gapic-common (0.18.0)
+    gapic-common (0.20.0)
       faraday (>= 1.9, < 3.a)
       faraday-retry (>= 1.0, < 3.a)
       google-protobuf (~> 3.14)
@@ -301,15 +301,15 @@ GEM
     google-cloud-core (1.6.0)
       google-cloud-env (~> 1.0)
       google-cloud-errors (~> 1.0)
-    google-cloud-dialogflow-v2 (0.23.0)
-      gapic-common (>= 0.18.0, < 2.a)
+    google-cloud-dialogflow-v2 (0.31.0)
+      gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
       google-cloud-location (>= 0.4, < 2.a)
     google-cloud-env (1.6.0)
       faraday (>= 0.17.3, < 3.0)
     google-cloud-errors (1.3.1)
-    google-cloud-location (0.4.0)
-      gapic-common (>= 0.17.1, < 2.a)
+    google-cloud-location (0.6.0)
+      gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
     google-cloud-storage (1.44.0)
       addressable (~> 2.8)
@@ -319,17 +319,17 @@ GEM
       google-cloud-core (~> 1.6)
       googleauth (>= 0.16.2, < 2.a)
       mini_mime (~> 1.0)
-    google-cloud-translate-v3 (0.6.0)
-      gapic-common (>= 0.17.1, < 2.a)
+    google-cloud-translate-v3 (0.10.0)
+      gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
     google-protobuf (3.25.3)
     google-protobuf (3.25.3-arm64-darwin)
     google-protobuf (3.25.3-x86_64-darwin)
     google-protobuf (3.25.3-x86_64-linux)
-    googleapis-common-protos (1.4.0)
-      google-protobuf (~> 3.14)
-      googleapis-common-protos-types (~> 1.2)
-      grpc (~> 1.27)
+    googleapis-common-protos (1.6.0)
+      google-protobuf (>= 3.18, < 5.a)
+      googleapis-common-protos-types (~> 1.7)
+      grpc (~> 1.41)
     googleapis-common-protos-types (1.14.0)
       google-protobuf (~> 3.18)
     googleauth (1.5.2)
@@ -457,7 +457,7 @@ GEM
     marcel (1.0.4)
     maxminddb (0.1.22)
     memoist (0.16.2)
-    meta_request (0.8.2)
+    meta_request (0.8.3)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
     method_source (1.1.0)
@@ -467,7 +467,7 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.7)
-    minitest (5.24.1)
+    minitest (5.25.1)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -480,7 +480,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.12)
+    net-imap (0.4.14)
       date
       net-protocol
     net-pop (0.1.2)
@@ -522,7 +522,7 @@ GEM
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
       rack-protection
-    omniauth-google-oauth2 (1.1.2)
+    omniauth-google-oauth2 (1.1.3)
       jwt (>= 2.0)
       oauth2 (~> 2.0)
       omniauth (~> 2.0)
@@ -634,20 +634,20 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.3.4)
+    rexml (3.3.6)
       strscan
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
-    rspec-expectations (3.13.1)
+    rspec-expectations (3.13.2)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
     rspec-mocks (3.13.1)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
-    rspec-rails (6.1.3)
-      actionpack (>= 6.1)
-      activesupport (>= 6.1)
-      railties (>= 6.1)
+    rspec-rails (7.0.1)
+      actionpack (>= 7.0)
+      activesupport (>= 7.0)
+      railties (>= 7.0)
       rspec-core (~> 3.13)
       rspec-expectations (~> 3.13)
       rspec-mocks (~> 3.13)
@@ -722,7 +722,7 @@ GEM
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.3.0)
+    sidekiq (7.3.1)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       logger
@@ -796,7 +796,7 @@ GEM
     uniform_notifier (1.16.0)
     uri (0.13.0)
     uri_template (0.7.0)
-    valid_email2 (4.0.6)
+    valid_email2 (5.2.6)
       activemodel (>= 3.2)
       mail (~> 2.5)
     version_gem (1.1.4)
@@ -881,9 +881,9 @@ DEPENDENCIES
   foreman
   geocoder
   gmail_xoauth
-  google-cloud-dialogflow-v2
+  google-cloud-dialogflow-v2 (>= 0.24.0)
   google-cloud-storage
-  google-cloud-translate-v3
+  google-cloud-translate-v3 (>= 0.7.0)
   groupdate
   grpc
   haikunator
@@ -903,14 +903,14 @@ DEPENDENCIES
   listen
   lograge (~> 0.14.0)
   maxminddb
-  meta_request (>= 0.8.0)
+  meta_request (>= 0.8.3)
   mock_redis
   neighbor
   net-smtp (~> 0.3.4)
   newrelic-sidekiq-metrics (>= 1.6.2)
   newrelic_rpm
   omniauth (>= 2.1.2)
-  omniauth-google-oauth2 (>= 1.1.2)
+  omniauth-google-oauth2 (>= 1.1.3)
   omniauth-oauth2
   omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
   pg
@@ -930,7 +930,7 @@ DEPENDENCIES
   responders (>= 3.1.1)
   rest-client
   reverse_markdown
-  rspec-rails (>= 6.1.3)
+  rspec-rails (>= 6.1.5)
   rspec_junit_formatter
   rubocop
   rubocop-performance
@@ -943,7 +943,7 @@ DEPENDENCIES
   sentry-ruby
   sentry-sidekiq (>= 5.19.0)
   shoulda-matchers
-  sidekiq (>= 7.3.0)
+  sidekiq (>= 7.3.1)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.2.0)
diff --git a/app/builders/account_builder.rb b/app/builders/account_builder.rb
index f179c6405dfb7..6f79805865f22 100644
--- a/app/builders/account_builder.rb
+++ b/app/builders/account_builder.rb
@@ -32,11 +32,13 @@ def account_name
   end
 
   def validate_email
+    raise InvalidEmail.new({ domain_blocked: domain_blocked }) if domain_blocked?
+
     address = ValidEmail2::Address.new(@email)
-    if address.valid? # && !address.disposable?
+    if address.valid? && !address.disposable?
       true
     else
-      raise InvalidEmail.new(valid: address.valid?)
+      raise InvalidEmail.new({ valid: address.valid?, disposable: address.disposable? })
     end
   end
 
@@ -79,4 +81,21 @@ def create_user
     @user.confirm if @confirmed
     @user.save!
   end
+
+  def domain_blocked?
+    domain = @email.split('@').last
+
+    blocked_domains.each do |blocked_domain|
+      return true if domain.match?(blocked_domain)
+    end
+
+    false
+  end
+
+  def blocked_domains
+    domains = GlobalConfigService.load('BLOCKED_EMAIL_DOMAINS', '')
+    return [] if domains.blank?
+
+    domains.split("\n").map(&:strip)
+  end
 end
diff --git a/app/controllers/api/v1/accounts/agents_controller.rb b/app/controllers/api/v1/accounts/agents_controller.rb
index 4eff101275517..01aa42620b5ee 100644
--- a/app/controllers/api/v1/accounts/agents_controller.rb
+++ b/app/controllers/api/v1/accounts/agents_controller.rb
@@ -24,7 +24,7 @@ def create
 
   def update
     @agent.update!(agent_params.slice(:name).compact)
-    @agent.current_account_user.update!(agent_params.slice(:role, :availability, :auto_offline).compact)
+    @agent.current_account_user.update!(agent_params.slice(*account_user_attributes).compact)
   end
 
   def destroy
@@ -67,8 +67,16 @@ def fetch_agent
     @agent = agents.find(params[:id])
   end
 
+  def account_user_attributes
+    [:role, :availability, :auto_offline]
+  end
+
+  def allowed_agent_params
+    [:name, :email, :name, :role, :availability, :auto_offline]
+  end
+
   def agent_params
-    params.require(:agent).permit(:name, :email, :name, :role, :availability, :auto_offline)
+    params.require(:agent).permit(allowed_agent_params)
   end
 
   def new_agent_params
@@ -101,3 +109,5 @@ def delete_user_record(agent)
     DeleteObjectJob.perform_later(agent) if agent.reload.account_users.blank?
   end
 end
+
+Api::V1::Accounts::AgentsController.prepend_mod_with('Api::V1::Accounts::AgentsController')
diff --git a/app/controllers/api/v1/accounts/conversations/messages_controller.rb b/app/controllers/api/v1/accounts/conversations/messages_controller.rb
index d34561e36589f..63226f342b0e3 100644
--- a/app/controllers/api/v1/accounts/conversations/messages_controller.rb
+++ b/app/controllers/api/v1/accounts/conversations/messages_controller.rb
@@ -13,7 +13,7 @@ def create
 
   def destroy
     ActiveRecord::Base.transaction do
-      message.update!(content: I18n.t('conversations.messages.deleted'), content_attributes: { deleted: true })
+      message.update!(content: I18n.t('conversations.messages.deleted'), content_type: :text, content_attributes: { deleted: true })
       message.attachments.destroy_all
     end
   end
diff --git a/app/controllers/api/v1/accounts/integrations/hooks_controller.rb b/app/controllers/api/v1/accounts/integrations/hooks_controller.rb
index d09ea2f00ef9d..087a9b78d3ea3 100644
--- a/app/controllers/api/v1/accounts/integrations/hooks_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/hooks_controller.rb
@@ -11,7 +11,17 @@ def update
   end
 
   def process_event
-    render json: { message: @hook.process_event(params[:event]) }
+    response = @hook.process_event(params[:event])
+
+    # for cases like an invalid event, or when conversation does not have enough messages
+    # for a label suggestion, the response is nil
+    if response.nil?
+      render json: { message: nil }
+    elsif response[:error]
+      render json: { error: response[:error] }, status: :unprocessable_entity
+    else
+      render json: { message: response[:message] }
+    end
   end
 
   def destroy
diff --git a/app/controllers/api/v1/accounts/upload_controller.rb b/app/controllers/api/v1/accounts/upload_controller.rb
index 4c54938b71e11..6530279da69b9 100644
--- a/app/controllers/api/v1/accounts/upload_controller.rb
+++ b/app/controllers/api/v1/accounts/upload_controller.rb
@@ -1,13 +1,68 @@
 class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
   def create
-    file_blob = ActiveStorage::Blob.create_and_upload!(
-      key: nil,
-      io: params[:attachment].tempfile,
-      filename: params[:attachment].original_filename,
-      content_type: params[:attachment].content_type
+    result = if params[:attachment].present?
+               create_from_file
+             elsif params[:external_url].present?
+               create_from_url
+             else
+               render_error('No file or URL provided', :unprocessable_entity)
+             end
+
+    render_success(result) if result.is_a?(ActiveStorage::Blob)
+  end
+
+  private
+
+  def create_from_file
+    attachment = params[:attachment]
+    create_and_save_blob(attachment.tempfile, attachment.original_filename, attachment.content_type)
+  end
+
+  def create_from_url
+    uri = parse_uri(params[:external_url])
+    return if performed?
+
+    fetch_and_process_file_from_uri(uri)
+  end
+
+  def parse_uri(url)
+    uri = URI.parse(url)
+    validate_uri(uri)
+    uri
+  rescue URI::InvalidURIError, SocketError
+    render_error('Invalid URL provided', :unprocessable_entity)
+    nil
+  end
+
+  def validate_uri(uri)
+    raise URI::InvalidURIError unless uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
+  end
+
+  def fetch_and_process_file_from_uri(uri)
+    uri.open do |file|
+      create_and_save_blob(file, File.basename(uri.path), file.content_type)
+    end
+  rescue OpenURI::HTTPError => e
+    render_error("Failed to fetch file from URL: #{e.message}", :unprocessable_entity)
+  rescue SocketError
+    render_error('Invalid URL provided', :unprocessable_entity)
+  rescue StandardError
+    render_error('An unexpected error occurred', :internal_server_error)
+  end
+
+  def create_and_save_blob(io, filename, content_type)
+    ActiveStorage::Blob.create_and_upload!(
+      io: io,
+      filename: filename,
+      content_type: content_type
     )
-    file_blob.save!
+  end
 
+  def render_success(file_blob)
     render json: { file_url: url_for(file_blob), blob_key: file_blob.key, blob_id: file_blob.id }
   end
+
+  def render_error(message, status)
+    render json: { error: message }, status: status
+  end
 end
diff --git a/app/controllers/api/v1/widget/conversations_controller.rb b/app/controllers/api/v1/widget/conversations_controller.rb
index 7e6d84bd250d9..fe5facc1a8078 100644
--- a/app/controllers/api/v1/widget/conversations_controller.rb
+++ b/app/controllers/api/v1/widget/conversations_controller.rb
@@ -11,6 +11,8 @@ def create
       process_update_contact
       @conversation = create_conversation
       conversation.messages.create!(message_params)
+      # TODO: Temporary fix for message type cast issue, since message_type is returning as string instead of integer
+      conversation.reload
     end
   end
 
diff --git a/app/controllers/api/v2/accounts/reports_controller.rb b/app/controllers/api/v2/accounts/reports_controller.rb
index ed5be55181a7a..af3655e59a8b1 100644
--- a/app/controllers/api/v2/accounts/reports_controller.rb
+++ b/app/controllers/api/v2/accounts/reports_controller.rb
@@ -66,7 +66,9 @@ def generate_csv(filename, template)
   end
 
   def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
+    return if Current.account_user.administrator?
+
+    raise Pundit::NotAuthorizedError
   end
 
   def common_params
@@ -135,3 +137,5 @@ def conversation_metrics
     V2::ReportBuilder.new(Current.account, conversation_params).conversation_metrics
   end
 end
+
+Api::V2::Accounts::ReportsController.prepend_mod_with('Api::V2::Accounts::ReportsController')
diff --git a/app/controllers/public/api/v1/portals/articles_controller.rb b/app/controllers/public/api/v1/portals/articles_controller.rb
index 46ecf19a7f931..2807ae41a81b2 100644
--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/app/controllers/public/api/v1/portals/articles_controller.rb
@@ -6,7 +6,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   layout 'portal'
 
   def index
-    @articles = @portal.articles
+    @articles = @portal.articles.published
     search_articles
     order_by_sort_param
     @articles.page(list_params[:page]) if list_params[:page].present?
diff --git a/app/javascript/dashboard/api/customRole.js b/app/javascript/dashboard/api/customRole.js
new file mode 100644
index 0000000000000..5074657d52061
--- /dev/null
+++ b/app/javascript/dashboard/api/customRole.js
@@ -0,0 +1,9 @@
+import ApiClient from './ApiClient';
+
+class CustomRole extends ApiClient {
+  constructor() {
+    super('custom_roles', { accountScoped: true });
+  }
+}
+
+export default new CustomRole();
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index fa95c5024f71a..5d3886a851899 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -4,6 +4,7 @@ import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAlert } from 'dashboard/composables';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useFilter } from 'shared/composables/useFilter';
 import VirtualList from 'vue-virtual-scroll-list';
 
 import ChatListHeader from './ChatListHeader.vue';
@@ -16,7 +17,6 @@ import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
-import filterMixin from 'shared/mixins/filterMixin';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
@@ -27,6 +27,11 @@ import {
 } from '../store/modules/conversations/helpers/actionHelpers';
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
 import IntersectionObserver from './IntersectionObserver.vue';
+import {
+  getUserPermissions,
+  filterItemsByPermission,
+} from 'dashboard/helper/permissionsHelper.js';
+import { ASSIGNEE_TYPE_TAB_PERMISSIONS } from 'dashboard/constants/permissions.js';
 
 export default {
   components: {
@@ -41,7 +46,6 @@ export default {
     IntersectionObserver,
     VirtualList,
   },
-  mixins: [filterMixin],
   provide() {
     return {
       // Actions to be performed on virtual list item and context menu.
@@ -91,6 +95,15 @@ export default {
 
     const conversationListRef = ref(null);
 
+    const {
+      setFilterAttributes,
+      initializeStatusAndAssigneeFilterToModal,
+      initializeInboxTeamAndLabelFilterToModal,
+    } = useFilter({
+      filteri18nKey: 'FILTER',
+      attributeModel: 'conversation_attribute',
+    });
+
     const getKeyboardListenerParams = () => {
       const allConversations = conversationListRef.value.querySelectorAll(
         'div.conversations-list div.conversation'
@@ -109,43 +122,52 @@ export default {
         lastConversationIndex,
       };
     };
-    const handlePreviousConversation = () => {
-      const { allConversations, activeConversationIndex } =
-        getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[0].click();
-      }
-      if (activeConversationIndex >= 1) {
-        allConversations[activeConversationIndex - 1].click();
-      }
-    };
-    const handleNextConversation = () => {
+    const handleConversationNavigation = direction => {
       const {
         allConversations,
         activeConversationIndex,
         lastConversationIndex,
       } = getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[lastConversationIndex].click();
-      } else if (activeConversationIndex < lastConversationIndex) {
-        allConversations[activeConversationIndex + 1].click();
+
+      // Determine the new index based on the direction
+      const newIndex =
+        direction === 'previous'
+          ? activeConversationIndex - 1
+          : activeConversationIndex + 1;
+
+      // Check if the new index is within the valid range
+      if (
+        allConversations.length > 0 &&
+        newIndex >= 0 &&
+        newIndex <= lastConversationIndex
+      ) {
+        // Click the conversation at the new index
+        allConversations[newIndex].click();
+      } else if (allConversations.length > 0) {
+        // If the new index is out of range, click the first or last conversation based on the direction
+        const fallbackIndex =
+          direction === 'previous' ? 0 : lastConversationIndex;
+        allConversations[fallbackIndex].click();
       }
     };
     const keyboardEvents = {
       'Alt+KeyJ': {
-        action: () => handlePreviousConversation(),
+        action: () => handleConversationNavigation('previous'),
         allowOnFocusedInput: true,
       },
       'Alt+KeyK': {
-        action: () => handleNextConversation(),
+        action: () => handleConversationNavigation('next'),
         allowOnFocusedInput: true,
       },
     };
-    useKeyboardEvents(keyboardEvents, conversationListRef);
+    useKeyboardEvents(keyboardEvents);
 
     return {
       uiSettings,
       conversationListRef,
+      setFilterAttributes,
+      initializeStatusAndAssigneeFilterToModal,
+      initializeInboxTeamAndLabelFilterToModal,
     };
   },
   data() {
@@ -187,6 +209,7 @@ export default {
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
+      currentAccountId: 'getCurrentAccountId',
       chatLists: 'getAllConversations',
       mineChatsList: 'getMineChats',
       allChatList: 'getAllStatusChats',
@@ -226,20 +249,19 @@ export default {
         name,
       };
     },
+    userPermissions() {
+      return getUserPermissions(this.currentUser, this.currentAccountId);
+    },
     assigneeTabItems() {
-      const ASSIGNEE_TYPE_TAB_KEYS = {
-        me: 'mineCount',
-        unassigned: 'unAssignedCount',
-        all: 'allCount',
-      };
-      return Object.keys(ASSIGNEE_TYPE_TAB_KEYS).map(key => {
-        const count = this.conversationStats[ASSIGNEE_TYPE_TAB_KEYS[key]] || 0;
-        return {
-          key,
-          name: this.$t(`CHAT_LIST.ASSIGNEE_TYPE_TABS.${key}`),
-          count,
-        };
-      });
+      return filterItemsByPermission(
+        ASSIGNEE_TYPE_TAB_PERMISSIONS,
+        this.userPermissions,
+        item => item.permissions
+      ).map(({ key, count: countKey }) => ({
+        key,
+        name: this.$t(`CHAT_LIST.ASSIGNEE_TYPE_TABS.${key}`),
+        count: this.conversationStats[countKey] || 0,
+      }));
     },
     showAssigneeInConversationCard() {
       return (
@@ -860,6 +882,25 @@ export default {
     onContextMenuToggle(state) {
       this.isContextMenuOpen = state;
     },
+    initializeExistingFilterToModal() {
+      const statusFilter = this.initializeStatusAndAssigneeFilterToModal(
+        this.activeStatus,
+        this.currentUserDetails,
+        this.activeAssigneeTab
+      );
+      if (statusFilter) {
+        this.appliedFilter.push(statusFilter);
+      }
+
+      const otherFilters = this.initializeInboxTeamAndLabelFilterToModal(
+        this.conversationInbox,
+        this.inbox,
+        this.teamId,
+        this.activeTeam,
+        this.label
+      );
+      this.appliedFilter.push(...otherFilters);
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index 4bf97320bf6fc..ee00c182d4e08 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -331,10 +331,12 @@ export default {
 ::v-deep {
   .selector-wrap {
     @apply m-0 top-1;
+
     .selector-name {
       @apply ml-0;
     }
   }
+
   .name {
     @apply ml-0;
   }
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 7c4c4daaa2343..0ff3638742f72 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -13,13 +13,12 @@ import wootConstants from 'dashboard/constants/globals';
 import {
   CMD_REOPEN_CONVERSATION,
   CMD_RESOLVE_CONVERSATION,
-} from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+} from 'dashboard/helper/commandbar/events';
 
 const store = useStore();
 const getters = useStoreGetters();
 const { t } = useI18n();
 
-const resolveActionsRef = ref(null);
 const arrowDownButtonRef = ref(null);
 const isLoading = ref(false);
 
@@ -131,17 +130,14 @@ const keyboardEvents = {
   },
 };
 
-useKeyboardEvents(keyboardEvents, resolveActionsRef);
+useKeyboardEvents(keyboardEvents);
 
 useEmitter(CMD_REOPEN_CONVERSATION, onCmdOpenConversation);
 useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 </script>
 
 <template>
-  <div
-    ref="resolveActionsRef"
-    class="relative flex items-center justify-end resolve-actions"
-  >
+  <div class="relative flex items-center justify-end resolve-actions">
     <div class="button-group">
       <woot-button
         v-if="isOpen"
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 1e1dfac25375e..6b13da7adace0 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -1,5 +1,4 @@
 <script>
-import { ref } from 'vue';
 import { mapGetters } from 'vuex';
 import { getSidebarItems } from './config/default-sidebar';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
@@ -8,7 +7,10 @@ import { useRoute, useRouter } from 'dashboard/composables/route';
 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
 import { routesWithPermissions } from '../../routes';
-import { hasPermissions } from '../../helper/permissionsHelper';
+import {
+  getUserPermissions,
+  hasPermissions,
+} from '../../helper/permissionsHelper';
 
 export default {
   components: {
@@ -26,7 +28,6 @@ export default {
     },
   },
   setup(props, { emit }) {
-    const sidebarRef = ref(null);
     const route = useRoute();
     const router = useRouter();
 
@@ -64,11 +65,10 @@ export default {
         action: () => navigateToRoute('agent_list'),
       },
     };
-    useKeyboardEvents(keyboardEvents, sidebarRef);
+    useKeyboardEvents(keyboardEvents);
 
     return {
       toggleKeyShortcutModal,
-      sidebarRef,
     };
   },
   data() {
@@ -113,7 +113,10 @@ export default {
       return getSidebarItems(this.accountId);
     },
     primaryMenuItems() {
-      const userPermissions = this.currentUser.permissions;
+      const userPermissions = getUserPermissions(
+        this.currentUser,
+        this.accountId
+      );
       const menuItems = this.sideMenuConfig.primaryMenu;
       return menuItems.filter(menuItem => {
         const isAvailableForTheUser = hasPermissions(
@@ -195,7 +198,7 @@ export default {
 </script>
 
 <template>
-  <aside ref="sidebarRef" class="flex h-full">
+  <aside class="flex h-full">
     <PrimarySidebar
       :logo-source="globalConfig.logoThumbnail"
       :installation-name="globalConfig.installationName"
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
index e30c3bcb11337..a5b6f9020da0f 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
@@ -39,6 +39,7 @@ const settings = accountId => ({
     'settings_teams_list',
     'settings_teams_new',
     'sla_list',
+    'custom_roles_list',
   ],
   menuItems: [
     {
@@ -178,6 +179,18 @@ const settings = accountId => ({
       isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
     },
+    {
+      icon: 'scan-person',
+      label: 'CUSTOM_ROLES',
+      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
+      toState: frontendURL(`accounts/${accountId}/settings/custom-roles/list`),
+      toStateName: 'custom_roles_list',
+      isEnterpriseOnly: true,
+      beta: true,
+    },
     {
       icon: 'document-list-clock',
       label: 'SLA',
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
index 73f727a0e9161..91e419726a844 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -52,9 +52,13 @@ export default {
                 {{ account.name }}
               </div>
               <div
-                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
+                class="text-xs font-medium lowercase text-slate-500 dark:text-slate-500 hover:underline-offset-4"
               >
-                {{ account.role }}
+                {{
+                  account.custom_role_id
+                    ? account.custom_role.name
+                    : account.role
+                }}
               </div>
             </label>
           </span>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 6de03af531b92..0f12b48c3b07d 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -4,7 +4,10 @@ import SecondaryNavItem from './SecondaryNavItem.vue';
 import AccountContext from './AccountContext.vue';
 import { mapGetters } from 'vuex';
 import { FEATURE_FLAGS } from '../../../featureFlags';
-import { hasPermissions } from '../../../helper/permissionsHelper';
+import {
+  getUserPermissions,
+  hasPermissions,
+} from '../../../helper/permissionsHelper';
 import { routesWithPermissions } from '../../../routes';
 
 export default {
@@ -59,7 +62,10 @@ export default {
     accessibleMenuItems() {
       const menuItemsFilteredByPermissions = this.menuConfig.menuItems.filter(
         menuItem => {
-          const { permissions: userPermissions = [] } = this.currentUser;
+          const userPermissions = getUserPermissions(
+            this.currentUser,
+            this.accountId
+          );
           return hasPermissions(
             routesWithPermissions[menuItem.toStateName],
             userPermissions
diff --git a/app/javascript/dashboard/components/policy.vue b/app/javascript/dashboard/components/policy.vue
index f888de5a29425..e9ad2de1f0d44 100644
--- a/app/javascript/dashboard/components/policy.vue
+++ b/app/javascript/dashboard/components/policy.vue
@@ -1,7 +1,11 @@
 <script setup>
 import { useStoreGetters } from 'dashboard/composables/store';
 import { computed } from 'vue';
-import { hasPermissions } from '../helper/permissionsHelper';
+import {
+  getUserPermissions,
+  hasPermissions,
+} from '../helper/permissionsHelper';
+
 const props = defineProps({
   permissions: {
     type: Array,
@@ -10,12 +14,17 @@ const props = defineProps({
 });
 
 const getters = useStoreGetters();
-const user = getters.getCurrentUser.value;
-const hasPermission = computed(() =>
-  hasPermissions(props.permissions, user.permissions)
-);
+const user = computed(() => getters.getCurrentUser.value);
+const accountId = computed(() => getters.getCurrentAccountId.value);
+const userPermissions = computed(() => {
+  return getUserPermissions(user.value, accountId.value);
+});
+const hasPermission = computed(() => {
+  return hasPermissions(props.permissions, userPermissions.value);
+});
 </script>
 
+<!-- eslint-disable vue/no-root-v-if -->
 <template>
   <div v-if="hasPermission">
     <slot />
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
index 6ec852b58de86..96fe2830ab104 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -4,10 +4,10 @@ import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useAI } from 'dashboard/composables/useAI';
 import AICTAModal from './AICTAModal.vue';
 import AIAssistanceModal from './AIAssistanceModal.vue';
-import aiMixin from 'dashboard/mixins/aiMixin';
-import { CMD_AI_ASSIST } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';
 
 export default {
@@ -16,17 +16,17 @@ export default {
     AICTAModal,
     AIAssistanceCTAButton,
   },
-  mixins: [aiMixin],
   setup(props, { emit }) {
     const { uiSettings, updateUISettings } = useUISettings();
 
+    const { isAIIntegrationEnabled, draftMessage, recordAnalytics } = useAI();
+
     const { isAdmin } = useAdmin();
 
-    const aiAssistanceButtonRef = ref(null);
     const initialMessage = ref('');
 
-    const initializeMessage = draftMessage => {
-      initialMessage.value = draftMessage;
+    const initializeMessage = draftMsg => {
+      initialMessage.value = draftMsg;
     };
     const keyboardEvents = {
       '$mod+KeyZ': {
@@ -39,15 +39,17 @@ export default {
         allowOnFocusedInput: true,
       },
     };
-    useKeyboardEvents(keyboardEvents, aiAssistanceButtonRef);
+    useKeyboardEvents(keyboardEvents);
 
     return {
       uiSettings,
       updateUISettings,
       isAdmin,
-      aiAssistanceButtonRef,
       initialMessage,
       initializeMessage,
+      recordAnalytics,
+      isAIIntegrationEnabled,
+      draftMessage,
     };
   },
   data: () => ({
@@ -118,7 +120,7 @@ export default {
 </script>
 
 <template>
-  <div ref="aiAssistanceButtonRef">
+  <div>
     <div v-if="isAIIntegrationEnabled" class="relative">
       <AIAssistanceCTAButton
         v-if="shouldShowAIAssistCTAButton"
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
index 5435407f0018d..8f3100d80e3cf 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
@@ -1,20 +1,23 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import { useAI } from 'dashboard/composables/useAI';
 import AILoader from './AILoader.vue';
-import aiMixin from 'dashboard/mixins/aiMixin';
 
 export default {
   components: {
     AILoader,
   },
-  mixins: [aiMixin, messageFormatterMixin],
   props: {
     aiOption: {
       type: String,
       required: true,
     },
   },
-
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    const { draftMessage, processEvent, recordAnalytics } = useAI();
+    return { draftMessage, processEvent, recordAnalytics, formatMessage };
+  },
   data() {
     return {
       generatedContent: '',
diff --git a/app/javascript/dashboard/components/widgets/AICTAModal.vue b/app/javascript/dashboard/components/widgets/AICTAModal.vue
index b68da39d8dd2a..aa119b10daa5e 100644
--- a/app/javascript/dashboard/components/widgets/AICTAModal.vue
+++ b/app/javascript/dashboard/components/widgets/AICTAModal.vue
@@ -3,16 +3,16 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import aiMixin from 'dashboard/mixins/aiMixin';
+import { useAI } from 'dashboard/composables/useAI';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
 export default {
-  mixins: [aiMixin],
   setup() {
     const { updateUISettings } = useUISettings();
+    const { recordAnalytics } = useAI();
     const v$ = useVuelidate();
 
-    return { updateUISettings, v$ };
+    return { updateUISettings, v$, recordAnalytics };
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index afcf1e83964c1..a76941233bd2d 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import wootConstants from 'dashboard/constants/globals';
 
@@ -16,15 +16,16 @@ const props = defineProps({
 
 const emit = defineEmits(['chatTabChange']);
 
-const chatTypeTabsRef = ref(null);
-
 const activeTabIndex = computed(() => {
   return props.items.findIndex(item => item.key === props.activeTab);
 });
 
 const onTabChange = selectedTabIndex => {
-  if (props.items[selectedTabIndex].key !== props.activeTab) {
-    emit('chatTabChange', props.items[selectedTabIndex].key);
+  if (selectedTabIndex >= 0 && selectedTabIndex < props.items.length) {
+    const selectedItem = props.items[selectedTabIndex];
+    if (selectedItem.key !== props.activeTab) {
+      emit('chatTabChange', selectedItem.key);
+    }
   }
 };
 
@@ -34,29 +35,29 @@ const keyboardEvents = {
       if (props.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
         onTabChange(0);
       } else {
-        onTabChange(activeTabIndex.value + 1);
+        const nextIndex = (activeTabIndex.value + 1) % props.items.length;
+        onTabChange(nextIndex);
       }
     },
   },
 };
-useKeyboardEvents(keyboardEvents, chatTypeTabsRef);
+
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div ref="chatTypeTabsRef">
-    <woot-tabs
-      :index="activeTabIndex"
-      class="tab--chat-type py-0 px-4 w-full"
-      @change="onTabChange"
-    >
-      <woot-tabs-item
-        v-for="item in items"
-        :key="item.key"
-        :name="item.name"
-        :count="item.count"
-      />
-    </woot-tabs>
-  </div>
+  <woot-tabs
+    :index="activeTabIndex"
+    class="w-full px-4 py-0 tab--chat-type"
+    @change="onTabChange"
+  >
+    <woot-tabs-item
+      v-for="item in items"
+      :key="item.key"
+      :name="item.name"
+      :count="item.count"
+    />
+  </woot-tabs>
 </template>
 
 <style scoped lang="scss">
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
index 032401561b478..8f28575b1560d 100644
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -18,8 +18,6 @@ const props = defineProps({
 
 const emit = defineEmits(['add', 'remove']);
 
-const labelSelectorWrapRef = ref(null);
-
 const { isAdmin } = useAdmin();
 
 const showSearchDropdownLabel = ref(false);
@@ -57,15 +55,11 @@ const keyboardEvents = {
   },
 };
 
-useKeyboardEvents(keyboardEvents, labelSelectorWrapRef);
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div
-    ref="labelSelectorWrapRef"
-    v-on-clickaway="closeDropdownLabel"
-    class="relative leading-6"
-  >
+  <div v-on-clickaway="closeDropdownLabel" class="relative leading-6">
     <AddLabel @add="toggleLabels" />
     <woot-label
       v-for="label in savedLabels"
diff --git a/app/javascript/dashboard/components/widgets/ShowMore.vue b/app/javascript/dashboard/components/widgets/ShowMore.vue
index c17c32e2a9bd6..37e2f9a68804a 100644
--- a/app/javascript/dashboard/components/widgets/ShowMore.vue
+++ b/app/javascript/dashboard/components/widgets/ShowMore.vue
@@ -1,38 +1,34 @@
-<script>
-export default {
-  props: {
-    text: {
-      type: String,
-      default: '',
-    },
-    limit: {
-      type: Number,
-      default: 120,
-    },
-  },
-  data() {
-    return {
-      showMore: false,
-    };
-  },
-  computed: {
-    textToBeDisplayed() {
-      if (this.showMore || this.text.length <= this.limit) {
-        return this.text;
-      }
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
 
-      return this.text.slice(0, this.limit) + '...';
-    },
-    buttonLabel() {
-      const i18nKey = !this.showMore ? 'SHOW_MORE' : 'SHOW_LESS';
-      return this.$t(`COMPONENTS.SHOW_MORE_BLOCK.${i18nKey}`);
-    },
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
   },
-  methods: {
-    toggleShowMore() {
-      this.showMore = !this.showMore;
-    },
+  limit: {
+    type: Number,
+    default: 120,
   },
+});
+const { t } = useI18n();
+const showMore = ref(false);
+
+const textToBeDisplayed = computed(() => {
+  if (showMore.value || props.text.length <= props.limit) {
+    return props.text;
+  }
+
+  return props.text.slice(0, props.limit) + '...';
+});
+const buttonLabel = computed(() => {
+  const i18nKey = !showMore.value ? 'SHOW_MORE' : 'SHOW_LESS';
+  return t(`COMPONENTS.SHOW_MORE_BLOCK.${i18nKey}`);
+});
+
+const toggleShowMore = () => {
+  showMore.value = !showMore.value;
 };
 </script>
 
@@ -41,16 +37,10 @@ export default {
     {{ textToBeDisplayed }}
     <button
       v-if="text.length > limit"
-      class="show-more--button"
+      class="text-woot-500 !p-0 !border-0 align-top"
       @click="toggleShowMore"
     >
       {{ buttonLabel }}
     </button>
   </span>
 </template>
-
-<style scoped>
-.show-more--button {
-  color: var(--w-500);
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 8fe929354fb48..e23096927181d 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -17,6 +17,8 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import TagAgents from '../conversation/TagAgents.vue';
 import CannedResponse from '../conversation/CannedResponse.vue';
 import VariableList from '../conversation/VariableList.vue';
+import KeyboardEmojiSelector from './keyboardEmojiSelector.vue';
+
 import {
   appendSignature,
   removeSignature,
@@ -24,6 +26,7 @@ import {
   scrollCursorIntoView,
   findNodeToInsertImage,
   setURLWithQueryAndSize,
+  getContentNode,
 } from 'dashboard/helper/editorHelper';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
@@ -35,10 +38,8 @@ import {
 } from 'shared/helpers/KeyboardHelpers';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import {
-  replaceVariablesInMessage,
-  createTypingIndicator,
-} from '@chatwoot/utils';
+
+import { createTypingIndicator } from '@chatwoot/utils';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
@@ -71,7 +72,12 @@ const createState = (
 
 export default {
   name: 'WootMessageEditor',
-  components: { TagAgents, CannedResponse, VariableList },
+  components: {
+    TagAgents,
+    CannedResponse,
+    VariableList,
+    KeyboardEmojiSelector,
+  },
   mixins: [keyboardEventListenerMixins],
   props: {
     value: { type: String, default: '' },
@@ -91,6 +97,7 @@ export default {
     allowSignature: { type: Boolean, default: false },
     channelType: { type: String, default: '' },
     showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
+    focusOnMount: { type: Boolean, default: true },
   },
   setup() {
     const {
@@ -119,9 +126,11 @@ export default {
       showUserMentions: false,
       showCannedMenu: false,
       showVariables: false,
+      showEmojiMenu: false,
       mentionSearchKey: '',
       cannedSearchTerm: '',
       variableSearchTerm: '',
+      emojiSearchTerm: '',
       editorView: null,
       range: null,
       state: undefined,
@@ -169,7 +178,7 @@ export default {
             this.editorView = args.view;
             this.range = args.range;
 
-            this.mentionSearchKey = args.text.replace('@', '');
+            this.mentionSearchKey = args.text;
 
             return false;
           },
@@ -198,7 +207,7 @@ export default {
             this.editorView = args.view;
             this.range = args.range;
 
-            this.cannedSearchTerm = args.text.replace('/', '');
+            this.cannedSearchTerm = args.text;
             return false;
           },
           onExit: () => {
@@ -226,7 +235,7 @@ export default {
             this.editorView = args.view;
             this.range = args.range;
 
-            this.variableSearchTerm = args.text.replace('{{', '');
+            this.variableSearchTerm = args.text;
             return false;
           },
           onExit: () => {
@@ -238,6 +247,31 @@ export default {
             return event.keyCode === 13 && this.showVariables;
           },
         }),
+        suggestionsPlugin({
+          matcher: triggerCharacters(':', 2), // Trigger after ':' and at least 2 characters
+          suggestionClass: '',
+          onEnter: args => {
+            this.showEmojiMenu = true;
+            this.emojiSearchTerm = args.text || '';
+            this.range = args.range;
+            this.editorView = args.view;
+            return false;
+          },
+          onChange: args => {
+            this.editorView = args.view;
+            this.range = args.range;
+            this.emojiSearchTerm = args.text;
+            return false;
+          },
+          onExit: () => {
+            this.emojiSearchTerm = '';
+            this.showEmojiMenu = false;
+            return false;
+          },
+          onKeyDown: ({ event }) => {
+            return event.keyCode === 13 && this.showEmojiMenu;
+          },
+        }),
       ];
     },
     sendWithSignature() {
@@ -267,6 +301,8 @@ export default {
     },
     editorId() {
       this.showCannedMenu = false;
+      this.showEmojiMenu = false;
+      this.showVariables = false;
       this.cannedSearchTerm = '';
       this.reloadState(this.value);
     },
@@ -311,7 +347,9 @@ export default {
   mounted() {
     this.createEditorView();
     this.editorView.updateState(this.state);
-    this.focusEditorInputField();
+    if (this.focusOnMount) {
+      this.focusEditorInputField();
+    }
 
     // BUS Event to insert text or markdown into the editor at the
     // current cursor position.
@@ -348,7 +386,7 @@ export default {
         // these drafts can also have a signature, so we need to check if the body is empty
         // and handle things accordingly
         this.handleEmptyBodyWithSignature();
-      } else {
+      } else if (this.focusOnMount) {
         // this is in the else block, handleEmptyBodyWithSignature also has a call to the focus method
         // the position is set to start, because the signature is added at the end of the body
         this.focusEditorInputField('end');
@@ -517,57 +555,36 @@ export default {
       this.editorView.dispatch(tr.setSelection(selection));
       this.editorView.focus();
     },
-    insertMentionNode(mentionItem) {
+    /**
+     * Inserts special content (mention, canned response, variable, emoji) into the editor.
+     * @param {string} type - The type of special content to insert. Possible values: 'mention', 'canned_response', 'variable', 'emoji'.
+     * @param {Object|string} content - The content to insert, depending on the type.
+     */
+    insertSpecialContent(type, content) {
       if (!this.editorView) {
-        return null;
-      }
-      const node = this.editorView.state.schema.nodes.mention.create({
-        userId: mentionItem.id,
-        userFullName: mentionItem.name,
-      });
-
-      this.insertNodeIntoEditor(node, this.range.from, this.range.to);
-      this.$track(CONVERSATION_EVENTS.USED_MENTIONS);
-
-      return false;
-    },
-    insertCannedResponse(cannedItem) {
-      const updatedMessage = replaceVariablesInMessage({
-        message: cannedItem,
-        variables: this.variables,
-      });
-
-      if (!this.editorView) {
-        return null;
+        return;
       }
 
-      let node = new MessageMarkdownTransformer(messageSchema).parse(
-        updatedMessage
+      let { node, from, to } = getContentNode(
+        this.editorView,
+        type,
+        content,
+        this.range,
+        this.variables
       );
 
-      const from =
-        node.textContent === updatedMessage
-          ? this.range.from
-          : this.range.from - 1;
+      if (!node) return;
 
-      this.insertNodeIntoEditor(node, from, this.range.to);
-
-      this.$track(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
-      return false;
-    },
-    insertVariable(variable) {
-      if (!this.editorView) {
-        return null;
-      }
+      this.insertNodeIntoEditor(node, from, to);
 
-      const content = `{{${variable}}}`;
-      let node = this.editorView.state.schema.text(content);
-      const { from, to } = this.range;
+      const event_map = {
+        mention: CONVERSATION_EVENTS.USED_MENTIONS,
+        cannedResponse: CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE,
+        variable: CONVERSATION_EVENTS.INSERTED_A_VARIABLE,
+        emoji: CONVERSATION_EVENTS.INSERTED_AN_EMOJI,
+      };
 
-      this.insertNodeIntoEditor(node, from, to);
-      this.showVariables = false;
-      this.$track(CONVERSATION_EVENTS.INSERTED_A_VARIABLE);
-      return false;
+      this.$track(event_map[type]);
     },
     openFileBrowser() {
       this.$refs.imageUpload.click();
@@ -687,17 +704,22 @@ export default {
     <TagAgents
       v-if="showUserMentions && isPrivate"
       :search-key="mentionSearchKey"
-      @click="insertMentionNode"
+      @click="content => insertSpecialContent('mention', content)"
     />
     <CannedResponse
       v-if="shouldShowCannedResponses"
       :search-key="cannedSearchTerm"
-      @click="insertCannedResponse"
+      @click="content => insertSpecialContent('cannedResponse', content)"
     />
     <VariableList
       v-if="shouldShowVariables"
       :search-key="variableSearchTerm"
-      @click="insertVariable"
+      @click="content => insertSpecialContent('variable', content)"
+    />
+    <KeyboardEmojiSelector
+      v-if="showEmojiMenu"
+      :search-key="emojiSearchTerm"
+      @click="emoji => insertSpecialContent('emoji', emoji)"
     />
     <input
       ref="imageUpload"
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
index ab4be93427f27..634d2a3927e6d 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
@@ -8,6 +8,7 @@ import {
   EditorState,
   Selection,
 } from '@chatwoot/prosemirror-schema';
+import imagePastePlugin from '@chatwoot/prosemirror-schema/src/plugins/image';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -55,7 +56,7 @@ export default {
     return {
       editorView: null,
       state: undefined,
-      plugins: [],
+      plugins: [imagePastePlugin(this.handleImageUpload)],
     };
   },
   computed: {
@@ -76,6 +77,7 @@ export default {
       this.reloadState();
     },
   },
+
   created() {
     this.state = createState(
       this.value,
@@ -95,6 +97,24 @@ export default {
     openFileBrowser() {
       this.$refs.imageUploadInput.click();
     },
+    async handleImageUpload(url) {
+      try {
+        const fileUrl = await this.$store.dispatch(
+          'articles/uploadExternalImage',
+          {
+            portalSlug: this.$route.params.portalSlug,
+            url,
+          }
+        );
+
+        return fileUrl;
+      } catch (error) {
+        useAlert(
+          this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.UN_AUTHORIZED_ERROR')
+        );
+        return '';
+      }
+    },
     onFileChange() {
       const file = this.$refs.imageUploadInput.files[0];
 
@@ -120,7 +140,6 @@ export default {
         if (fileUrl) {
           this.onImageUploadStart(fileUrl);
         }
-        useAlert(this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.SUCCESS'));
       } catch (error) {
         useAlert(this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR'));
       }
@@ -173,6 +192,18 @@ export default {
           blur: () => {
             this.onBlur();
           },
+          paste: (view, event) => {
+            const data = event.clipboardData.files;
+            if (data.length > 0) {
+              data.forEach(file => {
+                // Check if the file is an image
+                if (file.type.includes('image')) {
+                  this.uploadImageToStorage(file);
+                }
+              });
+              event.preventDefault();
+            }
+          },
         },
       });
     },
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index e4ab0b41d0202..49962ece0ca96 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -1,5 +1,4 @@
 <script>
-import { ref, watchEffect, computed } from 'vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
@@ -117,15 +116,13 @@ export default {
     const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
       useUISettings();
 
-    const uploadRef = ref(null);
-    // TODO: This is really hacky, we need to replace the file picker component with
-    // a custom one, where the logic and the component markup is isolated.
-    // Once we have the custom component, we can remove the hacky logic below.
-    const uploadRefElem = computed(() => uploadRef.value?.$el);
-
     const keyboardEvents = {
       'Alt+KeyA': {
         action: () => {
+          // TODO: This is really hacky, we need to replace the file picker component with
+          // a custom one, where the logic and the component markup is isolated.
+          // Once we have the custom component, we can remove the hacky logic below.
+
           const uploadTriggerButton = document.querySelector(
             '#conversationAttachment'
           );
@@ -135,14 +132,11 @@ export default {
       },
     };
 
-    watchEffect(() => {
-      useKeyboardEvents(keyboardEvents, uploadRefElem);
-    });
+    useKeyboardEvents(keyboardEvents);
 
     return {
       setSignatureFlagForInbox,
       fetchSignatureFlagFromUISettings,
-      uploadRef,
     };
   },
   computed: {
@@ -226,11 +220,7 @@ export default {
         : this.$t('CONVERSATION.FOOTER.ENABLE_SIGN_TOOLTIP');
     },
     enableInsertArticleInReply() {
-      const isFeatEnabled = this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.INSERT_ARTICLE_IN_REPLY
-      );
-      return isFeatEnabled && this.portalSlug;
+      return this.portalSlug;
     },
     isFetchingAppIntegrations() {
       return this.uiFlags.isFetching;
@@ -267,7 +257,6 @@ export default {
         @click="toggleEmojiPicker"
       />
       <FileUpload
-        ref="uploadRef"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
         input-id="conversationAttachment"
         :size="4096 * 4096"
@@ -410,6 +399,7 @@ export default {
   label {
     @apply cursor-pointer;
   }
+
   &:hover button {
     @apply dark:bg-slate-800 bg-slate-100;
   }
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 280b3ca422772..65de496c013c6 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -1,5 +1,4 @@
 <script>
-import { ref } from 'vue';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
 export default {
@@ -23,8 +22,6 @@ export default {
     },
   },
   setup(props, { emit }) {
-    const replyTopRef = ref(null);
-
     const setReplyMode = mode => {
       emit('setReplyMode', mode);
     };
@@ -44,12 +41,11 @@ export default {
         allowOnFocusedInput: true,
       },
     };
-    useKeyboardEvents(keyboardEvents, replyTopRef);
+    useKeyboardEvents(keyboardEvents);
 
     return {
       handleReplyClick,
       handleNoteClick,
-      replyTopRef,
     };
   },
   computed: {
@@ -76,10 +72,7 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="replyTopRef"
-    class="flex justify-between bg-black-50 dark:bg-slate-800"
-  >
+  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
     <div class="button-group">
       <woot-button
         variant="clear"
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue b/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue
new file mode 100644
index 0000000000000..f84ab967eeb5d
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue
@@ -0,0 +1,70 @@
+<script setup>
+import { shallowRef, computed, onMounted } from 'vue';
+import emojiGroups from 'shared/components/emoji/emojisGroup.json';
+import MentionBox from '../mentions/MentionBox.vue';
+
+const props = defineProps({
+  searchKey: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const allEmojis = shallowRef([]);
+
+const items = computed(() => {
+  if (!props.searchKey) return [];
+  const searchTerm = props.searchKey.toLowerCase();
+  return allEmojis.value.filter(emoji =>
+    emoji.searchString.includes(searchTerm)
+  );
+});
+
+function loadEmojis() {
+  allEmojis.value = emojiGroups.flatMap(({ emojis }) =>
+    emojis.map(({ name, slug, ...rest }) => ({
+      ...rest,
+      name,
+      slug,
+      searchString: `${name.replace(/\s+/g, '')} ${slug}`.toLowerCase(), // Remove all whitespace and convert to lowercase
+    }))
+  );
+}
+
+function handleMentionClick(item = {}) {
+  emit('click', item.emoji);
+}
+
+onMounted(() => {
+  loadEmojis();
+});
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <MentionBox
+    v-if="items.length"
+    type="emoji"
+    :items="items"
+    @mentionSelect="handleMentionClick"
+  >
+    <template #default="{ item, selected }">
+      <span
+        class="max-w-full inline-flex items-center gap-0.5 min-w-0 mb-0 text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 truncate"
+      >
+        {{ item.emoji }}
+        <p
+          class="relative mb-0 truncate bottom-px"
+          :class="{
+            'text-woot-500 dark:text-woot-500': selected,
+            'font-normal': !selected,
+          }"
+        >
+          :{{ item.name }}
+        </p>
+      </span>
+    </template>
+  </MentionBox>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
index 1600a9cffc7af..1cdc57a0f346c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
@@ -41,14 +41,11 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <MentionBox
     v-if="items.length"
     :items="items"
     @mentionSelect="handleMentionClick"
-  >
-    <template slot-scope="{ item }">
-      <strong>{{ item.label }}</strong> - {{ item.description }}
-    </template>
-  </MentionBox>
+  />
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index b0be891609b26..7de6b1f066f30 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -5,7 +5,7 @@ import languages from './advancedFilterItems/languages';
 import countries from 'shared/constants/countries.js';
 import { mapGetters } from 'vuex';
 import { filterAttributeGroups } from './advancedFilterItems';
-import filterMixin from 'shared/mixins/filterMixin';
+import { useFilter } from 'shared/composables/useFilter';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
@@ -14,7 +14,6 @@ export default {
   components: {
     FilterInputBox,
   },
-  mixins: [filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -37,6 +36,15 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { setFilterAttributes } = useFilter({
+      filteri18nKey: 'FILTER',
+      attributeModel: 'conversation_attribute',
+    });
+    return {
+      setFilterAttributes,
+    };
+  },
   data() {
     return {
       show: true,
@@ -67,7 +75,11 @@ export default {
     },
   },
   mounted() {
-    this.setFilterAttributes();
+    const { filterGroups, filterTypes } = this.setFilterAttributes();
+
+    this.filterTypes = [...this.filterTypes, ...filterTypes];
+    this.filterGroups = filterGroups;
+
     this.$store.dispatch('campaigns/get');
     if (this.getAppliedConversationFilters.length) {
       this.appliedFilters = [];
@@ -326,7 +338,11 @@ export default {
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
           grouped-filters
-          :error-message="validationErrors[`filter_${i}`]"
+          :error-message="
+            validationErrors[`filter_${i}`]
+              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
+              : ''
+          "
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 428e5549f2b91..4e2ddd45250fa 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,8 +1,6 @@
 <script>
-import { ref } from 'vue';
 import { mapGetters } from 'vuex';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import agentMixin from '../../../mixins/agentMixin.js';
 import BackButton from '../BackButton.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
@@ -24,7 +22,7 @@ export default {
     SLACardLabel,
     Linear,
   },
-  mixins: [inboxMixin, agentMixin],
+  mixins: [inboxMixin],
   props: {
     chat: {
       type: Object,
@@ -44,18 +42,12 @@ export default {
     },
   },
   setup(props, { emit }) {
-    const conversationHeaderActionsRef = ref(null);
-
     const keyboardEvents = {
       'Alt+KeyO': {
         action: () => emit('contactPanelToggle'),
       },
     };
-    useKeyboardEvents(keyboardEvents, conversationHeaderActionsRef);
-
-    return {
-      conversationHeaderActionsRef,
-    };
+    useKeyboardEvents(keyboardEvents);
   },
   computed: {
     ...mapGetters({
@@ -183,7 +175,6 @@ export default {
           </div>
 
           <div
-            ref="conversationHeaderActionsRef"
             class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
           >
             <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 7ab868e9396e4..b3a903e4911ca 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import BubbleActions from './bubble/Actions.vue';
 import BubbleContact from './bubble/Contact.vue';
 import BubbleFile from './bubble/File.vue';
@@ -39,7 +39,6 @@ export default {
     InstagramStoryReply,
     Spinner,
   },
-  mixins: [messageFormatterMixin],
   props: {
     data: {
       type: Object,
@@ -74,6 +73,12 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   data() {
     return {
       showContextMenu: false,
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue b/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
index af1c3e06ddd98..4df6e16e17bc2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
@@ -1,11 +1,10 @@
 <script>
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { ATTACHMENT_ICONS } from 'shared/constants/messages';
 
 export default {
   name: 'MessagePreview',
-  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: Object,
@@ -20,6 +19,12 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { getPlainText } = useMessageFormatter();
+    return {
+      getPlainText,
+    };
+  },
   computed: {
     messageByAgent() {
       const { message_type: messageType } = this.message;
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 44c58ac9d8950..c5d1facee7569 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 // composable
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useAI } from 'dashboard/composables/useAI';
 
 // components
 import ReplyBox from './ReplyBox.vue';
@@ -15,7 +16,6 @@ import { mapGetters } from 'vuex';
 
 // mixins
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
-import aiMixin from 'dashboard/mixins/aiMixin';
 
 // utils
 import { getTypingUsersText } from '../../../helper/commons';
@@ -40,7 +40,7 @@ export default {
     Banner,
     ConversationLabelSuggestion,
   },
-  mixins: [inboxMixin, aiMixin],
+  mixins: [inboxMixin],
   props: {
     isContactPanelOpen: {
       type: Boolean,
@@ -52,7 +52,6 @@ export default {
     },
   },
   setup() {
-    const conversationFooterRef = ref(null);
     const isPopOutReplyBox = ref(false);
     const { isEnterprise } = useConfig();
 
@@ -70,14 +69,24 @@ export default {
       },
     };
 
-    useKeyboardEvents(keyboardEvents, conversationFooterRef);
+    useKeyboardEvents(keyboardEvents);
+
+    const {
+      isAIIntegrationEnabled,
+      isLabelSuggestionFeatureEnabled,
+      fetchIntegrationsIfRequired,
+      fetchLabelSuggestions,
+    } = useAI();
 
     return {
       isEnterprise,
-      conversationFooterRef,
       isPopOutReplyBox,
       closePopOutReplyBox,
       showPopOutReplyBox,
+      isAIIntegrationEnabled,
+      isLabelSuggestionFeatureEnabled,
+      fetchIntegrationsIfRequired,
+      fetchLabelSuggestions,
     };
   },
   data() {
@@ -518,7 +527,6 @@ export default {
       />
     </ul>
     <div
-      ref="conversationFooterRef"
       class="conversation-footer"
       :class="{ 'modal-mask': isPopOutReplyBox }"
     >
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index dcfc51b2a57ee..2fc6a07521dc9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -7,7 +7,7 @@ import {
   CMD_MUTE_CONVERSATION,
   CMD_SEND_TRANSCRIPT,
   CMD_UNMUTE_CONVERSATION,
-} from '../../../routes/dashboard/commands/commandBarBusEvents';
+} from 'dashboard/helper/commandbar/events';
 
 export default {
   components: {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 1a901d4493c1c..78ca32771e4b2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -17,7 +17,6 @@ import Banner from 'dashboard/components/ui/Banner.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import WootAudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { AUDIO_FORMATS } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -61,12 +60,7 @@ export default {
     MessageSignatureMissingAlert,
     ArticleSearchPopover,
   },
-  mixins: [
-    inboxMixin,
-    messageFormatterMixin,
-    fileUploadMixin,
-    keyboardEventListenerMixins,
-  ],
+  mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
   props: {
     popoutReplyBox: {
       type: Boolean,
@@ -243,6 +237,9 @@ export default {
       if (this.isASmsInbox) {
         return MESSAGE_MAX_LENGTH.TWILIO_SMS;
       }
+      if (this.isAnEmailChannel) {
+        return MESSAGE_MAX_LENGTH.EMAIL;
+      }
       return MESSAGE_MAX_LENGTH.GENERAL;
     },
     showFileUpload() {
diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
index d4c5a09307d1c..e837fcc9c1d6f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -40,7 +40,6 @@ const onSelect = () => {
 };
 
 useKeyboardNavigableList({
-  elementRef: tagAgentsRef,
   items,
   onSelect,
   adjustScroll,
diff --git a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
index 66ad8965dc948..ab9dc57d82aaf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
@@ -56,20 +56,14 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <MentionBox
     v-if="items.length"
     type="variable"
     :items="items"
     @mentionSelect="handleVariableClick"
-  >
-    <template slot-scope="{ item }">
-      <span class="text-capitalize variable--list-label">
-        {{ item.description }}
-      </span>
-      ({{ item.label }})
-    </template>
-  </MentionBox>
+  />
 </template>
 
 <style scoped>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index f3610e5464d62..8aa2a1aad95e7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -35,7 +35,6 @@ const ALLOWED_FILE_TYPES = {
 const MAX_ZOOM_LEVEL = 2;
 const MIN_ZOOM_LEVEL = 1;
 
-const galleryViewRef = ref(null);
 const zoomScale = ref(1);
 const activeAttachment = ref({});
 const activeFileType = ref('');
@@ -202,7 +201,7 @@ const keyboardEvents = {
     },
   },
 };
-useKeyboardEvents(keyboardEvents, galleryViewRef);
+useKeyboardEvents(keyboardEvents);
 
 onMounted(() => {
   setImageAndVideoSrc(props.attachment);
@@ -218,7 +217,6 @@ onMounted(() => {
     :on-close="onClose"
   >
     <div
-      ref="galleryViewRef"
       v-on-clickaway="onClose"
       class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
       @click="onClose"
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
index fc9ec29fe3054..90c14e4508b7e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -1,9 +1,12 @@
 <script>
+import { mapGetters } from 'vuex';
+import {
+  getSortedAgentsByAvailability,
+  getAgentsByUpdatedPresence,
+} from 'dashboard/helper/agentHelper.js';
 import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
-import agentMixin from 'dashboard/mixins/agentMixin';
-import { mapGetters } from 'vuex';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
 export default {
   components: {
@@ -11,7 +14,6 @@ export default {
     MenuItemWithSubmenu,
     AgentLoadingPlaceholder,
   },
-  mixins: [agentMixin],
   props: {
     chatId: {
       type: Number,
@@ -112,13 +114,19 @@ export default {
       labels: 'labels/getLabels',
       teams: 'teams/getTeams',
       assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
+      currentUser: 'getCurrentUser',
+      currentAccountId: 'getCurrentAccountId',
     }),
     filteredAgentOnAvailability() {
       const agents = this.$store.getters[
         'inboxAssignableAgents/getAssignableAgents'
       ](this.inboxId);
-      const agentsByUpdatedPresence = this.getAgentsByUpdatedPresence(agents);
-      const filteredAgents = this.sortedAgentsByAvailability(
+      const agentsByUpdatedPresence = getAgentsByUpdatedPresence(
+        agents,
+        this.currentUser,
+        this.currentAccountId
+      );
+      const filteredAgents = getSortedAgentsByAvailability(
         agentsByUpdatedPresence
       );
       return filteredAgents;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
index 889051674c184..da8488262b547 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
@@ -2,7 +2,9 @@
 // components
 import WootButton from '../../../ui/WootButton.vue';
 import Avatar from '../../Avatar.vue';
-import aiMixin from 'dashboard/mixins/aiMixin';
+
+// composables
+import { useAI } from 'dashboard/composables/useAI';
 
 // store & api
 import { mapGetters } from 'vuex';
@@ -18,7 +20,6 @@ export default {
     Avatar,
     WootButton,
   },
-  mixins: [aiMixin],
   props: {
     suggestedLabels: {
       type: Array,
@@ -30,6 +31,11 @@ export default {
       default: () => [],
     },
   },
+  setup() {
+    const { isAIIntegrationEnabled } = useAI();
+
+    return { isAIIntegrationEnabled };
+  },
   data() {
     return {
       isDismissed: false,
@@ -41,7 +47,11 @@ export default {
     ...mapGetters({
       allLabels: 'labels/getLabels',
       currentAccountId: 'getCurrentAccountId',
+      currentChat: 'getSelectedChat',
     }),
+    conversationId() {
+      return this.currentChat?.id;
+    },
     labelTooltip() {
       if (this.preparedLabels.length > 1) {
         return this.$t('LABEL_MGMT.SUGGESTIONS.TOOLTIP.MULTIPLE_SUGGESTION');
@@ -162,7 +172,7 @@ export default {
               delay: { show: 600, hide: 0 },
               hideOnClick: true,
             }"
-            class="label-suggestion--option"
+            class="label-suggestion--option !px-0"
             @click="pushOrAddLabel(label.title)"
           >
             <woot-label
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 746b932ca265b..b0fcaeb4bace0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -6,7 +6,7 @@ import {
   CMD_BULK_ACTION_SNOOZE_CONVERSATION,
   CMD_BULK_ACTION_REOPEN_CONVERSATION,
   CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-} from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+} from 'dashboard/helper/commandbar/events';
 
 import AgentSelector from './AgentSelector.vue';
 import UpdateActions from './UpdateActions.vue';
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index 6d2c789c203bf..08f180c9333f4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -48,11 +48,7 @@ const loadLinkedIssue = async () => {
     const issues = response.data;
     linkedIssue.value = issues && issues.length ? issues[0] : null;
   } catch (error) {
-    const errorMessage = parseLinearAPIErrorResponse(
-      error,
-      t('INTEGRATION_SETTINGS.LINEAR.LOADING_ERROR')
-    );
-    useAlert(errorMessage);
+    // We don't want to show an error message here, as it's not critical. When someone clicks on the Linear icon, we can inform them that the integration is disabled.
   }
 };
 
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index 1d1a51ff51da5..aa12fc6ec6967 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -39,7 +39,6 @@ const onSelect = () => {
 };
 
 useKeyboardNavigableList({
-  elementRef: mentionsListContainerRef,
   items: computed(() => props.items),
   onSelect,
   adjustScroll,
@@ -91,22 +90,24 @@ const variableKey = (item = {}) => {
           }"
           @click="onListItemSelection(index)"
         >
-          <p
-            class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
-            :class="{
-              'text-woot-500 dark:text-woot-500': index === selectedIndex,
-            }"
-          >
-            {{ item.description }}
-          </p>
-          <p
-            class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
-            :class="{
-              'text-woot-500 dark:text-woot-500': index === selectedIndex,
-            }"
-          >
-            {{ variableKey(item) }}
-          </p>
+          <slot :item="item" :index="index" :selected="index === selectedIndex">
+            <p
+              class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+              :class="{
+                'text-woot-500 dark:text-woot-500': index === selectedIndex,
+              }"
+            >
+              {{ item.description }}
+            </p>
+            <p
+              class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+              :class="{
+                'text-woot-500 dark:text-woot-500': index === selectedIndex,
+              }"
+            >
+              {{ variableKey(item) }}
+            </p>
+          </slot>
         </button>
       </woot-dropdown-item>
     </ul>
diff --git a/app/javascript/dashboard/composables/commands/spec/fixtures.js b/app/javascript/dashboard/composables/commands/spec/fixtures.js
new file mode 100644
index 0000000000000..d4f011f55a21c
--- /dev/null
+++ b/app/javascript/dashboard/composables/commands/spec/fixtures.js
@@ -0,0 +1,197 @@
+export const mockAssignableAgents = [
+  {
+    id: 1,
+    account_id: 1,
+    availability_status: 'online',
+    auto_offline: true,
+    confirmed: true,
+    email: 'john@doe.com',
+    available_name: 'John Doe',
+    name: 'John Doe',
+    role: 'administrator',
+    thumbnail: '',
+  },
+];
+
+export const mockCurrentChat = {
+  meta: {
+    sender: {
+      additional_attributes: {},
+      availability_status: 'offline',
+      email: null,
+      id: 212,
+      name: 'Chatwoot',
+      phone_number: null,
+      identifier: null,
+      thumbnail: '',
+      custom_attributes: {},
+      last_activity_at: 1723553344,
+      created_at: 1722588710,
+    },
+    channel: 'Channel::WebWidget',
+    assignee: {
+      id: 1,
+      account_id: 1,
+      availability_status: 'online',
+      auto_offline: true,
+      confirmed: true,
+      email: 'john@doe.com',
+      available_name: 'John Doe',
+      name: 'John Doe',
+      role: 'administrator',
+      thumbnail: '',
+    },
+    hmac_verified: false,
+  },
+  id: 138,
+  messages: [
+    {
+      id: 3348,
+      content: 'Hello, how can I assist you today?',
+      account_id: 1,
+      inbox_id: 1,
+      conversation_id: 138,
+      message_type: 1,
+      created_at: 1724398739,
+      updated_at: '2024-08-23T07:38:59.763Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Hello, how can I assist you today?',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1724398739,
+        contact_inbox: {
+          source_id: '5e57317d-053b-4a72-8292-a25b9f29c401',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John Doe',
+        available_name: 'John Doe',
+        avatar_url: '',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: '',
+      },
+    },
+  ],
+  account_id: 1,
+  uuid: '69dd6922-2f0c-4317-8796-bbeb3679cead',
+  additional_attributes: {
+    browser: {
+      device_name: 'Unknown',
+      browser_name: 'Chrome',
+      platform_name: 'macOS',
+      browser_version: '127.0.0.0',
+      platform_version: '10.15.7',
+    },
+    referer: 'http://chatwoot.com/widget_tests?dark_mode=auto',
+    initiated_at: {
+      timestamp: 'Fri Aug 02 2024 15:21:18 GMT+0530 (India Standard Time)',
+    },
+    browser_language: 'en',
+  },
+  agent_last_seen_at: 1724400730,
+  assignee_last_seen_at: 1724400686,
+  can_reply: true,
+  contact_last_seen_at: 1723553351,
+  custom_attributes: {},
+  inbox_id: 1,
+  labels: ['billing'],
+  muted: false,
+  snoozed_until: null,
+  status: 'open',
+  created_at: 1722592278,
+  timestamp: 1724398739,
+  first_reply_created_at: 1722592316,
+  unread_count: 0,
+  last_non_activity_message: {},
+  last_activity_at: 1724398739,
+  priority: null,
+  waiting_since: 0,
+  sla_policy_id: 10,
+  applied_sla: {
+    id: 143,
+    sla_id: 10,
+    sla_status: 'missed',
+    created_at: 1722592279,
+    updated_at: 1722874214,
+    sla_description: '',
+    sla_name: 'Hacker SLA',
+    sla_first_response_time_threshold: 600,
+    sla_next_response_time_threshold: 240,
+    sla_only_during_business_hours: false,
+    sla_resolution_time_threshold: 259200,
+  },
+  sla_events: [
+    {
+      id: 270,
+      event_type: 'nrt',
+      meta: {
+        message_id: 2743,
+      },
+      updated_at: 1722592819,
+      created_at: 1722592819,
+    },
+    {
+      id: 275,
+      event_type: 'rt',
+      meta: {},
+      updated_at: 1722852322,
+      created_at: 1722852322,
+    },
+  ],
+  allMessagesLoaded: false,
+  dataFetched: true,
+};
+
+export const mockTeamsList = [
+  {
+    id: 5,
+    name: 'design',
+    description: 'design team',
+    allow_auto_assign: true,
+    account_id: 1,
+    is_member: false,
+  },
+];
+
+export const mockActiveLabels = [
+  {
+    id: 16,
+    title: 'billing',
+    description: '',
+    color: '#D8EA19',
+    show_on_sidebar: true,
+  },
+];
+
+export const mockInactiveLabels = [
+  {
+    id: 2,
+    title: 'Feature Request',
+    description: '',
+    color: '#D8EA19',
+    show_on_sidebar: true,
+  },
+];
+
+export const MOCK_FEATURE_FLAGS = {
+  CRM: 'crm',
+  AGENT_MANAGEMENT: 'agent_management',
+  TEAM_MANAGEMENT: 'team_management',
+  INBOX_MANAGEMENT: 'inbox_management',
+  REPORTS: 'reports',
+  LABELS: 'labels',
+  CANNED_RESPONSES: 'canned_responses',
+  INTEGRATIONS: 'integrations',
+};
diff --git a/app/javascript/dashboard/composables/commands/spec/useAppearanceHotKeys.spec.js b/app/javascript/dashboard/composables/commands/spec/useAppearanceHotKeys.spec.js
new file mode 100644
index 0000000000000..34057f6e1efaa
--- /dev/null
+++ b/app/javascript/dashboard/composables/commands/spec/useAppearanceHotKeys.spec.js
@@ -0,0 +1,83 @@
+import { useAppearanceHotKeys } from '../useAppearanceHotKeys';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { setColorTheme } from 'dashboard/helper/themeHelper.js';
+
+vi.mock('dashboard/composables/useI18n');
+vi.mock('shared/helpers/localStorage');
+vi.mock('dashboard/helper/themeHelper.js');
+
+describe('useAppearanceHotKeys', () => {
+  beforeEach(() => {
+    useI18n.mockReturnValue({
+      t: vi.fn(key => key),
+    });
+
+    window.matchMedia = vi.fn().mockReturnValue({ matches: false });
+  });
+
+  it('should return goToAppearanceHotKeys computed property', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    expect(goToAppearanceHotKeys.value).toBeDefined();
+  });
+
+  it('should have the correct number of appearance options', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    expect(goToAppearanceHotKeys.value.length).toBe(4); // 1 parent + 3 theme options
+  });
+
+  it('should have the correct parent option', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    const parentOption = goToAppearanceHotKeys.value.find(
+      option => option.id === 'appearance_settings'
+    );
+    expect(parentOption).toBeDefined();
+    expect(parentOption.children.length).toBe(3);
+  });
+
+  it('should have the correct theme options', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    const themeOptions = goToAppearanceHotKeys.value.filter(
+      option => option.parent === 'appearance_settings'
+    );
+    expect(themeOptions.length).toBe(3);
+    expect(themeOptions.map(option => option.id)).toEqual([
+      'light',
+      'dark',
+      'auto',
+    ]);
+  });
+
+  it('should call setAppearance when a theme option is selected', () => {
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    const lightThemeOption = goToAppearanceHotKeys.value.find(
+      option => option.id === 'light'
+    );
+
+    lightThemeOption.handler();
+
+    expect(LocalStorage.set).toHaveBeenCalledWith(
+      LOCAL_STORAGE_KEYS.COLOR_SCHEME,
+      'light'
+    );
+    expect(setColorTheme).toHaveBeenCalledWith(false);
+  });
+
+  it('should handle system dark mode preference', () => {
+    window.matchMedia = vi.fn().mockReturnValue({ matches: true });
+
+    const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+    const autoThemeOption = goToAppearanceHotKeys.value.find(
+      option => option.id === 'auto'
+    );
+
+    autoThemeOption.handler();
+
+    expect(LocalStorage.set).toHaveBeenCalledWith(
+      LOCAL_STORAGE_KEYS.COLOR_SCHEME,
+      'auto'
+    );
+    expect(setColorTheme).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/app/javascript/dashboard/composables/commands/spec/useBulkActionsHotKeys.spec.js b/app/javascript/dashboard/composables/commands/spec/useBulkActionsHotKeys.spec.js
new file mode 100644
index 0000000000000..0a755457b1266
--- /dev/null
+++ b/app/javascript/dashboard/composables/commands/spec/useBulkActionsHotKeys.spec.js
@@ -0,0 +1,102 @@
+import { useBulkActionsHotKeys } from '../useBulkActionsHotKeys';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import wootConstants from 'dashboard/constants/globals';
+import { emitter } from 'shared/helpers/mitt';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables/useI18n');
+vi.mock('shared/helpers/mitt');
+
+describe('useBulkActionsHotKeys', () => {
+  let store;
+
+  beforeEach(() => {
+    store = {
+      getters: {
+        'bulkActions/getSelectedConversationIds': [],
+      },
+    };
+
+    useStore.mockReturnValue(store);
+    useMapGetter.mockImplementation(key => ({
+      value: store.getters[key],
+    }));
+
+    useI18n.mockReturnValue({ t: vi.fn(key => key) });
+    emitter.emit = vi.fn();
+  });
+
+  it('should return bulk actions when conversations are selected', () => {
+    store.getters['bulkActions/getSelectedConversationIds'] = [1, 2, 3];
+    const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+
+    expect(bulkActionsHotKeys.value.length).toBeGreaterThan(0);
+    expect(bulkActionsHotKeys.value).toContainEqual(
+      expect.objectContaining({
+        id: 'bulk_action_snooze_conversation',
+        title: 'COMMAND_BAR.COMMANDS.SNOOZE_CONVERSATION',
+        section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+      })
+    );
+    expect(bulkActionsHotKeys.value).toContainEqual(
+      expect.objectContaining({
+        id: 'bulk_action_reopen_conversation',
+        title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
+        section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+      })
+    );
+    expect(bulkActionsHotKeys.value).toContainEqual(
+      expect.objectContaining({
+        id: 'bulk_action_resolve_conversation',
+        title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
+        section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+      })
+    );
+  });
+
+  it('should include snooze options in bulk actions', () => {
+    store.getters['bulkActions/getSelectedConversationIds'] = [1, 2, 3];
+    const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+
+    const snoozeAction = bulkActionsHotKeys.value.find(
+      action => action.id === 'bulk_action_snooze_conversation'
+    );
+    expect(snoozeAction).toBeDefined();
+    expect(snoozeAction.children).toEqual(
+      Object.values(wootConstants.SNOOZE_OPTIONS)
+    );
+  });
+
+  it('should create handlers for reopen and resolve actions', () => {
+    store.getters['bulkActions/getSelectedConversationIds'] = [1, 2, 3];
+    const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+
+    const reopenAction = bulkActionsHotKeys.value.find(
+      action => action.id === 'bulk_action_reopen_conversation'
+    );
+    const resolveAction = bulkActionsHotKeys.value.find(
+      action => action.id === 'bulk_action_resolve_conversation'
+    );
+
+    expect(reopenAction.handler).toBeDefined();
+    expect(resolveAction.handler).toBeDefined();
+
+    reopenAction.handler();
+    expect(emitter.emit).toHaveBeenCalledWith(
+      'CMD_BULK_ACTION_REOPEN_CONVERSATION'
+    );
+
+    resolveAction.handler();
+    expect(emitter.emit).toHaveBeenCalledWith(
+      'CMD_BULK_ACTION_RESOLVE_CONVERSATION'
+    );
+  });
+
+  it('should return an empty array when no conversations are selected', () => {
+    store.getters['bulkActions/getSelectedConversationIds'] = [];
+    const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+
+    expect(bulkActionsHotKeys.value).toEqual([]);
+  });
+});
diff --git a/app/javascript/dashboard/composables/commands/spec/useConversationHotKeys.spec.js b/app/javascript/dashboard/composables/commands/spec/useConversationHotKeys.spec.js
new file mode 100644
index 0000000000000..f0b858abf7d8f
--- /dev/null
+++ b/app/javascript/dashboard/composables/commands/spec/useConversationHotKeys.spec.js
@@ -0,0 +1,204 @@
+import { useConversationHotKeys } from '../useConversationHotKeys';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute } from 'dashboard/composables/route';
+import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
+import { useAI } from 'dashboard/composables/useAI';
+import { useAgentsList } from 'dashboard/composables/useAgentsList';
+import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
+import {
+  mockAssignableAgents,
+  mockCurrentChat,
+  mockTeamsList,
+  mockActiveLabels,
+  mockInactiveLabels,
+} from './fixtures';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables/useI18n');
+vi.mock('dashboard/composables/route');
+vi.mock('dashboard/composables/useConversationLabels');
+vi.mock('dashboard/composables/useAI');
+vi.mock('dashboard/composables/useAgentsList');
+
+describe('useConversationHotKeys', () => {
+  let store;
+
+  beforeEach(() => {
+    store = {
+      dispatch: vi.fn(),
+      getters: {
+        getSelectedChat: mockCurrentChat,
+        'draftMessages/getReplyEditorMode': REPLY_EDITOR_MODES.REPLY,
+        getContextMenuChatId: null,
+        'teams/getTeams': mockTeamsList,
+        'draftMessages/get': vi.fn(),
+      },
+    };
+
+    useStore.mockReturnValue(store);
+    useMapGetter.mockImplementation(key => ({
+      value: store.getters[key],
+    }));
+
+    useI18n.mockReturnValue({ t: vi.fn(key => key) });
+    useRoute.mockReturnValue({ name: 'inbox_conversation' });
+    useConversationLabels.mockReturnValue({
+      activeLabels: { value: mockActiveLabels },
+      inactiveLabels: { value: mockInactiveLabels },
+      addLabelToConversation: vi.fn(),
+      removeLabelFromConversation: vi.fn(),
+    });
+    useAI.mockReturnValue({ isAIIntegrationEnabled: { value: true } });
+    useAgentsList.mockReturnValue({
+      agentsList: { value: [] },
+      assignableAgents: { value: mockAssignableAgents },
+    });
+  });
+
+  it('should return the correct computed properties', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+
+    expect(conversationHotKeys.value).toBeDefined();
+  });
+
+  it('should generate conversation hot keys', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    expect(conversationHotKeys.value.length).toBeGreaterThan(0);
+  });
+
+  it('should include AI assist actions when AI integration is enabled', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const aiAssistAction = conversationHotKeys.value.find(
+      action => action.id === 'ai_assist'
+    );
+    expect(aiAssistAction).toBeDefined();
+  });
+
+  it('should not include AI assist actions when AI integration is disabled', () => {
+    useAI.mockReturnValue({ isAIIntegrationEnabled: { value: false } });
+    const { conversationHotKeys } = useConversationHotKeys();
+    const aiAssistAction = conversationHotKeys.value.find(
+      action => action.id === 'ai_assist'
+    );
+    expect(aiAssistAction).toBeUndefined();
+  });
+
+  it('should dispatch actions when handlers are called', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const assignAgentAction = conversationHotKeys.value.find(
+      action => action.id === 'assign_an_agent'
+    );
+    expect(assignAgentAction).toBeDefined();
+
+    if (assignAgentAction && assignAgentAction.children) {
+      const childAction = conversationHotKeys.value.find(
+        action => action.id === assignAgentAction.children[0]
+      );
+      if (childAction && childAction.handler) {
+        childAction.handler({ agentInfo: { id: 2 } });
+        expect(store.dispatch).toHaveBeenCalledWith('assignAgent', {
+          conversationId: 1,
+          agentId: 2,
+        });
+      }
+    }
+  });
+
+  it('should return snooze actions when in snooze context', () => {
+    store.getters.getContextMenuChatId = 1;
+    useMapGetter.mockImplementation(key => ({
+      value: store.getters[key],
+    }));
+    useRoute.mockReturnValue({ name: 'inbox_conversation' });
+
+    const { conversationHotKeys } = useConversationHotKeys();
+    const snoozeAction = conversationHotKeys.value.find(action =>
+      action.id.includes('snooze_conversation')
+    );
+    expect(snoozeAction).toBeDefined();
+  });
+
+  it('should return the correct label actions when there are active labels', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const addLabelAction = conversationHotKeys.value.find(
+      action => action.id === 'add_a_label_to_the_conversation'
+    );
+    const removeLabelAction = conversationHotKeys.value.find(
+      action => action.id === 'remove_a_label_to_the_conversation'
+    );
+
+    expect(addLabelAction).toBeDefined();
+    expect(removeLabelAction).toBeDefined();
+  });
+
+  it('should return only add label actions when there are no active labels', () => {
+    useConversationLabels.mockReturnValue({
+      activeLabels: { value: [] },
+      inactiveLabels: { value: [{ title: 'inactive_label' }] },
+      addLabelToConversation: vi.fn(),
+      removeLabelFromConversation: vi.fn(),
+    });
+
+    const { conversationHotKeys } = useConversationHotKeys();
+    const addLabelAction = conversationHotKeys.value.find(
+      action => action.id === 'add_a_label_to_the_conversation'
+    );
+    const removeLabelAction = conversationHotKeys.value.find(
+      action => action.id === 'remove_a_label_to_the_conversation'
+    );
+
+    expect(addLabelAction).toBeDefined();
+    expect(removeLabelAction).toBeUndefined();
+  });
+
+  it('should return the correct team assignment actions', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const assignTeamAction = conversationHotKeys.value.find(
+      action => action.id === 'assign_a_team'
+    );
+
+    expect(assignTeamAction).toBeDefined();
+    expect(assignTeamAction.children.length).toBe(mockTeamsList.length);
+  });
+
+  it('should return the correct priority assignment actions', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const assignPriorityAction = conversationHotKeys.value.find(
+      action => action.id === 'assign_priority'
+    );
+
+    expect(assignPriorityAction).toBeDefined();
+    expect(assignPriorityAction.children.length).toBe(4);
+  });
+
+  it('should return the correct conversation additional actions', () => {
+    const { conversationHotKeys } = useConversationHotKeys();
+    const muteAction = conversationHotKeys.value.find(
+      action => action.id === 'mute_conversation'
+    );
+    const sendTranscriptAction = conversationHotKeys.value.find(
+      action => action.id === 'send_transcript'
+    );
+
+    expect(muteAction).toBeDefined();
+    expect(sendTranscriptAction).toBeDefined();
+  });
+
+  it('should return unmute action when conversation is muted', () => {
+    store.getters.getSelectedChat = { ...mockCurrentChat, muted: true };
+    const { conversationHotKeys } = useConversationHotKeys();
+    const unmuteAction = conversationHotKeys.value.find(
+      action => action.id === 'unmute_conversation'
+    );
+
+    expect(unmuteAction).toBeDefined();
+  });
+
+  it('should not return conversation hot keys when not in conversation or inbox route', () => {
+    useRoute.mockReturnValue({ name: 'some_other_route' });
+    const { conversationHotKeys } = useConversationHotKeys();
+
+    expect(conversationHotKeys.value.length).toBe(0);
+  });
+});
diff --git a/app/javascript/dashboard/composables/commands/spec/useGoToCommandHotKeys.spec.js b/app/javascript/dashboard/composables/commands/spec/useGoToCommandHotKeys.spec.js
new file mode 100644
index 0000000000000..8eea16fdcbd7d
--- /dev/null
+++ b/app/javascript/dashboard/composables/commands/spec/useGoToCommandHotKeys.spec.js
@@ -0,0 +1,188 @@
+import { useGoToCommandHotKeys } from '../useGoToCommandHotKeys';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRouter } from 'dashboard/composables/route';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import { MOCK_FEATURE_FLAGS } from './fixtures';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables/useI18n');
+vi.mock('dashboard/composables/route');
+vi.mock('dashboard/composables/useAdmin');
+vi.mock('dashboard/helper/URLHelper');
+
+const mockRoutes = [
+  { path: 'accounts/:accountId/dashboard', name: 'dashboard' },
+  {
+    path: 'accounts/:accountId/contacts',
+    name: 'contacts',
+    featureFlag: MOCK_FEATURE_FLAGS.CRM,
+  },
+  {
+    path: 'accounts/:accountId/settings/agents/list',
+    name: 'agent_settings',
+    featureFlag: MOCK_FEATURE_FLAGS.AGENT_MANAGEMENT,
+  },
+  {
+    path: 'accounts/:accountId/settings/teams/list',
+    name: 'team_settings',
+    featureFlag: MOCK_FEATURE_FLAGS.TEAM_MANAGEMENT,
+  },
+  {
+    path: 'accounts/:accountId/settings/inboxes/list',
+    name: 'inbox_settings',
+    featureFlag: MOCK_FEATURE_FLAGS.INBOX_MANAGEMENT,
+  },
+  { path: 'accounts/:accountId/profile/settings', name: 'profile_settings' },
+  { path: 'accounts/:accountId/notifications', name: 'notifications' },
+  {
+    path: 'accounts/:accountId/reports/overview',
+    name: 'reports_overview',
+    featureFlag: MOCK_FEATURE_FLAGS.REPORTS,
+  },
+  {
+    path: 'accounts/:accountId/settings/labels/list',
+    name: 'label_settings',
+    featureFlag: MOCK_FEATURE_FLAGS.LABELS,
+  },
+  {
+    path: 'accounts/:accountId/settings/canned-response/list',
+    name: 'canned_responses',
+    featureFlag: MOCK_FEATURE_FLAGS.CANNED_RESPONSES,
+  },
+  {
+    path: 'accounts/:accountId/settings/applications',
+    name: 'applications',
+    featureFlag: MOCK_FEATURE_FLAGS.INTEGRATIONS,
+  },
+];
+
+describe('useGoToCommandHotKeys', () => {
+  let store;
+
+  beforeEach(() => {
+    store = {
+      getters: {
+        getCurrentAccountId: 1,
+        'accounts/isFeatureEnabledonAccount': vi.fn().mockReturnValue(true),
+      },
+    };
+
+    useStore.mockReturnValue(store);
+    useMapGetter.mockImplementation(key => ({
+      value: store.getters[key],
+    }));
+
+    useI18n.mockReturnValue({ t: vi.fn(key => key) });
+    useRouter.mockReturnValue({ push: vi.fn() });
+    useAdmin.mockReturnValue({ isAdmin: { value: true } });
+    frontendURL.mockImplementation(url => url);
+  });
+
+  it('should return goToCommandHotKeys computed property', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    expect(goToCommandHotKeys.value).toBeDefined();
+    expect(goToCommandHotKeys.value.length).toBeGreaterThan(0);
+  });
+
+  it('should filter commands based on feature flags', () => {
+    store.getters['accounts/isFeatureEnabledonAccount'] = vi.fn(
+      (accountId, flag) => flag !== MOCK_FEATURE_FLAGS.CRM
+    );
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+
+    mockRoutes.forEach(route => {
+      const command = goToCommandHotKeys.value.find(cmd =>
+        cmd.id.includes(route.name)
+      );
+      if (route.featureFlag === MOCK_FEATURE_FLAGS.CRM) {
+        expect(command).toBeUndefined();
+      } else if (!route.featureFlag) {
+        expect(command).toBeDefined();
+      }
+    });
+  });
+
+  it('should filter commands for non-admin users', () => {
+    useAdmin.mockReturnValue({ isAdmin: { value: false } });
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+
+    const adminOnlyCommands = goToCommandHotKeys.value.filter(
+      cmd =>
+        cmd.id.includes('agent_settings') ||
+        cmd.id.includes('team_settings') ||
+        cmd.id.includes('inbox_settings')
+    );
+    expect(adminOnlyCommands.length).toBe(0);
+  });
+
+  it('should include commands for both admin and agent roles when user is admin', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    const adminCommand = goToCommandHotKeys.value.find(cmd =>
+      cmd.id.includes('agent_settings')
+    );
+    const agentCommand = goToCommandHotKeys.value.find(cmd =>
+      cmd.id.includes('profile_settings')
+    );
+    expect(adminCommand).toBeDefined();
+    expect(agentCommand).toBeDefined();
+  });
+
+  it('should translate section and title for each command', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    goToCommandHotKeys.value.forEach(command => {
+      expect(useI18n().t).toHaveBeenCalledWith(
+        expect.stringContaining('COMMAND_BAR.SECTIONS.')
+      );
+      expect(useI18n().t).toHaveBeenCalledWith(
+        expect.stringContaining('COMMAND_BAR.COMMANDS.')
+      );
+      expect(command.section).toBeDefined();
+      expect(command.title).toBeDefined();
+    });
+  });
+
+  it('should call router.push with correct URL when handler is called', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    goToCommandHotKeys.value.forEach(command => {
+      command.handler();
+      expect(useRouter().push).toHaveBeenCalledWith(expect.any(String));
+    });
+  });
+
+  it('should use current account ID in the path', () => {
+    store.getters.getCurrentAccountId = 42;
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    goToCommandHotKeys.value.forEach(command => {
+      command.handler();
+      expect(useRouter().push).toHaveBeenCalledWith(
+        expect.stringContaining('42')
+      );
+    });
+  });
+
+  it('should include icon for each command', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    goToCommandHotKeys.value.forEach(command => {
+      expect(command.icon).toBeDefined();
+    });
+  });
+
+  it('should return commands for all enabled features', () => {
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    const enabledFeatureCommands = goToCommandHotKeys.value.filter(cmd =>
+      mockRoutes.some(route => route.featureFlag && cmd.id.includes(route.name))
+    );
+    expect(enabledFeatureCommands.length).toBeGreaterThan(0);
+  });
+
+  it('should not return commands for disabled features', () => {
+    store.getters['accounts/isFeatureEnabledonAccount'] = vi.fn(() => false);
+    const { goToCommandHotKeys } = useGoToCommandHotKeys();
+    const disabledFeatureCommands = goToCommandHotKeys.value.filter(cmd =>
+      mockRoutes.some(route => route.featureFlag && cmd.id.includes(route.name))
+    );
+    expect(disabledFeatureCommands.length).toBe(0);
+  });
+});
diff --git a/app/javascript/dashboard/composables/commands/spec/useInboxHotKeys.spec.js b/app/javascript/dashboard/composables/commands/spec/useInboxHotKeys.spec.js
new file mode 100644
index 0000000000000..95177586a1cdf
--- /dev/null
+++ b/app/javascript/dashboard/composables/commands/spec/useInboxHotKeys.spec.js
@@ -0,0 +1,37 @@
+import { useInboxHotKeys } from '../useInboxHotKeys';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute } from 'dashboard/composables/route';
+import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';
+
+vi.mock('dashboard/composables/useI18n');
+vi.mock('dashboard/composables/route');
+vi.mock('dashboard/helper/routeHelpers');
+vi.mock('shared/helpers/mitt');
+
+describe('useInboxHotKeys', () => {
+  beforeEach(() => {
+    useI18n.mockReturnValue({ t: vi.fn(key => key) });
+    useRoute.mockReturnValue({ name: 'inbox_dashboard' });
+    isAInboxViewRoute.mockReturnValue(true);
+  });
+
+  it('should return inbox hot keys when on an inbox view route', () => {
+    const { inboxHotKeys } = useInboxHotKeys();
+    expect(inboxHotKeys.value.length).toBeGreaterThan(0);
+    expect(inboxHotKeys.value[0].id).toBe('snooze_notification');
+  });
+
+  it('should return an empty array when not on an inbox view route', () => {
+    isAInboxViewRoute.mockReturnValue(false);
+    const { inboxHotKeys } = useInboxHotKeys();
+    expect(inboxHotKeys.value).toEqual([]);
+  });
+
+  it('should have the correct structure for snooze actions', () => {
+    const { inboxHotKeys } = useInboxHotKeys();
+    const snoozeNotificationAction = inboxHotKeys.value.find(
+      action => action.id === 'snooze_notification'
+    );
+    expect(snoozeNotificationAction).toBeDefined();
+  });
+});
diff --git a/app/javascript/dashboard/composables/commands/useAppearanceHotKeys.js b/app/javascript/dashboard/composables/commands/useAppearanceHotKeys.js
new file mode 100644
index 0000000000000..3dd38b0cf09ad
--- /dev/null
+++ b/app/javascript/dashboard/composables/commands/useAppearanceHotKeys.js
@@ -0,0 +1,70 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import {
+  ICON_APPEARANCE,
+  ICON_LIGHT_MODE,
+  ICON_DARK_MODE,
+  ICON_SYSTEM_MODE,
+} from 'dashboard/helper/commandbar/icons';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { setColorTheme } from 'dashboard/helper/themeHelper.js';
+
+const getThemeOptions = t => [
+  {
+    key: 'light',
+    label: t('COMMAND_BAR.COMMANDS.LIGHT_MODE'),
+    icon: ICON_LIGHT_MODE,
+  },
+  {
+    key: 'dark',
+    label: t('COMMAND_BAR.COMMANDS.DARK_MODE'),
+    icon: ICON_DARK_MODE,
+  },
+  {
+    key: 'auto',
+    label: t('COMMAND_BAR.COMMANDS.SYSTEM_MODE'),
+    icon: ICON_SYSTEM_MODE,
+  },
+];
+
+const setAppearance = theme => {
+  LocalStorage.set(LOCAL_STORAGE_KEYS.COLOR_SCHEME, theme);
+  const isOSOnDarkMode = window.matchMedia(
+    '(prefers-color-scheme: dark)'
+  ).matches;
+  setColorTheme(isOSOnDarkMode);
+};
+
+export function useAppearanceHotKeys() {
+  const { t } = useI18n();
+
+  const themeOptions = computed(() => getThemeOptions(t));
+
+  const goToAppearanceHotKeys = computed(() => {
+    const options = themeOptions.value.map(theme => ({
+      id: theme.key,
+      title: theme.label,
+      parent: 'appearance_settings',
+      section: t('COMMAND_BAR.SECTIONS.APPEARANCE'),
+      icon: theme.icon,
+      handler: () => {
+        setAppearance(theme.key);
+      },
+    }));
+    return [
+      {
+        id: 'appearance_settings',
+        title: t('COMMAND_BAR.COMMANDS.CHANGE_APPEARANCE'),
+        section: t('COMMAND_BAR.SECTIONS.APPEARANCE'),
+        icon: ICON_APPEARANCE,
+        children: options.map(option => option.id),
+      },
+      ...options,
+    ];
+  });
+
+  return {
+    goToAppearanceHotKeys,
+  };
+}
diff --git a/app/javascript/dashboard/composables/commands/useBulkActionsHotKeys.js b/app/javascript/dashboard/composables/commands/useBulkActionsHotKeys.js
new file mode 100644
index 0000000000000..8969e7cf4ad10
--- /dev/null
+++ b/app/javascript/dashboard/composables/commands/useBulkActionsHotKeys.js
@@ -0,0 +1,89 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import wootConstants from 'dashboard/constants/globals';
+
+import {
+  CMD_BULK_ACTION_SNOOZE_CONVERSATION,
+  CMD_BULK_ACTION_REOPEN_CONVERSATION,
+  CMD_BULK_ACTION_RESOLVE_CONVERSATION,
+} from 'dashboard/helper/commandbar/events';
+import {
+  ICON_SNOOZE_CONVERSATION,
+  ICON_REOPEN_CONVERSATION,
+  ICON_RESOLVE_CONVERSATION,
+} from 'dashboard/helper/commandbar/icons';
+import { emitter } from 'shared/helpers/mitt';
+
+import { createSnoozeHandlers } from 'dashboard/helper/commandbar/actions';
+
+const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
+
+const createEmitHandler = event => () => emitter.emit(event);
+
+const SNOOZE_CONVERSATION_BULK_ACTIONS = [
+  {
+    id: 'bulk_action_snooze_conversation',
+    title: 'COMMAND_BAR.COMMANDS.SNOOZE_CONVERSATION',
+    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+    icon: ICON_SNOOZE_CONVERSATION,
+    children: Object.values(SNOOZE_OPTIONS),
+  },
+  ...createSnoozeHandlers(
+    CMD_BULK_ACTION_SNOOZE_CONVERSATION,
+    'bulk_action_snooze_conversation',
+    'COMMAND_BAR.SECTIONS.BULK_ACTIONS'
+  ),
+];
+
+const RESOLVED_CONVERSATION_BULK_ACTIONS = [
+  {
+    id: 'bulk_action_reopen_conversation',
+    title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
+    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+    icon: ICON_REOPEN_CONVERSATION,
+    handler: createEmitHandler(CMD_BULK_ACTION_REOPEN_CONVERSATION),
+  },
+];
+
+const OPEN_CONVERSATION_BULK_ACTIONS = [
+  {
+    id: 'bulk_action_resolve_conversation',
+    title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
+    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
+    icon: ICON_RESOLVE_CONVERSATION,
+    handler: createEmitHandler(CMD_BULK_ACTION_RESOLVE_CONVERSATION),
+  },
+];
+
+export function useBulkActionsHotKeys() {
+  const { t } = useI18n();
+
+  const selectedConversations = useMapGetter(
+    'bulkActions/getSelectedConversationIds'
+  );
+
+  const prepareActions = actions => {
+    return actions.map(action => ({
+      ...action,
+      title: t(action.title),
+      section: t(action.section),
+    }));
+  };
+
+  const bulkActionsHotKeys = computed(() => {
+    let actions = [];
+    if (selectedConversations.value.length > 0) {
+      actions = [
+        ...SNOOZE_CONVERSATION_BULK_ACTIONS,
+        ...RESOLVED_CONVERSATION_BULK_ACTIONS,
+        ...OPEN_CONVERSATION_BULK_ACTIONS,
+      ];
+    }
+    return prepareActions(actions);
+  });
+
+  return {
+    bulkActionsHotKeys,
+  };
+}
diff --git a/app/javascript/dashboard/composables/commands/useConversationHotKeys.js b/app/javascript/dashboard/composables/commands/useConversationHotKeys.js
new file mode 100644
index 0000000000000..6e6004e45aafe
--- /dev/null
+++ b/app/javascript/dashboard/composables/commands/useConversationHotKeys.js
@@ -0,0 +1,408 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'dashboard/composables/route';
+import { emitter } from 'shared/helpers/mitt';
+import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
+import { useAI } from 'dashboard/composables/useAI';
+import { useAgentsList } from 'dashboard/composables/useAgentsList';
+import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
+import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
+
+import wootConstants from 'dashboard/constants/globals';
+
+import {
+  ICON_ADD_LABEL,
+  ICON_ASSIGN_AGENT,
+  ICON_ASSIGN_PRIORITY,
+  ICON_ASSIGN_TEAM,
+  ICON_REMOVE_LABEL,
+  ICON_PRIORITY_URGENT,
+  ICON_PRIORITY_HIGH,
+  ICON_PRIORITY_LOW,
+  ICON_PRIORITY_MEDIUM,
+  ICON_PRIORITY_NONE,
+  ICON_AI_ASSIST,
+  ICON_AI_SUMMARY,
+  ICON_AI_SHORTEN,
+  ICON_AI_EXPAND,
+  ICON_AI_GRAMMAR,
+} from 'dashboard/helper/commandbar/icons';
+
+import {
+  OPEN_CONVERSATION_ACTIONS,
+  SNOOZE_CONVERSATION_ACTIONS,
+  RESOLVED_CONVERSATION_ACTIONS,
+  SEND_TRANSCRIPT_ACTION,
+  UNMUTE_ACTION,
+  MUTE_ACTION,
+} from 'dashboard/helper/commandbar/actions';
+import {
+  isAConversationRoute,
+  isAInboxViewRoute,
+} from 'dashboard/helper/routeHelpers';
+
+const prepareActions = (actions, t) => {
+  return actions.map(action => ({
+    ...action,
+    title: t(action.title),
+    section: t(action.section),
+  }));
+};
+
+const createPriorityOptions = (t, currentPriority) => {
+  return [
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.NONE'),
+      key: null,
+      icon: ICON_PRIORITY_NONE,
+    },
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.URGENT'),
+      key: 'urgent',
+      icon: ICON_PRIORITY_URGENT,
+    },
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.HIGH'),
+      key: 'high',
+      icon: ICON_PRIORITY_HIGH,
+    },
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM'),
+      key: 'medium',
+      icon: ICON_PRIORITY_MEDIUM,
+    },
+    {
+      label: t('CONVERSATION.PRIORITY.OPTIONS.LOW'),
+      key: 'low',
+      icon: ICON_PRIORITY_LOW,
+    },
+  ].filter(item => item.key !== currentPriority);
+};
+
+const createNonDraftMessageAIAssistActions = (t, replyMode) => {
+  if (replyMode === REPLY_EDITOR_MODES.REPLY) {
+    return [
+      {
+        label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.REPLY_SUGGESTION'),
+        key: 'reply_suggestion',
+        icon: ICON_AI_ASSIST,
+      },
+    ];
+  }
+  return [
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SUMMARIZE'),
+      key: 'summarize',
+      icon: ICON_AI_SUMMARY,
+    },
+  ];
+};
+
+const createDraftMessageAIAssistActions = t => {
+  return [
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.REPHRASE'),
+      key: 'rephrase',
+      icon: ICON_AI_ASSIST,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.FIX_SPELLING_GRAMMAR'),
+      key: 'fix_spelling_grammar',
+      icon: ICON_AI_GRAMMAR,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.EXPAND'),
+      key: 'expand',
+      icon: ICON_AI_EXPAND,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SHORTEN'),
+      key: 'shorten',
+      icon: ICON_AI_SHORTEN,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.MAKE_FRIENDLY'),
+      key: 'make_friendly',
+      icon: ICON_AI_ASSIST,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.MAKE_FORMAL'),
+      key: 'make_formal',
+      icon: ICON_AI_ASSIST,
+    },
+    {
+      label: t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SIMPLIFY'),
+      key: 'simplify',
+      icon: ICON_AI_ASSIST,
+    },
+  ];
+};
+
+export function useConversationHotKeys() {
+  const { t } = useI18n();
+  const store = useStore();
+  const route = useRoute();
+
+  const {
+    activeLabels,
+    inactiveLabels,
+    addLabelToConversation,
+    removeLabelFromConversation,
+  } = useConversationLabels();
+
+  const { isAIIntegrationEnabled } = useAI();
+  const { agentsList } = useAgentsList();
+
+  const currentChat = useMapGetter('getSelectedChat');
+  const replyMode = useMapGetter('draftMessages/getReplyEditorMode');
+  const contextMenuChatId = useMapGetter('getContextMenuChatId');
+  const teams = useMapGetter('teams/getTeams');
+  const getDraftMessage = useMapGetter('draftMessages/get');
+
+  const conversationId = computed(() => currentChat.value?.id);
+  const draftKey = computed(
+    () => `draft-${conversationId.value}-${replyMode.value}`
+  );
+
+  const draftMessage = computed(() => getDraftMessage.value(draftKey.value));
+
+  const hasAnAssignedTeam = computed(() => !!currentChat.value?.meta?.team);
+
+  const teamsList = computed(() => {
+    if (hasAnAssignedTeam.value) {
+      return [{ id: 0, name: t('TEAMS_SETTINGS.LIST.NONE') }, ...teams.value];
+    }
+    return teams.value;
+  });
+
+  const onChangeAssignee = action => {
+    store.dispatch('assignAgent', {
+      conversationId: currentChat.value.id,
+      agentId: action.agentInfo.id,
+    });
+  };
+
+  const onChangePriority = action => {
+    store.dispatch('assignPriority', {
+      conversationId: currentChat.value.id,
+      priority: action.priority.key,
+    });
+  };
+
+  const onChangeTeam = action => {
+    store.dispatch('assignTeam', {
+      conversationId: currentChat.value.id,
+      teamId: action.teamInfo.id,
+    });
+  };
+
+  const statusActions = computed(() => {
+    const isOpen = currentChat.value?.status === wootConstants.STATUS_TYPE.OPEN;
+    const isSnoozed =
+      currentChat.value?.status === wootConstants.STATUS_TYPE.SNOOZED;
+    const isResolved =
+      currentChat.value?.status === wootConstants.STATUS_TYPE.RESOLVED;
+
+    let actions = [];
+    if (isOpen) {
+      actions = [...OPEN_CONVERSATION_ACTIONS, ...SNOOZE_CONVERSATION_ACTIONS];
+    } else if (isResolved || isSnoozed) {
+      actions = RESOLVED_CONVERSATION_ACTIONS;
+    }
+    return prepareActions(actions, t);
+  });
+
+  const priorityOptions = computed(() =>
+    createPriorityOptions(t, currentChat.value?.priority)
+  );
+
+  const assignAgentActions = computed(() => {
+    const agentOptions = agentsList.value.map(agent => ({
+      id: `agent-${agent.id}`,
+      title: agent.name,
+      parent: 'assign_an_agent',
+      section: t('COMMAND_BAR.SECTIONS.CHANGE_ASSIGNEE'),
+      agentInfo: agent,
+      icon: ICON_ASSIGN_AGENT,
+      handler: onChangeAssignee,
+    }));
+    return [
+      {
+        id: 'assign_an_agent',
+        title: t('COMMAND_BAR.COMMANDS.ASSIGN_AN_AGENT'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_ASSIGN_AGENT,
+        children: agentOptions.map(option => option.id),
+      },
+      ...agentOptions,
+    ];
+  });
+
+  const assignPriorityActions = computed(() => {
+    const options = priorityOptions.value.map(priority => ({
+      id: `priority-${priority.key}`,
+      title: priority.label,
+      parent: 'assign_priority',
+      section: t('COMMAND_BAR.SECTIONS.CHANGE_PRIORITY'),
+      priority: priority,
+      icon: priority.icon,
+      handler: onChangePriority,
+    }));
+    return [
+      {
+        id: 'assign_priority',
+        title: t('COMMAND_BAR.COMMANDS.ASSIGN_PRIORITY'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_ASSIGN_PRIORITY,
+        children: options.map(option => option.id),
+      },
+      ...options,
+    ];
+  });
+
+  const assignTeamActions = computed(() => {
+    const teamOptions = teamsList.value.map(team => ({
+      id: `team-${team.id}`,
+      title: team.name,
+      parent: 'assign_a_team',
+      section: t('COMMAND_BAR.SECTIONS.CHANGE_TEAM'),
+      teamInfo: team,
+      icon: ICON_ASSIGN_TEAM,
+      handler: onChangeTeam,
+    }));
+    return [
+      {
+        id: 'assign_a_team',
+        title: t('COMMAND_BAR.COMMANDS.ASSIGN_A_TEAM'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_ASSIGN_TEAM,
+        children: teamOptions.map(option => option.id),
+      },
+      ...teamOptions,
+    ];
+  });
+
+  const addLabelActions = computed(() => {
+    const availableLabels = inactiveLabels.value.map(label => ({
+      id: label.title,
+      title: `#${label.title}`,
+      parent: 'add_a_label_to_the_conversation',
+      section: t('COMMAND_BAR.SECTIONS.ADD_LABEL'),
+      icon: ICON_ADD_LABEL,
+      handler: action => addLabelToConversation({ title: action.id }),
+    }));
+    return [
+      ...availableLabels,
+      {
+        id: 'add_a_label_to_the_conversation',
+        title: t('COMMAND_BAR.COMMANDS.ADD_LABELS_TO_CONVERSATION'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_ADD_LABEL,
+        children: inactiveLabels.value.map(label => label.title),
+      },
+    ];
+  });
+
+  const removeLabelActions = computed(() => {
+    const activeLabelsComputed = activeLabels.value.map(label => ({
+      id: label.title,
+      title: `#${label.title}`,
+      parent: 'remove_a_label_to_the_conversation',
+      section: t('COMMAND_BAR.SECTIONS.REMOVE_LABEL'),
+      icon: ICON_REMOVE_LABEL,
+      handler: action => removeLabelFromConversation(action.id),
+    }));
+    return [
+      ...activeLabelsComputed,
+      {
+        id: 'remove_a_label_to_the_conversation',
+        title: t('COMMAND_BAR.COMMANDS.REMOVE_LABEL_FROM_CONVERSATION'),
+        section: t('COMMAND_BAR.SECTIONS.CONVERSATION'),
+        icon: ICON_REMOVE_LABEL,
+        children: activeLabels.value.map(label => label.title),
+      },
+    ];
+  });
+
+  const labelActions = computed(() => {
+    if (activeLabels.value.length) {
+      return [...addLabelActions.value, ...removeLabelActions.value];
+    }
+    return addLabelActions.value;
+  });
+
+  const conversationAdditionalActions = computed(() => {
+    return prepareActions(
+      [
+        currentChat.value.muted ? UNMUTE_ACTION : MUTE_ACTION,
+        SEND_TRANSCRIPT_ACTION,
+      ],
+      t
+    );
+  });
+
+  const AIAssistActions = computed(() => {
+    const aiOptions = draftMessage.value
+      ? createDraftMessageAIAssistActions(t)
+      : createNonDraftMessageAIAssistActions(t, replyMode.value);
+    const options = aiOptions.map(item => ({
+      id: `ai-assist-${item.key}`,
+      title: item.label,
+      parent: 'ai_assist',
+      section: t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
+      priority: item,
+      icon: item.icon,
+      handler: () => emitter.emit(CMD_AI_ASSIST, item.key),
+    }));
+    return [
+      {
+        id: 'ai_assist',
+        title: t('COMMAND_BAR.COMMANDS.AI_ASSIST'),
+        section: t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
+        icon: ICON_AI_ASSIST,
+        children: options.map(option => option.id),
+      },
+      ...options,
+    ];
+  });
+
+  const isConversationOrInboxRoute = computed(() => {
+    return isAConversationRoute(route.name) || isAInboxViewRoute(route.name);
+  });
+
+  const shouldShowSnoozeOption = computed(() => {
+    return (
+      isAConversationRoute(route.name, true, false) && contextMenuChatId.value
+    );
+  });
+
+  const getDefaultConversationHotKeys = computed(() => {
+    const defaultConversationHotKeys = [
+      ...statusActions.value,
+      ...conversationAdditionalActions.value,
+      ...assignAgentActions.value,
+      ...assignTeamActions.value,
+      ...labelActions.value,
+      ...assignPriorityActions.value,
+    ];
+    if (isAIIntegrationEnabled.value) {
+      return [...defaultConversationHotKeys, ...AIAssistActions.value];
+    }
+    return defaultConversationHotKeys;
+  });
+
+  const conversationHotKeys = computed(() => {
+    if (shouldShowSnoozeOption.value) {
+      return prepareActions(SNOOZE_CONVERSATION_ACTIONS, t);
+    }
+    if (isConversationOrInboxRoute.value) {
+      return getDefaultConversationHotKeys.value;
+    }
+    return [];
+  });
+
+  return {
+    conversationHotKeys,
+  };
+}
diff --git a/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js b/app/javascript/dashboard/composables/commands/useGoToCommandHotKeys.js
similarity index 80%
rename from app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
rename to app/javascript/dashboard/composables/commands/useGoToCommandHotKeys.js
index 6b16bf93dfd60..c790cda42bf30 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/goToCommandHotKeys.js
+++ b/app/javascript/dashboard/composables/commands/useGoToCommandHotKeys.js
@@ -1,3 +1,8 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRouter } from 'dashboard/composables/route';
+import { useAdmin } from 'dashboard/composables/useAdmin';
 import {
   ICON_ACCOUNT_SETTINGS,
   ICON_AGENT_REPORTS,
@@ -14,11 +19,9 @@ import {
   ICON_TEAM_REPORTS,
   ICON_USER_PROFILE,
   ICON_CONVERSATION_REPORTS,
-} from './CommandBarIcons';
-import { frontendURL } from '../../../helper/URLHelper';
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { FEATURE_FLAGS } from '../../../featureFlags';
+} from 'dashboard/helper/commandbar/icons';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const GO_TO_COMMANDS = [
   {
@@ -172,45 +175,45 @@ const GO_TO_COMMANDS = [
   },
 ];
 
-export default {
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    goToCommandHotKeys() {
-      let commands = GO_TO_COMMANDS.filter(cmd => {
-        if (cmd.featureFlag) {
-          return this.isFeatureEnabledonAccount(
-            this.accountId,
-            cmd.featureFlag
-          );
-        }
-        return true;
-      });
+export function useGoToCommandHotKeys() {
+  const { t } = useI18n();
+  const router = useRouter();
+  const { isAdmin } = useAdmin();
+
+  const currentAccountId = useMapGetter('getCurrentAccountId');
+  const isFeatureEnabledOnAccount = useMapGetter(
+    'accounts/isFeatureEnabledonAccount'
+  );
 
-      if (!this.isAdmin) {
-        commands = commands.filter(command => command.role.includes('agent'));
+  const openRoute = url => {
+    router.push(frontendURL(url));
+  };
+
+  const goToCommandHotKeys = computed(() => {
+    let commands = GO_TO_COMMANDS.filter(cmd => {
+      if (cmd.featureFlag) {
+        return isFeatureEnabledOnAccount.value(
+          currentAccountId.value,
+          cmd.featureFlag
+        );
       }
+      return true;
+    });
+
+    if (!isAdmin.value) {
+      commands = commands.filter(command => command.role.includes('agent'));
+    }
+
+    return commands.map(command => ({
+      id: command.id,
+      section: t(command.section),
+      title: t(command.title),
+      icon: command.icon,
+      handler: () => openRoute(command.path(currentAccountId.value)),
+    }));
+  });
 
-      return commands.map(command => ({
-        id: command.id,
-        section: this.$t(command.section),
-        title: this.$t(command.title),
-        icon: command.icon,
-        handler: () => this.openRoute(command.path(this.accountId)),
-      }));
-    },
-  },
-  methods: {
-    openRoute(url) {
-      this.$router.push(frontendURL(url));
-    },
-  },
-};
+  return {
+    goToCommandHotKeys,
+  };
+}
diff --git a/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js b/app/javascript/dashboard/composables/commands/useInboxHotKeys.js
similarity index 56%
rename from app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
rename to app/javascript/dashboard/composables/commands/useInboxHotKeys.js
index 37b1986f0b8fd..fc11bcf538d49 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js
+++ b/app/javascript/dashboard/composables/commands/useInboxHotKeys.js
@@ -1,13 +1,19 @@
+import { computed } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute } from 'dashboard/composables/route';
 import wootConstants from 'dashboard/constants/globals';
 
-import { CMD_SNOOZE_NOTIFICATION } from './commandBarBusEvents';
-import { ICON_SNOOZE_NOTIFICATION } from './CommandBarIcons';
+import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandbar/events';
+import { ICON_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandbar/icons';
 import { emitter } from 'shared/helpers/mitt';
 
 import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';
 
 const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
 
+const createSnoozeHandler = option => () =>
+  emitter.emit(CMD_SNOOZE_NOTIFICATION, option);
+
 const INBOX_SNOOZE_EVENTS = [
   {
     id: 'snooze_notification',
@@ -21,8 +27,7 @@ const INBOX_SNOOZE_EVENTS = [
     parent: 'snooze_notification',
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.AN_HOUR_FROM_NOW),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.AN_HOUR_FROM_NOW),
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_TOMORROW,
@@ -30,8 +35,7 @@ const INBOX_SNOOZE_EVENTS = [
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_TOMORROW),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.UNTIL_TOMORROW),
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_NEXT_WEEK,
@@ -39,8 +43,7 @@ const INBOX_SNOOZE_EVENTS = [
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_WEEK),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.UNTIL_NEXT_WEEK),
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_NEXT_MONTH,
@@ -48,8 +51,7 @@ const INBOX_SNOOZE_EVENTS = [
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_MONTH),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.UNTIL_NEXT_MONTH),
   },
   {
     id: SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME,
@@ -57,26 +59,30 @@ const INBOX_SNOOZE_EVENTS = [
     section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
     parent: 'snooze_notification',
     icon: ICON_SNOOZE_NOTIFICATION,
-    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME),
+    handler: createSnoozeHandler(SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME),
   },
 ];
-export default {
-  computed: {
-    inboxHotKeys() {
-      if (isAInboxViewRoute(this.$route.name)) {
-        return this.prepareActions(INBOX_SNOOZE_EVENTS);
-      }
-      return [];
-    },
-  },
-  methods: {
-    prepareActions(actions) {
-      return actions.map(action => ({
-        ...action,
-        title: this.$t(action.title),
-        section: this.$t(action.section),
-      }));
-    },
-  },
-};
+
+export function useInboxHotKeys() {
+  const { t } = useI18n();
+  const route = useRoute();
+
+  const prepareActions = actions => {
+    return actions.map(action => ({
+      ...action,
+      title: t(action.title),
+      section: action.section ? t(action.section) : undefined,
+    }));
+  };
+
+  const inboxHotKeys = computed(() => {
+    if (isAInboxViewRoute(route.name)) {
+      return prepareActions(INBOX_SNOOZE_EVENTS);
+    }
+    return [];
+  });
+
+  return {
+    inboxHotKeys,
+  };
+}
diff --git a/app/javascript/dashboard/composables/spec/fixtures/agentFixtures.js b/app/javascript/dashboard/composables/spec/fixtures/agentFixtures.js
new file mode 100644
index 0000000000000..7e3e9787cd373
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/fixtures/agentFixtures.js
@@ -0,0 +1,63 @@
+import { allAgentsData } from 'dashboard/helper/specs/fixtures/agentFixtures';
+
+export { allAgentsData };
+export const formattedAgentsData = [
+  {
+    account_id: 0,
+    confirmed: true,
+    email: 'None',
+    id: 0,
+    name: 'None',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abraham@chatwoot.com',
+    id: 5,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'John K',
+    confirmed: true,
+    email: 'john@chatwoot.com',
+    id: 1,
+    name: 'John Kennady',
+    role: 'administrator',
+  },
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Honey',
+    confirmed: true,
+    email: 'bee@chatwoot.com',
+    id: 4,
+    name: 'Honey Bee',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Samuel K',
+    confirmed: true,
+    email: 'samuel@chatwoot.com',
+    id: 2,
+    name: 'Samuel Keta',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'offline',
+    available_name: 'James K',
+    confirmed: true,
+    email: 'james@chatwoot.com',
+    id: 3,
+    name: 'James Koti',
+    role: 'agent',
+  },
+];
diff --git a/app/javascript/dashboard/composables/spec/fixtures/reportFixtures.js b/app/javascript/dashboard/composables/spec/fixtures/reportFixtures.js
new file mode 100644
index 0000000000000..93880e1ca13d7
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/fixtures/reportFixtures.js
@@ -0,0 +1,37 @@
+export const summary = {
+  avg_first_response_time: '198.6666666666667',
+  avg_resolution_time: '208.3333333333333',
+  conversations_count: 5000,
+  incoming_messages_count: 5,
+  outgoing_messages_count: 3,
+  previous: {
+    avg_first_response_time: '89.0',
+    avg_resolution_time: '145.0',
+    conversations_count: 4,
+    incoming_messages_count: 5,
+    outgoing_messages_count: 4,
+    resolutions_count: 0,
+  },
+  resolutions_count: 3,
+};
+
+export const botSummary = {
+  bot_resolutions_count: 10,
+  bot_handoffs_count: 20,
+  previous: {
+    bot_resolutions_count: 8,
+    bot_handoffs_count: 5,
+  },
+};
+
+export const report = {
+  data: [
+    { value: '0.00', timestamp: 1647541800, count: 0 },
+    { value: '0.00', timestamp: 1647628200, count: 0 },
+    { value: '0.00', timestamp: 1647714600, count: 0 },
+    { value: '0.00', timestamp: 1647801000, count: 0 },
+    { value: '0.01', timestamp: 1647887400, count: 4 },
+    { value: '0.00', timestamp: 1647973800, count: 0 },
+    { value: '0.00', timestamp: 1648060200, count: 0 },
+  ],
+};
diff --git a/app/javascript/dashboard/composables/spec/useAI.spec.js b/app/javascript/dashboard/composables/spec/useAI.spec.js
new file mode 100644
index 0000000000000..87afad4445f67
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useAI.spec.js
@@ -0,0 +1,119 @@
+import { useAI } from '../useAI';
+import {
+  useStore,
+  useStoreGetters,
+  useMapGetter,
+} from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useI18n } from '../useI18n';
+import OpenAPI from 'dashboard/api/integrations/openapi';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables');
+vi.mock('../useI18n');
+vi.mock('dashboard/api/integrations/openapi');
+vi.mock('dashboard/helper/AnalyticsHelper/events', () => ({
+  OPEN_AI_EVENTS: {
+    TEST_EVENT: 'open_ai_test_event',
+  },
+}));
+
+describe('useAI', () => {
+  const mockStore = {
+    dispatch: vi.fn(),
+  };
+
+  const mockGetters = {
+    'integrations/getUIFlags': { value: { isFetching: false } },
+    'draftMessages/get': { value: () => 'Draft message' },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useStore.mockReturnValue(mockStore);
+    useStoreGetters.mockReturnValue(mockGetters);
+    useMapGetter.mockImplementation(getter => {
+      const mockValues = {
+        'integrations/getAppIntegrations': [],
+        getSelectedChat: { id: '123' },
+        'draftMessages/getReplyEditorMode': 'reply',
+      };
+      return { value: mockValues[getter] };
+    });
+    useTrack.mockReturnValue(vi.fn());
+    useI18n.mockReturnValue({ t: vi.fn() });
+    useAlert.mockReturnValue(vi.fn());
+  });
+
+  it('initializes computed properties correctly', async () => {
+    const { uiFlags, appIntegrations, currentChat, replyMode, draftMessage } =
+      useAI();
+
+    expect(uiFlags.value).toEqual({ isFetching: false });
+    expect(appIntegrations.value).toEqual([]);
+    expect(currentChat.value).toEqual({ id: '123' });
+    expect(replyMode.value).toBe('reply');
+    expect(draftMessage.value).toBe('Draft message');
+  });
+
+  it('fetches integrations if required', async () => {
+    const { fetchIntegrationsIfRequired } = useAI();
+    await fetchIntegrationsIfRequired();
+    expect(mockStore.dispatch).toHaveBeenCalledWith('integrations/get');
+  });
+
+  it('does not fetch integrations if already loaded', async () => {
+    useMapGetter.mockImplementation(getter => {
+      const mockValues = {
+        'integrations/getAppIntegrations': [{ id: 'openai' }],
+        getSelectedChat: { id: '123' },
+        'draftMessages/getReplyEditorMode': 'reply',
+      };
+      return { value: mockValues[getter] };
+    });
+
+    const { fetchIntegrationsIfRequired } = useAI();
+    await fetchIntegrationsIfRequired();
+    expect(mockStore.dispatch).not.toHaveBeenCalled();
+  });
+
+  it('records analytics correctly', async () => {
+    const mockTrack = vi.fn();
+    useTrack.mockReturnValue(mockTrack);
+    const { recordAnalytics } = useAI();
+
+    await recordAnalytics('TEST_EVENT', { data: 'test' });
+
+    expect(mockTrack).toHaveBeenCalledWith('open_ai_test_event', {
+      type: 'TEST_EVENT',
+      data: 'test',
+    });
+  });
+
+  it('fetches label suggestions', async () => {
+    OpenAPI.processEvent.mockResolvedValue({
+      data: { message: 'label1, label2' },
+    });
+
+    useMapGetter.mockImplementation(getter => {
+      const mockValues = {
+        'integrations/getAppIntegrations': [
+          { id: 'openai', hooks: [{ id: 'hook1' }] },
+        ],
+        getSelectedChat: { id: '123' },
+      };
+      return { value: mockValues[getter] };
+    });
+
+    const { fetchLabelSuggestions } = useAI();
+    const result = await fetchLabelSuggestions();
+
+    expect(OpenAPI.processEvent).toHaveBeenCalledWith({
+      type: 'label_suggestion',
+      hookId: 'hook1',
+      conversationId: '123',
+    });
+
+    expect(result).toEqual(['label1', 'label2']);
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useAgentsList.spec.js b/app/javascript/dashboard/composables/spec/useAgentsList.spec.js
new file mode 100644
index 0000000000000..2f7f74e98a8de
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useAgentsList.spec.js
@@ -0,0 +1,91 @@
+import { ref } from 'vue';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useAgentsList } from '../useAgentsList';
+import { useMapGetter } from 'dashboard/composables/store';
+import { allAgentsData, formattedAgentsData } from './fixtures/agentFixtures';
+import * as agentHelper from 'dashboard/helper/agentHelper';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/helper/agentHelper');
+
+const mockUseMapGetter = (overrides = {}) => {
+  const defaultGetters = {
+    getCurrentUser: ref(allAgentsData[0]),
+    getSelectedChat: ref({ inbox_id: 1, meta: { assignee: true } }),
+    getCurrentAccountId: ref(1),
+    'inboxAssignableAgents/getAssignableAgents': ref(() => allAgentsData),
+  };
+
+  const mergedGetters = { ...defaultGetters, ...overrides };
+
+  useMapGetter.mockImplementation(getter => mergedGetters[getter]);
+};
+
+describe('useAgentsList', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    agentHelper.getAgentsByUpdatedPresence.mockImplementation(agents => agents);
+    agentHelper.getSortedAgentsByAvailability.mockReturnValue(
+      formattedAgentsData.slice(1)
+    );
+    agentHelper.getCombinedAgents.mockImplementation(
+      (agents, includeNone, isAgentSelected) => {
+        if (includeNone && isAgentSelected) {
+          return [agentHelper.createNoneAgent, ...agents];
+        }
+        return agents;
+      }
+    );
+
+    mockUseMapGetter();
+  });
+
+  it('returns agentsList and assignableAgents', () => {
+    const { agentsList, assignableAgents } = useAgentsList();
+
+    expect(assignableAgents.value).toEqual(allAgentsData);
+    expect(agentsList.value).toEqual([
+      agentHelper.createNoneAgent,
+      ...formattedAgentsData.slice(1),
+    ]);
+  });
+
+  it('includes None agent when includeNoneAgent is true', () => {
+    const { agentsList } = useAgentsList(true);
+
+    expect(agentsList.value[0]).toEqual(agentHelper.createNoneAgent);
+    expect(agentsList.value.length).toBe(formattedAgentsData.length);
+  });
+
+  it('excludes None agent when includeNoneAgent is false', () => {
+    const { agentsList } = useAgentsList(false);
+
+    expect(agentsList.value[0]).not.toEqual(agentHelper.createNoneAgent);
+    expect(agentsList.value.length).toBe(formattedAgentsData.length - 1);
+  });
+
+  it('handles empty assignable agents', () => {
+    mockUseMapGetter({
+      'inboxAssignableAgents/getAssignableAgents': ref(() => []),
+    });
+    agentHelper.getSortedAgentsByAvailability.mockReturnValue([]);
+
+    const { agentsList, assignableAgents } = useAgentsList();
+
+    expect(assignableAgents.value).toEqual([]);
+    expect(agentsList.value).toEqual([agentHelper.createNoneAgent]);
+  });
+
+  it('handles missing inbox_id', () => {
+    mockUseMapGetter({
+      getSelectedChat: ref({ meta: { assignee: true } }),
+      'inboxAssignableAgents/getAssignableAgents': ref(() => []),
+    });
+    agentHelper.getSortedAgentsByAvailability.mockReturnValue([]);
+
+    const { agentsList, assignableAgents } = useAgentsList();
+
+    expect(assignableAgents.value).toEqual([]);
+    expect(agentsList.value).toEqual([agentHelper.createNoneAgent]);
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useAutomation.spec.js b/app/javascript/dashboard/composables/spec/useAutomation.spec.js
new file mode 100644
index 0000000000000..c0881730bca92
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useAutomation.spec.js
@@ -0,0 +1,295 @@
+import { useAutomation } from '../useAutomation';
+import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from '../useI18n';
+import * as automationHelper from 'dashboard/helper/automationHelper';
+import {
+  customAttributes,
+  agents,
+  teams,
+  labels,
+  statusFilterOptions,
+  campaigns,
+  contacts,
+  inboxes,
+  languages,
+  countries,
+  slaPolicies,
+} from 'dashboard/helper/specs/fixtures/automationFixtures.js';
+import { MESSAGE_CONDITION_VALUES } from 'dashboard/constants/automation';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables');
+vi.mock('../useI18n');
+vi.mock('dashboard/helper/automationHelper');
+
+describe('useAutomation', () => {
+  beforeEach(() => {
+    useStoreGetters.mockReturnValue({
+      'attributes/getAttributes': { value: customAttributes },
+      'attributes/getAttributesByModel': {
+        value: model => {
+          return model === 'conversation_attribute'
+            ? [{ id: 1, name: 'Conversation Attribute' }]
+            : [{ id: 2, name: 'Contact Attribute' }];
+        },
+      },
+    });
+    useMapGetter.mockImplementation(getter => {
+      const getterMap = {
+        'agents/getAgents': agents,
+        'campaigns/getAllCampaigns': campaigns,
+        'contacts/getContacts': contacts,
+        'inboxes/getInboxes': inboxes,
+        'labels/getLabels': labels,
+        'teams/getTeams': teams,
+        'sla/getSLA': slaPolicies,
+      };
+      return { value: getterMap[getter] };
+    });
+    useI18n.mockReturnValue({ t: key => key });
+    useAlert.mockReturnValue(vi.fn());
+
+    // Mock getConditionOptions for different types
+    automationHelper.getConditionOptions.mockImplementation(options => {
+      const { type } = options;
+      switch (type) {
+        case 'status':
+          return statusFilterOptions;
+        case 'team_id':
+          return teams;
+        case 'assignee_id':
+          return agents;
+        case 'contact':
+          return contacts;
+        case 'inbox_id':
+          return inboxes;
+        case 'campaigns':
+          return campaigns;
+        case 'browser_language':
+          return languages;
+        case 'country_code':
+          return countries;
+        case 'message_type':
+          return MESSAGE_CONDITION_VALUES;
+        default:
+          return [];
+      }
+    });
+
+    // Mock getActionOptions for different types
+    automationHelper.getActionOptions.mockImplementation(options => {
+      const { type } = options;
+      switch (type) {
+        case 'add_label':
+          return labels;
+        case 'assign_team':
+          return teams;
+        case 'assign_agent':
+          return agents;
+        case 'send_email_to_team':
+          return teams;
+        case 'send_message':
+          return [];
+        case 'add_sla':
+          return slaPolicies;
+        default:
+          return [];
+      }
+    });
+  });
+
+  it('initializes computed properties correctly', () => {
+    const {
+      agents: computedAgents,
+      campaigns: computedCampaigns,
+      contacts: computedContacts,
+      inboxes: computedInboxes,
+      labels: computedLabels,
+      teams: computedTeams,
+      slaPolicies: computedSlaPolicies,
+    } = useAutomation();
+
+    expect(computedAgents.value).toEqual(agents);
+    expect(computedCampaigns.value).toEqual(campaigns);
+    expect(computedContacts.value).toEqual(contacts);
+    expect(computedInboxes.value).toEqual(inboxes);
+    expect(computedLabels.value).toEqual(labels);
+    expect(computedTeams.value).toEqual(teams);
+    expect(computedSlaPolicies.value).toEqual(slaPolicies);
+  });
+
+  it('appends new condition and action correctly', () => {
+    const { appendNewCondition, appendNewAction } = useAutomation();
+    const mockAutomation = {
+      event_name: 'message_created',
+      conditions: [],
+      actions: [],
+    };
+
+    automationHelper.getDefaultConditions.mockReturnValue([{}]);
+    automationHelper.getDefaultActions.mockReturnValue([{}]);
+
+    appendNewCondition(mockAutomation);
+    appendNewAction(mockAutomation);
+
+    expect(automationHelper.getDefaultConditions).toHaveBeenCalledWith(
+      'message_created'
+    );
+    expect(automationHelper.getDefaultActions).toHaveBeenCalled();
+    expect(mockAutomation.conditions).toHaveLength(1);
+    expect(mockAutomation.actions).toHaveLength(1);
+  });
+
+  it('removes filter and action correctly', () => {
+    const { removeFilter, removeAction } = useAutomation();
+    const mockAutomation = {
+      conditions: [{ id: 1 }, { id: 2 }],
+      actions: [{ id: 1 }, { id: 2 }],
+    };
+
+    removeFilter(mockAutomation, 0);
+    removeAction(mockAutomation, 0);
+
+    expect(mockAutomation.conditions).toHaveLength(1);
+    expect(mockAutomation.actions).toHaveLength(1);
+    expect(mockAutomation.conditions[0].id).toBe(2);
+    expect(mockAutomation.actions[0].id).toBe(2);
+  });
+
+  it('resets filter and action correctly', () => {
+    const { resetFilter, resetAction } = useAutomation();
+    const mockAutomation = {
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'status',
+          filter_operator: 'equal_to',
+          values: 'open',
+        },
+      ],
+      actions: [{ action_name: 'assign_agent', action_params: [1] }],
+    };
+    const mockAutomationTypes = {
+      message_created: {
+        conditions: [
+          { key: 'status', filterOperators: [{ value: 'not_equal_to' }] },
+        ],
+      },
+    };
+
+    resetFilter(
+      mockAutomation,
+      mockAutomationTypes,
+      0,
+      mockAutomation.conditions[0]
+    );
+    resetAction(mockAutomation, 0);
+
+    expect(mockAutomation.conditions[0].filter_operator).toBe('not_equal_to');
+    expect(mockAutomation.conditions[0].values).toBe('');
+    expect(mockAutomation.actions[0].action_params).toEqual([]);
+  });
+
+  it('formats automation correctly', () => {
+    const { formatAutomation } = useAutomation();
+    const mockAutomation = {
+      conditions: [{ attribute_key: 'status', values: ['open'] }],
+      actions: [{ action_name: 'assign_agent', action_params: [1] }],
+    };
+    const mockAutomationTypes = {};
+    const mockAutomationActionTypes = [
+      { key: 'assign_agent', inputType: 'search_select' },
+    ];
+
+    automationHelper.getConditionOptions.mockReturnValue([
+      { id: 'open', name: 'open' },
+    ]);
+    automationHelper.getActionOptions.mockReturnValue([
+      { id: 1, name: 'Agent 1' },
+    ]);
+
+    const result = formatAutomation(
+      mockAutomation,
+      customAttributes,
+      mockAutomationTypes,
+      mockAutomationActionTypes
+    );
+
+    expect(result.conditions[0].values).toEqual([{ id: 'open', name: 'open' }]);
+    expect(result.actions[0].action_params).toEqual([
+      { id: 1, name: 'Agent 1' },
+    ]);
+  });
+
+  it('manifests custom attributes correctly', () => {
+    const { manifestCustomAttributes } = useAutomation();
+    const mockAutomationTypes = {
+      message_created: { conditions: [] },
+      conversation_created: { conditions: [] },
+      conversation_updated: { conditions: [] },
+      conversation_opened: { conditions: [] },
+    };
+
+    automationHelper.generateCustomAttributeTypes.mockReturnValue([]);
+    automationHelper.generateCustomAttributes.mockReturnValue([]);
+
+    manifestCustomAttributes(mockAutomationTypes);
+
+    expect(automationHelper.generateCustomAttributeTypes).toHaveBeenCalledTimes(
+      2
+    );
+    expect(automationHelper.generateCustomAttributes).toHaveBeenCalledTimes(1);
+    Object.values(mockAutomationTypes).forEach(type => {
+      expect(type.conditions).toHaveLength(0);
+    });
+  });
+
+  it('gets condition dropdown values correctly', () => {
+    const { getConditionDropdownValues } = useAutomation();
+
+    expect(getConditionDropdownValues('status')).toEqual(statusFilterOptions);
+    expect(getConditionDropdownValues('team_id')).toEqual(teams);
+    expect(getConditionDropdownValues('assignee_id')).toEqual(agents);
+    expect(getConditionDropdownValues('contact')).toEqual(contacts);
+    expect(getConditionDropdownValues('inbox_id')).toEqual(inboxes);
+    expect(getConditionDropdownValues('campaigns')).toEqual(campaigns);
+    expect(getConditionDropdownValues('browser_language')).toEqual(languages);
+    expect(getConditionDropdownValues('country_code')).toEqual(countries);
+    expect(getConditionDropdownValues('message_type')).toEqual(
+      MESSAGE_CONDITION_VALUES
+    );
+  });
+
+  it('gets action dropdown values correctly', () => {
+    const { getActionDropdownValues } = useAutomation();
+
+    expect(getActionDropdownValues('add_label')).toEqual(labels);
+    expect(getActionDropdownValues('assign_team')).toEqual(teams);
+    expect(getActionDropdownValues('assign_agent')).toEqual(agents);
+    expect(getActionDropdownValues('send_email_to_team')).toEqual(teams);
+    expect(getActionDropdownValues('send_message')).toEqual([]);
+    expect(getActionDropdownValues('add_sla')).toEqual(slaPolicies);
+  });
+
+  it('handles event change correctly', () => {
+    const { onEventChange } = useAutomation();
+    const mockAutomation = {
+      event_name: 'message_created',
+      conditions: [],
+      actions: [],
+    };
+
+    automationHelper.getDefaultConditions.mockReturnValue([{}]);
+    automationHelper.getDefaultActions.mockReturnValue([{}]);
+
+    onEventChange(mockAutomation);
+
+    expect(automationHelper.getDefaultConditions).toHaveBeenCalledWith(
+      'message_created'
+    );
+    expect(automationHelper.getDefaultActions).toHaveBeenCalled();
+    expect(mockAutomation.conditions).toHaveLength(1);
+    expect(mockAutomation.actions).toHaveLength(1);
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useIntegrationHook.spec.js b/app/javascript/dashboard/composables/spec/useIntegrationHook.spec.js
new file mode 100644
index 0000000000000..1837cf1dde97d
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useIntegrationHook.spec.js
@@ -0,0 +1,56 @@
+import { useIntegrationHook } from '../useIntegrationHook';
+import { useMapGetter } from 'dashboard/composables/store';
+import { nextTick } from 'vue';
+
+vi.mock('dashboard/composables/store');
+
+describe('useIntegrationHook', () => {
+  let integrationGetter;
+
+  beforeEach(() => {
+    integrationGetter = vi.fn();
+    useMapGetter.mockReturnValue({ value: integrationGetter });
+  });
+
+  it('should return the correct computed properties', async () => {
+    const mockIntegration = {
+      id: 1,
+      hook_type: 'inbox',
+      hooks: ['hook1', 'hook2'],
+      allow_multiple_hooks: true,
+    };
+    integrationGetter.mockReturnValue(mockIntegration);
+
+    const hook = useIntegrationHook(1);
+
+    await nextTick();
+
+    expect(hook.integration.value).toEqual(mockIntegration);
+    expect(hook.integrationType.value).toBe('multiple');
+    expect(hook.isIntegrationMultiple.value).toBe(true);
+    expect(hook.isIntegrationSingle.value).toBe(false);
+    expect(hook.isHookTypeInbox.value).toBe(true);
+    expect(hook.hasConnectedHooks.value).toBe(true);
+  });
+
+  it('should handle single integration type correctly', async () => {
+    const mockIntegration = {
+      id: 2,
+      hook_type: 'channel',
+      hooks: [],
+      allow_multiple_hooks: false,
+    };
+    integrationGetter.mockReturnValue(mockIntegration);
+
+    const hook = useIntegrationHook(2);
+
+    await nextTick();
+
+    expect(hook.integration.value).toEqual(mockIntegration);
+    expect(hook.integrationType.value).toBe('single');
+    expect(hook.isIntegrationMultiple.value).toBe(false);
+    expect(hook.isIntegrationSingle.value).toBe(true);
+    expect(hook.isHookTypeInbox.value).toBe(false);
+    expect(hook.hasConnectedHooks.value).toBe(false);
+  });
+});
diff --git a/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js b/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js
index 095c0a43c3517..d20babeaa1e1c 100644
--- a/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js
+++ b/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js
@@ -1,4 +1,3 @@
-import { unref } from 'vue';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 
 describe('useKeyboardEvents', () => {
@@ -11,15 +10,13 @@ describe('useKeyboardEvents', () => {
   });
 
   it('should set up listeners on mount and remove them on unmount', async () => {
-    const el = document.createElement('div');
-    const elRef = unref({ value: el });
     const events = {
       'ALT+KeyL': () => {},
     };
 
     const mountedMock = vi.fn();
     const unmountedMock = vi.fn();
-    useKeyboardEvents(events, elRef);
+    useKeyboardEvents(events);
     mountedMock();
     unmountedMock();
 
diff --git a/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js b/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js
index 4968bdafeef74..310040912389c 100644
--- a/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js
+++ b/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js
@@ -9,7 +9,6 @@ vi.mock('../useKeyboardEvents', () => ({
 }));
 
 describe('useKeyboardNavigableList', () => {
-  let elementRef;
   let items;
   let onSelect;
   let adjustScroll;
@@ -18,7 +17,6 @@ describe('useKeyboardNavigableList', () => {
   const createMockEvent = () => ({ preventDefault: vi.fn() });
 
   beforeEach(() => {
-    elementRef = ref(null);
     items = ref(['item1', 'item2', 'item3']);
     onSelect = vi.fn();
     adjustScroll = vi.fn();
@@ -28,7 +26,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should return moveSelectionUp and moveSelectionDown functions', () => {
     const result = useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -43,7 +40,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should move selection up correctly', () => {
     const { moveSelectionUp } = useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -65,7 +61,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should move selection down correctly', () => {
     const { moveSelectionDown } = useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -87,7 +82,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should call adjustScroll after moving selection', () => {
     const { moveSelectionUp, moveSelectionDown } = useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -103,7 +97,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should include Enter key handler when onSelect is provided', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -118,7 +111,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should not include Enter key handler when onSelect is not provided', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       adjustScroll,
       selectedIndex,
@@ -131,7 +123,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should not trigger onSelect when items are empty', () => {
     const { moveSelectionUp, moveSelectionDown } = useKeyboardNavigableList({
-      elementRef,
       items: ref([]),
       onSelect,
       adjustScroll,
@@ -145,23 +136,18 @@ describe('useKeyboardNavigableList', () => {
 
   it('should call useKeyboardEvents with correct parameters', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
       selectedIndex,
     });
 
-    expect(useKeyboardEvents).toHaveBeenCalledWith(
-      expect.any(Object),
-      elementRef
-    );
+    expect(useKeyboardEvents).toHaveBeenCalledWith(expect.any(Object));
   });
 
   // Keyboard event handlers
   it('should handle ArrowUp key', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -178,7 +164,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should handle Control+KeyP', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -195,7 +180,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should handle ArrowDown key', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -212,7 +196,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should handle Control+KeyN', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -229,7 +212,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should handle Enter key when onSelect is provided', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -245,7 +227,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should not have Enter key handler when onSelect is not provided', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       adjustScroll,
       selectedIndex,
@@ -257,7 +238,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should set allowOnFocusedInput to true for all key handlers', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
diff --git a/app/javascript/dashboard/composables/spec/useMacros.spec.js b/app/javascript/dashboard/composables/spec/useMacros.spec.js
index d268547a56a44..a72d2ddfe936f 100644
--- a/app/javascript/dashboard/composables/spec/useMacros.spec.js
+++ b/app/javascript/dashboard/composables/spec/useMacros.spec.js
@@ -1,7 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { useMacros } from '../useMacros';
 import { useStoreGetters } from 'dashboard/composables/store';
-import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
+import { PRIORITY_CONDITION_VALUES } from 'dashboard/constants/automation';
 
 vi.mock('dashboard/composables/store');
 vi.mock('dashboard/helper/automationHelper.js');
diff --git a/app/javascript/dashboard/composables/spec/useReportMetrics.spec.js b/app/javascript/dashboard/composables/spec/useReportMetrics.spec.js
new file mode 100644
index 0000000000000..194f07e75908e
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useReportMetrics.spec.js
@@ -0,0 +1,61 @@
+import { ref } from 'vue';
+import { useReportMetrics } from '../useReportMetrics';
+import { useMapGetter } from 'dashboard/composables/store';
+import { summary, botSummary } from './fixtures/reportFixtures';
+
+vi.mock('dashboard/composables/store');
+vi.mock('@chatwoot/utils', () => ({
+  formatTime: vi.fn(time => `formatted_${time}`),
+}));
+
+describe('useReportMetrics', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useMapGetter.mockReturnValue(ref(summary));
+  });
+
+  it('calculates trend correctly', () => {
+    const { calculateTrend } = useReportMetrics();
+
+    expect(calculateTrend('conversations_count')).toBe(124900);
+    expect(calculateTrend('incoming_messages_count')).toBe(0);
+    expect(calculateTrend('avg_first_response_time')).toBe(123);
+  });
+
+  it('returns 0 for trend when previous value is not available', () => {
+    const { calculateTrend } = useReportMetrics();
+
+    expect(calculateTrend('non_existent_key')).toBe(0);
+  });
+
+  it('identifies average metric types correctly', () => {
+    const { isAverageMetricType } = useReportMetrics();
+
+    expect(isAverageMetricType('avg_first_response_time')).toBe(true);
+    expect(isAverageMetricType('avg_resolution_time')).toBe(true);
+    expect(isAverageMetricType('reply_time')).toBe(true);
+    expect(isAverageMetricType('conversations_count')).toBe(false);
+  });
+
+  it('displays metrics correctly for account', () => {
+    const { displayMetric } = useReportMetrics();
+
+    expect(displayMetric('conversations_count')).toBe('5,000');
+    expect(displayMetric('incoming_messages_count')).toBe('5');
+  });
+
+  it('displays the metric for bot', () => {
+    const customKey = 'getBotSummary';
+    useMapGetter.mockReturnValue(ref(botSummary));
+    const { displayMetric } = useReportMetrics(customKey);
+
+    expect(displayMetric('bot_resolutions_count')).toBe('10');
+    expect(displayMetric('bot_handoffs_count')).toBe('20');
+  });
+
+  it('handles non-existent metrics', () => {
+    const { displayMetric } = useReportMetrics();
+
+    expect(displayMetric('non_existent_key')).toBe('0');
+  });
+});
diff --git a/app/javascript/dashboard/composables/useAI.js b/app/javascript/dashboard/composables/useAI.js
new file mode 100644
index 0000000000000..5dc8ac588ad25
--- /dev/null
+++ b/app/javascript/dashboard/composables/useAI.js
@@ -0,0 +1,204 @@
+import { computed, onMounted } from 'vue';
+import {
+  useStore,
+  useStoreGetters,
+  useMapGetter,
+} from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useI18n } from './useI18n';
+import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import OpenAPI from 'dashboard/api/integrations/openapi';
+
+/**
+ * Cleans and normalizes a list of labels.
+ * @param {string} labels - A comma-separated string of labels.
+ * @returns {string[]} An array of cleaned and unique labels.
+ */
+const cleanLabels = labels => {
+  return labels
+    .toLowerCase() // Set it to lowercase
+    .split(',') // split the string into an array
+    .filter(label => label.trim()) // remove any empty strings
+    .map(label => label.trim()) // trim the words
+    .filter((label, index, self) => self.indexOf(label) === index);
+};
+
+/**
+ * A composable function for AI-related operations in the dashboard.
+ * @returns {Object} An object containing AI-related methods and computed properties.
+ */
+export function useAI() {
+  const store = useStore();
+  const getters = useStoreGetters();
+  const track = useTrack();
+  const { t } = useI18n();
+
+  /**
+   * Computed property for UI flags.
+   * @type {import('vue').ComputedRef<Object>}
+   */
+  const uiFlags = computed(() => getters['integrations/getUIFlags'].value);
+
+  const appIntegrations = useMapGetter('integrations/getAppIntegrations');
+  const currentChat = useMapGetter('getSelectedChat');
+  const replyMode = useMapGetter('draftMessages/getReplyEditorMode');
+
+  /**
+   * Computed property for the AI integration.
+   * @type {import('vue').ComputedRef<Object|undefined>}
+   */
+  const aiIntegration = computed(
+    () =>
+      appIntegrations.value.find(
+        integration => integration.id === 'openai' && !!integration.hooks.length
+      )?.hooks[0]
+  );
+
+  /**
+   * Computed property to check if AI integration is enabled.
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const isAIIntegrationEnabled = computed(() => !!aiIntegration.value);
+
+  /**
+   * Computed property to check if label suggestion feature is enabled.
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const isLabelSuggestionFeatureEnabled = computed(() => {
+    if (aiIntegration.value) {
+      const { settings = {} } = aiIntegration.value || {};
+      return settings.label_suggestion;
+    }
+    return false;
+  });
+
+  /**
+   * Computed property to check if app integrations are being fetched.
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const isFetchingAppIntegrations = computed(() => uiFlags.value.isFetching);
+
+  /**
+   * Computed property for the hook ID.
+   * @type {import('vue').ComputedRef<string|undefined>}
+   */
+  const hookId = computed(() => aiIntegration.value?.id);
+
+  /**
+   * Computed property for the conversation ID.
+   * @type {import('vue').ComputedRef<string|undefined>}
+   */
+  const conversationId = computed(() => currentChat.value?.id);
+
+  /**
+   * Computed property for the draft key.
+   * @type {import('vue').ComputedRef<string>}
+   */
+  const draftKey = computed(
+    () => `draft-${conversationId.value}-${replyMode.value}`
+  );
+
+  /**
+   * Computed property for the draft message.
+   * @type {import('vue').ComputedRef<string>}
+   */
+  const draftMessage = computed(() =>
+    getters['draftMessages/get'].value(draftKey.value)
+  );
+
+  /**
+   * Fetches integrations if they haven't been loaded yet.
+   * @returns {Promise<void>}
+   */
+  const fetchIntegrationsIfRequired = async () => {
+    if (!appIntegrations.value.length) {
+      await store.dispatch('integrations/get');
+    }
+  };
+
+  /**
+   * Records analytics for AI-related events.
+   * @param {string} type - The type of event.
+   * @param {Object} payload - Additional data for the event.
+   * @returns {Promise<void>}
+   */
+  const recordAnalytics = async (type, payload) => {
+    const event = OPEN_AI_EVENTS[type.toUpperCase()];
+    if (event) {
+      track(event, {
+        type,
+        ...payload,
+      });
+    }
+  };
+
+  /**
+   * Fetches label suggestions for the current conversation.
+   * @returns {Promise<string[]>} An array of suggested labels.
+   */
+  const fetchLabelSuggestions = async () => {
+    if (!conversationId.value) return [];
+
+    try {
+      const result = await OpenAPI.processEvent({
+        type: 'label_suggestion',
+        hookId: hookId.value,
+        conversationId: conversationId.value,
+      });
+
+      const {
+        data: { message: labels },
+      } = result;
+
+      return cleanLabels(labels);
+    } catch {
+      return [];
+    }
+  };
+
+  /**
+   * Processes an AI event, such as rephrasing content.
+   * @param {string} [type='rephrase'] - The type of AI event to process.
+   * @returns {Promise<string>} The generated message or an empty string if an error occurs.
+   */
+  const processEvent = async (type = 'rephrase') => {
+    try {
+      const result = await OpenAPI.processEvent({
+        hookId: hookId.value,
+        type,
+        content: draftMessage.value,
+        conversationId: conversationId.value,
+      });
+      const {
+        data: { message: generatedMessage },
+      } = result;
+      return generatedMessage;
+    } catch (error) {
+      const errorData = error.response.data.error;
+      const errorMessage =
+        errorData?.error?.message ||
+        t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR');
+      useAlert(errorMessage);
+      return '';
+    }
+  };
+
+  onMounted(() => {
+    fetchIntegrationsIfRequired();
+  });
+
+  return {
+    draftMessage,
+    uiFlags,
+    appIntegrations,
+    currentChat,
+    replyMode,
+    isAIIntegrationEnabled,
+    isLabelSuggestionFeatureEnabled,
+    isFetchingAppIntegrations,
+    fetchIntegrationsIfRequired,
+    recordAnalytics,
+    fetchLabelSuggestions,
+    processEvent,
+  };
+}
diff --git a/app/javascript/dashboard/composables/useAgentsList.js b/app/javascript/dashboard/composables/useAgentsList.js
new file mode 100644
index 0000000000000..b22493bd17a4b
--- /dev/null
+++ b/app/javascript/dashboard/composables/useAgentsList.js
@@ -0,0 +1,57 @@
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import {
+  getAgentsByUpdatedPresence,
+  getSortedAgentsByAvailability,
+  getCombinedAgents,
+} from 'dashboard/helper/agentHelper';
+
+/**
+ * A composable function that provides a list of agents for assignment.
+ *
+ * @param {boolean} [includeNoneAgent=true] - Whether to include a 'None' agent option.
+ * @returns {Object} An object containing the agents list and assignable agents.
+ */
+export function useAgentsList(includeNoneAgent = true) {
+  const currentUser = useMapGetter('getCurrentUser');
+  const currentChat = useMapGetter('getSelectedChat');
+  const currentAccountId = useMapGetter('getCurrentAccountId');
+  const assignable = useMapGetter('inboxAssignableAgents/getAssignableAgents');
+
+  const inboxId = computed(() => currentChat.value?.inbox_id);
+  const isAgentSelected = computed(() => currentChat.value?.meta?.assignee);
+
+  /**
+   * @type {import('vue').ComputedRef<Array>}
+   */
+  const assignableAgents = computed(() => {
+    return inboxId.value ? assignable.value(inboxId.value) : [];
+  });
+
+  /**
+   * @type {import('vue').ComputedRef<Array>}
+   */
+  const agentsList = computed(() => {
+    const agents = assignableAgents.value || [];
+    const agentsByUpdatedPresence = getAgentsByUpdatedPresence(
+      agents,
+      currentUser.value,
+      currentAccountId.value
+    );
+
+    const filteredAgentsByAvailability = getSortedAgentsByAvailability(
+      agentsByUpdatedPresence
+    );
+
+    return getCombinedAgents(
+      filteredAgentsByAvailability,
+      includeNoneAgent,
+      isAgentSelected.value
+    );
+  });
+
+  return {
+    agentsList,
+    assignableAgents,
+  };
+}
diff --git a/app/javascript/dashboard/composables/useAutomation.js b/app/javascript/dashboard/composables/useAutomation.js
new file mode 100644
index 0000000000000..986a47ec78764
--- /dev/null
+++ b/app/javascript/dashboard/composables/useAutomation.js
@@ -0,0 +1,349 @@
+import { computed } from 'vue';
+import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from './useI18n';
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import countries from 'shared/constants/countries';
+import {
+  generateCustomAttributeTypes,
+  getActionOptions,
+  getConditionOptions,
+  getCustomAttributeInputType,
+  getDefaultConditions,
+  getDefaultActions,
+  filterCustomAttributes,
+  getStandardAttributeInputType,
+  isCustomAttribute,
+  generateCustomAttributes,
+} from 'dashboard/helper/automationHelper';
+
+/**
+ * Composable for handling automation-related functionality.
+ * @returns {Object} An object containing various automation-related functions and computed properties.
+ */
+export function useAutomation() {
+  const getters = useStoreGetters();
+  const { t } = useI18n();
+
+  const agents = useMapGetter('agents/getAgents');
+  const campaigns = useMapGetter('campaigns/getAllCampaigns');
+  const contacts = useMapGetter('contacts/getContacts');
+  const inboxes = useMapGetter('inboxes/getInboxes');
+  const labels = useMapGetter('labels/getLabels');
+  const teams = useMapGetter('teams/getTeams');
+  const slaPolicies = useMapGetter('sla/getSLA');
+
+  const booleanFilterOptions = computed(() => [
+    { id: true, name: t('FILTER.ATTRIBUTE_LABELS.TRUE') },
+    { id: false, name: t('FILTER.ATTRIBUTE_LABELS.FALSE') },
+  ]);
+
+  const statusFilterOptions = computed(() => {
+    const statusFilters = t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
+    return [
+      ...Object.keys(statusFilters).map(status => ({
+        id: status,
+        name: statusFilters[status].TEXT,
+      })),
+      { id: 'all', name: t('CHAT_LIST.FILTER_ALL') },
+    ];
+  });
+
+  /**
+   * Handles the event change for an automation.
+   * @param {Object} automation - The automation object to update.
+   */
+  const onEventChange = automation => {
+    automation.conditions = getDefaultConditions(automation.event_name);
+    automation.actions = getDefaultActions();
+  };
+
+  /**
+   * Gets the condition dropdown values for a given type.
+   * @param {string} type - The type of condition.
+   * @returns {Array} An array of condition dropdown values.
+   */
+  const getConditionDropdownValues = type => {
+    return getConditionOptions({
+      agents: agents.value,
+      booleanFilterOptions: booleanFilterOptions.value,
+      campaigns: campaigns.value,
+      contacts: contacts.value,
+      customAttributes: getters['attributes/getAttributes'].value,
+      inboxes: inboxes.value,
+      statusFilterOptions: statusFilterOptions.value,
+      teams: teams.value,
+      languages,
+      countries,
+      type,
+    });
+  };
+
+  /**
+   * Appends a new condition to the automation.
+   * @param {Object} automation - The automation object to update.
+   */
+  const appendNewCondition = automation => {
+    automation.conditions.push(...getDefaultConditions(automation.event_name));
+  };
+
+  /**
+   * Appends a new action to the automation.
+   * @param {Object} automation - The automation object to update.
+   */
+  const appendNewAction = automation => {
+    automation.actions.push(...getDefaultActions());
+  };
+
+  /**
+   * Removes a filter from the automation.
+   * @param {Object} automation - The automation object to update.
+   * @param {number} index - The index of the filter to remove.
+   */
+  const removeFilter = (automation, index) => {
+    if (automation.conditions.length <= 1) {
+      useAlert(t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
+    } else {
+      automation.conditions.splice(index, 1);
+    }
+  };
+
+  /**
+   * Removes an action from the automation.
+   * @param {Object} automation - The automation object to update.
+   * @param {number} index - The index of the action to remove.
+   */
+  const removeAction = (automation, index) => {
+    if (automation.actions.length <= 1) {
+      useAlert(t('AUTOMATION.ACTION.DELETE_MESSAGE'));
+    } else {
+      automation.actions.splice(index, 1);
+    }
+  };
+
+  /**
+   * Resets a filter in the automation.
+   * @param {Object} automation - The automation object to update.
+   * @param {Object} automationTypes - The automation types object.
+   * @param {number} index - The index of the filter to reset.
+   * @param {Object} currentCondition - The current condition object.
+   */
+  const resetFilter = (
+    automation,
+    automationTypes,
+    index,
+    currentCondition
+  ) => {
+    automation.conditions[index].filter_operator = automationTypes[
+      automation.event_name
+    ].conditions.find(
+      condition => condition.key === currentCondition.attribute_key
+    ).filterOperators[0].value;
+    automation.conditions[index].values = '';
+  };
+
+  /**
+   * Resets an action in the automation.
+   * @param {Object} automation - The automation object to update.
+   * @param {number} index - The index of the action to reset.
+   */
+  const resetAction = (automation, index) => {
+    automation.actions[index].action_params = [];
+  };
+
+  /**
+   * This function sets the conditions for automation.
+   * It help to format the conditions for the automation when we open the edit automation modal.
+   * @param {Object} automation - The automation object containing conditions to manifest.
+   * @param {Array} allCustomAttributes - List of all custom attributes.
+   * @param {Object} automationTypes - Object containing automation type definitions.
+   * @returns {Array} An array of manifested conditions.
+   */
+  const manifestConditions = (
+    automation,
+    allCustomAttributes,
+    automationTypes
+  ) => {
+    const customAttributes = filterCustomAttributes(allCustomAttributes);
+    return automation.conditions.map(condition => {
+      const customAttr = isCustomAttribute(
+        customAttributes,
+        condition.attribute_key
+      );
+      let inputType = 'plain_text';
+      if (customAttr) {
+        inputType = getCustomAttributeInputType(customAttr.type);
+      } else {
+        inputType = getStandardAttributeInputType(
+          automationTypes,
+          automation.event_name,
+          condition.attribute_key
+        );
+      }
+      if (inputType === 'plain_text' || inputType === 'date') {
+        return { ...condition, values: condition.values[0] };
+      }
+      if (inputType === 'comma_separated_plain_text') {
+        return { ...condition, values: condition.values.join(',') };
+      }
+      return {
+        ...condition,
+        query_operator: condition.query_operator || 'and',
+        values: [...getConditionDropdownValues(condition.attribute_key)].filter(
+          item => [...condition.values].includes(item.id)
+        ),
+      };
+    });
+  };
+
+  /**
+   * Gets the action dropdown values for a given type.
+   * @param {string} type - The type of action.
+   * @returns {Array} An array of action dropdown values.
+   */
+  const getActionDropdownValues = type => {
+    return getActionOptions({
+      agents: agents.value,
+      labels: labels.value,
+      teams: teams.value,
+      slaPolicies: slaPolicies.value,
+      languages,
+      type,
+    });
+  };
+
+  /**
+   * Generates an array of actions for the automation.
+   * @param {Object} action - The action object.
+   * @param {Array} automationActionTypes - List of available automation action types.
+   * @returns {Array|Object} Generated actions array or object based on input type.
+   */
+  const generateActionsArray = (action, automationActionTypes) => {
+    const params = action.action_params;
+    const inputType = automationActionTypes.find(
+      item => item.key === action.action_name
+    ).inputType;
+    if (inputType === 'multi_select' || inputType === 'search_select') {
+      return [...getActionDropdownValues(action.action_name)].filter(item =>
+        [...params].includes(item.id)
+      );
+    }
+    if (inputType === 'team_message') {
+      return {
+        team_ids: [...getActionDropdownValues(action.action_name)].filter(
+          item => [...params[0].team_ids].includes(item.id)
+        ),
+        message: params[0].message,
+      };
+    }
+    return [...params];
+  };
+
+  /**
+   * This function sets the actions for automation.
+   * It help to format the actions for the automation when we open the edit automation modal.
+   * @param {Object} automation - The automation object containing actions.
+   * @param {Array} automationActionTypes - List of available automation action types.
+   * @returns {Array} An array of manifested actions.
+   */
+  const manifestActions = (automation, automationActionTypes) => {
+    return automation.actions.map(action => ({
+      ...action,
+      action_params: action.action_params.length
+        ? generateActionsArray(action, automationActionTypes)
+        : [],
+    }));
+  };
+
+  /**
+   * Formats the automation object for use when we edit the automation.
+   * It help to format the conditions and actions for the automation when we open the edit automation modal.
+   * @param {Object} automation - The automation object to format.
+   * @param {Array} allCustomAttributes - List of all custom attributes.
+   * @param {Object} automationTypes - Object containing automation type definitions.
+   * @param {Array} automationActionTypes - List of available automation action types.
+   * @returns {Object} A new object with formatted automation data, including automation conditions and actions.
+   */
+  const formatAutomation = (
+    automation,
+    allCustomAttributes,
+    automationTypes,
+    automationActionTypes
+  ) => {
+    return {
+      ...automation,
+      conditions: manifestConditions(
+        automation,
+        allCustomAttributes,
+        automationTypes
+      ),
+      actions: manifestActions(automation, automationActionTypes),
+    };
+  };
+
+  /**
+   * This function formats the custom attributes for automation types.
+   * It retrieves custom attributes for conversations and contacts,
+   * generates custom attribute types, and adds them to the relevant automation types.
+   * @param {Object} automationTypes - The automation types object to update with custom attributes.
+   */
+  const manifestCustomAttributes = automationTypes => {
+    const conversationCustomAttributesRaw = getters[
+      'attributes/getAttributesByModel'
+    ].value('conversation_attribute');
+    const contactCustomAttributesRaw =
+      getters['attributes/getAttributesByModel'].value('contact_attribute');
+
+    const conversationCustomAttributeTypes = generateCustomAttributeTypes(
+      conversationCustomAttributesRaw,
+      'conversation_attribute'
+    );
+    const contactCustomAttributeTypes = generateCustomAttributeTypes(
+      contactCustomAttributesRaw,
+      'contact_attribute'
+    );
+
+    const manifestedCustomAttributes = generateCustomAttributes(
+      conversationCustomAttributeTypes,
+      contactCustomAttributeTypes,
+      t('AUTOMATION.CONDITION.CONVERSATION_CUSTOM_ATTR_LABEL'),
+      t('AUTOMATION.CONDITION.CONTACT_CUSTOM_ATTR_LABEL')
+    );
+
+    automationTypes.message_created.conditions.push(
+      ...manifestedCustomAttributes
+    );
+    automationTypes.conversation_created.conditions.push(
+      ...manifestedCustomAttributes
+    );
+    automationTypes.conversation_updated.conditions.push(
+      ...manifestedCustomAttributes
+    );
+    automationTypes.conversation_opened.conditions.push(
+      ...manifestedCustomAttributes
+    );
+  };
+
+  return {
+    agents,
+    campaigns,
+    contacts,
+    inboxes,
+    labels,
+    teams,
+    slaPolicies,
+    booleanFilterOptions,
+    statusFilterOptions,
+    onEventChange,
+    getConditionDropdownValues,
+    appendNewCondition,
+    appendNewAction,
+    removeFilter,
+    removeAction,
+    resetFilter,
+    resetAction,
+    formatAutomation,
+    getActionDropdownValues,
+    manifestCustomAttributes,
+  };
+}
diff --git a/app/javascript/dashboard/composables/useIntegrationHook.js b/app/javascript/dashboard/composables/useIntegrationHook.js
new file mode 100644
index 0000000000000..42546ccebd0d9
--- /dev/null
+++ b/app/javascript/dashboard/composables/useIntegrationHook.js
@@ -0,0 +1,68 @@
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+/**
+ * Composable for managing integration hooks
+ * @param {string|number} integrationId - The ID of the integration
+ * @returns {Object} An object containing computed properties for the integration
+ */
+export const useIntegrationHook = integrationId => {
+  const integrationGetter = useMapGetter('integrations/getIntegration');
+
+  /**
+   * The integration object
+   * @type {import('vue').ComputedRef<Object>}
+   */
+  const integration = computed(() => {
+    return integrationGetter.value(integrationId);
+  });
+
+  /**
+   * Whether the integration hook type is 'inbox'
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const isHookTypeInbox = computed(() => {
+    return integration.value.hook_type === 'inbox';
+  });
+
+  /**
+   * Whether the integration has any connected hooks
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const hasConnectedHooks = computed(() => {
+    return !!integration.value.hooks.length;
+  });
+
+  /**
+   * The type of integration: 'multiple' or 'single'
+   * @type {import('vue').ComputedRef<string>}
+   */
+  const integrationType = computed(() => {
+    return integration.value.allow_multiple_hooks ? 'multiple' : 'single';
+  });
+
+  /**
+   * Whether the integration allows multiple hooks
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const isIntegrationMultiple = computed(() => {
+    return integrationType.value === 'multiple';
+  });
+
+  /**
+   * Whether the integration allows only a single hook
+   * @type {import('vue').ComputedRef<boolean>}
+   */
+  const isIntegrationSingle = computed(() => {
+    return integrationType.value === 'single';
+  });
+
+  return {
+    integration,
+    integrationType,
+    isIntegrationMultiple,
+    isIntegrationSingle,
+    isHookTypeInbox,
+    hasConnectedHooks,
+  };
+};
diff --git a/app/javascript/dashboard/composables/useKeyboardEvents.js b/app/javascript/dashboard/composables/useKeyboardEvents.js
index 388b1b8b4f47e..8abee25773059 100644
--- a/app/javascript/dashboard/composables/useKeyboardEvents.js
+++ b/app/javascript/dashboard/composables/useKeyboardEvents.js
@@ -1,4 +1,3 @@
-import { onMounted, onBeforeUnmount, unref } from 'vue';
 import {
   isActiveElementTypeable,
   isEscape,
@@ -7,8 +6,7 @@ import {
 } from 'shared/helpers/KeyboardHelpers';
 import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
 import { createKeybindingsHandler } from 'tinykeys';
-
-const keyboardListenerMap = new WeakMap();
+import { onUnmounted, onMounted } from 'vue';
 
 /**
  * Determines if the keyboard event should be ignored based on the element type and handler settings.
@@ -69,49 +67,24 @@ async function wrapEventsInKeybindingsHandler(events) {
   return wrappedEvents;
 }
 
-/**
- * Sets up keyboard event listeners on the specified element.
- * @param {Element} root - The DOM element to attach listeners to.
- * @param {Object} events - The events to listen for.
- */
-const setupListeners = (root, events) => {
-  if (root instanceof Element && events) {
-    const keydownHandler = createKeybindingsHandler(events);
-    document.addEventListener('keydown', keydownHandler);
-    keyboardListenerMap.set(root, keydownHandler);
-  }
-};
-
-/**
- * Removes keyboard event listeners from the specified element.
- * @param {Element} root - The DOM element to remove listeners from.
- */
-const removeListeners = root => {
-  // In the future, let's use the abort controller to remove the listeners
-  // https://caniuse.com/abortcontroller
-  if (root instanceof Element) {
-    const handlerToRemove = keyboardListenerMap.get(root);
-    document.removeEventListener('keydown', handlerToRemove);
-    keyboardListenerMap.delete(root);
-  }
-};
-
 /**
  * Vue composable to handle keyboard events with support for different keyboard layouts.
  * @param {Object} keyboardEvents - The keyboard events to handle.
- * @param {ref} elRef - A Vue ref to the element to attach the keyboard events to.
  */
-export function useKeyboardEvents(keyboardEvents, elRef = null) {
+export async function useKeyboardEvents(keyboardEvents) {
+  let abortController = new AbortController();
+
   onMounted(async () => {
-    const el = unref(elRef);
-    const getKeyboardEvents = () => keyboardEvents || null;
-    const events = getKeyboardEvents();
-    const wrappedEvents = await wrapEventsInKeybindingsHandler(events);
-    setupListeners(el, wrappedEvents);
+    if (!keyboardEvents) return;
+    const wrappedEvents = await wrapEventsInKeybindingsHandler(keyboardEvents);
+    const keydownHandler = createKeybindingsHandler(wrappedEvents);
+
+    document.addEventListener('keydown', keydownHandler, {
+      signal: abortController.signal,
+    });
   });
 
-  onBeforeUnmount(() => {
-    const el = unref(elRef);
-    removeListeners(el);
+  onUnmounted(() => {
+    abortController.abort();
   });
 }
diff --git a/app/javascript/dashboard/composables/useKeyboardNavigableList.js b/app/javascript/dashboard/composables/useKeyboardNavigableList.js
index c05d91fb6dbc6..9bf3eb8fffdcc 100644
--- a/app/javascript/dashboard/composables/useKeyboardNavigableList.js
+++ b/app/javascript/dashboard/composables/useKeyboardNavigableList.js
@@ -84,7 +84,6 @@ const updateSelectionIndex = (currentIndex, itemsLength, direction) => {
  * }} An object containing functions to move the selection up and down.
  */
 export function useKeyboardNavigableList({
-  elementRef,
   items,
   onSelect,
   adjustScroll,
@@ -109,7 +108,7 @@ export function useKeyboardNavigableList({
     items
   );
 
-  useKeyboardEvents(keyboardEvents, elementRef);
+  useKeyboardEvents(keyboardEvents);
 
   return {
     moveSelectionUp,
diff --git a/app/javascript/dashboard/composables/useMacros.js b/app/javascript/dashboard/composables/useMacros.js
index 6967331ea5f51..0489e2d1f846a 100644
--- a/app/javascript/dashboard/composables/useMacros.js
+++ b/app/javascript/dashboard/composables/useMacros.js
@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 import { useStoreGetters } from 'dashboard/composables/store';
-import { PRIORITY_CONDITION_VALUES } from 'dashboard/helper/automationHelper.js';
+import { PRIORITY_CONDITION_VALUES } from 'dashboard/constants/automation';
 
 /**
  * Composable for handling macro-related functionality
diff --git a/app/javascript/dashboard/composables/useReportMetrics.js b/app/javascript/dashboard/composables/useReportMetrics.js
new file mode 100644
index 0000000000000..37168e256c415
--- /dev/null
+++ b/app/javascript/dashboard/composables/useReportMetrics.js
@@ -0,0 +1,57 @@
+import { useMapGetter } from 'dashboard/composables/store';
+import { formatTime } from '@chatwoot/utils';
+
+/**
+ * A composable function for report metrics calculations and display.
+ *
+ * @param {string} [accountSummaryKey='getAccountSummary'] - The key for accessing account summary data.
+ * @returns {Object} An object containing utility functions for report metrics.
+ */
+export function useReportMetrics(accountSummaryKey = 'getAccountSummary') {
+  const accountSummary = useMapGetter(accountSummaryKey);
+
+  /**
+   * Calculates the trend percentage for a given metric.
+   *
+   * @param {string} key - The key of the metric to calculate trend for.
+   * @returns {number} The calculated trend percentage, rounded to the nearest integer.
+   */
+  const calculateTrend = key => {
+    if (!accountSummary.value.previous[key]) return 0;
+    const diff = accountSummary.value[key] - accountSummary.value.previous[key];
+    return Math.round((diff / accountSummary.value.previous[key]) * 100);
+  };
+
+  /**
+   * Checks if a given metric key represents an average metric type.
+   *
+   * @param {string} key - The key of the metric to check.
+   * @returns {boolean} True if the metric is an average type, false otherwise.
+   */
+  const isAverageMetricType = key => {
+    return [
+      'avg_first_response_time',
+      'avg_resolution_time',
+      'reply_time',
+    ].includes(key);
+  };
+
+  /**
+   * Formats and displays a metric value based on its type.
+   *
+   * @param {string} key - The key of the metric to display.
+   * @returns {string} The formatted metric value as a string.
+   */
+  const displayMetric = key => {
+    if (isAverageMetricType(key)) {
+      return formatTime(accountSummary.value[key]);
+    }
+    return Number(accountSummary.value[key] || '').toLocaleString();
+  };
+
+  return {
+    calculateTrend,
+    isAverageMetricType,
+    displayMetric,
+  };
+}
diff --git a/app/javascript/dashboard/constants/automation.js b/app/javascript/dashboard/constants/automation.js
new file mode 100644
index 0000000000000..3aa9754d5f0ae
--- /dev/null
+++ b/app/javascript/dashboard/constants/automation.js
@@ -0,0 +1,70 @@
+export const DEFAULT_MESSAGE_CREATED_CONDITION = [
+  {
+    attribute_key: 'message_type',
+    filter_operator: 'equal_to',
+    values: '',
+    query_operator: 'and',
+    custom_attribute_type: '',
+  },
+];
+
+export const DEFAULT_CONVERSATION_OPENED_CONDITION = [
+  {
+    attribute_key: 'browser_language',
+    filter_operator: 'equal_to',
+    values: '',
+    query_operator: 'and',
+    custom_attribute_type: '',
+  },
+];
+
+export const DEFAULT_OTHER_CONDITION = [
+  {
+    attribute_key: 'status',
+    filter_operator: 'equal_to',
+    values: '',
+    query_operator: 'and',
+    custom_attribute_type: '',
+  },
+];
+
+export const DEFAULT_ACTIONS = [
+  {
+    action_name: 'assign_agent',
+    action_params: [],
+  },
+];
+
+export const MESSAGE_CONDITION_VALUES = [
+  {
+    id: 'incoming',
+    name: 'Incoming Message',
+  },
+  {
+    id: 'outgoing',
+    name: 'Outgoing Message',
+  },
+];
+
+export const PRIORITY_CONDITION_VALUES = [
+  {
+    id: 'nil',
+    name: 'None',
+  },
+  {
+    id: 'low',
+    name: 'Low',
+  },
+  {
+    id: 'medium',
+    name: 'Medium',
+  },
+  {
+    id: 'high',
+    name: 'High',
+  },
+  {
+    id: 'urgent',
+    name: 'Urgent',
+  },
+];
diff --git a/app/javascript/dashboard/constants/permissions.js b/app/javascript/dashboard/constants/permissions.js
new file mode 100644
index 0000000000000..1ecbd9793cb5a
--- /dev/null
+++ b/app/javascript/dashboard/constants/permissions.js
@@ -0,0 +1,53 @@
+export const AVAILABLE_CUSTOM_ROLE_PERMISSIONS = [
+  'conversation_manage',
+  'conversation_unassigned_manage',
+  'conversation_participating_manage',
+  'contact_manage',
+  'report_manage',
+  'knowledge_base_manage',
+];
+
+export const ROLES = ['agent', 'administrator'];
+
+export const CONVERSATION_PERMISSIONS = [
+  'conversation_manage',
+  'conversation_unassigned_manage',
+  'conversation_participating_manage',
+];
+
+export const MANAGE_ALL_CONVERSATION_PERMISSIONS = 'conversation_manage';
+
+export const CONVERSATION_UNASSIGNED_PERMISSIONS =
+  'conversation_unassigned_manage';
+
+export const CONVERSATION_PARTICIPATING_PERMISSIONS =
+  'conversation_participating_manage';
+
+export const CONTACT_PERMISSIONS = 'contact_manage';
+
+export const REPORTS_PERMISSIONS = 'report_manage';
+
+export const PORTAL_PERMISSIONS = 'knowledge_base_manage';
+
+export const ASSIGNEE_TYPE_TAB_PERMISSIONS = {
+  me: {
+    count: 'mineCount',
+    permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+  },
+  unassigned: {
+    count: 'unAssignedCount',
+    permissions: [
+      ...ROLES,
+      MANAGE_ALL_CONVERSATION_PERMISSIONS,
+      CONVERSATION_UNASSIGNED_PERMISSIONS,
+    ],
+  },
+  all: {
+    count: 'allCount',
+    permissions: [
+      ...ROLES,
+      MANAGE_ALL_CONVERSATION_PERMISSIONS,
+      CONVERSATION_PARTICIPATING_PERMISSIONS,
+    ],
+  },
+};
diff --git a/app/javascript/dashboard/featureFlags.js b/app/javascript/dashboard/featureFlags.js
index 54b560ed7a164..73ea57f066ab5 100644
--- a/app/javascript/dashboard/featureFlags.js
+++ b/app/javascript/dashboard/featureFlags.js
@@ -16,7 +16,6 @@ export const FEATURE_FLAGS = {
   TEAM_MANAGEMENT: 'team_management',
   VOICE_RECORDER: 'voice_recorder',
   AUDIT_LOGS: 'audit_logs',
-  INSERT_ARTICLE_IN_REPLY: 'insert_article_in_reply',
   INBOX_VIEW: 'inbox_view',
   SLA: 'sla',
   RESPONSE_BOT: 'response_bot',
@@ -32,4 +31,5 @@ export const FEATURE_FLAGS = {
   IP_LOOKUP: 'ip_lookup',
   LINEAR: 'linear_integration',
   CAPTAIN: 'captain_integration',
+  CUSTOM_ROLES: 'custom_roles',
 };
diff --git a/app/javascript/dashboard/helper/AnalyticsHelper/events.js b/app/javascript/dashboard/helper/AnalyticsHelper/events.js
index 4b378c74aaa63..e20c4833018e8 100644
--- a/app/javascript/dashboard/helper/AnalyticsHelper/events.js
+++ b/app/javascript/dashboard/helper/AnalyticsHelper/events.js
@@ -5,6 +5,7 @@ export const CONVERSATION_EVENTS = Object.freeze({
   INSERTED_A_CANNED_RESPONSE: 'Inserted a canned response',
   TRANSLATE_A_MESSAGE: 'Translated a message',
   INSERTED_A_VARIABLE: 'Inserted a variable',
+  INSERTED_AN_EMOJI: 'Inserted an emoji',
   USED_MENTIONS: 'Used mentions',
   SEARCH_CONVERSATION: 'Searched conversations',
   APPLY_FILTER: 'Applied filters in the conversation list',
diff --git a/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js b/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
index d9899b374e9ff..cf437e187f6f1 100644
--- a/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
+++ b/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
@@ -5,6 +5,11 @@ import {
   getAlertAudio,
   initOnEvents,
 } from 'shared/helpers/AudioNotificationHelper';
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
+import { getUserPermissions } from 'dashboard/helper/permissionsHelper.js';
 
 const NOTIFICATION_TIME = 30000;
 
@@ -14,12 +19,13 @@ class DashboardAudioNotificationHelper {
     this.audioAlertType = 'none';
     this.playAlertOnlyWhenHidden = true;
     this.alertIfUnreadConversationExist = false;
+    this.currentUser = null;
     this.currentUserId = null;
     this.audioAlertTone = 'ding';
   }
 
   setInstanceValues = ({
-    currentUserId,
+    currentUser,
     alwaysPlayAudioAlert,
     alertIfUnreadConversationExist,
     audioAlertType,
@@ -28,7 +34,8 @@ class DashboardAudioNotificationHelper {
     this.audioAlertType = audioAlertType;
     this.playAlertOnlyWhenHidden = !alwaysPlayAudioAlert;
     this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
-    this.currentUserId = currentUserId;
+    this.currentUser = currentUser;
+    this.currentUserId = currentUser.id;
     this.audioAlertTone = audioAlertTone;
     initOnEvents.forEach(e => {
       document.addEventListener(e, this.onAudioListenEvent, false);
@@ -112,6 +119,20 @@ class DashboardAudioNotificationHelper {
     return message?.sender_id === this.currentUserId;
   };
 
+  isUserHasConversationPermission = () => {
+    const currentAccountId = window.WOOT.$store.getters.getCurrentAccountId;
+    // Get the user permissions for the current account
+    const userPermissions = getUserPermissions(
+      this.currentUser,
+      currentAccountId
+    );
+    // Check if the user has the required permissions
+    const hasRequiredPermission = [...ROLES, ...CONVERSATION_PERMISSIONS].some(
+      permission => userPermissions.includes(permission)
+    );
+    return hasRequiredPermission;
+  };
+
   shouldNotifyOnMessage = message => {
     if (this.audioAlertType === 'mine') {
       return this.isConversationAssignedToCurrentUser(message);
@@ -120,6 +141,11 @@ class DashboardAudioNotificationHelper {
   };
 
   onNewMessage = message => {
+    // If the user does not have the permission to view the conversation, then dismiss the alert
+    if (!this.isUserHasConversationPermission()) {
+      return;
+    }
+
     // If the message is sent by the current user or the
     // correct notification is not enabled, then dismiss the alert
     if (
diff --git a/app/javascript/dashboard/helper/agentHelper.js b/app/javascript/dashboard/helper/agentHelper.js
new file mode 100644
index 0000000000000..c32680561d9bb
--- /dev/null
+++ b/app/javascript/dashboard/helper/agentHelper.js
@@ -0,0 +1,83 @@
+/**
+ * Default agent object representing 'None'
+ * @type {Object}
+ */
+export const createNoneAgent = {
+  confirmed: true,
+  name: 'None',
+  id: 0,
+  role: 'agent',
+  account_id: 0,
+  email: 'None',
+};
+
+/**
+ * Filters and sorts agents by availability status
+ * @param {Array} agents - List of agents
+ * @param {string} availability - Availability status to filter by
+ * @returns {Array} Filtered and sorted list of agents
+ */
+export const getAgentsByAvailability = (agents, availability) => {
+  return agents
+    .filter(agent => agent.availability_status === availability)
+    .sort((a, b) => a.name.localeCompare(b.name));
+};
+
+/**
+ * Sorts agents by availability status: online, busy, then offline
+ * @param {Array} agents - List of agents
+ * @returns {Array} Sorted list of agents
+ */
+export const getSortedAgentsByAvailability = agents => {
+  const onlineAgents = getAgentsByAvailability(agents, 'online');
+  const busyAgents = getAgentsByAvailability(agents, 'busy');
+  const offlineAgents = getAgentsByAvailability(agents, 'offline');
+  const filteredAgents = [...onlineAgents, ...busyAgents, ...offlineAgents];
+  return filteredAgents;
+};
+
+/**
+ * Updates the availability status of the current user based on the current account
+ * @param {Array} agents - List of agents
+ * @param {Object} currentUser - Current user object
+ * @param {number} currentAccountId - ID of the current account
+ * @returns {Array} Updated list of agents with dynamic presence
+ */
+// Here we are updating the availability status of the current user dynamically
+// based on the current account availability status
+export const getAgentsByUpdatedPresence = (
+  agents,
+  currentUser,
+  currentAccountId
+) => {
+  const agentsWithDynamicPresenceUpdate = agents.map(item =>
+    item.id === currentUser.id
+      ? {
+          ...item,
+          availability_status: currentUser.accounts.find(
+            account => account.id === currentAccountId
+          ).availability_status,
+        }
+      : item
+  );
+  return agentsWithDynamicPresenceUpdate;
+};
+
+/**
+ * Combines the filtered agents with the 'None' agent option if applicable.
+ *
+ * @param {Array} filteredAgentsByAvailability - The list of agents sorted by availability.
+ * @param {boolean} includeNoneAgent - Whether to include the 'None' agent option.
+ * @param {boolean} isAgentSelected - Whether an agent is currently selected.
+ * @returns {Array} The combined list of agents, potentially including the 'None' agent.
+ */
+export const getCombinedAgents = (
+  filteredAgentsByAvailability,
+  includeNoneAgent,
+  isAgentSelected
+) => {
+  return [
+    ...(includeNoneAgent && isAgentSelected ? [createNoneAgent] : []),
+    ...filteredAgentsByAvailability,
+  ];
+};
diff --git a/app/javascript/dashboard/helper/automationHelper.js b/app/javascript/dashboard/helper/automationHelper.js
index 33e920edc11ea..6ff941822e102 100644
--- a/app/javascript/dashboard/helper/automationHelper.js
+++ b/app/javascript/dashboard/helper/automationHelper.js
@@ -3,41 +3,16 @@ import {
   OPERATOR_TYPES_3,
   OPERATOR_TYPES_4,
 } from 'dashboard/routes/dashboard/settings/automation/operators';
+import {
+  DEFAULT_MESSAGE_CREATED_CONDITION,
+  DEFAULT_CONVERSATION_OPENED_CONDITION,
+  DEFAULT_OTHER_CONDITION,
+  DEFAULT_ACTIONS,
+  MESSAGE_CONDITION_VALUES,
+  PRIORITY_CONDITION_VALUES,
+} from 'dashboard/constants/automation';
 import filterQueryGenerator from './filterQueryGenerator';
 import actionQueryGenerator from './actionQueryGenerator';
-const MESSAGE_CONDITION_VALUES = [
-  {
-    id: 'incoming',
-    name: 'Incoming Message',
-  },
-  {
-    id: 'outgoing',
-    name: 'Outgoing Message',
-  },
-];
-
-export const PRIORITY_CONDITION_VALUES = [
-  {
-    id: 'nil',
-    name: 'None',
-  },
-  {
-    id: 'low',
-    name: 'Low',
-  },
-  {
-    id: 'medium',
-    name: 'Medium',
-  },
-  {
-    id: 'high',
-    name: 'High',
-  },
-  {
-    id: 'urgent',
-    name: 'Urgent',
-  },
-];
 
 export const getCustomAttributeInputType = key => {
   const customAttributeMap = {
@@ -198,45 +173,16 @@ export const getFileName = (action, files = []) => {
 
 export const getDefaultConditions = eventName => {
   if (eventName === 'message_created') {
-    return [
-      {
-        attribute_key: 'message_type',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        custom_attribute_type: '',
-      },
-    ];
+    return DEFAULT_MESSAGE_CREATED_CONDITION;
   }
   if (eventName === 'conversation_opened') {
-    return [
-      {
-        attribute_key: 'browser_language',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        custom_attribute_type: '',
-      },
-    ];
+    return DEFAULT_CONVERSATION_OPENED_CONDITION;
   }
-  return [
-    {
-      attribute_key: 'status',
-      filter_operator: 'equal_to',
-      values: '',
-      query_operator: 'and',
-      custom_attribute_type: '',
-    },
-  ];
+  return DEFAULT_OTHER_CONDITION;
 };
 
 export const getDefaultActions = () => {
-  return [
-    {
-      action_name: 'assign_agent',
-      action_params: [],
-    },
-  ];
+  return DEFAULT_ACTIONS;
 };
 
 export const filterCustomAttributes = customAttributes => {
@@ -297,3 +243,100 @@ export const generateCustomAttributes = (
   }
   return customAttributes;
 };
+
+/**
+ * Get attributes for a given key from automation types.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {string} key - The key to get attributes for.
+ * @returns {Array} Array of condition objects for the given key.
+ */
+export const getAttributes = (automationTypes, key) => {
+  return automationTypes[key].conditions;
+};
+
+/**
+ * Get the automation type for a given key.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {Object} automation - The automation object.
+ * @param {string} key - The key to get the automation type for.
+ * @returns {Object} The automation type object.
+ */
+export const getAutomationType = (automationTypes, automation, key) => {
+  return automationTypes[automation.event_name].conditions.find(
+    condition => condition.key === key
+  );
+};
+
+/**
+ * Get the input type for a given key.
+ * @param {Array} allCustomAttributes - Array of all custom attributes.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {Object} automation - The automation object.
+ * @param {string} key - The key to get the input type for.
+ * @returns {string} The input type.
+ */
+export const getInputType = (
+  allCustomAttributes,
+  automationTypes,
+  automation,
+  key
+) => {
+  const customAttribute = isACustomAttribute(allCustomAttributes, key);
+  if (customAttribute) {
+    return getCustomAttributeInputType(customAttribute.attribute_display_type);
+  }
+  const type = getAutomationType(automationTypes, automation, key);
+  return type.inputType;
+};
+
+/**
+ * Get operators for a given key.
+ * @param {Array} allCustomAttributes - Array of all custom attributes.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {Object} automation - The automation object.
+ * @param {string} mode - The mode ('edit' or other).
+ * @param {string} key - The key to get operators for.
+ * @returns {Array} Array of operators.
+ */
+export const getOperators = (
+  allCustomAttributes,
+  automationTypes,
+  automation,
+  mode,
+  key
+) => {
+  if (mode === 'edit') {
+    const customAttribute = isACustomAttribute(allCustomAttributes, key);
+    if (customAttribute) {
+      return getOperatorTypes(customAttribute.attribute_display_type);
+    }
+  }
+  const type = getAutomationType(automationTypes, automation, key);
+  return type.filterOperators;
+};
+
+/**
+ * Get the custom attribute type for a given key.
+ * @param {Object} automationTypes - Object containing automation types.
+ * @param {Object} automation - The automation object.
+ * @param {string} key - The key to get the custom attribute type for.
+ * @returns {string} The custom attribute type.
+ */
+export const getCustomAttributeType = (automationTypes, automation, key) => {
+  return automationTypes[automation.event_name].conditions.find(
+    i => i.key === key
+  ).customAttributeType;
+};
+
+/**
+ * Determine if an action input should be shown.
+ * @param {Array} automationActionTypes - Array of automation action type objects.
+ * @param {string} action - The action to check.
+ * @returns {boolean} True if the action input should be shown, false otherwise.
+ */
+export const showActionInput = (automationActionTypes, action) => {
+  if (action === 'send_email_to_team' || action === 'send_message')
+    return false;
+  const type = automationActionTypes.find(i => i.key === action).inputType;
+  return !!type;
+};
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandBarActions.js b/app/javascript/dashboard/helper/commandbar/actions.js
similarity index 94%
rename from app/javascript/dashboard/routes/dashboard/commands/commandBarActions.js
rename to app/javascript/dashboard/helper/commandbar/actions.js
index c47c0a7ceec25..457754eb7d4c9 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandBarActions.js
+++ b/app/javascript/dashboard/helper/commandbar/actions.js
@@ -8,7 +8,7 @@ import {
   CMD_SEND_TRANSCRIPT,
   CMD_SNOOZE_CONVERSATION,
   CMD_UNMUTE_CONVERSATION,
-} from './commandBarBusEvents';
+} from 'dashboard/helper/commandbar/events';
 
 import {
   ICON_MUTE_CONVERSATION,
@@ -17,7 +17,7 @@ import {
   ICON_SEND_TRANSCRIPT,
   ICON_SNOOZE_CONVERSATION,
   ICON_UNMUTE_CONVERSATION,
-} from './CommandBarIcons';
+} from 'dashboard/helper/commandbar/icons';
 
 const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
 
@@ -46,6 +46,7 @@ export const SNOOZE_CONVERSATION_ACTIONS = [
   {
     id: 'snooze_conversation',
     title: 'COMMAND_BAR.COMMANDS.SNOOZE_CONVERSATION',
+    section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
     icon: ICON_SNOOZE_CONVERSATION,
     children: Object.values(SNOOZE_OPTIONS),
   },
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandBarBusEvents.js b/app/javascript/dashboard/helper/commandbar/events.js
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/commands/commandBarBusEvents.js
rename to app/javascript/dashboard/helper/commandbar/events.js
diff --git a/app/javascript/dashboard/routes/dashboard/commands/CommandBarIcons.js b/app/javascript/dashboard/helper/commandbar/icons.js
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/commands/CommandBarIcons.js
rename to app/javascript/dashboard/helper/commandbar/icons.js
diff --git a/app/javascript/dashboard/helper/editorHelper.js b/app/javascript/dashboard/helper/editorHelper.js
index 0403b62fef11e..e728a76f7f123 100644
--- a/app/javascript/dashboard/helper/editorHelper.js
+++ b/app/javascript/dashboard/helper/editorHelper.js
@@ -3,6 +3,8 @@ import {
   MessageMarkdownTransformer,
   MessageMarkdownSerializer,
 } from '@chatwoot/prosemirror-schema';
+import { replaceVariablesInMessage } from '@chatwoot/utils';
+
 import * as Sentry from '@sentry/browser';
 
 /**
@@ -281,3 +283,92 @@ export function setURLWithQueryAndSize(selectedImageNode, size, editorView) {
     }
   }
 }
+
+/**
+ * Content Node Creation Helper Functions for
+ * - mention
+ * - canned response
+ * - variable
+ * - emoji
+ */
+
+/**
+ * Centralized node creation function that handles the creation of different types of nodes based on the specified type.
+ * @param {Object} editorView - The editor view instance.
+ * @param {string} nodeType - The type of node to create ('mention', 'cannedResponse', 'variable', 'emoji').
+ * @param {Object|string} content - The content needed to create the node, which varies based on node type.
+ * @returns {Object|null} - The created ProseMirror node or null if the type is not supported.
+ */
+const createNode = (editorView, nodeType, content) => {
+  const { state } = editorView;
+  switch (nodeType) {
+    case 'mention':
+      return state.schema.nodes.mention.create({
+        userId: content.id,
+        userFullName: content.name,
+      });
+    case 'cannedResponse':
+      return new MessageMarkdownTransformer(messageSchema).parse(content);
+    case 'variable':
+      return state.schema.text(`{{${content}}}`);
+    case 'emoji':
+      return state.schema.text(content);
+    default:
+      return null;
+  }
+};
+
+/**
+ * Object mapping types to their respective node creation functions.
+ */
+const nodeCreators = {
+  mention: (editorView, content, from, to) => ({
+    node: createNode(editorView, 'mention', content),
+    from,
+    to,
+  }),
+  cannedResponse: (editorView, content, from, to, variables) => {
+    const updatedMessage = replaceVariablesInMessage({
+      message: content,
+      variables,
+    });
+    const node = createNode(editorView, 'cannedResponse', updatedMessage);
+    return {
+      node,
+      from: node.textContent === updatedMessage ? from : from - 1,
+      to,
+    };
+  },
+  variable: (editorView, content, from, to) => ({
+    node: createNode(editorView, 'variable', content),
+    from,
+    to,
+  }),
+  emoji: (editorView, content, from, to) => ({
+    node: createNode(editorView, 'emoji', content),
+    from,
+    to,
+  }),
+};
+
+/**
+ * Retrieves a content node based on the specified type and content, using a functional approach to select the appropriate node creation function.
+ * @param {Object} editorView - The editor view instance.
+ * @param {string} type - The type of content node to create ('mention', 'cannedResponse', 'variable', 'emoji').
+ * @param {string|Object} content - The content to be transformed into a node.
+ * @param {Object} range - An object containing 'from' and 'to' properties indicating the range in the document where the node should be placed.
+ * @param {Object} variables - Optional. Variables to replace in the content, used for 'cannedResponse' type.
+ * @returns {Object} - An object containing the created node and the updated 'from' and 'to' positions.
+ */
+export const getContentNode = (
+  editorView,
+  type,
+  content,
+  { from, to },
+  variables
+) => {
+  const creator = nodeCreators[type];
+  return creator
+    ? creator(editorView, content, from, to, variables)
+    : { node: null, from, to };
+};
diff --git a/app/javascript/dashboard/helper/featureHelper.js b/app/javascript/dashboard/helper/featureHelper.js
index c3dd3d880e6c9..529c0a44e5756 100644
--- a/app/javascript/dashboard/helper/featureHelper.js
+++ b/app/javascript/dashboard/helper/featureHelper.js
@@ -9,12 +9,15 @@ const FEATURE_HELP_URLS = {
   custom_attributes: 'https://chwt.app/hc/custom-attributes',
   dashboard_apps: 'https://chwt.app/hc/dashboard-apps',
   help_center: 'https://chwt.app/hc/help-center',
+  inboxes: 'https://chwt.app/hc/inboxes',
   integrations: 'https://chwt.app/hc/integrations',
   labels: 'https://chwt.app/hc/labels',
+  macros: 'https://chwt.app/hc/macros',
   message_reply_to: 'https://chwt.app/hc/reply-to',
   reports: 'https://chwt.app/hc/reports',
   sla: 'https://chwt.app/hc/sla',
   team_management: 'https://chwt.app/hc/teams',
+  webhook: 'https://chwt.app/hc/webhooks',
 };
 
 export function getHelpUrlForFeature(featureName) {
diff --git a/app/javascript/dashboard/helper/permissionsHelper.js b/app/javascript/dashboard/helper/permissionsHelper.js
index 135238371ad31..9200677bc7680 100644
--- a/app/javascript/dashboard/helper/permissionsHelper.js
+++ b/app/javascript/dashboard/helper/permissionsHelper.js
@@ -7,6 +7,15 @@ export const hasPermissions = (
   );
 };
 
+export const getCurrentAccount = ({ accounts } = {}, accountId = null) => {
+  return accounts.find(account => Number(account.id) === Number(accountId));
+};
+
+export const getUserPermissions = (user, accountId) => {
+  const currentAccount = getCurrentAccount(user, accountId) || {};
+  return currentAccount.permissions || [];
+};
+
 const isPermissionsPresentInRoute = route =>
   route.meta && route.meta.permissions;
 
@@ -32,3 +41,32 @@ export const buildPermissionsFromRouter = (routes = []) =>
 
     return acc;
   }, {});
+
+/**
+ * Filters and transforms items based on user permissions.
+ *
+ * @param {Object} items - An object containing items to be filtered.
+ * @param {Array} userPermissions - Array of permissions the user has.
+ * @param {Function} getPermissions - Function to extract required permissions from an item.
+ * @param {Function} [transformItem] - Optional function to transform each item after filtering.
+ * @returns {Array} Filtered and transformed items.
+ */
+export const filterItemsByPermission = (
+  items,
+  userPermissions,
+  getPermissions,
+  transformItem = (key, item) => ({ key, ...item })
+) => {
+  // Helper function to check if an item has the required permissions
+  const hasRequiredPermissions = item => {
+    const requiredPermissions = getPermissions(item);
+    return (
+      requiredPermissions.length === 0 ||
+      hasPermissions(requiredPermissions, userPermissions)
+    );
+  };
+
+  return Object.entries(items)
+    .filter(([, item]) => hasRequiredPermissions(item)) // Keep only items with required permissions
+    .map(([key, item]) => transformItem(key, item)); // Transform each remaining item
+};
diff --git a/app/javascript/dashboard/helper/routeHelpers.js b/app/javascript/dashboard/helper/routeHelpers.js
index 6c4036dd161c8..292e5e6e1b189 100644
--- a/app/javascript/dashboard/helper/routeHelpers.js
+++ b/app/javascript/dashboard/helper/routeHelpers.js
@@ -1,15 +1,42 @@
-import { hasPermissions } from './permissionsHelper';
-
-// eslint-disable-next-line default-param-last
-export const getCurrentAccount = ({ accounts } = {}, accountId) => {
-  return accounts.find(account => account.id === accountId);
-};
+import {
+  hasPermissions,
+  getUserPermissions,
+  getCurrentAccount,
+} from './permissionsHelper';
+
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+  CONTACT_PERMISSIONS,
+  REPORTS_PERMISSIONS,
+  PORTAL_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
 
 export const routeIsAccessibleFor = (route, userPermissions = []) => {
   const { meta: { permissions: routePermissions = [] } = {} } = route;
   return hasPermissions(routePermissions, userPermissions);
 };
 
+export const defaultRedirectPage = (to, permissions) => {
+  const { accountId } = to.params;
+
+  const permissionRoutes = [
+    {
+      permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+      path: 'dashboard',
+    },
+    { permissions: [CONTACT_PERMISSIONS], path: 'contacts' },
+    { permissions: [REPORTS_PERMISSIONS], path: 'reports/overview' },
+    { permissions: [PORTAL_PERMISSIONS], path: 'portals' },
+  ];
+
+  const route = permissionRoutes.find(({ permissions: routePermissions }) =>
+    hasPermissions(routePermissions, permissions)
+  );
+
+  return `accounts/${accountId}/${route ? route.path : 'dashboard'}`;
+};
+
 const validateActiveAccountRoutes = (to, user) => {
   // If the current account is active, then check for the route permissions
   const accountDashboardURL = `accounts/${to.params.accountId}/dashboard`;
@@ -19,9 +46,11 @@ const validateActiveAccountRoutes = (to, user) => {
     return accountDashboardURL;
   }
 
-  const isAccessible = routeIsAccessibleFor(to, user.permissions);
+  const userPermissions = getUserPermissions(user, to.params.accountId);
+
+  const isAccessible = routeIsAccessibleFor(to, userPermissions);
   // If the route is not accessible for the user, return to dashboard screen
-  return isAccessible ? null : accountDashboardURL;
+  return isAccessible ? null : defaultRedirectPage(to, userPermissions);
 };
 
 export const validateLoggedInRoutes = (to, user) => {
diff --git a/app/javascript/dashboard/helper/scriptHelpers.js b/app/javascript/dashboard/helper/scriptHelpers.js
index 292751a94a8e7..dd007d0db027a 100644
--- a/app/javascript/dashboard/helper/scriptHelpers.js
+++ b/app/javascript/dashboard/helper/scriptHelpers.js
@@ -26,7 +26,7 @@ const initializeAudioAlerts = user => {
   } = uiSettings || {};
 
   DashboardAudioNotificationHelper.setInstanceValues({
-    currentUserId: user.id,
+    currentUser: user,
     audioAlertType: audioAlertType || 'none',
     audioAlertTone: audioAlertTone || 'ding',
     alwaysPlayAudioAlert: alwaysPlayAudioAlert || false,
diff --git a/app/javascript/dashboard/helper/specs/agentHelper.spec.js b/app/javascript/dashboard/helper/specs/agentHelper.spec.js
new file mode 100644
index 0000000000000..5b670a9b38292
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/agentHelper.spec.js
@@ -0,0 +1,131 @@
+import {
+  getAgentsByAvailability,
+  getSortedAgentsByAvailability,
+  getAgentsByUpdatedPresence,
+  getCombinedAgents,
+  createNoneAgent,
+} from '../agentHelper';
+import {
+  allAgentsData,
+  onlineAgentsData,
+  busyAgentsData,
+  offlineAgentsData,
+  sortedByAvailability,
+  formattedAgentsByPresenceOnline,
+  formattedAgentsByPresenceOffline,
+} from 'dashboard/helper/specs/fixtures/agentFixtures';
+
+describe('agentHelper', () => {
+  describe('getAgentsByAvailability', () => {
+    it('returns agents by availability', () => {
+      expect(getAgentsByAvailability(allAgentsData, 'online')).toEqual(
+        onlineAgentsData
+      );
+      expect(getAgentsByAvailability(allAgentsData, 'busy')).toEqual(
+        busyAgentsData
+      );
+      expect(getAgentsByAvailability(allAgentsData, 'offline')).toEqual(
+        offlineAgentsData
+      );
+    });
+  });
+
+  describe('getSortedAgentsByAvailability', () => {
+    it('returns sorted agents by availability', () => {
+      expect(getSortedAgentsByAvailability(allAgentsData)).toEqual(
+        sortedByAvailability
+      );
+    });
+
+    it('returns an empty array when given an empty input', () => {
+      expect(getSortedAgentsByAvailability([])).toEqual([]);
+    });
+
+    it('maintains the order of agents with the same availability status', () => {
+      const result = getSortedAgentsByAvailability(allAgentsData);
+      expect(result[2].name).toBe('Honey Bee');
+      expect(result[3].name).toBe('Samuel Keta');
+    });
+  });
+
+  describe('getAgentsByUpdatedPresence', () => {
+    it('returns agents with updated presence', () => {
+      const currentUser = {
+        id: 1,
+        accounts: [{ id: 1, availability_status: 'offline' }],
+      };
+      const currentAccountId = 1;
+
+      expect(
+        getAgentsByUpdatedPresence(
+          formattedAgentsByPresenceOnline,
+          currentUser,
+          currentAccountId
+        )
+      ).toEqual(formattedAgentsByPresenceOffline);
+    });
+
+    it('does not modify other agents presence', () => {
+      const currentUser = {
+        id: 2,
+        accounts: [{ id: 1, availability_status: 'offline' }],
+      };
+      const currentAccountId = 1;
+
+      expect(
+        getAgentsByUpdatedPresence(
+          formattedAgentsByPresenceOnline,
+          currentUser,
+          currentAccountId
+        )
+      ).toEqual(formattedAgentsByPresenceOnline);
+    });
+
+    it('handles empty agent list', () => {
+      const currentUser = {
+        id: 1,
+        accounts: [{ id: 1, availability_status: 'offline' }],
+      };
+      const currentAccountId = 1;
+
+      expect(
+        getAgentsByUpdatedPresence([], currentUser, currentAccountId)
+      ).toEqual([]);
+    });
+  });
+
+  describe('getCombinedAgents', () => {
+    it('includes None agent when includeNoneAgent is true and isAgentSelected is true', () => {
+      const result = getCombinedAgents(sortedByAvailability, true, true);
+      expect(result).toEqual([createNoneAgent, ...sortedByAvailability]);
+      expect(result.length).toBe(sortedByAvailability.length + 1);
+      expect(result[0]).toEqual(createNoneAgent);
+    });
+
+    it('excludes None agent when includeNoneAgent is false', () => {
+      const result = getCombinedAgents(sortedByAvailability, false, true);
+      expect(result).toEqual(sortedByAvailability);
+      expect(result.length).toBe(sortedByAvailability.length);
+      expect(result[0]).not.toEqual(createNoneAgent);
+    });
+
+    it('excludes None agent when isAgentSelected is false', () => {
+      const result = getCombinedAgents(sortedByAvailability, true, false);
+      expect(result).toEqual(sortedByAvailability);
+      expect(result.length).toBe(sortedByAvailability.length);
+      expect(result[0]).not.toEqual(createNoneAgent);
+    });
+
+    it('returns only filtered agents when both includeNoneAgent and isAgentSelected are false', () => {
+      const result = getCombinedAgents(sortedByAvailability, false, false);
+      expect(result).toEqual(sortedByAvailability);
+      expect(result.length).toBe(sortedByAvailability.length);
+    });
+
+    it('handles empty filteredAgentsByAvailability array', () => {
+      const result = getCombinedAgents([], true, true);
+      expect(result).toEqual([createNoneAgent]);
+      expect(result.length).toBe(1);
+    });
+  });
+});
diff --git a/app/javascript/shared/mixins/specs/automationHelper.spec.js b/app/javascript/dashboard/helper/specs/automationHelper.spec.js
similarity index 53%
rename from app/javascript/shared/mixins/specs/automationHelper.spec.js
rename to app/javascript/dashboard/helper/specs/automationHelper.spec.js
index 481613323482f..b55da1bad39d5 100644
--- a/app/javascript/shared/mixins/specs/automationHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/automationHelper.spec.js
@@ -11,11 +11,11 @@ import {
   contactAttrs,
   conversationAttrs,
   expectedOutputForCustomAttributeGenerator,
-} from './automationFixtures';
+} from './fixtures/automationFixtures';
 import { AUTOMATIONS } from 'dashboard/routes/dashboard/settings/automation/constants';
 
-describe('automationMethodsMixin', () => {
-  it('getCustomAttributeInputType returns the attribute input type', () => {
+describe('getCustomAttributeInputType', () => {
+  it('returns the attribute input type', () => {
     expect(helpers.getCustomAttributeInputType('date')).toEqual('date');
     expect(helpers.getCustomAttributeInputType('date')).not.toEqual(
       'some_random_value'
@@ -31,33 +31,32 @@ describe('automationMethodsMixin', () => {
       'plain_text'
     );
   });
-  it('isACustomAttribute returns the custom attribute value if true', () => {
+});
+
+describe('isACustomAttribute', () => {
+  it('returns the custom attribute value if true', () => {
     expect(
       helpers.isACustomAttribute(customAttributes, 'signed_up_at')
     ).toBeTruthy();
     expect(helpers.isACustomAttribute(customAttributes, 'status')).toBeFalsy();
   });
-  it('getCustomAttributeListDropdownValues returns the attribute dropdown values', () => {
+});
+
+describe('getCustomAttributeListDropdownValues', () => {
+  it('returns the attribute dropdown values', () => {
     const myListValues = [
-      {
-        id: 'item1',
-        name: 'item1',
-      },
-      {
-        id: 'item2',
-        name: 'item2',
-      },
-      {
-        id: 'item3',
-        name: 'item3',
-      },
+      { id: 'item1', name: 'item1' },
+      { id: 'item2', name: 'item2' },
+      { id: 'item3', name: 'item3' },
     ];
     expect(
       helpers.getCustomAttributeListDropdownValues(customAttributes, 'my_list')
     ).toEqual(myListValues);
   });
+});
 
-  it('isCustomAttributeCheckbox checks if attribute is a checkbox', () => {
+describe('isCustomAttributeCheckbox', () => {
+  it('checks if attribute is a checkbox', () => {
     expect(
       helpers.isCustomAttributeCheckbox(customAttributes, 'prime_user')
         .attribute_display_type
@@ -70,13 +69,19 @@ describe('automationMethodsMixin', () => {
       helpers.isCustomAttributeCheckbox(customAttributes, 'my_list')
     ).not.toEqual('checkbox');
   });
-  it('isCustomAttributeList checks if attribute is a list', () => {
+});
+
+describe('isCustomAttributeList', () => {
+  it('checks if attribute is a list', () => {
     expect(
       helpers.isCustomAttributeList(customAttributes, 'my_list')
         .attribute_display_type
     ).toEqual('list');
   });
-  it('getOperatorTypes returns the correct custom attribute operators', () => {
+});
+
+describe('getOperatorTypes', () => {
+  it('returns the correct custom attribute operators', () => {
     expect(helpers.getOperatorTypes('list')).toEqual(OPERATOR_TYPES_1);
     expect(helpers.getOperatorTypes('text')).toEqual(OPERATOR_TYPES_3);
     expect(helpers.getOperatorTypes('number')).toEqual(OPERATOR_TYPES_1);
@@ -85,93 +90,44 @@ describe('automationMethodsMixin', () => {
     expect(helpers.getOperatorTypes('checkbox')).toEqual(OPERATOR_TYPES_1);
     expect(helpers.getOperatorTypes('some_random')).toEqual(OPERATOR_TYPES_1);
   });
-  it('generateConditionOptions returns expected conditions options array', () => {
+});
+
+describe('generateConditionOptions', () => {
+  it('returns expected conditions options array', () => {
     const testConditions = [
-      {
-        id: 123,
-        title: 'Fayaz',
-        email: 'test@test.com',
-      },
-      {
-        title: 'John',
-        id: 324,
-        email: 'test@john.com',
-      },
+      { id: 123, title: 'Fayaz', email: 'test@test.com' },
+      { title: 'John', id: 324, email: 'test@john.com' },
     ];
-
     const expectedConditions = [
-      {
-        id: 123,
-        name: 'Fayaz',
-      },
-      {
-        id: 324,
-        name: 'John',
-      },
+      { id: 123, name: 'Fayaz' },
+      { id: 324, name: 'John' },
     ];
     expect(helpers.generateConditionOptions(testConditions)).toEqual(
       expectedConditions
     );
   });
-  it('getActionOptions returns expected actions options array', () => {
+});
+
+describe('getActionOptions', () => {
+  it('returns expected actions options array', () => {
     const expectedOptions = [
-      {
-        id: 'testlabel',
-        name: 'testlabel',
-      },
-      {
-        id: 'snoozes',
-        name: 'snoozes',
-      },
+      { id: 'testlabel', name: 'testlabel' },
+      { id: 'snoozes', name: 'snoozes' },
     ];
     expect(helpers.getActionOptions({ labels, type: 'add_label' })).toEqual(
       expectedOptions
     );
   });
-  it('getConditionOptions returns expected conditions options', () => {
+});
+
+describe('getConditionOptions', () => {
+  it('returns expected conditions options', () => {
     const testOptions = [
-      {
-        id: 'open',
-        name: 'Open',
-      },
-      {
-        id: 'resolved',
-        name: 'Resolved',
-      },
-      {
-        id: 'pending',
-        name: 'Pending',
-      },
-      {
-        id: 'snoozed',
-        name: 'Snoozed',
-      },
-      {
-        id: 'all',
-        name: 'All',
-      },
-    ];
-    const expectedOptions = [
-      {
-        id: 'open',
-        name: 'Open',
-      },
-      {
-        id: 'resolved',
-        name: 'Resolved',
-      },
-      {
-        id: 'pending',
-        name: 'Pending',
-      },
-      {
-        id: 'snoozed',
-        name: 'Snoozed',
-      },
-      {
-        id: 'all',
-        name: 'All',
-      },
+      { id: 'open', name: 'Open' },
+      { id: 'resolved', name: 'Resolved' },
+      { id: 'pending', name: 'Pending' },
+      { id: 'snoozed', name: 'Snoozed' },
+      { id: 'all', name: 'All' },
     ];
     expect(
       helpers.getConditionOptions({
@@ -180,14 +136,20 @@ describe('automationMethodsMixin', () => {
         statusFilterOptions: testOptions,
         type: 'status',
       })
-    ).toEqual(expectedOptions);
+    ).toEqual(testOptions);
   });
-  it('getFileName returns the correct file name', () => {
+});
+
+describe('getFileName', () => {
+  it('returns the correct file name', () => {
     expect(
       helpers.getFileName(automation.actions[0], automation.files)
     ).toEqual('pfp.jpeg');
   });
-  it('getDefaultConditions returns the resp default condition model', () => {
+});
+
+describe('getDefaultConditions', () => {
+  it('returns the resp default condition model', () => {
     const messageCreatedModel = [
       {
         attribute_key: 'message_type',
@@ -211,7 +173,10 @@ describe('automationMethodsMixin', () => {
     );
     expect(helpers.getDefaultConditions()).toEqual(genericConditionModel);
   });
-  it('getDefaultActions returns the resp default action model', () => {
+});
+
+describe('getDefaultActions', () => {
+  it('returns the resp default action model', () => {
     const genericActionModel = [
       {
         action_name: 'assign_agent',
@@ -220,7 +185,10 @@ describe('automationMethodsMixin', () => {
     ];
     expect(helpers.getDefaultActions()).toEqual(genericActionModel);
   });
-  it('filterCustomAttributes filters the raw custom attributes', () => {
+});
+
+describe('filterCustomAttributes', () => {
+  it('filters the raw custom attributes', () => {
     const filteredAttributes = [
       { key: 'signed_up_at', name: 'Signed Up At', type: 'date' },
       { key: 'prime_user', name: 'Prime User', type: 'checkbox' },
@@ -235,7 +203,10 @@ describe('automationMethodsMixin', () => {
       filteredAttributes
     );
   });
-  it('getStandardAttributeInputType returns the resp default action model', () => {
+});
+
+describe('getStandardAttributeInputType', () => {
+  it('returns the resp default action model', () => {
     expect(
       helpers.getStandardAttributeInputType(
         AUTOMATIONS,
@@ -258,7 +229,10 @@ describe('automationMethodsMixin', () => {
       )
     ).toEqual('plain_text');
   });
-  it('generateAutomationPayload returns the resp default action model', () => {
+});
+
+describe('generateAutomationPayload', () => {
+  it('returns the resp default action model', () => {
     const testPayload = {
       name: 'Test',
       description: 'This is a test',
@@ -300,7 +274,10 @@ describe('automationMethodsMixin', () => {
       expectedPayload
     );
   });
-  it('isCustomAttribute returns the resp default action model', () => {
+});
+
+describe('isCustomAttribute', () => {
+  it('returns the resp default action model', () => {
     const attrs = helpers.filterCustomAttributes(customAttributes);
     expect(helpers.isCustomAttribute(attrs, 'my_list')).toBeTruthy();
     expect(helpers.isCustomAttribute(attrs, 'my_check')).toBeTruthy();
@@ -309,8 +286,10 @@ describe('automationMethodsMixin', () => {
     expect(helpers.isCustomAttribute(attrs, 'prime_user')).toBeTruthy();
     expect(helpers.isCustomAttribute(attrs, 'hello')).toBeFalsy();
   });
+});
 
-  it('generateCustomAttributes generates and returns correct condition attribute', () => {
+describe('generateCustomAttributes', () => {
+  it('generates and returns correct condition attribute', () => {
     expect(
       helpers.generateCustomAttributes(
         conversationAttrs,
@@ -321,3 +300,116 @@ describe('automationMethodsMixin', () => {
     ).toEqual(expectedOutputForCustomAttributeGenerator);
   });
 });
+
+describe('getAttributes', () => {
+  it('returns the conditions for the given automation type', () => {
+    const result = helpers.getAttributes(AUTOMATIONS, 'message_created');
+    expect(result).toEqual(AUTOMATIONS.message_created.conditions);
+  });
+});
+
+describe('getAttributes', () => {
+  it('returns the conditions for the given automation type', () => {
+    const result = helpers.getAttributes(AUTOMATIONS, 'message_created');
+    expect(result).toEqual(AUTOMATIONS.message_created.conditions);
+  });
+});
+
+describe('getAutomationType', () => {
+  it('returns the automation type for the given key', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getAutomationType(
+      AUTOMATIONS,
+      mockAutomation,
+      'message_type'
+    );
+    expect(result).toEqual(
+      AUTOMATIONS.message_created.conditions.find(c => c.key === 'message_type')
+    );
+  });
+});
+
+describe('getInputType', () => {
+  it('returns the input type for a custom attribute', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getInputType(
+      customAttributes,
+      AUTOMATIONS,
+      mockAutomation,
+      'signed_up_at'
+    );
+    expect(result).toEqual('date');
+  });
+
+  it('returns the input type for a standard attribute', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getInputType(
+      customAttributes,
+      AUTOMATIONS,
+      mockAutomation,
+      'message_type'
+    );
+    expect(result).toEqual('search_select');
+  });
+});
+
+describe('getOperators', () => {
+  it('returns operators for a custom attribute in edit mode', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getOperators(
+      customAttributes,
+      AUTOMATIONS,
+      mockAutomation,
+      'edit',
+      'signed_up_at'
+    );
+    expect(result).toEqual(OPERATOR_TYPES_4);
+  });
+
+  it('returns operators for a standard attribute', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getOperators(
+      customAttributes,
+      AUTOMATIONS,
+      mockAutomation,
+      'create',
+      'message_type'
+    );
+    expect(result).toEqual(
+      AUTOMATIONS.message_created.conditions.find(c => c.key === 'message_type')
+        .filterOperators
+    );
+  });
+});
+
+describe('getCustomAttributeType', () => {
+  it('returns the custom attribute type for the given key', () => {
+    const mockAutomation = { event_name: 'message_created' };
+    const result = helpers.getCustomAttributeType(
+      AUTOMATIONS,
+      mockAutomation,
+      'message_type'
+    );
+    expect(result).toEqual(
+      AUTOMATIONS.message_created.conditions.find(c => c.key === 'message_type')
+        .customAttributeType
+    );
+  });
+});
+
+describe('showActionInput', () => {
+  it('returns false for send_email_to_team and send_message actions', () => {
+    expect(helpers.showActionInput([], 'send_email_to_team')).toBe(false);
+    expect(helpers.showActionInput([], 'send_message')).toBe(false);
+  });
+
+  it('returns true if the action has an input type', () => {
+    const mockActionTypes = [{ key: 'add_label', inputType: 'select' }];
+    expect(helpers.showActionInput(mockActionTypes, 'add_label')).toBe(true);
+  });
+
+  it('returns false if the action does not have an input type', () => {
+    const mockActionTypes = [{ key: 'some_action', inputType: null }];
+    expect(helpers.showActionInput(mockActionTypes, 'some_action')).toBe(false);
+  });
+});
diff --git a/app/javascript/dashboard/helper/specs/editorContentHelper.spec.js b/app/javascript/dashboard/helper/specs/editorContentHelper.spec.js
new file mode 100644
index 0000000000000..a90c0c233fa70
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/editorContentHelper.spec.js
@@ -0,0 +1,127 @@
+// Moved from editorHelper.spec.js to editorContentHelper.spec.js
+// the mock of chatwoot/prosemirror-schema is getting conflicted with other specs
+import { getContentNode } from '../editorHelper';
+import {
+  MessageMarkdownTransformer,
+  messageSchema,
+} from '@chatwoot/prosemirror-schema';
+import { replaceVariablesInMessage } from '@chatwoot/utils';
+
+vi.mock('@chatwoot/prosemirror-schema', () => ({
+  MessageMarkdownTransformer: vi.fn(),
+  messageSchema: {},
+}));
+
+vi.mock('@chatwoot/utils', () => ({
+  replaceVariablesInMessage: vi.fn(),
+}));
+
+describe('getContentNode', () => {
+  let editorView;
+
+  beforeEach(() => {
+    editorView = {
+      state: {
+        schema: {
+          nodes: {
+            mention: {
+              create: vi.fn(),
+            },
+          },
+          text: vi.fn(),
+        },
+      },
+    };
+  });
+
+  describe('getMentionNode', () => {
+    it('should create a mention node', () => {
+      const content = { id: 1, name: 'John Doe' };
+      const from = 0;
+      const to = 10;
+      getContentNode(editorView, 'mention', content, {
+        from,
+        to,
+      });
+
+      expect(editorView.state.schema.nodes.mention.create).toHaveBeenCalledWith(
+        {
+          userId: content.id,
+          userFullName: content.name,
+        }
+      );
+    });
+  });
+
+  describe('getCannedResponseNode', () => {
+    it('should create a canned response node', () => {
+      const content = 'Hello {{name}}';
+      const variables = { name: 'John' };
+      const from = 0;
+      const to = 10;
+      const updatedMessage = 'Hello John';
+
+      replaceVariablesInMessage.mockReturnValue(updatedMessage);
+      MessageMarkdownTransformer.mockImplementation(() => ({
+        parse: vi.fn().mockReturnValue({ textContent: updatedMessage }),
+      }));
+
+      const { node } = getContentNode(
+        editorView,
+        'cannedResponse',
+        content,
+        { from, to },
+        variables
+      );
+
+      expect(replaceVariablesInMessage).toHaveBeenCalledWith({
+        message: content,
+        variables,
+      });
+      expect(MessageMarkdownTransformer).toHaveBeenCalledWith(messageSchema);
+      expect(node.textContent).toBe(updatedMessage);
+    });
+  });
+
+  describe('getVariableNode', () => {
+    it('should create a variable node', () => {
+      const content = 'name';
+      const from = 0;
+      const to = 10;
+      getContentNode(editorView, 'variable', content, {
+        from,
+        to,
+      });
+
+      expect(editorView.state.schema.text).toHaveBeenCalledWith('{{name}}');
+    });
+  });
+
+  describe('getEmojiNode', () => {
+    it('should create an emoji node', () => {
+      const content = '😊';
+      const from = 0;
+      const to = 2;
+      getContentNode(editorView, 'emoji', content, {
+        from,
+        to,
+      });
+
+      expect(editorView.state.schema.text).toHaveBeenCalledWith('😊');
+    });
+  });
+
+  describe('getContentNode', () => {
+    it('should return null for invalid type', () => {
+      const content = 'invalid';
+      const from = 0;
+      const to = 10;
+      const { node } = getContentNode(editorView, 'invalid', content, {
+        from,
+        to,
+      });
+
+      expect(node).toBeNull();
+    });
+  });
+});
diff --git a/app/javascript/dashboard/helper/specs/fixtures/agentFixtures.js b/app/javascript/dashboard/helper/specs/fixtures/agentFixtures.js
new file mode 100644
index 0000000000000..b26db904fab77
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/fixtures/agentFixtures.js
@@ -0,0 +1,184 @@
+export const allAgentsData = [
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'John K',
+    confirmed: true,
+    email: 'john@chatwoot.com',
+    id: 1,
+    name: 'John Kennady',
+    role: 'administrator',
+  },
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Samuel K',
+    confirmed: true,
+    email: 'samuel@chatwoot.com',
+    id: 2,
+    name: 'Samuel Keta',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'offline',
+    available_name: 'James K',
+    confirmed: true,
+    email: 'james@chatwoot.com',
+    id: 3,
+    name: 'James Koti',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Honey',
+    confirmed: true,
+    email: 'bee@chatwoot.com',
+    id: 4,
+    name: 'Honey Bee',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abraham@chatwoot.com',
+    id: 5,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+];
+export const onlineAgentsData = [
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abraham@chatwoot.com',
+    id: 5,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'John K',
+    confirmed: true,
+    email: 'john@chatwoot.com',
+    id: 1,
+    name: 'John Kennady',
+    role: 'administrator',
+  },
+];
+export const busyAgentsData = [
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Honey',
+    confirmed: true,
+    email: 'bee@chatwoot.com',
+    id: 4,
+    name: 'Honey Bee',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Samuel K',
+    confirmed: true,
+    email: 'samuel@chatwoot.com',
+    id: 2,
+    name: 'Samuel Keta',
+    role: 'agent',
+  },
+];
+export const offlineAgentsData = [
+  {
+    account_id: 1,
+    availability_status: 'offline',
+    available_name: 'James K',
+    confirmed: true,
+    email: 'james@chatwoot.com',
+    id: 3,
+    name: 'James Koti',
+    role: 'agent',
+  },
+];
+export const sortedByAvailability = [
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abraham@chatwoot.com',
+    id: 5,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'John K',
+    confirmed: true,
+    email: 'john@chatwoot.com',
+    id: 1,
+    name: 'John Kennady',
+    role: 'administrator',
+  },
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Honey',
+    confirmed: true,
+    email: 'bee@chatwoot.com',
+    id: 4,
+    name: 'Honey Bee',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'busy',
+    available_name: 'Samuel K',
+    confirmed: true,
+    email: 'samuel@chatwoot.com',
+    id: 2,
+    name: 'Samuel Keta',
+    role: 'agent',
+  },
+  {
+    account_id: 1,
+    availability_status: 'offline',
+    available_name: 'James K',
+    confirmed: true,
+    email: 'james@chatwoot.com',
+    id: 3,
+    name: 'James Koti',
+    role: 'agent',
+  },
+];
+export const formattedAgentsByPresenceOnline = [
+  {
+    account_id: 1,
+    availability_status: 'online',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abr@chatwoot.com',
+    id: 1,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+];
+export const formattedAgentsByPresenceOffline = [
+  {
+    account_id: 1,
+    availability_status: 'offline',
+    available_name: 'Abraham',
+    confirmed: true,
+    email: 'abr@chatwoot.com',
+    id: 1,
+    name: 'Abraham Keta',
+    role: 'agent',
+  },
+];
diff --git a/app/javascript/shared/mixins/specs/automationFixtures.js b/app/javascript/dashboard/helper/specs/fixtures/automationFixtures.js
similarity index 99%
rename from app/javascript/shared/mixins/specs/automationFixtures.js
rename to app/javascript/dashboard/helper/specs/fixtures/automationFixtures.js
index 1647f90044fbc..1f642587bc1c4 100644
--- a/app/javascript/shared/mixins/specs/automationFixtures.js
+++ b/app/javascript/dashboard/helper/specs/fixtures/automationFixtures.js
@@ -1,6 +1,6 @@
-import allLanguages from '../../../dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
+import allLanguages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 
-import allCountries from '../../../shared/constants/countries.js';
+import allCountries from 'shared/constants/countries.js';
 
 export const customAttributes = [
   {
diff --git a/app/javascript/dashboard/helper/specs/permissionsHelper.spec.js b/app/javascript/dashboard/helper/specs/permissionsHelper.spec.js
index 34f434f7de919..f991a6bc9123d 100644
--- a/app/javascript/dashboard/helper/specs/permissionsHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/permissionsHelper.spec.js
@@ -1,8 +1,32 @@
 import {
   buildPermissionsFromRouter,
+  getCurrentAccount,
+  getUserPermissions,
   hasPermissions,
+  filterItemsByPermission,
 } from '../permissionsHelper';
 
+describe('#getCurrentAccount', () => {
+  it('should return the current account', () => {
+    expect(getCurrentAccount({ accounts: [{ id: 1 }] }, 1)).toEqual({ id: 1 });
+    expect(getCurrentAccount({ accounts: [] }, 1)).toEqual(undefined);
+  });
+});
+
+describe('#getUserPermissions', () => {
+  it('should return the correct permissions', () => {
+    const user = {
+      accounts: [
+        { id: 1, permissions: ['conversations_manage'] },
+        { id: 3, permissions: ['contacts_manage'] },
+      ],
+    };
+    expect(getUserPermissions(user, 1)).toEqual(['conversations_manage']);
+    expect(getUserPermissions(user, '3')).toEqual(['contacts_manage']);
+    expect(getUserPermissions(user, 2)).toEqual([]);
+  });
+});
+
 describe('hasPermissions', () => {
   it('returns true if permission is present', () => {
     expect(
@@ -82,3 +106,113 @@ describe('buildPermissionsFromRouter', () => {
     }).toThrow("The route doesn't have the required permissions defined");
   });
 });
+
+describe('filterItemsByPermission', () => {
+  const items = {
+    item1: { name: 'Item 1', permissions: ['agent', 'administrator'] },
+    item2: {
+      name: 'Item 2',
+      permissions: [
+        'conversation_manage',
+        'conversation_unassigned_manage',
+        'conversation_participating_manage',
+      ],
+    },
+    item3: { name: 'Item 3', permissions: ['contact_manage'] },
+    item4: { name: 'Item 4', permissions: ['report_manage'] },
+    item5: { name: 'Item 5', permissions: ['knowledge_base_manage'] },
+    item6: {
+      name: 'Item 6',
+      permissions: [
+        'agent',
+        'administrator',
+        'conversation_manage',
+        'conversation_unassigned_manage',
+        'conversation_participating_manage',
+        'contact_manage',
+        'report_manage',
+        'knowledge_base_manage',
+      ],
+    },
+    item7: { name: 'Item 7', permissions: [] },
+  };
+
+  const getPermissions = item => item.permissions;
+
+  it('filters items based on user permissions', () => {
+    const userPermissions = ['agent', 'contact_manage', 'report_manage'];
+    const result = filterItemsByPermission(
+      items,
+      userPermissions,
+      getPermissions
+    );
+
+    expect(result).toHaveLength(5);
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item1', name: 'Item 1' })
+    );
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item3', name: 'Item 3' })
+    );
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item4', name: 'Item 4' })
+    );
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item6', name: 'Item 6' })
+    );
+  });
+
+  it('includes items with empty permissions', () => {
+    const userPermissions = [];
+    const result = filterItemsByPermission(
+      items,
+      userPermissions,
+      getPermissions
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item7', name: 'Item 7' })
+    );
+  });
+
+  it('uses custom transform function when provided', () => {
+    const userPermissions = ['agent', 'contact_manage'];
+    const customTransform = (key, item) => ({ id: key, title: item.name });
+    const result = filterItemsByPermission(
+      items,
+      userPermissions,
+      getPermissions,
+      customTransform
+    );
+
+    expect(result).toHaveLength(4);
+    expect(result).toContainEqual({ id: 'item1', title: 'Item 1' });
+    expect(result).toContainEqual({ id: 'item3', title: 'Item 3' });
+    expect(result).toContainEqual({ id: 'item6', title: 'Item 6' });
+  });
+
+  it('handles empty items object', () => {
+    const result = filterItemsByPermission({}, ['agent'], getPermissions);
+
+    expect(result).toHaveLength(0);
+  });
+
+  it('handles custom getPermissions function', () => {
+    const customItems = {
+      item1: { name: 'Item 1', requiredPerms: ['agent', 'administrator'] },
+      item2: { name: 'Item 2', requiredPerms: ['contact_manage'] },
+    };
+    const customGetPermissions = item => item.requiredPerms;
+    const result = filterItemsByPermission(
+      customItems,
+      ['agent'],
+      customGetPermissions
+    );
+
+    expect(result).toHaveLength(1);
+    expect(result).toContainEqual(
+      expect.objectContaining({ key: 'item1', name: 'Item 1' })
+    );
+  });
+});
diff --git a/app/javascript/dashboard/helper/specs/routeHelpers.spec.js b/app/javascript/dashboard/helper/specs/routeHelpers.spec.js
index 5aa9c4ee2b1a8..30cd51ae837b4 100644
--- a/app/javascript/dashboard/helper/specs/routeHelpers.spec.js
+++ b/app/javascript/dashboard/helper/specs/routeHelpers.spec.js
@@ -1,19 +1,12 @@
 import {
   getConversationDashboardRoute,
-  getCurrentAccount,
   isAConversationRoute,
+  defaultRedirectPage,
   routeIsAccessibleFor,
   validateLoggedInRoutes,
   isAInboxViewRoute,
 } from '../routeHelpers';
 
-describe('#getCurrentAccount', () => {
-  it('should return the current account', () => {
-    expect(getCurrentAccount({ accounts: [{ id: 1 }] }, 1)).toEqual({ id: 1 });
-    expect(getCurrentAccount({ accounts: [] }, 1)).toEqual(undefined);
-  });
-});
-
 describe('#routeIsAccessibleFor', () => {
   it('should return the correct access', () => {
     let route = { meta: { permissions: ['administrator'] } };
@@ -22,6 +15,57 @@ describe('#routeIsAccessibleFor', () => {
   });
 });
 
+describe('#defaultRedirectPage', () => {
+  const to = {
+    params: { accountId: '2' },
+    fullPath: '/app/accounts/2/dashboard',
+    name: 'home',
+  };
+
+  it('should return dashboard route for users with conversation permissions', () => {
+    const permissions = ['conversation_manage', 'agent'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/dashboard');
+  });
+
+  it('should return contacts route for users with contact permissions', () => {
+    const permissions = ['contact_manage'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/contacts');
+  });
+
+  it('should return reports route for users with report permissions', () => {
+    const permissions = ['report_manage'];
+    expect(defaultRedirectPage(to, permissions)).toBe(
+      'accounts/2/reports/overview'
+    );
+  });
+
+  it('should return portals route for users with portal permissions', () => {
+    const permissions = ['knowledge_base_manage'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/portals');
+  });
+
+  it('should return dashboard route as default for users with custom roles', () => {
+    const permissions = ['custom_role'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/dashboard');
+  });
+
+  it('should return dashboard route for users with administrator role', () => {
+    const permissions = ['administrator'];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/dashboard');
+  });
+
+  it('should return dashboard route for users with multiple permissions', () => {
+    const permissions = [
+      'contact_manage',
+      'custom_role',
+      'conversation_manage',
+      'agent',
+      'administrator',
+    ];
+    expect(defaultRedirectPage(to, permissions)).toBe('accounts/2/dashboard');
+  });
+});
+
 describe('#validateLoggedInRoutes', () => {
   describe('when account access is missing', () => {
     it('should return the login route', () => {
diff --git a/app/javascript/dashboard/helper/specs/uploadHelper.spec.js b/app/javascript/dashboard/helper/specs/uploadHelper.spec.js
index 470364ed8a95e..3217388f5e9de 100644
--- a/app/javascript/dashboard/helper/specs/uploadHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/uploadHelper.spec.js
@@ -1,52 +1,93 @@
-import { uploadFile } from '../uploadHelper';
 import axios from 'axios';
+import { uploadExternalImage, uploadFile } from '../uploadHelper';
 
 global.axios = axios;
 vi.mock('axios');
 
-describe('#Upload Helpers', () => {
+describe('Upload Helpers', () => {
   afterEach(() => {
-    // Cleaning up the mock after each test
     axios.post.mockReset();
   });
 
-  it('should send a POST request with correct data', async () => {
-    const mockFile = new File(['dummy content'], 'example.png', {
-      type: 'image/png',
+  describe('uploadFile', () => {
+    it('should send a POST request with correct data', async () => {
+      const mockFile = new File(['dummy content'], 'example.png', {
+        type: 'image/png',
+      });
+      const mockResponse = {
+        data: {
+          file_url: 'https://example.com/fileUrl',
+          blob_key: 'blobKey123',
+          blob_id: 'blobId456',
+        },
+      };
+
+      axios.post.mockResolvedValueOnce(mockResponse);
+
+      const result = await uploadFile(mockFile, '1602');
+
+      expect(axios.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1602/upload',
+        expect.any(FormData),
+        { headers: { 'Content-Type': 'multipart/form-data' } }
+      );
+
+      expect(result).toEqual({
+        fileUrl: 'https://example.com/fileUrl',
+        blobKey: 'blobKey123',
+        blobId: 'blobId456',
+      });
     });
-    const mockResponse = {
-      data: {
-        file_url: 'https://example.com/fileUrl',
-        blob_key: 'blobKey123',
-        blob_id: 'blobId456',
-      },
-    };
-
-    axios.post.mockResolvedValueOnce(mockResponse);
-
-    const result = await uploadFile(mockFile, '1602');
-
-    expect(axios.post).toHaveBeenCalledWith(
-      '/api/v1/accounts/1602/upload',
-      expect.any(FormData),
-      { headers: { 'Content-Type': 'multipart/form-data' } }
-    );
-
-    expect(result).toEqual({
-      fileUrl: 'https://example.com/fileUrl',
-      blobKey: 'blobKey123',
-      blobId: 'blobId456',
+
+    it('should handle errors', async () => {
+      const mockFile = new File(['dummy content'], 'example.png', {
+        type: 'image/png',
+      });
+      const mockError = new Error('Failed to upload');
+
+      axios.post.mockRejectedValueOnce(mockError);
+
+      await expect(uploadFile(mockFile)).rejects.toThrow('Failed to upload');
     });
   });
 
-  it('should handle errors', async () => {
-    const mockFile = new File(['dummy content'], 'example.png', {
-      type: 'image/png',
+  describe('uploadExternalImage', () => {
+    it('should send a POST request with correct data', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockResponse = {
+        data: {
+          file_url: 'https://example.com/fileUrl',
+          blob_key: 'blobKey123',
+          blob_id: 'blobId456',
+        },
+      };
+
+      axios.post.mockResolvedValueOnce(mockResponse);
+
+      const result = await uploadExternalImage(mockUrl, '1602');
+
+      expect(axios.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1602/upload',
+        { external_url: mockUrl },
+        { headers: { 'Content-Type': 'application/json' } }
+      );
+
+      expect(result).toEqual({
+        fileUrl: 'https://example.com/fileUrl',
+        blobKey: 'blobKey123',
+        blobId: 'blobId456',
+      });
     });
-    const mockError = new Error('Failed to upload');
 
-    axios.post.mockRejectedValueOnce(mockError);
+    it('should handle errors', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockError = new Error('Failed to upload');
+
+      axios.post.mockRejectedValueOnce(mockError);
 
-    await expect(uploadFile(mockFile)).rejects.toThrow('Failed to upload');
+      await expect(uploadExternalImage(mockUrl)).rejects.toThrow(
+        'Failed to upload'
+      );
+    });
   });
 });
diff --git a/app/javascript/dashboard/helper/uploadHelper.js b/app/javascript/dashboard/helper/uploadHelper.js
index 2a1b9d9cd0be4..6dc1069ceabe5 100644
--- a/app/javascript/dashboard/helper/uploadHelper.js
+++ b/app/javascript/dashboard/helper/uploadHelper.js
@@ -19,26 +19,47 @@ const HEADERS = {
  * The function uses FormData to wrap the file and axios to send the request.
  *
  * @param {File} file - The file to be uploaded. It should be a File object (typically coming from a file input element).
+ * @param {string} accountId - The account ID.
  * @returns {Promise} A promise that resolves with the server's response when the upload is successful, or rejects if there's an error.
  */
 export async function uploadFile(file, accountId) {
-  // Create a new FormData instance.
-  let formData = new FormData();
-
   if (!accountId) {
     accountId = window.location.pathname.split('/')[3];
   }
 
   // Append the file to the FormData instance under the key 'attachment'.
+  let formData = new FormData();
   formData.append('attachment', file);
 
-  // Use axios to send a POST request to the upload endpoint.
   const { data } = await axios.post(
     `/api/${API_VERSION}/accounts/${accountId}/upload`,
     formData,
-    {
-      headers: HEADERS,
-    }
+    { headers: HEADERS }
+  );
+
+  return {
+    fileUrl: data.file_url,
+    blobKey: data.blob_key,
+    blobId: data.blob_id,
+  };
+}
+
+/**
+ * Uploads an image from an external URL.
+ *
+ * @param {string} url - The external URL of the image.
+ * @param {string} accountId - The account ID.
+ * @returns {Promise} A promise that resolves with the server's response.
+ */
+export async function uploadExternalImage(url, accountId) {
+  if (!accountId) {
+    accountId = window.location.pathname.split('/')[3];
+  }
+
+  const { data } = await axios.post(
+    `/api/${API_VERSION}/accounts/${accountId}/upload`,
+    { external_url: url },
+    { headers: { 'Content-Type': 'application/json' } }
   );
 
   return {
diff --git a/app/javascript/dashboard/i18n/locale/am/conversation.json b/app/javascript/dashboard/i18n/locale/am/conversation.json
index 4cc4b9bed5fca..34fa349814112 100644
--- a/app/javascript/dashboard/i18n/locale/am/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/am/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ar/conversation.json b/app/javascript/dashboard/i18n/locale/ar/conversation.json
index 1db9e0fe4656a..cf09fed236333 100644
--- a/app/javascript/dashboard/i18n/locale/ar/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ar/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "اهلاً 👋، مرحباً بك في %{installationName}!",
     "DESCRIPTION": "شكرا للتسجيل. نريدك أن تحصل على أقصى استفادة من %{installationName}. إليك بعض الأشياء التي يمكنك القيام بها في %{installationName} لجعل التجربة رائعة.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "اطلع على آخر التحديثات",
     "ALL_CONVERSATION": {
       "TITLE": "جميع محادثاتك في مكان واحد",
-      "DESCRIPTION": "عرض جميع المحادثات من عملائك في لوحة تحكم واحدة. يمكنك تصفية المحادثات حسب القناة الواردة والتسمية والحالة."
+      "DESCRIPTION": "عرض جميع المحادثات من عملائك في لوحة تحكم واحدة. يمكنك تصفية المحادثات حسب القناة الواردة والتسمية والحالة.",
+      "NEW_LINK": "انقر هنا لإنشاء صندوق وارد"
     },
     "TEAM_MEMBERS": {
       "TITLE": "قم بدعوة أعضاء فريقك",
       "DESCRIPTION": "عندما تصبح جاهز للتخاطب مع عميلك، احضر زملائك في الفريق لمساعدتك. يمكنك دعوة زملائك في الفريق بإضافة عنوان البريد الإلكتروني الخاص بهم إلى قائمة الوكلاء.",
       "NEW_LINK": "انقر هنا لدعوة عضو في الفريق"
     },
-    "INBOXES": {
-      "TITLE": "ربط الصناديق الواردة",
-      "DESCRIPTION": "قم بتوصيل مختلف القنوات التي من خلالها يتحدث عملاؤك إليك. يمكن أن تكون محادثة مباشرة على موقع الويب أو صفحة فيسبوك أو تويتر أو حتى رقم WhatsApp الخاص بك.",
-      "NEW_LINK": "انقر هنا لإنشاء صندوق وارد"
-    },
     "LABELS": {
       "TITLE": "تنظيم المحادثات مع التسميات",
       "DESCRIPTION": "التسميات توفر طريقة أسهل لتصنيف محادثتك. إنشاء بعض التسميات مثل #كبار_العملاء، #العملاء_المحتملون الخ، بحيث يمكنك استخدامها في محادثة لاحقا.",
       "NEW_LINK": "انقر هنا لإنشاء وسوم"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/bg/conversation.json b/app/javascript/dashboard/i18n/locale/bg/conversation.json
index 2489d14eed45f..cb0f81788b902 100644
--- a/app/javascript/dashboard/i18n/locale/bg/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/bg/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ca/conversation.json b/app/javascript/dashboard/i18n/locale/ca/conversation.json
index e83787f3d1f97..b260095707488 100644
--- a/app/javascript/dashboard/i18n/locale/ca/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ca/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hola 👋, Benvingut a %{installationName}!",
     "DESCRIPTION": "Gràcies per registrar-te. Volem que treguis el màxim profit de %{installationName}. Aquí teniu algunes coses que pots fer a %{installationName} perquè l'experiència sigui agradable.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Llegiu les nostres últimes actualitzacions",
     "ALL_CONVERSATION": {
       "TITLE": "Totes les teves converses en un sol lloc",
-      "DESCRIPTION": "Consulta totes les converses dels teus clients en un únic tauler. Podeu filtrar les converses pel canal d'entrada, l'etiqueta i l'estat."
+      "DESCRIPTION": "Consulta totes les converses dels teus clients en un únic tauler. Podeu filtrar les converses pel canal d'entrada, l'etiqueta i l'estat.",
+      "NEW_LINK": "Fes clic aquí per crear una safata d'entrada"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Convida els membres del teu equip",
       "DESCRIPTION": "Com que us esteu preparant per parlar amb el vostre client, feu venir els vostres companys d'equip per ajudar-vos. Pots convidar els teus companys d'equip afegint les seves adreces de correu electrònic a la llista d'agents.",
       "NEW_LINK": "Feu clic aquí per convidar un membre de l'equip"
     },
-    "INBOXES": {
-      "TITLE": "Connecta les safates d'entrada",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Fes clic aquí per crear una safata d'entrada"
-    },
     "LABELS": {
       "TITLE": "Organitza converses amb etiquetes",
       "DESCRIPTION": "Les etiquetes proporcionen una manera més fàcil de classificar la vostra conversa. Crea algunes etiquetes com #consulta-suport, #pregunta-facturació, etc., perquè les puguis utilitzar en una conversa més endavant.",
       "NEW_LINK": "Fes clic aquí per crear etiquetes"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/cs/conversation.json b/app/javascript/dashboard/i18n/locale/cs/conversation.json
index e1babc0d457ee..d06a5fc0d570a 100644
--- a/app/javascript/dashboard/i18n/locale/cs/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/cs/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Ahoj, 👋, Vítejte na %{installationName}!",
     "DESCRIPTION": "Děkujeme za registraci. Chceme, abyste získali maximum z %{installationName}. Zde je několik věcí, které můžete v %{installationName} udělat, abyste udělali zážitek příjemný.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Přečtěte si nejnovější aktualizace",
     "ALL_CONVERSATION": {
       "TITLE": "Všechny vaše konverzace na jednom místě",
-      "DESCRIPTION": "Zobrazit všechny konverzace od zákazníků na jednom nástěnce. Můžete filtrovat konverzace podle příchozího kanálu, popisku a stavu."
+      "DESCRIPTION": "Zobrazit všechny konverzace od zákazníků na jednom nástěnce. Můžete filtrovat konverzace podle příchozího kanálu, popisku a stavu.",
+      "NEW_LINK": "Klikněte zde pro vytvoření schránky"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Pozvěte své členy týmu",
       "DESCRIPTION": "Vzhledem k tomu, že se připravujete na rozhovor se zákazníkem, přiveďte své týmové spolupracovníky, kteří Vám pomohou. Můžete pozvat své spolupracovníky přidáním jejich e-mailové adresy do seznamu agentů.",
       "NEW_LINK": "Klikněte zde pro pozvání člena týmu"
     },
-    "INBOXES": {
-      "TITLE": "Připojit schránky",
-      "DESCRIPTION": "Připojte různé kanály, pomocí kterých budou Vaši zákazníci s Vámi mluvit. Může to být živý chat, Vaše Facebook nebo Twitter stránka nebo dokonce Vaše WhatsApp číslo.",
-      "NEW_LINK": "Klikněte zde pro vytvoření schránky"
-    },
     "LABELS": {
       "TITLE": "Spravovat konverzace s popisky",
       "DESCRIPTION": "Štítky poskytují jednodušší způsob, jak kategorizovat vaši konverzaci. Vytvořte nějaké štítky jako #podpora, #fakturace atd., abyste je mohli použít v konverzaci později.",
       "NEW_LINK": "Klikněte zde pro vytvoření štítků"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/da/conversation.json b/app/javascript/dashboard/i18n/locale/da/conversation.json
index 95c31b0ecc618..9ac784458d3ef 100644
--- a/app/javascript/dashboard/i18n/locale/da/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/da/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hej 👋, Velkommen til %{installationName}!",
     "DESCRIPTION": "Tak for din tilmelding. Vi vil have dig til at få mest muligt ud af %{installationName}. Her er et par ting, du kan gøre i %{installationName} for at gøre oplevelsen dejlig.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Læs vores seneste opdateringer",
     "ALL_CONVERSATION": {
       "TITLE": "Alle dine samtaler på ét sted",
-      "DESCRIPTION": "Se alle samtaler fra dine kunder på et enkelt betjeningspanel. Du kan filtrere samtaler efter indgående kanal, etiket og status."
+      "DESCRIPTION": "Se alle samtaler fra dine kunder på et enkelt betjeningspanel. Du kan filtrere samtaler efter indgående kanal, etiket og status.",
+      "NEW_LINK": "Klik her for at oprette en indbakke"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Inviter dine teammedlemmer",
       "DESCRIPTION": "Da du er ved at blive klar til at tale med din kunde, skal du medbringe dine holdkammerater for at hjælpe dig. Du kan invitere dine holdkammerater ved at tilføje deres e-mailadresser til agentlisten.",
       "NEW_LINK": "Klik her for at invitere et teammedlem"
     },
-    "INBOXES": {
-      "TITLE": "Forbind Indbakker",
-      "DESCRIPTION": "Tilslut forskellige kanaler, hvorigennem dine kunder ville tale med dig. Det kan være en hjemmeside live-chat, din Facebook eller Twitter side eller endda dit WhatsApp nummer.",
-      "NEW_LINK": "Klik her for at oprette en indbakke"
-    },
     "LABELS": {
       "TITLE": "Organiser samtaler med etiketter",
       "DESCRIPTION": "Etiketter giver en lettere måde at kategorisere din samtale. Opret nogle etiketter som #support-forespørgsel, #billing-spørgsmål osv., så du kan bruge dem i en samtale senere.",
       "NEW_LINK": "Klik her for at oprette tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/de/conversation.json b/app/javascript/dashboard/i18n/locale/de/conversation.json
index f59d59c7892b9..798c398a0d91f 100644
--- a/app/javascript/dashboard/i18n/locale/de/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/de/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hallo 👋, Willkommen bei %{installationName}!",
     "DESCRIPTION": "Danke für's Registrieren. Wir möchten, dass Sie %{installationName} optimal nutzen. Hier sind ein paar Dinge, die Sie in %{installationName} tun können, um das Erlebnis angenehm zu gestalten.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Lesen Sie unsere neuesten Updates",
     "ALL_CONVERSATION": {
       "TITLE": "All Ihre Konversationen an einem Ort",
-      "DESCRIPTION": "Zeigen Sie alle Konversationen Ihrer Kunden in einem einzigen Dashboard an. Sie können die Konversationen nach eingehendem Kanal, Bezeichnung und Status filtern."
+      "DESCRIPTION": "Zeigen Sie alle Konversationen Ihrer Kunden in einem einzigen Dashboard an. Sie können die Konversationen nach eingehendem Kanal, Bezeichnung und Status filtern.",
+      "NEW_LINK": "Hier klicken, um einen Posteingang zu erstellen"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Laden Sie Ihre Teammitglieder ein",
       "DESCRIPTION": "Da Sie sich darauf vorbereiten, mit Ihrem Kunden zu sprechen, ziehen Sie Ihre Teamkollegen hinzu, um Ihnen zu helfen. Sie können Ihre Teamkollegen einladen, indem Sie deren E-Mail-Adressen zur Agentenliste hinzufügen.",
       "NEW_LINK": "Klicken Sie hier, um ein Teammitglied einzuladen"
     },
-    "INBOXES": {
-      "TITLE": "Posteingänge verbinden",
-      "DESCRIPTION": "Verbinden Sie verschiedene Kanäle, über die Ihre Kunden mit Ihnen sprechen würden. Das kann ein Website-Live-Chat, Ihre Facebook- oder Twitter-Seite oder sogar Ihre WhatsApp-Nummer sein.",
-      "NEW_LINK": "Hier klicken, um einen Posteingang zu erstellen"
-    },
     "LABELS": {
       "TITLE": "Organisieren Sie Konversationen mit Labels",
       "DESCRIPTION": "Labels bieten eine einfachere Möglichkeit, Ihre Konversation zu kategorisieren. Erstellen Sie einige Labels wie #support-enquiry, #billing-quest etc., damit Sie sie später in einem Gespräch verwenden können.",
       "NEW_LINK": "Hier klicken, um Tags zu erstellen"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/de/settings.json b/app/javascript/dashboard/i18n/locale/de/settings.json
index af21262a8d71f..f30f1bd51d5db 100644
--- a/app/javascript/dashboard/i18n/locale/de/settings.json
+++ b/app/javascript/dashboard/i18n/locale/de/settings.json
@@ -10,7 +10,7 @@
     "PASSWORD_UPDATE_SUCCESS": "Ihr Passwort wurde erfolgreich geändert",
     "AFTER_EMAIL_CHANGED": "Ihr Profil wurde erfolgreich aktualisiert. Melden Sie sich erneut an, wenn Ihre Anmeldeinformationen geändert werden",
     "FORM": {
-      "PICTURE": "Profile Picture",
+      "PICTURE": "Profilbild",
       "AVATAR": "Profilbild",
       "ERROR": "Bitte korrigieren Sie Formularfehler",
       "REMOVE_IMAGE": "Entfernen",
@@ -37,12 +37,12 @@
       },
       "MESSAGE_SIGNATURE_SECTION": {
         "TITLE": "Persönliche Nachrichtensignatur",
-        "NOTE": "Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes.",
+        "NOTE": "Erstellen Sie eine einzigartige Nachrichtensignatur, die am Ende jeder Nachricht angezeigt wird, die Sie aus einem beliebigen Posteingang senden. Sie können auch ein Inline-Bild einfügen, das in Live-Chat-, E-Mail- und API-Postfächern unterstützt wird.",
         "BTN_TEXT": "Nachrichten-Signatur speichern",
         "API_ERROR": "Signatur konnte nicht gespeichert werden! Versuch es noch einmal",
         "API_SUCCESS": "Signatur erfolgreich gespeichert",
-        "IMAGE_UPLOAD_ERROR": "Couldn't upload image! Try again",
-        "IMAGE_UPLOAD_SUCCESS": "Image added successfully. Please click on save to save the signature",
+        "IMAGE_UPLOAD_ERROR": "Bild konnte nicht hochgeladen werden! Versuchen Sie es erneut",
+        "IMAGE_UPLOAD_SUCCESS": "Bild erfolgreich hinzugefügt. Bitte klicken Sie auf Speichern, um die Signatur zu speichern",
         "IMAGE_UPLOAD_SIZE_ERROR": "Bildgröße sollte kleiner als {size}MB sein"
       },
       "MESSAGE_SIGNATURE": {
@@ -65,11 +65,11 @@
         "NOTE": "Audio-Benachrichtigungen im Dashboard für neue Nachrichten und Unterhaltungen aktivieren.",
         "ALERT_TYPES": {
           "NONE": "Keine",
-          "MINE": "Assigned",
+          "MINE": "Zugewiesen",
           "ALL": "Alle"
         },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "Ereignisse für Konversationen zu alarmieren:",
           "NONE": "Keine",
           "ASSIGNED": "Zugewiesene Unterhaltungen",
           "ALL_CONVERSATIONS": "Alle Konversationen"
@@ -91,26 +91,26 @@
         "CONVERSATION_MENTION": "Senden Sie E-Mail-Benachrichtigungen, wenn Sie in einer Konversation erwähnt werden",
         "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Senden Sie E-Mail-Benachrichtigungen, wenn eine neue Nachricht in einer zugewiesenen Konversation erstellt wird",
         "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "E-Mail-Benachrichtigungen senden, wenn eine neue Nachricht in einer zugewiesenen Konversation erstellt wird",
-        "SLA_MISSED_FIRST_RESPONSE": "Send email notifications when a conversation misses first response SLA",
-        "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
-        "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
+        "SLA_MISSED_FIRST_RESPONSE": "Senden Sie E-Mail-Benachrichtigungen, wenn eine Konversation die erste Antwort-SLA verpasst",
+        "SLA_MISSED_NEXT_RESPONSE": "Senden Sie E-Mail-Benachrichtigungen, wenn eine Konversation die nächste Antwort-SLA verpasst",
+        "SLA_MISSED_RESOLUTION": "Senden Sie E-Mail-Benachrichtigungen, wenn eine Konversation die Lösung-SLA verpasst"
       },
       "NOTIFICATIONS": {
-        "TITLE": "Notification preferences",
-        "TYPE_TITLE": "Notification type",
+        "TITLE": "Benachrichtigungseinstellungen",
+        "TYPE_TITLE": "Benachrichtigungsart",
         "EMAIL": "E-Mail",
-        "PUSH": "Push notification",
+        "PUSH": "Push-Benachrichtigung",
         "TYPES": {
-          "CONVERSATION_CREATED": "A new conversation is created",
-          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
-          "CONVERSATION_MENTION": "You are mentioned in a conversation",
-          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
-          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
-          "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
-          "SLA_MISSED_NEXT_RESPONSE": "A conversation misses next response SLA",
-          "SLA_MISSED_RESOLUTION": "A conversation misses resolution SLA"
+          "CONVERSATION_CREATED": "Eine neue Konversation wurde erstellt",
+          "CONVERSATION_ASSIGNED": "Eine Konversation wurde Ihnen zugewiesen",
+          "CONVERSATION_MENTION": "Sie wurden in einer Konversation erwähnt",
+          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Eine neue Nachricht wurde in einer zugewiesenen Konversation erstellt",
+          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Eine neue Nachricht wurde in einer Konversation erstellt, an der Sie teilnehmen",
+          "SLA_MISSED_FIRST_RESPONSE": "Eine Konversation verpasst die erste Antwort-SLA",
+          "SLA_MISSED_NEXT_RESPONSE": "Eine Konversation verpasst die nächste Antwort-SLA",
+          "SLA_MISSED_RESOLUTION": "Eine Konversation verpasst die Lösungs-SLA"
         },
-        "BROWSER_PERMISSION": "Enable push notifications for your browser so you’re able to receive them"
+        "BROWSER_PERMISSION": "Aktivieren Sie Push-Benachrichtigungen für Ihren Browser, damit Sie diese empfangen können"
       },
       "API": {
         "UPDATE_SUCCESS": "Ihre Benachrichtigungseinstellungen wurden erfolgreich aktualisiert",
@@ -126,9 +126,9 @@
         "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Sende Push-Benachrichtigungen, wenn eine neue Nachricht in einer zugewiesenen Konversation erstellt wird",
         "HAS_ENABLED_PUSH": "Sie haben die Push-Benachrichtigung für diesen Browser aktiviert.",
         "REQUEST_PUSH": "Push-Benachrichtigungen aktivieren",
-        "SLA_MISSED_FIRST_RESPONSE": "Send push notifications when a conversation misses first response SLA",
-        "SLA_MISSED_NEXT_RESPONSE": "Send push notifications when a conversation misses next response SLA",
-        "SLA_MISSED_RESOLUTION": "Send push notifications when a conversation misses resolution SLA"
+        "SLA_MISSED_FIRST_RESPONSE": "Senden Sie Push-Benachrichtigungen, wenn eine Konversation die erste Antwort-SLA verpasst",
+        "SLA_MISSED_NEXT_RESPONSE": "Senden Sie Push-Benachrichtigungen, wenn eine Konversation die nächste Antwort-SLA verpasst",
+        "SLA_MISSED_RESOLUTION": "Senden Sie Push-Benachrichtigungen, wenn eine Konversation die Lösungs-SLA verpasst"
       },
       "PROFILE_IMAGE": {
         "LABEL": "Profilbild"
@@ -229,7 +229,7 @@
   "SIDEBAR": {
     "CURRENTLY_VIEWING_ACCOUNT": "Wird gerade angezeigt:",
     "SWITCH": "Wechseln",
-    "INBOX_VIEW": "Inbox View",
+    "INBOX_VIEW": "Posteingangsansicht",
     "CONVERSATIONS": "Gespräche",
     "INBOX": "Posteingang",
     "ALL_CONVERSATIONS": "Alle Konversationen",
@@ -239,7 +239,7 @@
     "REPORTS": "Berichte",
     "SETTINGS": "Einstellungen",
     "CONTACTS": "Kontakte",
-    "CAPTAIN": "Captain",
+    "CAPTAIN": "Kapitän",
     "HOME": "Hauptseite",
     "AGENTS": "Agenten",
     "AGENT_BOTS": "Bots",
@@ -279,7 +279,7 @@
     "SLA": "SLA",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Übersicht",
-    "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
+    "REAUTHORIZE": "Ihre Posteingangsverbindung ist abgelaufen. Bitte erneut verbinden,\n um weiterhin Nachrichten empfangen und senden zu können",
     "HELP_CENTER": {
       "TITLE": "Hilfezentrum",
       "ALL_ARTICLES": "Alle Artikel",
diff --git a/app/javascript/dashboard/i18n/locale/de/teamsSettings.json b/app/javascript/dashboard/i18n/locale/de/teamsSettings.json
index b241429f5fc1c..de26f3821ec11 100644
--- a/app/javascript/dashboard/i18n/locale/de/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/de/teamsSettings.json
@@ -2,9 +2,9 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Neues Team erstellen",
     "HEADER": "Teams",
-    "LOADING": "Fetching teams",
-    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
-    "LEARN_MORE": "Learn more about teams",
+    "LOADING": "Teams werden abgerufen",
+    "DESCRIPTION": "Teams ermöglichen es Ihnen, Agenten basierend auf ihren Aufgaben in Gruppen zu organisieren. Ein Agent kann mehreren Teams angehören. Bei der Zusammenarbeit können Sie Unterhaltungen bestimmten Teams zuweisen.",
+    "LEARN_MORE": "Erfahren Sie mehr über Teams",
     "LIST": {
       "404": "Es wurden noch keine Teams auf diesem Konto erstellt.",
       "EDIT_TEAM": "Team bearbeiten",
@@ -100,7 +100,7 @@
         "ERROR_MESSAGE": "Das Team konnte nicht gelöscht werden. Versuchen Sie es erneut."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure you want to delete the team?",
+        "TITLE": "Sind Sie sicher, dass Sie das Team löschen möchten?",
         "PLACE_HOLDER": "Bitte geben Sie {teamName} zur Bestätigung ein",
         "MESSAGE": "Das Löschen des Teams wird die Teamzuordnung aus den Konversationen entfernen, die diesem Team zugewiesen wurden.",
         "YES": "Löschen ",
diff --git a/app/javascript/dashboard/i18n/locale/el/conversation.json b/app/javascript/dashboard/i18n/locale/el/conversation.json
index dcc4e633aaf7c..282cdab5f9683 100644
--- a/app/javascript/dashboard/i18n/locale/el/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/el/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Γεια σας 👋, Καλώς ήρθατε στο %{installationName}!",
     "DESCRIPTION": "Ευχαριστούμε για την εγγραφή. Θέλουμε να αξιοποιήσετε στο έπακρο το %{installationName}. Εδώ είναι μερικά πράγματα που μπορείτε να κάνετε στο %{installationName} για να έχετε μια ευχάριστη εμπειρία.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Διαβάστε τις πρόσφατες ενημερώσεις μας",
     "ALL_CONVERSATION": {
       "TITLE": "Όλες οι συνομιλίες σας σε ένα μέρος",
-      "DESCRIPTION": "Δείτε όλες τις συνομιλίες από τους πελάτες σας σε ένα μόνο ταμπλό. Μπορείτε να φιλτράρετε τις συνομιλίες κατά εισερχόμενο κανάλι, ετικέτα και κατάσταση."
+      "DESCRIPTION": "Δείτε όλες τις συνομιλίες από τους πελάτες σας σε ένα μόνο ταμπλό. Μπορείτε να φιλτράρετε τις συνομιλίες κατά εισερχόμενο κανάλι, ετικέτα και κατάσταση.",
+      "NEW_LINK": "Κάντε κλικ εδώ για δημιουργία εισερχόμενων"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Προσκαλέστε τα μέλη της ομάδας σας",
       "DESCRIPTION": "Δεδομένου ότι ετοιμάζεστε να συνομιλήσετε με τον πελάτη σας, φέρτε τους συνάδελφους σας για να σας βοηθήσουν. Μπορείτε να προσκαλέσετε τους συνάδελφους σας προσθέτοντας τη διεύθυνση email τους στη λίστα αντιπροσώπων.",
       "NEW_LINK": "Κάντε κλικ εδώ για να καλέσετε ένα μέλος της ομάδας"
     },
-    "INBOXES": {
-      "TITLE": "Σύνδεση Εισερχομένων",
-      "DESCRIPTION": "Συνδέστε διάφορα κανάλια μέσω των οποίων οι πελάτες σας θα μιλούν μαζί σας. Μπορεί να είναι μια ιστοσελίδα live-chat, το Facebook ή το Twitter σελίδα σας ή ακόμα και ο αριθμός σας WhatsApp.",
-      "NEW_LINK": "Κάντε κλικ εδώ για δημιουργία εισερχόμενων"
-    },
     "LABELS": {
       "TITLE": "Οργάνωση συνομιλιών με ετικέτες",
       "DESCRIPTION": "Οι ετικέτες παρέχουν έναν ευκολότερο τρόπο για να κατηγοριοποιήσετε τη συνομιλία σας. Δημιουργήστε μερικές ετικέτες όπως το #support-quiry, #billing-question κλπ., έτσι ώστε να μπορείτε να τις χρησιμοποιήσετε σε μια συζήτηση αργότερα.",
       "NEW_LINK": "Κάντε κλικ εδώ για δημιουργία ετικετών (tags)"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
index 564bd161bd6ce..a382aec2ea950 100644
--- a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
@@ -55,6 +55,9 @@
       "CREATED_AT": "Created at",
       "LAST_ACTIVITY": "Last activity"
     },
+    "ERRORS": {
+      "VALUE_REQUIRED": "Value is required"
+    },
     "GROUPS": {
       "STANDARD_FILTERS": "Standard filters",
       "ADDITIONAL_FILTERS": "Additional filters",
diff --git a/app/javascript/dashboard/i18n/locale/en/agentMgmt.json b/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
index 442b6becd2ac5..364fa7d50b97e 100644
--- a/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
@@ -18,7 +18,8 @@
       "STATUS": "Status",
       "ACTIONS": "Actions",
       "VERIFIED": "Verified",
-      "VERIFICATION_PENDING": "Verification Pending"
+      "VERIFICATION_PENDING": "Verification Pending",
+      "AVAILABLE_CUSTOM_ROLE": "Available custom role permissions"
     },
     "ADD": {
       "TITLE": "Add agent to your team",
diff --git a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
index a2f7386dcc86c..a83852fb8b133 100644
--- a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
@@ -3,7 +3,8 @@
     "HEADER": "Custom Attributes",
     "HEADER_BTN_TXT": "Add Custom Attribute",
     "LOADING": "Fetching custom attributes",
-    "SIDEBAR_TXT": "<p><b>Custom Attributes</b> <p>A custom attribute tracks facts about your contacts/conversation — like the subscription plan, or when they ordered the first item etc. <br /><br />For creating a Custom Attribute, just click on the <b>Add Custom Attribute.</b> You can also edit or delete an existing  Custom Attribute by clicking on the Edit or Delete button.</p>",
+    "DESCRIPTION": "A custom attribute tracks additional details about your contacts or conversations—such as the subscription plan or the date of their first purchase. You can add different types of custom attributes, such as text, lists, or numbers, to capture the specific information you need.",
+    "LEARN_MORE": "Learn more about custom attributes",
     "ADD": {
       "TITLE": "Add Custom Attribute",
       "SUBMIT": "Create",
@@ -91,7 +92,12 @@
       "CONTACT": "Contact"
     },
     "LIST": {
-      "TABLE_HEADER": ["Name", "Description", "Type", "Key"],
+      "TABLE_HEADER": [
+        "Name",
+        "Description",
+        "Type",
+        "Key"
+      ],
       "BUTTONS": {
         "EDIT": "Edit",
         "DELETE": "Delete"
diff --git a/app/javascript/dashboard/i18n/locale/en/automation.json b/app/javascript/dashboard/i18n/locale/en/automation.json
index a933b185339b6..83944bd51252b 100644
--- a/app/javascript/dashboard/i18n/locale/en/automation.json
+++ b/app/javascript/dashboard/i18n/locale/en/automation.json
@@ -1,9 +1,10 @@
 {
   "AUTOMATION": {
-    "HEADER": "Automations",
+    "HEADER": "Automation",
+    "DESCRIPTION": "Automation can replace and streamline existing processes that require manual effort, such as adding labels and assigning conversations to the most suitable agent. This allows the team to focus on their strengths while reducing time spent on routine tasks.",
+    "LEARN_MORE": "Learn more about automation",
     "HEADER_BTN_TXT": "Add Automation Rule",
     "LOADING": "Fetching automation rules",
-    "SIDEBAR_TXT": "<p><b>Automation Rules</b> <p>Automation can replace and automate existing processes that require manual effort. You can do many things with automation, including adding labels and assigning conversation to the best agent. So the team focuses on what they do best and spends more little time on manual tasks.</p>",
     "ADD": {
       "TITLE": "Add Automation Rule",
       "SUBMIT": "Create",
@@ -39,7 +40,12 @@
       }
     },
     "LIST": {
-      "TABLE_HEADER": ["Name", "Description", "Active", "Created on"],
+      "TABLE_HEADER": [
+        "Name",
+        "Description",
+        "Active",
+        "Created on"
+      ],
       "404": "No automation rules found"
     },
     "DELETE": {
diff --git a/app/javascript/dashboard/i18n/locale/en/contactFilters.json b/app/javascript/dashboard/i18n/locale/en/contactFilters.json
index 02d5dcf890c17..bb3221c6ed6df 100644
--- a/app/javascript/dashboard/i18n/locale/en/contactFilters.json
+++ b/app/javascript/dashboard/i18n/locale/en/contactFilters.json
@@ -30,6 +30,9 @@
       "is_lesser_than": "Is lesser than",
       "days_before": "Is x days before"
     },
+    "ERRORS": {
+      "VALUE_REQUIRED": "Value is required"
+    },
     "ATTRIBUTES": {
       "NAME": "Name",
       "EMAIL": "Email",
diff --git a/app/javascript/dashboard/i18n/locale/en/customRole.json b/app/javascript/dashboard/i18n/locale/en/customRole.json
new file mode 100644
index 0000000000000..bdf1a8fd485ab
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/customRole.json
@@ -0,0 +1,86 @@
+{
+  "CUSTOM_ROLE": {
+    "HEADER": "Custom Roles",
+    "LEARN_MORE": "Learn more about custom roles",
+    "DESCRIPTION": "Custom roles are roles that are created by the account owner or admin. These roles can be assigned to agents to define their access and permissions within the account. Custom roles can be created with specific permissions and access levels to suit the requirements of the organization.",
+    "HEADER_BTN_TXT": "Add custom role",
+    "LOADING": "Fetching custom roles...",
+    "SEARCH_404": "There are no items matching this query.",
+    "PAYWALL": {
+      "TITLE": "Upgrade to create custom roles",
+      "AVAILABLE_ON": "The custom role feature is only available in the Business and Enterprise plans.",
+      "UPGRADE_PROMPT": "Upgrade your plan to get access to advanced features like team management, automations, custom attributes, and more.",
+      "UPGRADE_NOW": "Upgrade now",
+      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
+    },
+    "ENTERPRISE_PAYWALL": {
+      "AVAILABLE_ON": "The custom role feature is only available in the paid plans.",
+      "UPGRADE_PROMPT": "Upgrade to a paid plan to access advanced features like audit logs, agent capacity, and more.",
+      "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
+    },
+    "LIST": {
+      "404": "There are no custom roles available in this account.",
+      "TITLE": "Manage custom roles",
+      "DESC": "Custom roles are roles that are created by the account owner or admin. These roles can be assigned to agents to define their access and permissions within the account. Custom roles can be created with specific permissions and access levels to suit the requirements of the organization.",
+      "TABLE_HEADER": ["Name", "Description", "Permissions", "Actions"]
+    },
+    "PERMISSIONS": {
+      "CONVERSATION_MANAGE": "Manage all conversations",
+      "CONVERSATION_UNASSIGNED_MANAGE": "Manage unassigned conversations and those assigned to them",
+      "CONVERSATION_PARTICIPATING_MANAGE": "Manage participating conversations and those assigned to them",
+      "CONTACT_MANAGE": "Manage contacts",
+      "REPORT_MANAGE": "Manage reports",
+      "KNOWLEDGE_BASE_MANAGE": "Manage knowledge base"
+    },
+    "FORM": {
+      "NAME": {
+        "LABEL": "Name",
+        "PLACEHOLDER": "Please enter a name.",
+        "ERROR": "Name is required."
+      },
+      "DESCRIPTION": {
+        "LABEL": "Description",
+        "PLACEHOLDER": "Please enter a description.",
+        "ERROR": "Description is required."
+      },
+      "PERMISSIONS": {
+        "LABEL": "Permissions",
+        "ERROR": "Permissions are required."
+      },
+      "CANCEL_BUTTON_TEXT": "Cancel",
+      "API": {
+        "ERROR_MESSAGE": "Could not connect to Woot server. Please try again."
+      }
+    },
+    "ADD": {
+      "TITLE": "Add custom role",
+      "DESC": " Custom roles allows you to create roles with specific permissions and access levels to suit the requirements of the organization.",
+      "SUBMIT": "Submit",
+      "API": {
+        "SUCCESS_MESSAGE": "Custom role added successfully."
+      }
+    },
+    "EDIT": {
+      "BUTTON_TEXT": "Edit",
+      "TITLE": "Edit custom role",
+      "DESC": " Custom roles allows you to create roles with specific permissions and access levels to suit the requirements of the organization.",
+      "SUBMIT": "Update",
+      "API": {
+        "SUCCESS_MESSAGE": "Custom role updated successfully."
+      }
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Delete",
+      "API": {
+        "SUCCESS_MESSAGE": "Custom role deleted successfully.",
+        "ERROR_MESSAGE": "Could not connect to Woot server. Please try again."
+      },
+      "CONFIRM": {
+        "TITLE": "Confirm deletion",
+        "MESSAGE": "Are you sure to delete ",
+        "YES": "Yes, delete ",
+        "NO": "No, keep "
+      }
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index 5d77c21aa2cf0..30f3440e50856 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -41,6 +41,7 @@
         "UPLOADING": "Uploading...",
         "SUCCESS": "Image uploaded successfully",
         "ERROR": "Error while uploading image",
+        "UN_AUTHORIZED_ERROR": "You are not authorized to upload images",
         "ERROR_FILE_SIZE": "Image size should be less than {size}MB",
         "ERROR_FILE_FORMAT": "Image format should be jpg, jpeg or png",
         "ERROR_FILE_DIMENSIONS": "Image dimensions should be less than 2000 x 2000"
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index eec8ccde6085e..5bd1b69895bf4 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -1,7 +1,8 @@
 {
   "INBOX_MGMT": {
     "HEADER": "Inboxes",
-    "SIDEBAR_TXT": "<p><b>Inbox</b></p> <p> When you connect a website or a facebook Page to Chatwoot, it is called an <b>Inbox</b>. You can have unlimited inboxes in your Chatwoot account. </p><p> Click on <b>Add Inbox</b> to connect a website or a Facebook Page. </p><p> In the Dashboard, you can see all the conversations from all your inboxes in a single place and respond to them under the `Conversations` tab. </p><p> You can also see conversations specific to an inbox by clicking on the inbox name on the left pane of the dashboard. </p>",
+    "DESCRIPTION": "A channel is the mode of communication your customer chooses to interact with you. An inbox is where you manage interactions for a specific channel. It can include communications from various sources such as email, live chat, and social media.",
+    "LEARN_MORE": "Learn more about inboxes",
     "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
     "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "LIST": {
@@ -745,6 +746,18 @@
       "MICROSOFT": "Microsoft",
       "GOOGLE": "Google",
       "OTHER_PROVIDERS": "Other Providers"
+    },
+    "CHANNELS": {
+      "MESSENGER": "Messenger",
+      "WEB_WIDGET": "Website",
+      "TWITTER_PROFILE": "Twitter",
+      "TWILIO_SMS": "Twilio SMS",
+      "WHATSAPP": "WhatsApp",
+      "SMS": "SMS",
+      "EMAIL": "Email",
+      "TELEGRAM": "Telegram",
+      "LINE": "Line",
+      "API": "API Channel"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index 1858f4947f98b..9b8c056f8f08b 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -33,6 +33,7 @@ import sla from './sla.json';
 import inbox from './inbox.json';
 import general from './general.json';
 import datePicker from './datePicker.json';
+import customRole from './customRole.json';
 
 export default {
   ...advancedFilters,
@@ -70,4 +71,5 @@ export default {
   ...inbox,
   ...general,
   ...datePicker,
+  ...customRole,
 };
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 47349d1b19abf..f478b71b489bd 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -12,6 +12,7 @@
     },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
+      "LEARN_MORE": "Learn more about webhooks",
       "FORM": {
         "CANCEL": "Cancel",
         "DESC": "Webhook events provide you the realtime information about what's happening in your Chatwoot account. Please enter a valid URL to configure a callback.",
diff --git a/app/javascript/dashboard/i18n/locale/en/macros.json b/app/javascript/dashboard/i18n/locale/en/macros.json
index 246d60c26760c..559c680ffeb9a 100644
--- a/app/javascript/dashboard/i18n/locale/en/macros.json
+++ b/app/javascript/dashboard/i18n/locale/en/macros.json
@@ -1,10 +1,11 @@
 {
   "MACROS": {
     "HEADER": "Macros",
+    "DESCRIPTION": "A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click.",
+    "LEARN_MORE": "Learn more about macros",
     "HEADER_BTN_TXT": "Add a new macro",
     "HEADER_BTN_TXT_SAVE": "Save macro",
     "LOADING": "Fetching macros",
-    "SIDEBAR_TXT": "<p><b>Macros</b><p>A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click. When the agents run the macro, the actions would be performed sequentially in the order they are defined. Macros improve productivity and increase consistency in actions. </p><p>A macro can be helpful in 2 ways. </p><p><b>As an agent assist:</b> If an agent performs a set of actions multiple times, they can save it as a macro and execute all the actions together using a single click.</p><p><b>As an option to onboard a team member:</b> Every agent has to perform many different checks/actions during each conversation. Onboarding a new support team member will be easy if pre-defined macros are available on the account. Instead of describing each step in detail, the manager/team lead can point to the macros used in different scenarios.</p>",
     "ERROR": "Something went wrong. Please try again",
     "ORDER_INFO": "Macros will run in the order you add your actions. You can rearrange them by dragging them by the handle beside each node.",
     "ADD": {
@@ -24,7 +25,12 @@
       }
     },
     "LIST": {
-      "TABLE_HEADER": ["Name", "Created by", "Last updated by", "Visibility"],
+      "TABLE_HEADER": [
+        "Name",
+        "Created by",
+        "Last updated by",
+        "Visibility"
+      ],
       "404": "No macros found"
     },
     "DELETE": {
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index dabbff89fb2b9..0a3d7eda715f5 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -145,11 +145,7 @@
       },
       "AVAILABILITY": {
         "LABEL": "Availability",
-        "STATUSES_LIST": [
-          "Online",
-          "Busy",
-          "Offline"
-        ],
+        "STATUSES_LIST": ["Online", "Busy", "Offline"],
         "SET_AVAILABILITY_SUCCESS": "Availability has been set successfully",
         "SET_AVAILABILITY_ERROR": "Couldn't set availability, please try again"
       },
@@ -277,6 +273,7 @@
     "REPORTS_TEAM": "Team",
     "SET_AVAILABILITY_TITLE": "Set yourself as",
     "SLA": "SLA",
+    "CUSTOM_ROLES": "Custom Roles",
     "BETA": "Beta",
     "REPORTS_OVERVIEW": "Overview",
     "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
diff --git a/app/javascript/dashboard/i18n/locale/es/conversation.json b/app/javascript/dashboard/i18n/locale/es/conversation.json
index 53f870d5ba922..7bd8d701c59fb 100644
--- a/app/javascript/dashboard/i18n/locale/es/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/es/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hola 👋, ¡Bienvenido a %{installationName}!",
     "DESCRIPTION": "Gracias por registrarse. Queremos que saque el máximo provecho de %{installationName}. Aquí hay algunas cosas que puede hacer en %{installationName} para hacer que la experiencia sea agradable.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Leer nuestras últimas actualizaciones",
     "ALL_CONVERSATION": {
       "TITLE": "Todas sus conversaciones en un solo lugar",
-      "DESCRIPTION": "Ver todas las conversaciones de sus clientes en un solo panel de control. Puede filtrar las conversaciones por el canal entrante, etiqueta y estado."
+      "DESCRIPTION": "Ver todas las conversaciones de sus clientes en un solo panel de control. Puede filtrar las conversaciones por el canal entrante, etiqueta y estado.",
+      "NEW_LINK": "Haga clic aquí para crear una bandeja de entrada"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite a los miembros de su equipo",
       "DESCRIPTION": "Ya que usted se está preparando para hablar con su cliente, traiga a sus compañeros para asistirle. Puedes invitar a sus compañeros de equipo añadiendo su dirección de correo electrónico a la lista de agentes.",
       "NEW_LINK": "Haga clic aquí para invitar a un miembro del equipo"
     },
-    "INBOXES": {
-      "TITLE": "Conectar bandejas de entrada",
-      "DESCRIPTION": "Conecte varios canales a través de los cuales sus clientes le hablarían. Puede ser un sitio web en vivo, su página de Facebook o Twitter o incluso su número de WhatsApp.",
-      "NEW_LINK": "Haga clic aquí para crear una bandeja de entrada"
-    },
     "LABELS": {
       "TITLE": "Organice las conversaciones con etiquetas",
       "DESCRIPTION": "Las etiquetas proporcionan una forma fácil de clasificar su conversación. Cree algunas etiquetas como #pregunta-soporte, #pregunta-dacturación etc., para que pueda usarlas en una conversación más tarde.",
       "NEW_LINK": "Haga clic aquí para crear etiquetas"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/fa/conversation.json b/app/javascript/dashboard/i18n/locale/fa/conversation.json
index 2a1a7ddcf047e..9346c789036f0 100644
--- a/app/javascript/dashboard/i18n/locale/fa/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/fa/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "سلام 👋، خوش آمدی به %{installationName}!",
     "DESCRIPTION": "از این که ثبت نام کرده اید سپاسگذاریم. ما ماخواهیم بهترین تجربه را از %{installationName} داشته باشید. در اینجا چند کار وجود دارد که می توانید در %{installationName} انجام دهید تا تجربه بهتری داشته باشید.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "آخرین به روزرسانی های ما را بخوانید",
     "ALL_CONVERSATION": {
       "TITLE": "همه مکالمات شما در یک مکان",
-      "DESCRIPTION": "همه مکالمات مشتریان خود را در یک داشبورد واحد مشاهده کنید. می توانید مکالمات را بر اساس کانال ، برچسب و وضعیت ورودی فیلتر کنید."
+      "DESCRIPTION": "همه مکالمات مشتریان خود را در یک داشبورد واحد مشاهده کنید. می توانید مکالمات را بر اساس کانال ، برچسب و وضعیت ورودی فیلتر کنید.",
+      "NEW_LINK": "برای ایجاد صندوق ورودی اینجا را کلیک کنید"
     },
     "TEAM_MEMBERS": {
       "TITLE": "اعضای تیم خود را دعوت کنید",
       "DESCRIPTION": "از آنجا که در حال آماده شدن برای گفتگو با مشتری هستید ، می توانید از هم تیمی های خود نیز کمک بگیرید. با افزودن آدرس ایمیل آنها به لیست اپراتور ها، می توانید از هم تیمی های خود دعوت کنید.",
       "NEW_LINK": "برای دعوت از یکی از اعضای تیم اینجا را کلیک کنید"
     },
-    "INBOXES": {
-      "TITLE": "صندوق ورودی را وصل کنید",
-      "DESCRIPTION": "شما می توانید کانال های مختلفی را برای ارتباط با مشتری ایجاد نمایید، شما میتوانید از طریق چت داخل سایت یا فیس بوک یا توییتر و حتی واتس آپ استفاده نمایید.",
-      "NEW_LINK": "برای ایجاد صندوق ورودی اینجا را کلیک کنید"
-    },
     "LABELS": {
       "TITLE": "سازماندهی مکالمات با برچسب ها",
       "DESCRIPTION": "برچسب ها روش ساده تری برای دسته بندی مکالمه شما فراهم می کنند. برخی از برچسب ها مانند #پشتیبانی-درخواست ، #صورتحساب و غیره را ایجاد کنید تا بعداً بتوانید از آنها در مکالمه استفاده کنید.",
       "NEW_LINK": "برای ایجاد برچسب ها اینجا را کلیک کنید"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/fi/conversation.json b/app/javascript/dashboard/i18n/locale/fi/conversation.json
index c2ee8bb34d19a..f661741117aaa 100644
--- a/app/javascript/dashboard/i18n/locale/fi/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/fi/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/fr/conversation.json b/app/javascript/dashboard/i18n/locale/fr/conversation.json
index 6864cf3f7c54c..465cdf04654fe 100644
--- a/app/javascript/dashboard/i18n/locale/fr/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/fr/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Salut 👋, Bienvenue sur %{installationName}!",
     "DESCRIPTION": "Merci pour votre inscription. Nous souhaitons que vous tiriez le meilleur parti de %{installationName}. Voici quelques actions que vous pouvez effectuer dans %{installationName} pour rendre votre expérience agréable.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Consultez nos dernières mises à jour",
     "ALL_CONVERSATION": {
       "TITLE": "Toutes vos conversations en un seul lieu",
-      "DESCRIPTION": "Visualisez toutes les conversations de vos clients dans un seul tableau de bord. Vous pouvez filtrer les conversations par le canal entrant, l'étiquette et le statut."
+      "DESCRIPTION": "Visualisez toutes les conversations de vos clients dans un seul tableau de bord. Vous pouvez filtrer les conversations par le canal entrant, l'étiquette et le statut.",
+      "NEW_LINK": "Cliquez ici pour créer une boîte de réception"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invitez les membres de votre équipe",
       "DESCRIPTION": "Puisque vous vous apprêtez à parler à votre client, amenez vos coéquipiers pour vous aider. Vous pouvez inviter vos coéquipiers en ajoutant leurs adresses e-mail à la liste des agents.",
       "NEW_LINK": "Cliquez ici pour inviter un membre de l'équipe"
     },
-    "INBOXES": {
-      "TITLE": "Connecter les boîtes de réception",
-      "DESCRIPTION": "Connectez différents canaux à travers lesquels vos clients vous parleraient. Il peut s'agir d'un chat de site internet, de votre page Facebook ou Twitter ou même de votre numéro WhatsApp.",
-      "NEW_LINK": "Cliquez ici pour créer une boîte de réception"
-    },
     "LABELS": {
       "TITLE": "Organiser les conversations avec des labels",
       "DESCRIPTION": "Les labels fournissent un moyen plus facile de catégoriser votre conversation. Créez des étiquettes comme #demande-support, #question-facturation etc., afin que vous puissiez les utiliser dans une conversation plus tard.",
       "NEW_LINK": "Cliquez ici pour créer des tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/he/conversation.json b/app/javascript/dashboard/i18n/locale/he/conversation.json
index 19db5415badae..5372bbb9af0c0 100644
--- a/app/javascript/dashboard/i18n/locale/he/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/he/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "היי 👋, ברוך הבא ל%{installationName}!",
     "DESCRIPTION": "תודה על ההרשמה. אנחנו רוצים לתת לך את הכי הרבה מ %{installationName}. הינה כמה דברים שאתה יכול לעשות עם %{installationName} לחוויה טובה.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "תקרא את העדכונים אחרונים",
     "ALL_CONVERSATION": {
       "TITLE": "כל השיחות שלך במקום אחד",
-      "DESCRIPTION": "צפה בכל השיחות שלך עם הלקוחות בדאשבורד אחד. אתה יכול לסנן את השיחות לפי הערוץ, התווית והסטטוס."
+      "DESCRIPTION": "צפה בכל השיחות שלך עם הלקוחות בדאשבורד אחד. אתה יכול לסנן את השיחות לפי הערוץ, התווית והסטטוס.",
+      "NEW_LINK": "לחץ כאן כדי ליצור תיבה"
     },
     "TEAM_MEMBERS": {
       "TITLE": "הזמן את חברי הצוות שלך",
       "DESCRIPTION": "מאחר ואתם מוכנים לדבר עם הלקוח, הביאו את חברי הצוות שלכם לעזור לכם. תוכלו להזמין חברי צוות על ידי הוספה של כתובת הדוא\"ל שלהם לרשימת הסוכנים.",
       "NEW_LINK": "לחץ כאן כדי להזמין חבר צוות"
     },
-    "INBOXES": {
-      "TITLE": "התחבר לתיבות",
-      "DESCRIPTION": "חבר ערוצים שונים דרכם הלקוחות שלך היו מדברים איתך. זה יכול להיות אתר צ'אט חי, דף הפייסבוק או הטוויטר שלך או אפילו מספר הוואטסאפ שלך.",
-      "NEW_LINK": "לחץ כאן כדי ליצור תיבה"
-    },
     "LABELS": {
       "TITLE": "ארגן שיחות עם תוויות",
       "DESCRIPTION": "תוויות מספקות דרך קלה יותר לסווג את השיחה שלך. צור כמה תוויות כמו #support-enquiry, #billing-question וכו', כדי שתוכל להשתמש בהן בשיחה מאוחר יותר.",
       "NEW_LINK": "לחץ כאן כדי ליצור תגיות"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/hi/conversation.json b/app/javascript/dashboard/i18n/locale/hi/conversation.json
index 8eb490a4b5e3f..34fa349814112 100644
--- a/app/javascript/dashboard/i18n/locale/hi/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/hi/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/hi/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/hi/inboxMgmt.json
index 19212a595c75f..36eb845d612b2 100644
--- a/app/javascript/dashboard/i18n/locale/hi/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/hi/inboxMgmt.json
@@ -367,12 +367,19 @@
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
         "SIGN_IN": "Sign in with Microsoft",
-        "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
+      },
+      "GOOGLE": {
+        "TITLE": "Google Email",
+        "DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
+        "SIGN_IN": "Sign in with Google",
+        "EMAIL_PLACEHOLDER": "Enter email address",
+        "ERROR_MESSAGE": "There was an error connecting to Google, please try again"
       }
     },
     "DETAILS": {
       "LOADING_FB": "Authenticating you with Facebook...",
+      "ERROR_FB_LOADING": "Error loading Facebook SDK. Please disable any ad-blockers and try again from a different browser.",
       "ERROR_FB_AUTH": "Something went wrong, Please refresh page...",
       "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
       "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
@@ -736,6 +743,7 @@
     },
     "EMAIL_PROVIDERS": {
       "MICROSOFT": "Microsoft",
+      "GOOGLE": "Google",
       "OTHER_PROVIDERS": "Other Providers"
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/hr/automation.json b/app/javascript/dashboard/i18n/locale/hr/automation.json
index 9bfece531ec19..d5c948d46458c 100644
--- a/app/javascript/dashboard/i18n/locale/hr/automation.json
+++ b/app/javascript/dashboard/i18n/locale/hr/automation.json
@@ -106,12 +106,12 @@
       "DEACTIVATION_SUCCESFUL": "Automation Rule Deactivated Successfully",
       "ACTIVATION_ERROR": "Could not Activate Automation, Please try again later",
       "DEACTIVATION_ERROR": "Could not Deactivate Automation, Please try again later",
-      "CONFIRMATION_LABEL": "Yes",
-      "CANCEL_LABEL": "No"
+      "CONFIRMATION_LABEL": "Da",
+      "CANCEL_LABEL": "Ne"
     },
     "ATTACHMENT": {
       "UPLOAD_ERROR": "Could not upload attachment, Please try again",
-      "LABEL_IDLE": "Upload Attachment",
+      "LABEL_IDLE": "Prenesi privitak",
       "LABEL_UPLOADING": "Prenosim...",
       "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
diff --git a/app/javascript/dashboard/i18n/locale/hr/conversation.json b/app/javascript/dashboard/i18n/locale/hr/conversation.json
index e6b513e76a5fc..181a8d6059566 100644
--- a/app/javascript/dashboard/i18n/locale/hr/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/hr/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/hu/conversation.json b/app/javascript/dashboard/i18n/locale/hu/conversation.json
index 64203743db4b7..9c9a33fcb55de 100644
--- a/app/javascript/dashboard/i18n/locale/hu/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/hu/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hello 👋, köszöntünk a %{installationName}!",
     "DESCRIPTION": "Köszönjük, hogy feliratkoztál. Segíteni akarunk, hogy a legtöbbet hozd ki a %{installationName}. Itt találsz egy pár dolgot, amit a %{installationName} lehetővé tesz.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Olvasd el legfrissebbeket",
     "ALL_CONVERSATION": {
       "TITLE": "Minden beszélgetésed egy helyen",
-      "DESCRIPTION": "Kövesd az összes ügyfélbeszélgetésedet egy felületről. Szűrheted a beszélgetéseket csatorna, cimke vagy státusz alapján."
+      "DESCRIPTION": "Kövesd az összes ügyfélbeszélgetésedet egy felületről. Szűrheted a beszélgetéseket csatorna, cimke vagy státusz alapján.",
+      "NEW_LINK": "Kattints ide postaláda létrehozásához"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Hívd meg csapattagjaidat",
       "DESCRIPTION": "Mivel éppen ügyféllel készülsz beszélni, hívd meg a csapattagjaidat, hogy segíthessenek neked. Az e-mailcímük ügynöklistába való megadásával tudod meghívni őket.",
       "NEW_LINK": "Kattints ide csapattag meghívásához"
     },
-    "INBOXES": {
-      "TITLE": "Inboxok összekötése",
-      "DESCRIPTION": "Különböző csatornákat használva kapcsolódj az ügyfeleidhez. Weboldal chateden, a Facebook vagy Twitter fiókodon, vagy akár WhatsApp számodon keresztül.",
-      "NEW_LINK": "Kattints ide postaláda létrehozásához"
-    },
     "LABELS": {
       "TITLE": "Rendezd a beszélgetéseket cimkékkel",
       "DESCRIPTION": "A cimkék egyszerű módot biztosítanak hogy kategorizáld a beszélgetést. Hozz létre cimkéket, mint például a #támogatás vagy a #számlázás, stb... későbbi használatra.",
       "NEW_LINK": "Kattints ide cimkék létrehozásához"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/hy/conversation.json b/app/javascript/dashboard/i18n/locale/hy/conversation.json
index 8eb490a4b5e3f..34fa349814112 100644
--- a/app/javascript/dashboard/i18n/locale/hy/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/hy/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/id/conversation.json b/app/javascript/dashboard/i18n/locale/id/conversation.json
index 8549b0a9b6c26..f2ba95cca45a6 100644
--- a/app/javascript/dashboard/i18n/locale/id/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/id/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hai 👋, Selamat datang di %{installationName}!",
     "DESCRIPTION": "Terima kasih telah mendaftar. Kami ingin Anda mendapatkan hasil maksimal dari %{installationName}. Berikut beberapa hal yang dapat Anda lakukan di %{installationName} untuk membuat pengalaman menyenangkan.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Baca pembaruan terbaru kami",
     "ALL_CONVERSATION": {
       "TITLE": "Semua percakapan Anda di satu tempat",
-      "DESCRIPTION": "Lihat semua percakapan dari pelanggan Anda dalam satu dasbor. Anda dapat memfilter percakapan berdasarkan saluran masuk, label, dan status."
+      "DESCRIPTION": "Lihat semua percakapan dari pelanggan Anda dalam satu dasbor. Anda dapat memfilter percakapan berdasarkan saluran masuk, label, dan status.",
+      "NEW_LINK": "Klik di sini untuk membuat kotak masuk"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Undang anggota tim Anda",
       "DESCRIPTION": "Karena Anda bersiap untuk berbicara dengan pelanggan Anda, ajak rekan tim Anda untuk membantu Anda. Anda dapat mengundang rekan tim Anda dengan menambahkan alamat email mereka ke daftar agen.",
       "NEW_LINK": "Klik di sini untuk mengundang anggota tim"
     },
-    "INBOXES": {
-      "TITLE": "Hubungkan Kotak Masuk",
-      "DESCRIPTION": "Hubungkan berbagai saluran yang akan digunakan pelanggan untuk berbicara dengan Anda. Ini bisa berupa obrolan langsung situs web, halaman Facebook atau Twitter Anda atau bahkan nomor WhatsApp Anda.",
-      "NEW_LINK": "Klik di sini untuk membuat kotak masuk"
-    },
     "LABELS": {
       "TITLE": "Atur percakapan dengan label",
       "DESCRIPTION": "Label memberikan cara yang lebih mudah untuk mengkategorikan percakapan Anda. Buat beberapa label seperti #support-inquiry, #billing-question, dll., Sehingga Anda dapat menggunakannya dalam percakapan nanti.",
       "NEW_LINK": "Klik di sini untuk membuat label"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/is/conversation.json b/app/javascript/dashboard/i18n/locale/is/conversation.json
index 81ffa3e80cda0..e8506cf4d09fd 100644
--- a/app/javascript/dashboard/i18n/locale/is/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/is/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Velkomin/n á %{installationName}!",
     "DESCRIPTION": "Takk fyrir að skrá þig. Við viljum að þú fáir sem mest út úr %{installationName}. Hér eru nokkur atriði sem þú getur gert í %{installationName} til að gera upplifunina ánægjulega.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Sjáðu nýjustu uppfærslurnar okkar",
     "ALL_CONVERSATION": {
       "TITLE": "Öll samtölin þin á einum stað",
-      "DESCRIPTION": "Skoðaðu öll samtöl viðskiptavina þinna á einu mælaborði. Þú getur síað samtölin eftir innkominni rás, merkingu og stöðu."
+      "DESCRIPTION": "Skoðaðu öll samtöl viðskiptavina þinna á einu mælaborði. Þú getur síað samtölin eftir innkominni rás, merkingu og stöðu.",
+      "NEW_LINK": "Smelltu hér til að bæta við innhólfi"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Bjóða í teymið",
       "DESCRIPTION": "Þar sem þú ert að búa þig undir að tala við viðskiptavini þína skaltu fá samstarfsfélaga þína til að aðstoða þig. Þú getur boðið samstarfsfélögum þínum með því að bæta netföngum þeirra við þjónustufulltrúalistann.",
       "NEW_LINK": "Smelltu hér til að bjóða meðlim í teymið"
     },
-    "INBOXES": {
-      "TITLE": "Tengja Innhólf",
-      "DESCRIPTION": "Tengdu ýmsar rásir þar sem viðskiptavinir þínir myndu tala við þig. Það getur verið netspjall á vefsíðu, Facebook eða Twitter síðan þín eða jafnvel WhatsApp númerið þitt.",
-      "NEW_LINK": "Smelltu hér til að bæta við innhólfi"
-    },
     "LABELS": {
       "TITLE": "Flokkaðu samtöl með merkjum",
       "DESCRIPTION": "Merkingar eru auðveldari leið til að flokka samtalið þitt. Búðu til merki eins og #support-enquiry, #billing-question o.s.frv., svo þú getir notað þau í samtali síðar.",
       "NEW_LINK": "Smelltu hér til að búa til merki"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/it/conversation.json b/app/javascript/dashboard/i18n/locale/it/conversation.json
index f75f74730122e..852fccec3e35d 100644
--- a/app/javascript/dashboard/i18n/locale/it/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/it/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Ehi 👋, Benvenuto in %{installationName}!",
     "DESCRIPTION": "Grazie per esserti registrato. Vogliamo che tu ottenga il massimo da %{installationName}. Ecco alcune cose che puoi fare in %{installationName} per rendere l'esperienza deliziosa.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Leggi gli ultimi aggiornamenti",
     "ALL_CONVERSATION": {
       "TITLE": "Tutte le conversazioni in un unico luogo",
-      "DESCRIPTION": "Visualizza tutte le conversazioni dai tuoi clienti in una singola dashboard. È possibile filtrare le conversazioni in base al canale, all'etichetta e allo stato in arrivo."
+      "DESCRIPTION": "Visualizza tutte le conversazioni dai tuoi clienti in una singola dashboard. È possibile filtrare le conversazioni in base al canale, all'etichetta e allo stato in arrivo.",
+      "NEW_LINK": "Clicca qui per creare una casella di posta"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invita i membri del tuo team",
       "DESCRIPTION": "Dal momento che siete sempre pronti a parlare con il vostro cliente, portare nei vostri compagni di squadra per assistervi. Puoi invitare i tuoi compagni di squadra aggiungendo i loro indirizzi email alla lista degli agenti.",
       "NEW_LINK": "Clicca qui per invitare un membro del team"
     },
-    "INBOXES": {
-      "TITLE": "Connetti Inbox",
-      "DESCRIPTION": "Collegare vari canali attraverso i quali i vostri clienti sarebbero parlare con voi. Può essere un sito web live-chat, la tua pagina Facebook o Twitter o anche il tuo numero WhatsApp.",
-      "NEW_LINK": "Clicca qui per creare una casella di posta"
-    },
     "LABELS": {
       "TITLE": "Organizza le conversazioni con etichette",
       "DESCRIPTION": "Le etichette forniscono un modo più semplice per categorizzare la conversazione. Crea alcune etichette come #support-enquiry, #billing-question ecc., in modo da poterle usare in una conversazione più tardi.",
       "NEW_LINK": "Clicca qui per creare etichette"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ja/conversation.json b/app/javascript/dashboard/i18n/locale/ja/conversation.json
index a6b14aa309f73..e40a3bb2c64f7 100644
--- a/app/javascript/dashboard/i18n/locale/ja/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ja/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ka/conversation.json b/app/javascript/dashboard/i18n/locale/ka/conversation.json
index 8eb490a4b5e3f..34fa349814112 100644
--- a/app/javascript/dashboard/i18n/locale/ka/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ka/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ko/conversation.json b/app/javascript/dashboard/i18n/locale/ko/conversation.json
index 1ed9dcb361124..c8e6ac2465fb7 100644
--- a/app/javascript/dashboard/i18n/locale/ko/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ko/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "안녕하세요 👋, %{installationName}에 오신 것을 환영합니다!",
     "DESCRIPTION": "가입해주셔서 감사합니다. 저희 %{installationName}의 모든 기능을 최대로 누리기 위해 아래 몇 가지를 해주시겠어요?",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "최근 업데이트 내용 보기",
     "ALL_CONVERSATION": {
       "TITLE": "모든 대화를 한 곳에서",
-      "DESCRIPTION": "고객들과의 모든 대화를 하나의 대시보드에서 확인하세요. 대화들을 채널별, 라벨별, 상태별로 필터링 할 수 있습니다."
+      "DESCRIPTION": "고객들과의 모든 대화를 하나의 대시보드에서 확인하세요. 대화들을 채널별, 라벨별, 상태별로 필터링 할 수 있습니다.",
+      "NEW_LINK": "클릭하여 받은 메시지함을 생성하세요."
     },
     "TEAM_MEMBERS": {
       "TITLE": "팀 구성원들을 초대하세요.",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "클릭하여 팀원을 초대하세요."
     },
-    "INBOXES": {
-      "TITLE": "받은 메시지함에 연결하기",
-      "DESCRIPTION": "고객들과 대화할 수 있는 여러 채널들을 연결하세요. 웹사이트 라이브챗이 될 수도 있고, 페이스북 또는 트위터 페이지, 심지어는 왓츠앱 번호가 될 수도 있습니다.",
-      "NEW_LINK": "클릭하여 받은 메시지함을 생성하세요."
-    },
     "LABELS": {
       "TITLE": "대화들을 라벨로 정리하기",
       "DESCRIPTION": "라벨들은 대화들을 분류할 수 있는 쉬운 방법을 제공합니다. 예를 들면 #support-enquiry, #billing-question 등과 같은 라벨을 생성해서 나중에 대화할 때 사용할 수 있습니다.",
       "NEW_LINK": "클릭하여 태그를 생성하세요."
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/lt/conversation.json b/app/javascript/dashboard/i18n/locale/lt/conversation.json
index c1d42f146b641..0cf6a1e69ecd9 100644
--- a/app/javascript/dashboard/i18n/locale/lt/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/lt/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Sveiki 👋, Sveiki atvykę į %{installationName}!",
     "DESCRIPTION": "Ačiū, kad užsiregistravote. Norime, kad išnaudotumėte visas %{installationName} galimybes. Štai keletas dalykų, kuriuos galite padaryti naudodami %{installationName}, kad patirtis būtų maloni.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Skaitykite mūsų naujausius atnaujinimus",
     "ALL_CONVERSATION": {
       "TITLE": "Visi jūsų pokalbiai vienoje vietoje",
-      "DESCRIPTION": "Peržiūrėkite visus savo klientų pokalbius vienoje informacijos suvestinėje. Galite filtruoti pokalbius pagal gaunamą kanalą, etiketę ir būseną."
+      "DESCRIPTION": "Peržiūrėkite visus savo klientų pokalbius vienoje informacijos suvestinėje. Galite filtruoti pokalbius pagal gaunamą kanalą, etiketę ir būseną.",
+      "NEW_LINK": "Spustelėkite čia, kad sukurtumėte gautų laiškų aplanką"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Pakvieskite savo komandos narius",
       "DESCRIPTION": "Kadangi ruošiatės kalbėtis su savo klientu, pasikvieskite savo komandos draugus, kad jie jums padėtų. Galite pakviesti savo komandos draugus įtraukę jų el. pašto adresus į agentų sąrašą.",
       "NEW_LINK": "Spustelėkite čia, kad pakviestumėte komandos narį"
     },
-    "INBOXES": {
-      "TITLE": "Sujungti Gautų Laiškų Aplankus",
-      "DESCRIPTION": "Prijunkite įvairius kanalus, kuriais jūsų klientai kalbėtų su jumis. Tai gali būti svetainės live-chat, jūsų Facebook ar Twitter ar net jūsų WhatsApp numeris.",
-      "NEW_LINK": "Spustelėkite čia, kad sukurtumėte gautų laiškų aplanką"
-    },
     "LABELS": {
       "TITLE": "Tvarkykite pokalbius etiketėmis",
       "DESCRIPTION": "Etiketės suteikia lengvesnį būdą suskirstyti pokalbį į kategorijas. Sukurkite keletą etikečių, pvz., #palaikymo-klausimas, #atsiskaitymo-klausimas ir kt., kad vėliau galėtumėte jas naudoti pokalbyje.",
       "NEW_LINK": "Spustelėkite čia, kad sukurtumėte žymas"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/lv/conversation.json b/app/javascript/dashboard/i18n/locale/lv/conversation.json
index cd406547b3c69..ef159edae5fb3 100644
--- a/app/javascript/dashboard/i18n/locale/lv/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/lv/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Sveicināti 👋, Laipni lūdzam %{installationName}!",
     "DESCRIPTION": "Paldies, ka reģistrējāties. Mēs vēlamies, lai Jūs gūtu maksimālu labumu no %{installationName}. Šeit ir dažas lietas, ko varat darīt %{installationName} lai Jūsu pieredze būtu patīkamāka.",
+    "GREETING_MORNING": "👋 Labrīt, %{name}. Laipni lūdzam %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Labdien, %{name}. Laipni lūdzam %{installationName}.",
+    "GREETING_EVENING": "👋 Labvakar, %{name}. Laipni lūdzam %{installationName}.",
     "READ_LATEST_UPDATES": "Izlasīt mūsu aktuālākos jaunumus",
     "ALL_CONVERSATION": {
       "TITLE": "Visas Jūsu sarunas vienuviet",
-      "DESCRIPTION": "Skatīt visas sarunas ar klientiem vienā informācijas panelī. Jūs varat filtrēt sarunas pēc ienākošā kanāla, etiķetes un statusa."
+      "DESCRIPTION": "Skatīt visas sarunas ar klientiem vienā informācijas panelī. Jūs varat filtrēt sarunas pēc ienākošā kanāla, etiķetes un statusa.",
+      "NEW_LINK": "Noklikšķiniet šeit, lai izveidotu iesūtni"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Uzaicināt savas komandas biedrus",
       "DESCRIPTION": "Tā kā Jūs gatavojaties runāt ar savu klientu, piesaistiet savus komandas biedrus, lai viņi Jums palīdzētu. Jūs varat uzaicināt savus komandas biedrus, pievienojot viņu e-pasta adreses aģentu sarakstam.",
       "NEW_LINK": "Noklikšķiniet šeit, lai uzaicinātu komandas biedru"
     },
-    "INBOXES": {
-      "TITLE": "Pievienot Iesūtnes",
-      "DESCRIPTION": "Pievienot dažādus kanālus, caur kuriem Jūsu klienti ar Jums runās. Tie var būt tīmekļa vietņu tiešraides tērzētavas, Jūsu Facebook vai Twitter lapa, vai pat jūsu WhatsApp numurs.",
-      "NEW_LINK": "Noklikšķiniet šeit, lai izveidotu iesūtni"
-    },
     "LABELS": {
       "TITLE": "Organizēt sarunas ar etiķetēm",
       "DESCRIPTION": "Etiķetes nodrošina vienkāršāku veidu, kā klasificēt sarunu. Izveidojiet dažas etiķetes, piemēram, #atbalsta-pieprasījums, #norēķinu-jautājums utt., lai vēlāk varētu tās izmantot sarunas laikā.",
       "NEW_LINK": "Noklikšķiniet šeit, lai izveidotu atzīmes"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Izveidot sagatavotas atbildes",
+      "DESCRIPTION": "Iepriekš sagatavotas atbildes veidnes palīdz ātri reaģēt uz sarunu. Aģenti var izmantot '/' rakstzīmi, kurai seko kods, lai ievietotu atbildi.",
+      "NEW_LINK": "Noklikšķiniet šeit, lai izveidotu sagatavotu atbildi"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ml/conversation.json b/app/javascript/dashboard/i18n/locale/ml/conversation.json
index e63a93e4b3e07..5ac4f288149de 100644
--- a/app/javascript/dashboard/i18n/locale/ml/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ml/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ms/conversation.json b/app/javascript/dashboard/i18n/locale/ms/conversation.json
index 02589d53c1cdb..1952fde0a3788 100644
--- a/app/javascript/dashboard/i18n/locale/ms/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ms/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ms/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/ms/inboxMgmt.json
index cb1a7176b2560..851d6f2f2b825 100644
--- a/app/javascript/dashboard/i18n/locale/ms/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/ms/inboxMgmt.json
@@ -367,12 +367,19 @@
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
         "SIGN_IN": "Sign in with Microsoft",
-        "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
+      },
+      "GOOGLE": {
+        "TITLE": "Google Email",
+        "DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
+        "SIGN_IN": "Sign in with Google",
+        "EMAIL_PLACEHOLDER": "Enter email address",
+        "ERROR_MESSAGE": "There was an error connecting to Google, please try again"
       }
     },
     "DETAILS": {
       "LOADING_FB": "Authenticating you with Facebook...",
+      "ERROR_FB_LOADING": "Error loading Facebook SDK. Please disable any ad-blockers and try again from a different browser.",
       "ERROR_FB_AUTH": "Something went wrong, Please refresh page...",
       "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
       "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
@@ -736,6 +743,7 @@
     },
     "EMAIL_PROVIDERS": {
       "MICROSOFT": "Microsoft",
+      "GOOGLE": "Google",
       "OTHER_PROVIDERS": "Other Providers"
     }
   }
diff --git a/app/javascript/dashboard/i18n/locale/ne/conversation.json b/app/javascript/dashboard/i18n/locale/ne/conversation.json
index c0d9fc0fa6c82..c234d06168a9b 100644
--- a/app/javascript/dashboard/i18n/locale/ne/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ne/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/nl/conversation.json b/app/javascript/dashboard/i18n/locale/nl/conversation.json
index 577845ac90542..db88e1f3cded2 100644
--- a/app/javascript/dashboard/i18n/locale/nl/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/nl/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Lees onze laatste updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/no/conversation.json b/app/javascript/dashboard/i18n/locale/no/conversation.json
index a523532f97d60..29dd0baf3b836 100644
--- a/app/javascript/dashboard/i18n/locale/no/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/no/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/pl/conversation.json b/app/javascript/dashboard/i18n/locale/pl/conversation.json
index c3a2fc7b612bd..72de3386483b1 100644
--- a/app/javascript/dashboard/i18n/locale/pl/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pl/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Cześć 👋, Witamy w %{installationName}!",
     "DESCRIPTION": "Dziękujemy za rejestrację. Chcemy, abyś jak najlepiej skorzystał z %{installationName}. Oto kilka rzeczy, które możesz spróbować, aby zapewnić sobie jak najlepsze doświadczenie z %{installationName}.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Przeczytaj najnowsze aktualizacje",
     "ALL_CONVERSATION": {
       "TITLE": "Wszystkie Twoje konwersacje w jednym miejscu",
-      "DESCRIPTION": "Zobacz wszystkie konwersacje z klientami w jednym miejscu. Możesz filtrować konwersacje według kanału, z którego pochodzą, etykiet lub statusu."
+      "DESCRIPTION": "Zobacz wszystkie konwersacje z klientami w jednym miejscu. Możesz filtrować konwersacje według kanału, z którego pochodzą, etykiet lub statusu.",
+      "NEW_LINK": "Kliknij tutaj, aby utworzyć nową skrzynkę odbiorczą"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Zaproszenie członków zespołu",
       "DESCRIPTION": "Ponieważ przygotowujesz się do rozmowy z klientem, zaproś członków zespołu, aby pomogli Ci. Możesz zaprosić członków zespołu, dodając ich adresy e-mail do listy agentów.",
       "NEW_LINK": "Kliknij tutaj, aby zaprosić nowego członka zespołu"
     },
-    "INBOXES": {
-      "TITLE": "Podłącz skrzynki odbiorcze",
-      "DESCRIPTION": "Połącz różne kanały, za pomocą których klienci będą z Tobą rozmawiać. Może to być czat na żywo, strona Facebook lub Twitter lub nawet Twój numer WhatsApp.",
-      "NEW_LINK": "Kliknij tutaj, aby utworzyć nową skrzynkę odbiorczą"
-    },
     "LABELS": {
       "TITLE": "Organizuj konwersacje za pomocą etykiet",
       "DESCRIPTION": "Etykiety ułatwiają kategoryzację konwersacji. Utwórz etykiety, takie jak #zapytanie-o-wsparcie, #pytanie-o-fakturę itp., aby później łatwo z nich korzystać w trakcie rozmowy.",
       "NEW_LINK": "Kliknij tutaj, aby utworzyć nową etykietę"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/pt/conversation.json b/app/javascript/dashboard/i18n/locale/pt/conversation.json
index 73da76bb4d31e..ee657390a1cec 100644
--- a/app/javascript/dashboard/i18n/locale/pt/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pt/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Olá 👋. Bem-vindo ao %{installationName}!",
     "DESCRIPTION": "Obrigado por se registar. Queremos que aproveite ao máximo o sistema %{installationName}. Aqui estão algumas coisas que pode fazer no %{installationName} para tornar a sua experiência ainda mais agradável.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Ler as últimas atualizações",
     "ALL_CONVERSATION": {
       "TITLE": "Todas as suas conversas num único lugar",
-      "DESCRIPTION": "Ver todas as conversas dos seus clientes num único painel. Pode filtrar as conversas pelo canal de entrada, etiquetas e estado."
+      "DESCRIPTION": "Ver todas as conversas dos seus clientes num único painel. Pode filtrar as conversas pelo canal de entrada, etiquetas e estado.",
+      "NEW_LINK": "Clique aqui para criar uma caixa de entrada"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Convidar os membros da sua equipa",
       "DESCRIPTION": "Já que se prepara para começar a conversar com o seu cliente, convide também os seus colegas para o ajudar. Pode adicionar colegas de equipa acrescentando os seus endereços de e-mail à lista de agentes.",
       "NEW_LINK": "Clique aqui para convidar um membro para a equipa"
     },
-    "INBOXES": {
-      "TITLE": "Conectar caixas de entrada",
-      "DESCRIPTION": "Conecte vários canais através dos quais os seus clientes podem conversar consigo. Pode ser um site, um chat ao vivo, um página do Facebook do Twitter ou até mesmo o seu número do WhatsApp.",
-      "NEW_LINK": "Clique aqui para criar uma caixa de entrada"
-    },
     "LABELS": {
       "TITLE": "Organizar conversas com etiquetas",
       "DESCRIPTION": "As etiquetas permitem-lhe categorizar facilmente as suas conversas. Crie etiquetas como #suporte, #faturacao, etc., para que as possa utilizar, mais tarde, numa conversa.",
       "NEW_LINK": "Clique aqui para criar etiquetas"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/pt/generalSettings.json b/app/javascript/dashboard/i18n/locale/pt/generalSettings.json
index fc067cdb6d759..ae7ed22821b53 100644
--- a/app/javascript/dashboard/i18n/locale/pt/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pt/generalSettings.json
@@ -5,7 +5,7 @@
     "BACK": "Voltar",
     "DISMISS": "Descartar",
     "UPDATE": {
-      "ERROR": "Não foi possível atualizar as configurações, tente novamente!",
+      "ERROR": "Não foi possível atualizar as configurações, por favor, tente novamente!",
       "SUCCESS": "Configurações de conta atualizadas com sucesso"
     },
     "FORM": {
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
index ff4350519eb5b..486629e1de2f5 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Olá, 👋. Bem-vindo ao %{installationName}!",
     "DESCRIPTION": "Obrigado por se inscrever. Queremos que você aproveite o máximo de %{installationName}. Aqui estão algumas coisas que você consegue fazer no(a) %{installationName} para que tenha uma experiência agradável.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Leia as últimas atualizações",
     "ALL_CONVERSATION": {
       "TITLE": "Todas as suas conversas em um só lugar",
-      "DESCRIPTION": "Veja todas as conversas dos seus clientes em um único painel. Você pode filtrar as conversas pelo canal de entrada, rótulo e status."
+      "DESCRIPTION": "Veja todas as conversas dos seus clientes em um único painel. Você pode filtrar as conversas pelo canal de entrada, rótulo e status.",
+      "NEW_LINK": "Clique aqui para criar uma caixa de entrada"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Convidar membros da sua equipe",
       "DESCRIPTION": "Já que você está se preparando para conversar com seu cliente, traga seus colegas para ajudá-lo. Você pode convidar seus colegas de equipe adicionando os endereços de e-mail deles na lista de agentes.",
       "NEW_LINK": "Clique aqui para convidar um membro da equipe"
     },
-    "INBOXES": {
-      "TITLE": "Conectar caixas de entrada",
-      "DESCRIPTION": "Conecte vários canais através dos quais seus clientes estariam conversando com você. Podendo ser a partir de um chat ao vivo no seu website, sua página do Facebook ou Twitter ou até mesmo seu número do WhatsApp.",
-      "NEW_LINK": "Clique aqui para criar uma caixa de entrada"
-    },
     "LABELS": {
       "TITLE": "Organizar conversas com marcadores",
       "DESCRIPTION": "Etiquetas fornecem uma forma mais fácil de organizar a sua conversa. Criar algumas estiquetas como #solicitação-suporte, #fatura-assunto etc., assim você poderá futuramente utiliza-las em uma conversa posteriormente.",
       "NEW_LINK": "Clique aqui para criar marcadores"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ro/conversation.json b/app/javascript/dashboard/i18n/locale/ro/conversation.json
index 6de1835f7b8d9..c63b0fe3b5d92 100644
--- a/app/javascript/dashboard/i18n/locale/ro/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ro/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hei 👋, Bine ati venit la %{installationName}!",
     "DESCRIPTION": "Vă mulțumim pentru semnarea sus. Vrem să profitați la maximum de %{installationName}. Iată câteva lucruri pe care le puteți face în %{installationName} pentru a face experiența încântătoare.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Citiți cele mai recente actualizări ale noastre",
     "ALL_CONVERSATION": {
       "TITLE": "Toate conversațiile într-un singur loc",
-      "DESCRIPTION": "Vizualizați toate conversațiile de la clienți într-un singur tablou de bord. Puteți filtra conversațiile după canalul, eticheta și starea primite."
+      "DESCRIPTION": "Vizualizați toate conversațiile de la clienți într-un singur tablou de bord. Puteți filtra conversațiile după canalul, eticheta și starea primite.",
+      "NEW_LINK": "Click aici pentru a crea un inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invită-ți membrii echipei",
       "DESCRIPTION": "Din moment ce vă pregătiți să vorbiți cu clientul dvs., aduceți-vă coechipierii pentru a vă ajuta. Vă puteți invita colegii de echipă adăugând adresele lor de e-mail la lista de agenți.",
       "NEW_LINK": "Faceți clic aici pentru a invita un membru al echipei"
     },
-    "INBOXES": {
-      "TITLE": "Conectați casetele",
-      "DESCRIPTION": "Conectează diverse canale prin care clienții tăi ar vorbi cu tine. Poate fi un live-chat pe site, pagina ta de Facebook sau Twitter sau chiar numărul tău de WhatsApp.",
-      "NEW_LINK": "Click aici pentru a crea un inbox"
-    },
     "LABELS": {
       "TITLE": "Organizarea conversațiilor cu etichete",
       "DESCRIPTION": "Etichetele oferă o modalitate mai ușoară de a clasifica conversația. Creați unele etichete, cum ar fi #support-solicitare, #billing-întrebare etc., astfel încât să le puteți utiliza într-o conversație mai târziu.",
       "NEW_LINK": "Click aici pentru a crea tag-uri"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ru/conversation.json b/app/javascript/dashboard/i18n/locale/ru/conversation.json
index 6741cc46f0e16..c5875357828e5 100644
--- a/app/javascript/dashboard/i18n/locale/ru/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ru/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Привет 👋, добро пожаловать в %{installationName}!",
     "DESCRIPTION": "Спасибо за регистрацию. Мы хотим, чтобы вы получили максимум от %{installationName}. Вот несколько вещей, которые вы можете сделать в %{installationName}, чтобы получить ещё больше приятных впечатлений.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Читайте о наших последних обновлениях",
     "ALL_CONVERSATION": {
       "TITLE": "Все ваши диалоги в одном месте",
-      "DESCRIPTION": "Посмотреть все разговоры с клиентами в одной панели управления. Вы можете отфильтровать разговоры по входящему каналу, метке и статусу."
+      "DESCRIPTION": "Посмотреть все разговоры с клиентами в одной панели управления. Вы можете отфильтровать разговоры по входящему каналу, метке и статусу.",
+      "NEW_LINK": "Нажмите здесь, чтобы создать входящий канал"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Пригласить членов вашей команды",
       "DESCRIPTION": "Так как вы готовы общаться с клиентом, пригласите в команду своих товарищей, чтобы помочь вам. Вы можете пригласить своих коллег по команде, добавив их адреса электронной почты в список агентов.",
       "NEW_LINK": "Нажмите здесь, чтобы пригласить члена команды"
     },
-    "INBOXES": {
-      "TITLE": "Подключить входящие",
-      "DESCRIPTION": "Подключите различные каналы, с помощью которых ваши клиенты будут общаться с вами. Это может быть веб-чат в live-чате, Facebook или Twitter, или даже ваш номер WhatsApp.",
-      "NEW_LINK": "Нажмите здесь, чтобы создать входящий канал"
-    },
     "LABELS": {
       "TITLE": "Сгруппировать беседы с помощью меток",
       "DESCRIPTION": "Метки дают более простой способ классифицировать разговор. Создайте несколько меток, например #support-enquiry, #billing-question и т.д., чтобы позже использовать их в беседе.",
       "NEW_LINK": "Нажмите здесь, чтобы создать метки"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/sh/conversation.json b/app/javascript/dashboard/i18n/locale/sh/conversation.json
index 8eb490a4b5e3f..34fa349814112 100644
--- a/app/javascript/dashboard/i18n/locale/sh/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sh/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/sk/conversation.json b/app/javascript/dashboard/i18n/locale/sk/conversation.json
index 8c7f8b8175f60..3e3027e0be090 100644
--- a/app/javascript/dashboard/i18n/locale/sk/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sk/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Ahoj 👋, vitaj v %{installationName}!",
     "DESCRIPTION": "Ďakujeme za registráciu. Chceme, aby ste z %{installationName} vyťažili čo najviac. Tu je niekoľko vecí, ktoré môžete urobiť v %{installationName}, aby ste si spríjemnili zážitok.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Prečítajte si naše novinky",
     "ALL_CONVERSATION": {
       "TITLE": "Všetky vaše konverzácie na jednom mieste",
-      "DESCRIPTION": "Zobrazte si všetky konverzácie od svojich zákazníkov na jednom ovládacom paneli. Konverzácie môžete filtrovať podľa prichádzajúceho kanála, štítku a statusu."
+      "DESCRIPTION": "Zobrazte si všetky konverzácie od svojich zákazníkov na jednom ovládacom paneli. Konverzácie môžete filtrovať podľa prichádzajúceho kanála, štítku a statusu.",
+      "NEW_LINK": "Kliknite sem pre vytvorenie schránky"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Pozvite členov svojho tímu",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Kliknite sem pre pozvanie člena tímu"
     },
-    "INBOXES": {
-      "TITLE": "Spojiť schránky",
-      "DESCRIPTION": "Prepojte rôzne kanály, cez ktoré s vami vaši zákazníci komunikujú. Môže to byť webový live-chat, vaša stránka na Facebooku alebo Twitteri alebo dokonca vaše číslo na WhatsApp.",
-      "NEW_LINK": "Kliknite sem pre vytvorenie schránky"
-    },
     "LABELS": {
       "TITLE": "Usporiadajte si konverzácie pomocou štítkov",
       "DESCRIPTION": "Štítky umožňujú jednoduchšie kategorizovať konverzáciu. Vytvorte si niekoľko štítkov, napríklad #podpora-dotaz, #vyuctovanie-otazka atď., aby ste ich mohli neskôr použiť v konverzácii.",
       "NEW_LINK": "Kliknutím sem vytvoríte tagy"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/sl/conversation.json b/app/javascript/dashboard/i18n/locale/sl/conversation.json
index 4cc4b9bed5fca..34fa349814112 100644
--- a/app/javascript/dashboard/i18n/locale/sl/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sl/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/sq/conversation.json b/app/javascript/dashboard/i18n/locale/sq/conversation.json
index 4cc4b9bed5fca..34fa349814112 100644
--- a/app/javascript/dashboard/i18n/locale/sq/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sq/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/sr/conversation.json b/app/javascript/dashboard/i18n/locale/sr/conversation.json
index abefe4531c3c6..97b6bc87f6949 100644
--- a/app/javascript/dashboard/i18n/locale/sr/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sr/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Zdravo 👋, Dobrodošli u %{installationName}!",
     "DESCRIPTION": "Hvala vam na registraciji. Želimo da najbolje iskoristite ovu %{installationName}. Evo nekoliko stvari koje možete da uradite u %{installationName} da bi vaše iskustvo bilo izvrsno.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Pročitajte naše najnovije izmene",
     "ALL_CONVERSATION": {
       "TITLE": "Svi vaši razgovori na jednom mestu",
-      "DESCRIPTION": "Pregledajte sve razgovore sa vašim kupcima u jednoj radnoj tabli. Možete filtrirati razgovore prema dolaznom kanalu, oznaci i statusu."
+      "DESCRIPTION": "Pregledajte sve razgovore sa vašim kupcima u jednoj radnoj tabli. Možete filtrirati razgovore prema dolaznom kanalu, oznaci i statusu.",
+      "NEW_LINK": "Kliknite ovde da napravite prijemno sanduče"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Pozovite članove vašeg tima",
       "DESCRIPTION": "Sobzirom da se spremate da razgovarate sa vašim potrošačima, dovedite članove vašeg time da vam pomognu. Možete pozvati članove vašeg time dodavanjem njihove adrese e-pošte u spisak agenata.",
       "NEW_LINK": "Kliknite ovde da pozovete člana tima"
     },
-    "INBOXES": {
-      "TITLE": "Povežite prijemna sandučeta",
-      "DESCRIPTION": "Povežite razne kanale kroz koje bi vaši potrošači mogli da razgovaraju sa vama. To može biti uživo časkanje na sajtu, vaša Fejsbuk ili Tviter stranica ili čak vaš WhatsApp broj.",
-      "NEW_LINK": "Kliknite ovde da napravite prijemno sanduče"
-    },
     "LABELS": {
       "TITLE": "Organizujte razgovore sa oznakama",
       "DESCRIPTION": "Oznake omogućavaju lakši način da se kategorišu razgovori. Napravite oznake poput #upit-podrske, #pitanje-placanja itd., kako bi ste ih koristili u kasnijim razgovorima.",
       "NEW_LINK": "Kliknite ovde da napravite oznake"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/sv/conversation.json b/app/javascript/dashboard/i18n/locale/sv/conversation.json
index 056697b8f2b01..6fb779db2c857 100644
--- a/app/javascript/dashboard/i18n/locale/sv/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/sv/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hej 👋, Välkommen till %{installationName}!",
     "DESCRIPTION": "Tack för att du registrerar dig. Vi vill att du ska få ut det mesta av %{installationName}. Här är några saker du kan göra i %{installationName} för att göra upplevelsen härlig.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Läs våra senaste uppdateringar",
     "ALL_CONVERSATION": {
       "TITLE": "Alla dina konversationer på ett ställe",
-      "DESCRIPTION": "Visa alla konversationer från dina kunder i en enda instrumentpanel. Du kan filtrera konversationerna genom inkommande kanal, etikett och status."
+      "DESCRIPTION": "Visa alla konversationer från dina kunder i en enda instrumentpanel. Du kan filtrera konversationerna genom inkommande kanal, etikett och status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Bjud in dina teammedlemmar",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ta/conversation.json b/app/javascript/dashboard/i18n/locale/ta/conversation.json
index 951cb6fafbc6e..af9e9280a70c1 100644
--- a/app/javascript/dashboard/i18n/locale/ta/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ta/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/th/conversation.json b/app/javascript/dashboard/i18n/locale/th/conversation.json
index 437873d5f0849..3a3a2f8456287 100644
--- a/app/javascript/dashboard/i18n/locale/th/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/th/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "สวัสดี 👋, ยินดีต้อนรับเข้าสู่ %{installationName}!",
     "DESCRIPTION": "ขอบคุณสำหรับการสมัคร เราอยากให้คุณได้ใช้งาน %{installationName} อย่างเต็มที่ เเละนี่คือสิ่งเล็กน้อยที่คุณสามารถทำได้ใน %{installationName} เพื่อประสบการณ์การใช้งานที่ดียิ่งขึ้น",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "อ่านการอัปเดตล่าสุด",
     "ALL_CONVERSATION": {
       "TITLE": "รวมการสนทนาของคุณทั้งหมดในที่เดียว",
-      "DESCRIPTION": "ดูการสนทนาทั้งหมดจากลูกค้าของคุณในหน้าเดียว คุณสามารถเลือกดูการสนทนาตามช่องทางที่ส่งข้อความ, ตามป้ายกำกับ หรือตามสถานะของการสนทนาได้"
+      "DESCRIPTION": "ดูการสนทนาทั้งหมดจากลูกค้าของคุณในหน้าเดียว คุณสามารถเลือกดูการสนทนาตามช่องทางที่ส่งข้อความ, ตามป้ายกำกับ หรือตามสถานะของการสนทนาได้",
+      "NEW_LINK": "คลิกที่นี่เพื่อสร้างกล่องข้อความ"
     },
     "TEAM_MEMBERS": {
       "TITLE": "เชิญสมาชิกในทีมของคุณ",
       "DESCRIPTION": "ในเมื่อคุณพร้อมจะคุยกับลูกค้าแล้ว ให้เพื่อนร่วมทีมเข้ามาช่วยคุณ คุณสามารถเชิญเพื่อนร่วมทีมได้โดยการเพิ่มอีเมลของเขาลงในรายชื่อพนักงาน",
       "NEW_LINK": "คลิกที่นี่เพื่อเชิญสมาชิกในทีม"
     },
-    "INBOXES": {
-      "TITLE": "เชื่อมต่อกล่องข้อความ",
-      "DESCRIPTION": "เชื่อมต่อช่องทางต่างๆ ที่ลูกค้าพูดคุยกับคุณ อาจเป็นแชทในเว็บไซต์, เพจ Facebook หรือ Twitter ของคุณ หรือแม้กระทั่งหมายเลข WhatsApp ของคุณ",
-      "NEW_LINK": "คลิกที่นี่เพื่อสร้างกล่องข้อความ"
-    },
     "LABELS": {
       "TITLE": "จัดกลุ่มการสนทนาด้วยป้ายกำกับ",
       "DESCRIPTION": "การติดป้ายกำกับเป็นวิธีง่ายๆเพื่อจัดกลุ่มการสนทนาของคุณ ลองสร้างป้ายกำกับ เช่น #ต้องการความช่วยเหลือ, #คำถามเรื่องใบเสร็จ หรือป้ายอื่นๆ ที่คุณจะนำมาใช้จัดระเบียบการสนทนาในอนาคต",
       "NEW_LINK": "คลิกที่นี่เพื่อสร้างแท็ก"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/tl/conversation.json b/app/javascript/dashboard/i18n/locale/tl/conversation.json
index 4cc4b9bed5fca..34fa349814112 100644
--- a/app/javascript/dashboard/i18n/locale/tl/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/tl/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/tr/conversation.json b/app/javascript/dashboard/i18n/locale/tr/conversation.json
index 21de4b9ad47ef..43c8af533cb58 100644
--- a/app/javascript/dashboard/i18n/locale/tr/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/tr/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Merhaba 👋, %{installationName}'a hoş geldiniz!",
     "DESCRIPTION": "Üyeliğiniz için teşekkür ederiz. %{installationName}'dan en iyi şekilde faydalanmanızı istiyoruz. Deneyimi daha keyifli hale getirmek için %{installationName} içinde yapabileceğiniz birkaç şey var.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "En Son Güncellemeleri Okuyun",
     "ALL_CONVERSATION": {
       "TITLE": "Tüm Konuşmalarınız Bir Arada",
-      "DESCRIPTION": "Müşterilerinizden gelen tüm konuşmaları tek bir gösterge panelinde görüntüleyin. Gelen kanala, etikete ve duruma göre konuşmaları filtreleyebilirsiniz."
+      "DESCRIPTION": "Müşterilerinizden gelen tüm konuşmaları tek bir gösterge panelinde görüntüleyin. Gelen kanala, etikete ve duruma göre konuşmaları filtreleyebilirsiniz.",
+      "NEW_LINK": "Bir gelen kutusu oluşturmak için buraya tıklayın"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Ekip Üyelerinizi Davet Edin",
       "DESCRIPTION": "Müşterinizle konuşmaya hazırlanırken, ekibinizi yardıma çağırın. Ekibinizi, temsilci listesine e-posta adreslerini ekleyerek davet edebilirsiniz.",
       "NEW_LINK": "Bir ekip üyesi davet etmek için buraya tıklayın"
     },
-    "INBOXES": {
-      "TITLE": "Gelen Kutularını Bağlayın",
-      "DESCRIPTION": "Müşterilerinizle konuşacağınız çeşitli kanalları bağlayın. Bir web sitesi canlı sohbeti, Facebook veya Twitter sayfanız veya hatta WhatsApp numaranız olabilir.",
-      "NEW_LINK": "Bir gelen kutusu oluşturmak için buraya tıklayın"
-    },
     "LABELS": {
       "TITLE": "Etiketlerle Konuşmaları Düzenleyin",
       "DESCRIPTION": "Etiketler, konuşmalarınızı kategorize etmenin daha kolay bir yolunu sağlar. #destek-soru, #fatura-sorunu vb. gibi etiketler oluşturun, böylece daha sonra bir konuşmada bunları kullanabilirsiniz.",
       "NEW_LINK": "Etiket oluşturmak için buraya tıklayın"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/uk/conversation.json b/app/javascript/dashboard/i18n/locale/uk/conversation.json
index fde7a310754eb..b5ac320ff7899 100644
--- a/app/javascript/dashboard/i18n/locale/uk/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/uk/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Привіт, 👋, Ласкаво просимо на %{installationName}!",
     "DESCRIPTION": "Дякуємо за реєстрацію. Ми хочемо отримати максимум від %{installationName}. Ось кілька речей, які ви можете зробити в %{installationName}, щоб отримати приємний досвід.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Читати наші останні оновлення",
     "ALL_CONVERSATION": {
       "TITLE": "Всі ваші розмови в одному місці",
-      "DESCRIPTION": "Переглядайте всі розмови з Ваших клієнтів в одній панелі. Ви можете фільтрувати розмови за допомогою каналу, міток та статусу."
+      "DESCRIPTION": "Переглядайте всі розмови з Ваших клієнтів в одній панелі. Ви можете фільтрувати розмови за допомогою каналу, міток та статусу.",
+      "NEW_LINK": "Натисніть тут, щоб створити вхідний канал"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Запросити членів команди",
       "DESCRIPTION": "Оскільки Ви готуєтеся поговорити зі своїм клієнтом, запросіть ваших партнерів по команді, щоб допомогти вам. Ви можете запросити ваших товаришів по команді, додавши їх адреси електронної пошти до списку співробітників.",
       "NEW_LINK": "Натисніть тут, щоб запросити учасника"
     },
-    "INBOXES": {
-      "TITLE": "Приєднати канал",
-      "DESCRIPTION": "З'єднайте різні канали, за допомогою яких ваші клієнти будуть спілкуватися з вами. Це може бути онлайн сайт на вашому сторінці Facebook або Твіттері або навіть номер Вашого WhatsApp (WhatsApp).",
-      "NEW_LINK": "Натисніть тут, щоб створити вхідний канал"
-    },
     "LABELS": {
       "TITLE": "Організувуйте бесіди за допомогою міток",
       "DESCRIPTION": "Мітки забезпечують простіший спосіб вести категоризацію ваших розмов. Створіть деякі мітки, такі як #support-enquy, #billing-question і т. п., щоб ви могли використовувати їх в розмовах пізніше.",
       "NEW_LINK": "Натисніть тут, щоб створити мітки"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ur/conversation.json b/app/javascript/dashboard/i18n/locale/ur/conversation.json
index 0e00b4369c21f..470028cf8b36e 100644
--- a/app/javascript/dashboard/i18n/locale/ur/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ur/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/ur_IN/conversation.json b/app/javascript/dashboard/i18n/locale/ur_IN/conversation.json
index 8eb490a4b5e3f..34fa349814112 100644
--- a/app/javascript/dashboard/i18n/locale/ur_IN/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/ur_IN/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋, Welcome to %{installationName}!",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Read our latest updates",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "Click here to create an inbox"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Invite your team members",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "Click here to invite a team member"
     },
-    "INBOXES": {
-      "TITLE": "Connect Inboxes",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "Click here to create an inbox"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "Click here to create tags"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/vi/conversation.json b/app/javascript/dashboard/i18n/locale/vi/conversation.json
index bfc115317071c..a52f179c3c07c 100644
--- a/app/javascript/dashboard/i18n/locale/vi/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/vi/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Xin chào 👋, Chào mừng đến với %{installationName}!",
     "DESCRIPTION": "Cảm ơn bạn đã đăng ký. Chúng tôi muốn bạn khai thác tối đa %{installationName}. Dưới đây là một số điều bạn có thể làm trong %{installationName} để mang lại trải nghiệm thú vị.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "Đọc cập nhật mới nhất của chúng tôi",
     "ALL_CONVERSATION": {
       "TITLE": "Tất cả hội thoại của bạn ở cùng một chỗ",
-      "DESCRIPTION": "Xem tất cả hội thoại từ khách hàng của bạn trong cùng một trang. Bạn có thể lọc các hội thoại theo kênh, nhãn và trạng thái."
+      "DESCRIPTION": "Xem tất cả hội thoại từ khách hàng của bạn trong cùng một trang. Bạn có thể lọc các hội thoại theo kênh, nhãn và trạng thái.",
+      "NEW_LINK": "Bấm vào đây để tạo mới một kênh"
     },
     "TEAM_MEMBERS": {
       "TITLE": "Mời các thành viên trong nhóm của bạn",
       "DESCRIPTION": "Vì bạn đã sẵn sàng để chào và đón tiếp khách hàng của mình, hãy lôi kéo đồng đội để hỗ trợ bạn. Bạn có thể mời đồng đội của mình bằng cách thêm địa chỉ email của họ vào danh sách tổng đài viên.",
       "NEW_LINK": "Bấm vào đây để mời đồng đội"
     },
-    "INBOXES": {
-      "TITLE": "Kết nối kênh",
-      "DESCRIPTION": "Kết nối các kênh khác nhau mà qua đó khách hàng sẽ hội thoại với bạn. Nó có thể là một trang web trực tiếp, trang Facebook, Twitter hoặc thậm chí là số WhatsApp, Zalo của bạn.",
-      "NEW_LINK": "Bấm vào đây để tạo mới một kênh"
-    },
     "LABELS": {
       "TITLE": "Tổ chức hội thoại theo nhãn",
       "DESCRIPTION": "Nhãn cung cấp một cách để phân loại các hội thoại của bạn dễ dàng hơn. Tạo một số nhãn như #ho-tro, #\byeu-cau-bao-gia, v. v. để bạn có thể sử dụng chúng trong hội thoại sau này.",
       "NEW_LINK": "Bấm vào đây để tạo nhãn"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/conversation.json b/app/javascript/dashboard/i18n/locale/zh_CN/conversation.json
index 93d7c740680e5..a28ae77062759 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "您好 👋, 欢迎来到 %{installationName}!",
     "DESCRIPTION": "感谢您注册。我们希望您能够充分使用 %{installationName}。 这里有几件您可以在 %{installationName} 做的事情，让体验变得愉快。",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "阅读我们的最新升级日志",
     "ALL_CONVERSATION": {
       "TITLE": "您的所有对话都在一个地方",
-      "DESCRIPTION": "在单个面板中查看您客户的所有对话。您可以通过通道、标签和状态筛选对话。"
+      "DESCRIPTION": "在单个面板中查看您客户的所有对话。您可以通过通道、标签和状态筛选对话。",
+      "NEW_LINK": "点击此处创建收件箱"
     },
     "TEAM_MEMBERS": {
       "TITLE": "邀请您的团队成员",
       "DESCRIPTION": "当您准备好与您的客户交谈时，带上您的队友来协助您。 您可以通过添加他们的电子邮件地址到客服代表列表来邀请您的队友。",
       "NEW_LINK": "点击此处邀请一位请团队成员"
     },
-    "INBOXES": {
-      "TITLE": "连接收件箱",
-      "DESCRIPTION": "连接您的客户可以与您交谈的各种通道。可以是一个网站的在线聊天，也可以是您的 Facebook 或者 Twitter 主页，或者甚至可以是您的 WhatsApp 号码。",
-      "NEW_LINK": "点击此处创建收件箱"
-    },
     "LABELS": {
       "TITLE": "使用标签组织对话",
       "DESCRIPTION": "标签提供了一种简单的方法来让您归类对话。创建一些类似 #价格、#问题反馈 这样的标签，之后您可以在对话中使用它们。",
       "NEW_LINK": "点击此处创建标签"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/conversation.json b/app/javascript/dashboard/i18n/locale/zh_TW/conversation.json
index bd486075a8751..12010a260aacd 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/conversation.json
@@ -241,25 +241,29 @@
   "ONBOARDING": {
     "TITLE": "Hey 👋， 歡迎來到 %{installationName}！",
     "DESCRIPTION": "Thanks for signing up. We want you to get the most out of %{installationName}. Here are a few things you can do in %{installationName} to make the experience delightful.",
+    "GREETING_MORNING": "👋 Good morning, %{name}. Welcome to %{installationName}.",
+    "GREETING_AFTERNOON": "👋 Good afternoon, %{name}. Welcome to %{installationName}.",
+    "GREETING_EVENING": "👋 Good evening, %{name}. Welcome to %{installationName}.",
     "READ_LATEST_UPDATES": "查看我們最後的更新",
     "ALL_CONVERSATION": {
       "TITLE": "All your conversations in one place",
-      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status."
+      "DESCRIPTION": "View all the conversations from your customers in one single dashboard. You can filter the conversations by the incoming channel, label and status.",
+      "NEW_LINK": "按此建立一個收件匣"
     },
     "TEAM_MEMBERS": {
       "TITLE": "邀請團隊成員",
       "DESCRIPTION": "Since you are getting ready to talk to your customer, bring in your teammates to assist you. You can invite your teammates by adding their email addresses to the agent list.",
       "NEW_LINK": "按此邀請一個新成員"
     },
-    "INBOXES": {
-      "TITLE": "連結收件匣",
-      "DESCRIPTION": "Connect various channels through which your customers would be talking to you. It can be a website live-chat, your Facebook or Twitter page or even your WhatsApp number.",
-      "NEW_LINK": "按此建立一個收件匣"
-    },
     "LABELS": {
       "TITLE": "Organize conversations with labels",
       "DESCRIPTION": "Labels provide an easier way to categorize your conversation. Create some labels like #support-enquiry, #billing-question etc., so that you can use them in a conversation later.",
       "NEW_LINK": "按此建立標籤"
+    },
+    "CANNED_RESPONSES": {
+      "TITLE": "Create canned responses",
+      "DESCRIPTION": "Pre-written quick reply templates help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a response.",
+      "NEW_LINK": "Click here to create a canned response"
     }
   },
   "CONVERSATION_SIDEBAR": {
diff --git a/app/javascript/dashboard/mixins/agentMixin.js b/app/javascript/dashboard/mixins/agentMixin.js
deleted file mode 100644
index 1b3545a628c95..0000000000000
--- a/app/javascript/dashboard/mixins/agentMixin.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      currentAccountId: 'getCurrentAccountId',
-    }),
-    assignableAgents() {
-      return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
-        this.inboxId
-      );
-    },
-    isAgentSelected() {
-      return this.currentChat?.meta?.assignee;
-    },
-    createNoneAgent() {
-      return {
-        confirmed: true,
-        name: 'None',
-        id: 0,
-        role: 'agent',
-        account_id: 0,
-        email: 'None',
-      };
-    },
-    agentsList() {
-      const agents = this.assignableAgents || [];
-      const agentsByUpdatedPresence = this.getAgentsByUpdatedPresence(agents);
-      const none = this.createNoneAgent;
-      const filteredAgentsByAvailability = this.sortedAgentsByAvailability(
-        agentsByUpdatedPresence
-      );
-      const filteredAgents = [
-        ...(this.isAgentSelected ? [none] : []),
-        ...filteredAgentsByAvailability,
-      ];
-      return filteredAgents;
-    },
-  },
-  methods: {
-    getAgentsByAvailability(agents, availability) {
-      return agents
-        .filter(agent => agent.availability_status === availability)
-        .sort((a, b) => a.name.localeCompare(b.name));
-    },
-    sortedAgentsByAvailability(agents) {
-      const onlineAgents = this.getAgentsByAvailability(agents, 'online');
-      const busyAgents = this.getAgentsByAvailability(agents, 'busy');
-      const offlineAgents = this.getAgentsByAvailability(agents, 'offline');
-      const filteredAgents = [...onlineAgents, ...busyAgents, ...offlineAgents];
-      return filteredAgents;
-    },
-    getAgentsByUpdatedPresence(agents) {
-      // Here we are updating the availability status of the current user dynamically (live) based on the current account availability status
-      const agentsWithDynamicPresenceUpdate = agents.map(item =>
-        item.id === this.currentUser.id
-          ? {
-              ...item,
-              availability_status: this.currentUser.accounts.find(
-                account => account.id === this.currentAccountId
-              ).availability_status,
-            }
-          : item
-      );
-      return agentsWithDynamicPresenceUpdate;
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/aiMixin.js b/app/javascript/dashboard/mixins/aiMixin.js
deleted file mode 100644
index a775b2ecd821f..0000000000000
--- a/app/javascript/dashboard/mixins/aiMixin.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { OPEN_AI_EVENTS } from '../helper/AnalyticsHelper/events';
-import OpenAPI from '../api/integrations/openapi';
-
-export default {
-  mounted() {
-    this.fetchIntegrationsIfRequired();
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'integrations/getUIFlags',
-      appIntegrations: 'integrations/getAppIntegrations',
-      currentChat: 'getSelectedChat',
-      replyMode: 'draftMessages/getReplyEditorMode',
-    }),
-    aiIntegration() {
-      return this.appIntegrations.find(
-        integration => integration.id === 'openai' && !!integration.hooks.length
-      )?.hooks[0];
-    },
-    isAIIntegrationEnabled() {
-      return !!this.aiIntegration;
-    },
-    isLabelSuggestionFeatureEnabled() {
-      if (this.aiIntegration) {
-        const { settings = {} } = this.aiIntegration || {};
-        return settings.label_suggestion;
-      }
-      return false;
-    },
-    isFetchingAppIntegrations() {
-      return this.uiFlags.isFetching;
-    },
-    hookId() {
-      return this.aiIntegration.id;
-    },
-    draftMessage() {
-      return this.$store.getters['draftMessages/get'](this.draftKey);
-    },
-    draftKey() {
-      return `draft-${this.conversationId}-${this.replyMode}`;
-    },
-    conversationId() {
-      return this.currentChat?.id;
-    },
-  },
-  methods: {
-    async fetchIntegrationsIfRequired() {
-      if (!this.appIntegrations.length) {
-        await this.$store.dispatch('integrations/get');
-      }
-    },
-    async recordAnalytics(type, payload) {
-      const event = OPEN_AI_EVENTS[type.toUpperCase()];
-      if (event) {
-        this.$track(event, {
-          type,
-          ...payload,
-        });
-      }
-    },
-    async fetchLabelSuggestions({ conversationId }) {
-      if (!conversationId) return [];
-
-      try {
-        const result = await OpenAPI.processEvent({
-          type: 'label_suggestion',
-          hookId: this.hookId,
-          conversationId: conversationId,
-        });
-
-        const {
-          data: { message: labels },
-        } = result;
-
-        return this.cleanLabels(labels);
-      } catch (error) {
-        return [];
-      }
-    },
-    cleanLabels(labels) {
-      return labels
-        .toLowerCase() // Set it to lowercase
-        .split(',') // split the string into an array
-        .filter(label => label.trim()) // remove any empty strings
-        .map(label => label.trim()) // trim the words
-        .filter((label, index, self) => self.indexOf(label) === index); // remove any duplicates
-    },
-    async processEvent(type = 'rephrase') {
-      try {
-        const result = await OpenAPI.processEvent({
-          hookId: this.hookId,
-          type,
-          content: this.draftMessage,
-          conversationId: this.conversationId,
-        });
-        const {
-          data: { message: generatedMessage },
-        } = result;
-        return generatedMessage;
-      } catch (error) {
-        useAlert(this.$t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR'));
-        return '';
-      }
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/automations/methodsMixin.js b/app/javascript/dashboard/mixins/automations/methodsMixin.js
deleted file mode 100644
index 1e9863283e668..0000000000000
--- a/app/javascript/dashboard/mixins/automations/methodsMixin.js
+++ /dev/null
@@ -1,314 +0,0 @@
-import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
-import countries from 'shared/constants/countries';
-import { validateAutomation } from 'dashboard/helper/validations';
-
-import {
-  generateCustomAttributeTypes,
-  getActionOptions,
-  getConditionOptions,
-  getCustomAttributeInputType,
-  getOperatorTypes,
-  isACustomAttribute,
-  getFileName,
-  getDefaultConditions,
-  getDefaultActions,
-  filterCustomAttributes,
-  generateAutomationPayload,
-  getStandardAttributeInputType,
-  isCustomAttribute,
-  generateCustomAttributes,
-} from 'dashboard/helper/automationHelper';
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-
-export default {
-  computed: {
-    ...mapGetters({
-      agents: 'agents/getAgents',
-      campaigns: 'campaigns/getAllCampaigns',
-      contacts: 'contacts/getContacts',
-      inboxes: 'inboxes/getInboxes',
-      labels: 'labels/getLabels',
-      teams: 'teams/getTeams',
-      slaPolicies: 'sla/getSLA',
-    }),
-    booleanFilterOptions() {
-      return [
-        {
-          id: true,
-          name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-        },
-        {
-          id: false,
-          name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-        },
-      ];
-    },
-
-    statusFilterOptions() {
-      const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
-      return [
-        ...Object.keys(statusFilters).map(status => {
-          return {
-            id: status,
-            name: statusFilters[status].TEXT,
-          };
-        }),
-        {
-          id: 'all',
-          name: this.$t('CHAT_LIST.FILTER_ALL'),
-        },
-      ];
-    },
-  },
-  methods: {
-    getFileName,
-    onEventChange() {
-      this.automation.conditions = getDefaultConditions(
-        this.automation.event_name
-      );
-      this.automation.actions = getDefaultActions();
-    },
-    getAttributes(key) {
-      return this.automationTypes[key].conditions;
-    },
-    getInputType(key) {
-      const customAttribute = isACustomAttribute(this.allCustomAttributes, key);
-      if (customAttribute) {
-        return getCustomAttributeInputType(
-          customAttribute.attribute_display_type
-        );
-      }
-      const type = this.getAutomationType(key);
-      return type.inputType;
-    },
-    getOperators(key) {
-      if (this.mode === 'edit') {
-        const customAttribute = isACustomAttribute(
-          this.allCustomAttributes,
-          key
-        );
-        if (customAttribute) {
-          return getOperatorTypes(customAttribute.attribute_display_type);
-        }
-      }
-      const type = this.getAutomationType(key);
-      return type.filterOperators;
-    },
-    getAutomationType(key) {
-      return this.automationTypes[this.automation.event_name].conditions.find(
-        condition => condition.key === key
-      );
-    },
-    getCustomAttributeType(key) {
-      const type = this.automationTypes[
-        this.automation.event_name
-      ].conditions.find(i => i.key === key).customAttributeType;
-      return type;
-    },
-    getConditionDropdownValues(type) {
-      const {
-        agents,
-        allCustomAttributes: customAttributes,
-        booleanFilterOptions,
-        campaigns,
-        contacts,
-        inboxes,
-        statusFilterOptions,
-        teams,
-      } = this;
-      return getConditionOptions({
-        agents,
-        booleanFilterOptions,
-        campaigns,
-        contacts,
-        customAttributes,
-        inboxes,
-        statusFilterOptions,
-        teams,
-        languages,
-        countries,
-        type,
-      });
-    },
-    appendNewCondition() {
-      this.automation.conditions.push(
-        ...getDefaultConditions(this.automation.event_name)
-      );
-    },
-    appendNewAction() {
-      this.automation.actions.push(...getDefaultActions());
-    },
-    removeFilter(index) {
-      if (this.automation.conditions.length <= 1) {
-        useAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
-      } else {
-        this.automation.conditions.splice(index, 1);
-      }
-    },
-    removeAction(index) {
-      if (this.automation.actions.length <= 1) {
-        useAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
-      } else {
-        this.automation.actions.splice(index, 1);
-      }
-    },
-    submitAutomation() {
-      // we assign it to this.errors so that it can be accessed in the template
-      // it is supposed to be declared in the data function
-      this.errors = validateAutomation(this.automation);
-      if (Object.keys(this.errors).length === 0) {
-        const automation = generateAutomationPayload(this.automation);
-        this.$emit('saveAutomation', automation, this.mode);
-      }
-    },
-    resetFilter(index, currentCondition) {
-      this.automation.conditions[index].filter_operator = this.automationTypes[
-        this.automation.event_name
-      ].conditions.find(
-        condition => condition.key === currentCondition.attribute_key
-      ).filterOperators[0].value;
-      this.automation.conditions[index].values = '';
-    },
-    showUserInput(type) {
-      return !(type === 'is_present' || type === 'is_not_present');
-    },
-    showActionInput(action) {
-      if (action === 'send_email_to_team' || action === 'send_message')
-        return false;
-      const type = this.automationActionTypes.find(
-        i => i.key === action
-      ).inputType;
-      return !!type;
-    },
-    resetAction(index) {
-      this.automation.actions[index].action_params = [];
-    },
-    manifestConditions(automation) {
-      const customAttributes = filterCustomAttributes(this.allCustomAttributes);
-      const conditions = automation.conditions.map(condition => {
-        const customAttr = isCustomAttribute(
-          customAttributes,
-          condition.attribute_key
-        );
-        let inputType = 'plain_text';
-        if (customAttr) {
-          inputType = getCustomAttributeInputType(customAttr.type);
-        } else {
-          inputType = getStandardAttributeInputType(
-            this.automationTypes,
-            automation.event_name,
-            condition.attribute_key
-          );
-        }
-        if (inputType === 'plain_text' || inputType === 'date') {
-          return {
-            ...condition,
-            values: condition.values[0],
-          };
-        }
-        if (inputType === 'comma_separated_plain_text') {
-          return {
-            ...condition,
-            values: condition.values.join(','),
-          };
-        }
-        return {
-          ...condition,
-          query_operator: condition.query_operator || 'and',
-          values: [
-            ...this.getConditionDropdownValues(condition.attribute_key),
-          ].filter(item => [...condition.values].includes(item.id)),
-        };
-      });
-      return conditions;
-    },
-    generateActionsArray(action) {
-      const params = action.action_params;
-      let actionParams = [];
-      const inputType = this.automationActionTypes.find(
-        item => item.key === action.action_name
-      ).inputType;
-      if (inputType === 'multi_select' || inputType === 'search_select') {
-        actionParams = [
-          ...this.getActionDropdownValues(action.action_name),
-        ].filter(item => [...params].includes(item.id));
-      } else if (inputType === 'team_message') {
-        actionParams = {
-          team_ids: [
-            ...this.getActionDropdownValues(action.action_name),
-          ].filter(item => [...params[0].team_ids].includes(item.id)),
-          message: params[0].message,
-        };
-      } else actionParams = [...params];
-      return actionParams;
-    },
-    manifestActions(automation) {
-      let actionParams = [];
-      const actions = automation.actions.map(action => {
-        if (action.action_params.length) {
-          actionParams = this.generateActionsArray(action);
-        }
-        return {
-          ...action,
-          action_params: actionParams,
-        };
-      });
-      return actions;
-    },
-    formatAutomation(automation) {
-      this.automation = {
-        ...automation,
-        conditions: this.manifestConditions(automation),
-        actions: this.manifestActions(automation),
-      };
-    },
-    getActionDropdownValues(type) {
-      const { agents, labels, teams, slaPolicies } = this;
-      return getActionOptions({
-        agents,
-        labels,
-        teams,
-        slaPolicies,
-        languages,
-        type,
-      });
-    },
-    manifestCustomAttributes() {
-      const conversationCustomAttributesRaw = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ]('conversation_attribute');
-
-      const contactCustomAttributesRaw =
-        this.$store.getters['attributes/getAttributesByModel'](
-          'contact_attribute'
-        );
-      const conversationCustomAttributeTypes = generateCustomAttributeTypes(
-        conversationCustomAttributesRaw,
-        'conversation_attribute'
-      );
-      const contactCustomAttributeTypes = generateCustomAttributeTypes(
-        contactCustomAttributesRaw,
-        'contact_attribute'
-      );
-      let manifestedCustomAttributes = generateCustomAttributes(
-        conversationCustomAttributeTypes,
-        contactCustomAttributeTypes,
-        this.$t('AUTOMATION.CONDITION.CONVERSATION_CUSTOM_ATTR_LABEL'),
-        this.$t('AUTOMATION.CONDITION.CONTACT_CUSTOM_ATTR_LABEL')
-      );
-      this.automationTypes.message_created.conditions.push(
-        ...manifestedCustomAttributes
-      );
-      this.automationTypes.conversation_created.conditions.push(
-        ...manifestedCustomAttributes
-      );
-      this.automationTypes.conversation_updated.conditions.push(
-        ...manifestedCustomAttributes
-      );
-      this.automationTypes.conversation_opened.conditions.push(
-        ...manifestedCustomAttributes
-      );
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/reportMixin.js b/app/javascript/dashboard/mixins/reportMixin.js
deleted file mode 100644
index d57af1ad24826..0000000000000
--- a/app/javascript/dashboard/mixins/reportMixin.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { mapGetters } from 'vuex';
-import { formatTime } from '@chatwoot/utils';
-
-export default {
-  props: {
-    accountSummaryKey: {
-      type: String,
-      default: 'getAccountSummary',
-    },
-  },
-  computed: {
-    ...mapGetters({
-      accountReport: 'getAccountReports',
-    }),
-    accountSummary() {
-      return this.$store.getters[this.accountSummaryKey];
-    },
-  },
-  methods: {
-    calculateTrend(key) {
-      if (!this.accountSummary.previous[key]) return 0;
-      const diff = this.accountSummary[key] - this.accountSummary.previous[key];
-      return Math.round((diff / this.accountSummary.previous[key]) * 100);
-    },
-    displayMetric(key) {
-      if (this.isAverageMetricType(key)) {
-        return formatTime(this.accountSummary[key]);
-      }
-      return Number(this.accountSummary[key] || '').toLocaleString();
-    },
-    displayInfoText(key) {
-      if (this.metrics[this.currentSelection].KEY !== key) {
-        return '';
-      }
-      if (this.isAverageMetricType(key)) {
-        const total = this.accountReport.data
-          .map(item => item.count)
-          .reduce((prev, curr) => prev + curr, 0);
-        return `${this.metrics[this.currentSelection].INFO_TEXT} ${total}`;
-      }
-      return '';
-    },
-    isAverageMetricType(key) {
-      return [
-        'avg_first_response_time',
-        'avg_resolution_time',
-        'reply_time',
-      ].includes(key);
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/specs/agentFixtures.js b/app/javascript/dashboard/mixins/specs/agentFixtures.js
deleted file mode 100644
index 58c360ed11a03..0000000000000
--- a/app/javascript/dashboard/mixins/specs/agentFixtures.js
+++ /dev/null
@@ -1,246 +0,0 @@
-export default {
-  allAgents: [
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'John K',
-      confirmed: true,
-      email: 'john@chatwoot.com',
-      id: 1,
-      name: 'John Kennady',
-      role: 'administrator',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Samuel K',
-      confirmed: true,
-      email: 'samuel@chatwoot.com',
-      id: 2,
-      name: 'Samuel Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'James K',
-      confirmed: true,
-      email: 'james@chatwoot.com',
-      id: 3,
-      name: 'James Koti',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Honey',
-      confirmed: true,
-      email: 'bee@chatwoot.com',
-      id: 4,
-      name: 'Honey Bee',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abraham@chatwoot.com',
-      id: 5,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-  ],
-  formattedAgents: [
-    {
-      account_id: 0,
-      confirmed: true,
-      email: 'None',
-      id: 0,
-      name: 'None',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abraham@chatwoot.com',
-      id: 5,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'John K',
-      confirmed: true,
-      email: 'john@chatwoot.com',
-      id: 1,
-      name: 'John Kennady',
-      role: 'administrator',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Honey',
-      confirmed: true,
-      email: 'bee@chatwoot.com',
-      id: 4,
-      name: 'Honey Bee',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Samuel K',
-      confirmed: true,
-      email: 'samuel@chatwoot.com',
-      id: 2,
-      name: 'Samuel Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'James K',
-      confirmed: true,
-      email: 'james@chatwoot.com',
-      id: 3,
-      name: 'James Koti',
-      role: 'agent',
-    },
-  ],
-  onlineAgents: [
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abraham@chatwoot.com',
-      id: 5,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'John K',
-      confirmed: true,
-      email: 'john@chatwoot.com',
-      id: 1,
-      name: 'John Kennady',
-      role: 'administrator',
-    },
-  ],
-  busyAgents: [
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Honey',
-      confirmed: true,
-      email: 'bee@chatwoot.com',
-      id: 4,
-      name: 'Honey Bee',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Samuel K',
-      confirmed: true,
-      email: 'samuel@chatwoot.com',
-      id: 2,
-      name: 'Samuel Keta',
-      role: 'agent',
-    },
-  ],
-  offlineAgents: [
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'James K',
-      confirmed: true,
-      email: 'james@chatwoot.com',
-      id: 3,
-      name: 'James Koti',
-      role: 'agent',
-    },
-  ],
-  sortedByAvailability: [
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abraham@chatwoot.com',
-      id: 5,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'John K',
-      confirmed: true,
-      email: 'john@chatwoot.com',
-      id: 1,
-      name: 'John Kennady',
-      role: 'administrator',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Honey',
-      confirmed: true,
-      email: 'bee@chatwoot.com',
-      id: 4,
-      name: 'Honey Bee',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Samuel K',
-      confirmed: true,
-      email: 'samuel@chatwoot.com',
-      id: 2,
-      name: 'Samuel Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'James K',
-      confirmed: true,
-      email: 'james@chatwoot.com',
-      id: 3,
-      name: 'James Koti',
-      role: 'agent',
-    },
-  ],
-  formattedAgentsByPresenceOnline: [
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abr@chatwoot.com',
-      id: 1,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-  ],
-  formattedAgentsByPresenceOffline: [
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abr@chatwoot.com',
-      id: 1,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/mixins/specs/agentMixin.spec.js b/app/javascript/dashboard/mixins/specs/agentMixin.spec.js
deleted file mode 100644
index f92f485551085..0000000000000
--- a/app/javascript/dashboard/mixins/specs/agentMixin.spec.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import agentMixin from '../agentMixin';
-import agentFixtures from './agentFixtures';
-import Vuex from 'vuex';
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('agentMixin', () => {
-  let getters;
-  let store;
-  beforeEach(() => {
-    getters = {
-      getCurrentUser: () => ({
-        id: 1,
-        accounts: [
-          {
-            id: 1,
-            availability_status: 'online',
-            auto_offline: false,
-          },
-        ],
-      }),
-      getCurrentAccountId: () => 1,
-    };
-    store = new Vuex.Store({ getters });
-  });
-
-  it('return agents by availability', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [agentMixin],
-      data() {
-        return {
-          inboxId: 1,
-          currentChat: { meta: { assignee: { name: 'John' } } },
-        };
-      },
-      computed: {
-        assignableAgents() {
-          return agentFixtures.allAgents;
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(
-      wrapper.vm.getAgentsByAvailability(agentFixtures.allAgents, 'online')
-    ).toEqual(agentFixtures.onlineAgents);
-    expect(
-      wrapper.vm.getAgentsByAvailability(agentFixtures.allAgents, 'busy')
-    ).toEqual(agentFixtures.busyAgents);
-    expect(
-      wrapper.vm.getAgentsByAvailability(agentFixtures.allAgents, 'offline')
-    ).toEqual(agentFixtures.offlineAgents);
-  });
-
-  it('return sorted agents by availability', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [agentMixin],
-      data() {
-        return {
-          inboxId: 1,
-          currentChat: { meta: { assignee: { name: 'John' } } },
-        };
-      },
-      computed: {
-        assignableAgents() {
-          return agentFixtures.allAgents;
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(
-      wrapper.vm.sortedAgentsByAvailability(agentFixtures.allAgents)
-    ).toEqual(agentFixtures.sortedByAvailability);
-  });
-
-  it('return formatted agents', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [agentMixin],
-      data() {
-        return {
-          inboxId: 1,
-          currentChat: { meta: { assignee: { name: 'John' } } },
-        };
-      },
-      computed: {
-        assignableAgents() {
-          return agentFixtures.allAgents;
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.agentsList).toEqual(agentFixtures.formattedAgents);
-  });
-
-  it('return formatted agents by presence', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [agentMixin],
-      data() {
-        return {
-          inboxId: 1,
-          currentChat: { meta: { assignee: { name: 'John' } } },
-        };
-      },
-      computed: {
-        currentUser() {
-          return {
-            id: 1,
-            accounts: [
-              {
-                id: 1,
-                availability_status: 'offline',
-                auto_offline: false,
-              },
-            ],
-          };
-        },
-        currentAccountId() {
-          return 1;
-        },
-        assignableAgents() {
-          return agentFixtures.allAgents;
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(
-      wrapper.vm.getAgentsByUpdatedPresence(
-        agentFixtures.formattedAgentsByPresenceOnline
-      )
-    ).toEqual(agentFixtures.formattedAgentsByPresenceOffline);
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/aiMixin.spec.js b/app/javascript/dashboard/mixins/specs/aiMixin.spec.js
deleted file mode 100644
index 8449ff47ee276..0000000000000
--- a/app/javascript/dashboard/mixins/specs/aiMixin.spec.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import aiMixin from '../aiMixin';
-import Vuex from 'vuex';
-import OpenAPI from '../../api/integrations/openapi';
-import { LocalStorage } from '../../../shared/helpers/localStorage';
-
-vi.mock('../../api/integrations/openapi');
-vi.mock('../../../shared/helpers/localStorage');
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('aiMixin', () => {
-  let wrapper;
-  let getters;
-  let emptyGetters;
-  let component;
-  let actions;
-
-  beforeEach(() => {
-    OpenAPI.processEvent = vi.fn();
-    LocalStorage.set = vi.fn();
-    LocalStorage.get = vi.fn();
-
-    actions = {
-      ['integrations/get']: vi.fn(),
-    };
-
-    getters = {
-      ['integrations/getAppIntegrations']: () => [
-        {
-          id: 'openai',
-          hooks: [{ id: 'hook1' }],
-        },
-      ],
-    };
-
-    component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [aiMixin],
-    };
-
-    wrapper = shallowMount(component, {
-      store: new Vuex.Store({
-        getters: getters,
-        actions,
-      }),
-      localVue,
-    });
-
-    emptyGetters = {
-      ['integrations/getAppIntegrations']: () => [],
-    };
-  });
-
-  it('fetches integrations if required', async () => {
-    wrapper = shallowMount(component, {
-      store: new Vuex.Store({
-        getters: emptyGetters,
-        actions,
-      }),
-      localVue,
-    });
-
-    const dispatchSpy = vi.spyOn(wrapper.vm.$store, 'dispatch');
-    await wrapper.vm.fetchIntegrationsIfRequired();
-    expect(dispatchSpy).toHaveBeenCalledWith('integrations/get');
-  });
-
-  it('does not fetch integrations', async () => {
-    const dispatchSpy = vi.spyOn(wrapper.vm.$store, 'dispatch');
-    await wrapper.vm.fetchIntegrationsIfRequired();
-    expect(dispatchSpy).not.toHaveBeenCalledWith('integrations/get');
-    expect(wrapper.vm.isAIIntegrationEnabled).toBeTruthy();
-  });
-
-  it('fetches label suggestions', async () => {
-    const processEventSpy = vi.spyOn(OpenAPI, 'processEvent');
-    await wrapper.vm.fetchLabelSuggestions({
-      conversationId: '123',
-    });
-
-    expect(processEventSpy).toHaveBeenCalledWith({
-      type: 'label_suggestion',
-      hookId: 'hook1',
-      conversationId: '123',
-    });
-  });
-
-  it('cleans labels', () => {
-    const labels = 'label1, label2, label1';
-    expect(wrapper.vm.cleanLabels(labels)).toEqual(['label1', 'label2']);
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/reportMixin.spec.js b/app/javascript/dashboard/mixins/specs/reportMixin.spec.js
deleted file mode 100644
index c0bc1e15f0f1f..0000000000000
--- a/app/javascript/dashboard/mixins/specs/reportMixin.spec.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import reportMixin from '../reportMixin';
-import reportFixtures from './reportMixinFixtures';
-import Vuex from 'vuex';
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('reportMixin', () => {
-  let getters;
-  let store;
-  beforeEach(() => {
-    getters = {
-      getAccountSummary: () => reportFixtures.summary,
-      getBotSummary: () => reportFixtures.botSummary,
-      getAccountReports: () => reportFixtures.report,
-    };
-    store = new Vuex.Store({ getters });
-  });
-
-  it('display the metric for account', async () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    await wrapper.setProps({
-      accountSummaryKey: 'getAccountSummary',
-    });
-    expect(wrapper.vm.displayMetric('conversations_count')).toEqual('5,000');
-    expect(wrapper.vm.displayMetric('avg_first_response_time')).toEqual(
-      '3 Min 18 Sec'
-    );
-  });
-
-  it('display the metric for bot', async () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    await wrapper.setProps({
-      accountSummaryKey: 'getBotSummary',
-    });
-    expect(wrapper.vm.displayMetric('bot_resolutions_count')).toEqual('10');
-    expect(wrapper.vm.displayMetric('bot_handoffs_count')).toEqual('20');
-  });
-
-  it('display the metric', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.displayMetric('conversations_count')).toEqual('5,000');
-    expect(wrapper.vm.displayMetric('avg_first_response_time')).toEqual(
-      '3 Min 18 Sec'
-    );
-  });
-
-  it('calculate the trend', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.calculateTrend('conversations_count')).toEqual(124900);
-    expect(wrapper.vm.calculateTrend('resolutions_count')).toEqual(0);
-  });
-
-  it('display info text', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-      data() {
-        return {
-          currentSelection: 0,
-        };
-      },
-      computed: {
-        metrics() {
-          return [
-            {
-              DESC: '( Avg )',
-              INFO_TEXT: 'Total number of conversations used for computation:',
-              KEY: 'avg_first_response_time',
-              NAME: 'First Response Time',
-            },
-          ];
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.displayInfoText('avg_first_response_time')).toEqual(
-      'Total number of conversations used for computation: 4'
-    );
-  });
-
-  it('do not display info text', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [reportMixin],
-      data() {
-        return {
-          currentSelection: 0,
-        };
-      },
-      computed: {
-        metrics() {
-          return [
-            {
-              DESC: '( Total )',
-              INFO_TEXT: '',
-              KEY: 'conversation_count',
-              NAME: 'Conversations',
-            },
-            {
-              DESC: '( Avg )',
-              INFO_TEXT: 'Total number of conversations used for computation:',
-              KEY: 'avg_first_response_time',
-              NAME: 'First Response Time',
-            },
-          ];
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.displayInfoText('conversation_count')).toEqual('');
-    expect(wrapper.vm.displayInfoText('incoming_messages_count')).toEqual('');
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/reportMixinFixtures.js b/app/javascript/dashboard/mixins/specs/reportMixinFixtures.js
deleted file mode 100644
index 591bf7c1f478e..0000000000000
--- a/app/javascript/dashboard/mixins/specs/reportMixinFixtures.js
+++ /dev/null
@@ -1,37 +0,0 @@
-export default {
-  summary: {
-    avg_first_response_time: '198.6666666666667',
-    avg_resolution_time: '208.3333333333333',
-    conversations_count: 5000,
-    incoming_messages_count: 5,
-    outgoing_messages_count: 3,
-    previous: {
-      avg_first_response_time: '89.0',
-      avg_resolution_time: '145.0',
-      conversations_count: 4,
-      incoming_messages_count: 5,
-      outgoing_messages_count: 4,
-      resolutions_count: 0,
-    },
-    resolutions_count: 3,
-  },
-  botSummary: {
-    bot_resolutions_count: 10,
-    bot_handoffs_count: 20,
-    previous: {
-      bot_resolutions_count: 8,
-      bot_handoffs_count: 5,
-    },
-  },
-  report: {
-    data: [
-      { value: '0.00', timestamp: 1647541800, count: 0 },
-      { value: '0.00', timestamp: 1647628200, count: 0 },
-      { value: '0.00', timestamp: 1647714600, count: 0 },
-      { value: '0.00', timestamp: 1647801000, count: 0 },
-      { value: '0.01', timestamp: 1647887400, count: 4 },
-      { value: '0.00', timestamp: 1647973800, count: 0 },
-      { value: '0.00', timestamp: 1648060200, count: 0 },
-    ],
-  },
-};
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 298b439da3c8d..e915aef4468d9 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -1,7 +1,7 @@
 <script>
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { conversationUrl, frontendURL } from '../../../helper/URLHelper';
@@ -18,7 +18,6 @@ export default {
     TranslateModal,
     MenuItem,
   },
-  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: Object,
@@ -37,6 +36,12 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    const { getPlainText } = useMessageFormatter();
+    return {
+      getPlainText,
+    };
+  },
   data() {
     return {
       isCannedResponseModalOpen: false,
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
index f3f82e8a3a6b9..55c825695a4a0 100644
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue
@@ -5,7 +5,6 @@ import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vu
 
 const emit = defineEmits(['add']);
 
-const addNoteRef = ref(null);
 const noteContent = ref('');
 
 const buttonDisabled = computed(() => noteContent.value === '');
@@ -23,12 +22,11 @@ const keyboardEvents = {
     allowOnFocusedInput: true,
   },
 };
-useKeyboardEvents(keyboardEvents, addNoteRef);
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
   <div
-    ref="addNoteRef"
     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"
   >
     <WootMessageEditor
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
index cba9b8cc9b589..3e7422c327709 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -1,15 +1,12 @@
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     Thumbnail,
   },
-
-  mixins: [messageFormatterMixin],
-
   props: {
     id: {
       type: Number,
@@ -28,6 +25,12 @@ export default {
       default: 0,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   data() {
     return {
       showDeleteModal: false,
diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index e75b082aba020..5fb146243fb14 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -1,12 +1,11 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import ReadMore from './ReadMore.vue';
 
 export default {
   components: {
     ReadMore,
   },
-  mixins: [messageFormatterMixin],
   props: {
     author: {
       type: String,
@@ -21,6 +20,13 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { formatMessage, highlightContent } = useMessageFormatter();
+    return {
+      formatMessage,
+      highlightContent,
+    };
+  },
   data() {
     return {
       isOverflowing: false,
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index a5472e6e4b661..954d0e26a1811 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -4,6 +4,16 @@ import SearchTabs from './SearchTabs.vue';
 import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
+import Policy from 'dashboard/components/policy.vue';
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+  CONTACT_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
+import {
+  getUserPermissions,
+  filterItemsByPermission,
+} from 'dashboard/helper/permissionsHelper.js';
 
 import { mapGetters } from 'vuex';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -14,16 +24,22 @@ export default {
     SearchResultContactsList,
     SearchResultConversationsList,
     SearchResultMessagesList,
+    Policy,
   },
   data() {
     return {
       selectedTab: 'all',
       query: '',
+      contactPermissions: CONTACT_PERMISSIONS,
+      conversationPermissions: CONVERSATION_PERMISSIONS,
+      rolePermissions: ROLES,
     };
   },
 
   computed: {
     ...mapGetters({
+      currentUser: 'getCurrentUser',
+      currentAccountId: 'getCurrentAccountId',
       contactRecords: 'conversationSearch/getContactRecords',
       conversationRecords: 'conversationSearch/getConversationRecords',
       messageRecords: 'conversationSearch/getMessageRecords',
@@ -59,34 +75,76 @@ export default {
     filterMessages() {
       return this.selectedTab === 'messages' || this.isSelectedTabAll;
     },
+    userPermissions() {
+      return getUserPermissions(this.currentUser, this.currentAccountId);
+    },
     totalSearchResultsCount() {
-      return (
-        this.contacts.length + this.conversations.length + this.messages.length
+      const permissionCounts = {
+        contacts: {
+          permissions: [...this.rolePermissions, this.contactPermissions],
+          count: () => this.contacts.length,
+        },
+        conversations: {
+          permissions: [
+            ...this.rolePermissions,
+            ...this.conversationPermissions,
+          ],
+          count: () => this.conversations.length + this.messages.length,
+        },
+      };
+
+      const filteredCounts = filterItemsByPermission(
+        permissionCounts,
+        this.userPermissions,
+        item => item.permissions,
+        (_, item) => item.count
       );
+
+      return filteredCounts.reduce((total, count) => total + count(), 0);
     },
     tabs() {
-      return [
-        {
+      const allTabsConfig = {
+        all: {
           key: 'all',
           name: this.$t('SEARCH.TABS.ALL'),
           count: this.totalSearchResultsCount,
+          permissions: [
+            this.contactPermissions,
+            ...this.rolePermissions,
+            ...this.conversationPermissions,
+          ],
         },
-        {
+        contacts: {
           key: 'contacts',
           name: this.$t('SEARCH.TABS.CONTACTS'),
           count: this.contacts.length,
+          permissions: [...this.rolePermissions, this.contactPermissions],
         },
-        {
+        conversations: {
           key: 'conversations',
           name: this.$t('SEARCH.TABS.CONVERSATIONS'),
           count: this.conversations.length,
+          permissions: [
+            ...this.rolePermissions,
+            ...this.conversationPermissions,
+          ],
         },
-        {
+        messages: {
           key: 'messages',
           name: this.$t('SEARCH.TABS.MESSAGES'),
           count: this.messages.length,
+          permissions: [
+            ...this.rolePermissions,
+            ...this.conversationPermissions,
+          ],
         },
-      ];
+      };
+
+      return filterItemsByPermission(
+        allTabsConfig,
+        this.userPermissions,
+        item => item.permissions
+      );
     },
     activeTabIndex() {
       const index = this.tabs.findIndex(tab => tab.key === this.selectedTab);
@@ -165,29 +223,39 @@ export default {
       </header>
       <div class="search-results">
         <div v-if="showResultsSection">
-          <SearchResultContactsList
-            v-if="filterContacts"
-            :is-fetching="uiFlags.contact.isFetching"
-            :contacts="contacts"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
+          <Policy :permissions="[...rolePermissions, contactPermissions]">
+            <SearchResultContactsList
+              v-if="filterContacts"
+              :is-fetching="uiFlags.contact.isFetching"
+              :contacts="contacts"
+              :query="query"
+              :show-title="isSelectedTabAll"
+            />
+          </Policy>
 
-          <SearchResultMessagesList
-            v-if="filterMessages"
-            :is-fetching="uiFlags.message.isFetching"
-            :messages="messages"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
+          <Policy
+            :permissions="[...rolePermissions, ...conversationPermissions]"
+          >
+            <SearchResultMessagesList
+              v-if="filterMessages"
+              :is-fetching="uiFlags.message.isFetching"
+              :messages="messages"
+              :query="query"
+              :show-title="isSelectedTabAll"
+            />
+          </Policy>
 
-          <SearchResultConversationsList
-            v-if="filterConversations"
-            :is-fetching="uiFlags.conversation.isFetching"
-            :conversations="conversations"
-            :query="query"
-            :show-title="isSelectedTabAll"
-          />
+          <Policy
+            :permissions="[...rolePermissions, ...conversationPermissions]"
+          >
+            <SearchResultConversationsList
+              v-if="filterConversations"
+              :is-fetching="uiFlags.conversation.isFetching"
+              :conversations="conversations"
+              :query="query"
+              :show-title="isSelectedTabAll"
+            />
+          </Policy>
         </div>
         <div v-else-if="showEmptySearchResults" class="empty">
           <fluent-icon icon="info" size="16px" class="icon" />
diff --git a/app/javascript/dashboard/modules/search/search.routes.js b/app/javascript/dashboard/modules/search/search.routes.js
index d2d7b19c4b612..e677248e95c70 100644
--- a/app/javascript/dashboard/modules/search/search.routes.js
+++ b/app/javascript/dashboard/modules/search/search.routes.js
@@ -1,5 +1,10 @@
 /* eslint-disable storybook/default-exports */
 import { frontendURL } from '../../helper/URLHelper';
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+  CONTACT_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
 
 const SearchView = () => import('./components/SearchView.vue');
 
@@ -8,7 +13,7 @@ export const routes = [
     path: frontendURL('accounts/:accountId/search'),
     name: 'search',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: [...ROLES, ...CONVERSATION_PERMISSIONS, CONTACT_PERMISSIONS],
     },
     component: SearchView,
   },
diff --git a/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue b/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
index 529b624b0b73a..b55d5780177d8 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
@@ -6,7 +6,7 @@ import { useI18n } from 'dashboard/composables/useI18n';
 import { useEmitter } from 'dashboard/composables/emitter';
 import { getUnixTime } from 'date-fns';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
-import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import { CMD_SNOOZE_CONVERSATION } from 'dashboard/helper/commandbar/events';
 import wootConstants from 'dashboard/constants/globals';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 
diff --git a/app/javascript/dashboard/routes/dashboard/commands/appearanceHotKeys.js b/app/javascript/dashboard/routes/dashboard/commands/appearanceHotKeys.js
deleted file mode 100644
index 493a95e0cecf6..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/commands/appearanceHotKeys.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import {
-  ICON_APPEARANCE,
-  ICON_LIGHT_MODE,
-  ICON_DARK_MODE,
-  ICON_SYSTEM_MODE,
-} from './CommandBarIcons';
-import { LocalStorage } from 'shared/helpers/localStorage';
-import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { setColorTheme } from 'dashboard/helper/themeHelper.js';
-
-export default {
-  computed: {
-    themeOptions() {
-      return [
-        {
-          key: 'light',
-          label: this.$t('COMMAND_BAR.COMMANDS.LIGHT_MODE'),
-          icon: ICON_LIGHT_MODE,
-        },
-        {
-          key: 'dark',
-          label: this.$t('COMMAND_BAR.COMMANDS.DARK_MODE'),
-          icon: ICON_DARK_MODE,
-        },
-
-        {
-          key: 'auto',
-          label: this.$t('COMMAND_BAR.COMMANDS.SYSTEM_MODE'),
-          icon: ICON_SYSTEM_MODE,
-        },
-      ];
-    },
-    goToAppearanceHotKeys() {
-      const options = this.themeOptions.map(theme => ({
-        id: theme.key,
-        title: theme.label,
-        parent: 'appearance_settings',
-        section: this.$t('COMMAND_BAR.SECTIONS.APPEARANCE'),
-        icon: theme.icon,
-        handler: () => {
-          this.setAppearance(theme.key);
-        },
-      }));
-      return [
-        {
-          id: 'appearance_settings',
-          title: this.$t('COMMAND_BAR.COMMANDS.CHANGE_APPEARANCE'),
-          section: this.$t('COMMAND_BAR.SECTIONS.APPEARANCE'),
-          icon: ICON_APPEARANCE,
-          children: options.map(option => option.id),
-        },
-        ...options,
-      ];
-    },
-  },
-  methods: {
-    setAppearance(theme) {
-      LocalStorage.set(LOCAL_STORAGE_KEYS.COLOR_SCHEME, theme);
-      const isOSOnDarkMode = window.matchMedia(
-        '(prefers-color-scheme: dark)'
-      ).matches;
-      setColorTheme(isOSOnDarkMode);
-    },
-  },
-};
diff --git a/app/javascript/dashboard/routes/dashboard/commands/bulkActionsHotKeys.js b/app/javascript/dashboard/routes/dashboard/commands/bulkActionsHotKeys.js
deleted file mode 100644
index 74e68afc66786..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/commands/bulkActionsHotKeys.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { mapGetters } from 'vuex';
-import wootConstants from 'dashboard/constants/globals';
-
-import {
-  CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-  CMD_BULK_ACTION_REOPEN_CONVERSATION,
-  CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-} from './commandBarBusEvents';
-import {
-  ICON_SNOOZE_CONVERSATION,
-  ICON_REOPEN_CONVERSATION,
-  ICON_RESOLVE_CONVERSATION,
-} from './CommandBarIcons';
-import { emitter } from 'shared/helpers/mitt';
-
-import { createSnoozeHandlers } from './commandBarActions';
-
-const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
-
-export const SNOOZE_CONVERSATION_BULK_ACTIONS = [
-  {
-    id: 'bulk_action_snooze_conversation',
-    title: 'COMMAND_BAR.COMMANDS.SNOOZE_CONVERSATION',
-    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
-    icon: ICON_SNOOZE_CONVERSATION,
-    children: Object.values(SNOOZE_OPTIONS),
-  },
-  ...createSnoozeHandlers(
-    CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-    'bulk_action_snooze_conversation',
-    'COMMAND_BAR.SECTIONS.BULK_ACTIONS'
-  ),
-];
-
-export const RESOLVED_CONVERSATION_BULK_ACTIONS = [
-  {
-    id: 'bulk_action_reopen_conversation',
-    title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
-    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
-    icon: ICON_REOPEN_CONVERSATION,
-    handler: () => emitter.emit(CMD_BULK_ACTION_REOPEN_CONVERSATION),
-  },
-];
-
-export const OPEN_CONVERSATION_BULK_ACTIONS = [
-  {
-    id: 'bulk_action_resolve_conversation',
-    title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
-    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
-    icon: ICON_RESOLVE_CONVERSATION,
-    handler: () => emitter.emit(CMD_BULK_ACTION_RESOLVE_CONVERSATION),
-  },
-];
-
-export default {
-  computed: {
-    ...mapGetters({
-      selectedConversations: 'bulkActions/getSelectedConversationIds',
-    }),
-    bulkActionsHotKeys() {
-      let actions = [];
-      if (this.selectedConversations.length > 0) {
-        actions = [
-          ...SNOOZE_CONVERSATION_BULK_ACTIONS,
-          ...RESOLVED_CONVERSATION_BULK_ACTIONS,
-          ...OPEN_CONVERSATION_BULK_ACTIONS,
-        ];
-      }
-      return this.prepareActions(actions);
-    },
-  },
-  watch: {
-    selectedConversations() {
-      this.setCommandbarData();
-    },
-  },
-  methods: {
-    prepareActions(actions) {
-      return actions.map(action => ({
-        ...action,
-        title: this.$t(action.title),
-        section: this.$t(action.section),
-      }));
-    },
-  },
-};
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index d639696bae71f..c798336b23107 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -1,112 +1,85 @@
-<script>
+<script setup>
 import '@chatwoot/ninja-keys';
-import { useConversationLabels } from 'dashboard/composables/useConversationLabels';
+import { ref, computed, watchEffect, onMounted } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useTrack } from 'dashboard/composables';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAppearanceHotKeys } from 'dashboard/composables/commands/useAppearanceHotKeys';
+import { useInboxHotKeys } from 'dashboard/composables/commands/useInboxHotKeys';
+import { useGoToCommandHotKeys } from 'dashboard/composables/commands/useGoToCommandHotKeys';
+import { useBulkActionsHotKeys } from 'dashboard/composables/commands/useBulkActionsHotKeys';
+import { useConversationHotKeys } from 'dashboard/composables/commands/useConversationHotKeys';
 import wootConstants from 'dashboard/constants/globals';
-import conversationHotKeysMixin from './conversationHotKeys';
-import bulkActionsHotKeysMixin from './bulkActionsHotKeys';
-import inboxHotKeysMixin from './inboxHotKeys';
-import goToCommandHotKeys from './goToCommandHotKeys';
-import appearanceHotKeys from './appearanceHotKeys';
-import agentMixin from 'dashboard/mixins/agentMixin';
-import { GENERAL_EVENTS } from '../../../helper/AnalyticsHelper/events';
-
-export default {
-  mixins: [
-    agentMixin,
-    conversationHotKeysMixin,
-    bulkActionsHotKeysMixin,
-    inboxHotKeysMixin,
-    appearanceHotKeys,
-    goToCommandHotKeys,
-  ],
-  setup() {
-    // used in conversationHotKeysMixin
-    const {
-      activeLabels,
-      inactiveLabels,
-      addLabelToConversation,
-      removeLabelFromConversation,
-    } = useConversationLabels();
-
-    return {
-      activeLabels,
-      inactiveLabels,
-      addLabelToConversation,
-      removeLabelFromConversation,
-    };
-  },
-  data() {
-    return {
-      // Added selectedSnoozeType to track the selected snooze type
-      // So if the selected snooze type is "custom snooze" then we set selectedSnoozeType with the CMD action id
-      // So that we can track the selected snooze type and when we close the command bar
-      selectedSnoozeType: null,
-    };
-  },
-  computed: {
-    placeholder() {
-      return this.$t('COMMAND_BAR.SEARCH_PLACEHOLDER');
-    },
-    accountId() {
-      return this.$store.getters.getCurrentAccountId;
-    },
-    routeName() {
-      return this.$route.name;
-    },
-    hotKeys() {
-      return [
-        ...this.inboxHotKeys,
-        ...this.conversationHotKeys,
-        ...this.bulkActionsHotKeys,
-        ...this.goToCommandHotKeys,
-        ...this.goToAppearanceHotKeys,
-      ];
-    },
-  },
-  watch: {
-    routeName() {
-      this.setCommandbarData();
-    },
-  },
-  mounted() {
-    this.setCommandbarData();
-  },
-  methods: {
-    setCommandbarData() {
-      this.$refs.ninjakeys.data = this.hotKeys;
-    },
-    onSelected(item) {
-      const {
-        detail: {
-          action: { title = null, section = null, id = null } = {},
-        } = {},
-      } = item;
-      // Added this condition to prevent setting the selectedSnoozeType to null
-      // When we select the "custom snooze" (CMD bar will close and the custom snooze modal will open)
-      if (id === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-        this.selectedSnoozeType =
-          wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME;
-      } else {
-        this.selectedSnoozeType = null;
-      }
-      this.$track(GENERAL_EVENTS.COMMAND_BAR, {
-        section,
-        action: title,
-      });
-      this.setCommandbarData();
-    },
-    onClosed() {
-      // If the selectedSnoozeType is not "SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME (custom snooze)" then we set the context menu chat id to null
-      // Else we do nothing and its handled in the ChatList.vue hideCustomSnoozeModal() method
-      if (
-        this.selectedSnoozeType !==
-        wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME
-      ) {
-        this.$store.dispatch('setContextMenuChatId', null);
-      }
-    },
-  },
+import { GENERAL_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+const store = useStore();
+const track = useTrack();
+const { t } = useI18n();
+
+const ninjakeys = ref(null);
+
+// Added selectedSnoozeType to track the selected snooze type
+// So if the selected snooze type is "custom snooze" then we set selectedSnoozeType with the CMD action id
+// So that we can track the selected snooze type and when we close the command bar
+const selectedSnoozeType = ref(null);
+
+const { goToAppearanceHotKeys } = useAppearanceHotKeys();
+const { inboxHotKeys } = useInboxHotKeys();
+const { goToCommandHotKeys } = useGoToCommandHotKeys();
+const { bulkActionsHotKeys } = useBulkActionsHotKeys();
+const { conversationHotKeys } = useConversationHotKeys();
+
+const placeholder = computed(() => t('COMMAND_BAR.SEARCH_PLACEHOLDER'));
+
+const hotKeys = computed(() => [
+  ...inboxHotKeys.value,
+  ...goToCommandHotKeys.value,
+  ...goToAppearanceHotKeys.value,
+  ...bulkActionsHotKeys.value,
+  ...conversationHotKeys.value,
+]);
+
+const setCommandBarData = () => {
+  ninjakeys.value.data = hotKeys.value;
+};
+
+const onSelected = item => {
+  const {
+    detail: { action: { title = null, section = null, id = null } = {} } = {},
+  } = item;
+  // Added this condition to prevent setting the selectedSnoozeType to null
+  // When we select the "custom snooze" (CMD bar will close and the custom snooze modal will open)
+  if (id === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
+    selectedSnoozeType.value = wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME;
+  } else {
+    selectedSnoozeType.value = null;
+  }
+
+  track(GENERAL_EVENTS.COMMAND_BAR, {
+    section,
+    action: title,
+  });
+
+  setCommandBarData();
 };
+
+const onClosed = () => {
+  // If the selectedSnoozeType is not "SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME (custom snooze)" then we set the context menu chat id to null
+  // Else we do nothing and its handled in the ChatList.vue hideCustomSnoozeModal() method
+  if (
+    selectedSnoozeType.value !== wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME
+  ) {
+    store.dispatch('setContextMenuChatId', null);
+  }
+};
+
+watchEffect(() => {
+  if (ninjakeys.value) {
+    ninjakeys.value.data = hotKeys.value;
+  }
+});
+
+onMounted(setCommandBarData);
 </script>
 
 <!-- eslint-disable vue/attribute-hyphenation -->
diff --git a/app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js b/app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js
deleted file mode 100644
index c680788fdcdf0..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js
+++ /dev/null
@@ -1,415 +0,0 @@
-import { mapGetters } from 'vuex';
-import wootConstants from 'dashboard/constants/globals';
-import { emitter } from 'shared/helpers/mitt';
-
-import { CMD_AI_ASSIST } from './commandBarBusEvents';
-import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
-import aiMixin from 'dashboard/mixins/aiMixin';
-import {
-  ICON_ADD_LABEL,
-  ICON_ASSIGN_AGENT,
-  ICON_ASSIGN_PRIORITY,
-  ICON_ASSIGN_TEAM,
-  ICON_REMOVE_LABEL,
-  ICON_PRIORITY_URGENT,
-  ICON_PRIORITY_HIGH,
-  ICON_PRIORITY_LOW,
-  ICON_PRIORITY_MEDIUM,
-  ICON_PRIORITY_NONE,
-  ICON_AI_ASSIST,
-  ICON_AI_SUMMARY,
-  ICON_AI_SHORTEN,
-  ICON_AI_EXPAND,
-  ICON_AI_GRAMMAR,
-} from './CommandBarIcons';
-
-import {
-  OPEN_CONVERSATION_ACTIONS,
-  SNOOZE_CONVERSATION_ACTIONS,
-  RESOLVED_CONVERSATION_ACTIONS,
-  SEND_TRANSCRIPT_ACTION,
-  UNMUTE_ACTION,
-  MUTE_ACTION,
-} from './commandBarActions';
-import {
-  isAConversationRoute,
-  isAInboxViewRoute,
-} from '../../../helper/routeHelpers';
-export default {
-  mixins: [aiMixin],
-  watch: {
-    assignableAgents() {
-      this.setCommandbarData();
-    },
-    currentChat() {
-      this.setCommandbarData();
-    },
-    teamsList() {
-      this.setCommandbarData();
-    },
-    activeLabels() {
-      this.setCommandbarData();
-    },
-    draftMessage() {
-      this.setCommandbarData();
-    },
-    replyMode() {
-      this.setCommandbarData();
-    },
-    contextMenuChatId() {
-      this.setCommandbarData();
-    },
-  },
-  computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-      replyMode: 'draftMessages/getReplyEditorMode',
-      contextMenuChatId: 'getContextMenuChatId',
-      teams: 'teams/getTeams',
-    }),
-    draftMessage() {
-      return this.$store.getters['draftMessages/get'](this.draftKey);
-    },
-    draftKey() {
-      return `draft-${this.conversationId}-${this.replyMode}`;
-    },
-    inboxId() {
-      return this.currentChat?.inbox_id;
-    },
-    conversationId() {
-      return this.currentChat?.id;
-    },
-    hasAnAssignedTeam() {
-      return !!this.currentChat?.meta?.team;
-    },
-    teamsList() {
-      if (this.hasAnAssignedTeam) {
-        return [
-          { id: 0, name: this.$t('TEAMS_SETTINGS.LIST.NONE') },
-          ...this.teams,
-        ];
-      }
-      return this.teams;
-    },
-    statusActions() {
-      const isOpen =
-        this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
-      const isSnoozed =
-        this.currentChat?.status === wootConstants.STATUS_TYPE.SNOOZED;
-      const isResolved =
-        this.currentChat?.status === wootConstants.STATUS_TYPE.RESOLVED;
-
-      let actions = [];
-      if (isOpen) {
-        actions = [
-          ...OPEN_CONVERSATION_ACTIONS,
-          ...SNOOZE_CONVERSATION_ACTIONS,
-        ];
-      } else if (isResolved || isSnoozed) {
-        actions = RESOLVED_CONVERSATION_ACTIONS;
-      }
-      return this.prepareActions(actions);
-    },
-
-    priorityOptions() {
-      return [
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.NONE'),
-          key: null,
-          icon: ICON_PRIORITY_NONE,
-        },
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.URGENT'),
-          key: 'urgent',
-          icon: ICON_PRIORITY_URGENT,
-        },
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.HIGH'),
-          key: 'high',
-          icon: ICON_PRIORITY_HIGH,
-        },
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM'),
-          key: 'medium',
-          icon: ICON_PRIORITY_MEDIUM,
-        },
-        {
-          label: this.$t('CONVERSATION.PRIORITY.OPTIONS.LOW'),
-          key: 'low',
-          icon: ICON_PRIORITY_LOW,
-        },
-      ].filter(item => item.key !== this.currentChat?.priority);
-    },
-    assignAgentActions() {
-      const agentOptions = this.agentsList.map(agent => ({
-        id: `agent-${agent.id}`,
-        title: agent.name,
-        parent: 'assign_an_agent',
-        section: this.$t('COMMAND_BAR.SECTIONS.CHANGE_ASSIGNEE'),
-        agentInfo: agent,
-        icon: ICON_ASSIGN_AGENT,
-        handler: this.onChangeAssignee,
-      }));
-      return [
-        {
-          id: 'assign_an_agent',
-          title: this.$t('COMMAND_BAR.COMMANDS.ASSIGN_AN_AGENT'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_ASSIGN_AGENT,
-          children: agentOptions.map(option => option.id),
-        },
-        ...agentOptions,
-      ];
-    },
-    assignPriorityActions() {
-      const options = this.priorityOptions.map(priority => ({
-        id: `priority-${priority.key}`,
-        title: priority.label,
-        parent: 'assign_priority',
-        section: this.$t('COMMAND_BAR.SECTIONS.CHANGE_PRIORITY'),
-        priority: priority,
-        icon: priority.icon,
-        handler: this.onChangePriority,
-      }));
-      return [
-        {
-          id: 'assign_priority',
-          title: this.$t('COMMAND_BAR.COMMANDS.ASSIGN_PRIORITY'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_ASSIGN_PRIORITY,
-          children: options.map(option => option.id),
-        },
-        ...options,
-      ];
-    },
-    assignTeamActions() {
-      const teamOptions = this.teamsList.map(team => ({
-        id: `team-${team.id}`,
-        title: team.name,
-        parent: 'assign_a_team',
-        section: this.$t('COMMAND_BAR.SECTIONS.CHANGE_TEAM'),
-        teamInfo: team,
-        icon: ICON_ASSIGN_TEAM,
-        handler: this.onChangeTeam,
-      }));
-      return [
-        {
-          id: 'assign_a_team',
-          title: this.$t('COMMAND_BAR.COMMANDS.ASSIGN_A_TEAM'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_ASSIGN_TEAM,
-          children: teamOptions.map(option => option.id),
-        },
-        ...teamOptions,
-      ];
-    },
-
-    addLabelActions() {
-      const availableLabels = this.inactiveLabels.map(label => ({
-        id: label.title,
-        title: `#${label.title}`,
-        parent: 'add_a_label_to_the_conversation',
-        section: this.$t('COMMAND_BAR.SECTIONS.ADD_LABEL'),
-        icon: ICON_ADD_LABEL,
-        handler: action => this.addLabelToConversation({ title: action.id }),
-      }));
-      return [
-        ...availableLabels,
-        {
-          id: 'add_a_label_to_the_conversation',
-          title: this.$t('COMMAND_BAR.COMMANDS.ADD_LABELS_TO_CONVERSATION'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_ADD_LABEL,
-          children: this.inactiveLabels.map(label => label.title),
-        },
-      ];
-    },
-    removeLabelActions() {
-      const activeLabels = this.activeLabels.map(label => ({
-        id: label.title,
-        title: `#${label.title}`,
-        parent: 'remove_a_label_to_the_conversation',
-        section: this.$t('COMMAND_BAR.SECTIONS.REMOVE_LABEL'),
-        icon: ICON_REMOVE_LABEL,
-        handler: action => this.removeLabelFromConversation(action.id),
-      }));
-      return [
-        ...activeLabels,
-        {
-          id: 'remove_a_label_to_the_conversation',
-          title: this.$t('COMMAND_BAR.COMMANDS.REMOVE_LABEL_FROM_CONVERSATION'),
-          section: this.$t('COMMAND_BAR.SECTIONS.CONVERSATION'),
-          icon: ICON_REMOVE_LABEL,
-          children: this.activeLabels.map(label => label.title),
-        },
-      ];
-    },
-    labelActions() {
-      if (this.activeLabels.length) {
-        return [...this.addLabelActions, ...this.removeLabelActions];
-      }
-      return this.addLabelActions;
-    },
-    conversationAdditionalActions() {
-      return this.prepareActions([
-        this.currentChat.muted ? UNMUTE_ACTION : MUTE_ACTION,
-        SEND_TRANSCRIPT_ACTION,
-      ]);
-    },
-
-    nonDraftMessageAIAssistActions() {
-      if (this.replyMode === REPLY_EDITOR_MODES.REPLY) {
-        return [
-          {
-            label: this.$t(
-              'INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.REPLY_SUGGESTION'
-            ),
-            key: 'reply_suggestion',
-            icon: ICON_AI_ASSIST,
-          },
-        ];
-      }
-      return [
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SUMMARIZE'),
-          key: 'summarize',
-          icon: ICON_AI_SUMMARY,
-        },
-      ];
-    },
-
-    draftMessageAIAssistActions() {
-      return [
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.REPHRASE'),
-          key: 'rephrase',
-          icon: ICON_AI_ASSIST,
-        },
-        {
-          label: this.$t(
-            'INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.FIX_SPELLING_GRAMMAR'
-          ),
-          key: 'fix_spelling_grammar',
-          icon: ICON_AI_GRAMMAR,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.EXPAND'),
-          key: 'expand',
-          icon: ICON_AI_EXPAND,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SHORTEN'),
-          key: 'shorten',
-          icon: ICON_AI_SHORTEN,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.MAKE_FRIENDLY'),
-          key: 'make_friendly',
-          icon: ICON_AI_ASSIST,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.MAKE_FORMAL'),
-          key: 'make_formal',
-          icon: ICON_AI_ASSIST,
-        },
-        {
-          label: this.$t('INTEGRATION_SETTINGS.OPEN_AI.OPTIONS.SIMPLIFY'),
-          key: 'simplify',
-          icon: ICON_AI_ASSIST,
-        },
-      ];
-    },
-
-    AIAssistActions() {
-      const aiOptions = this.draftMessage
-        ? this.draftMessageAIAssistActions
-        : this.nonDraftMessageAIAssistActions;
-      const options = aiOptions.map(item => ({
-        id: `ai-assist-${item.key}`,
-        title: item.label,
-        parent: 'ai_assist',
-        section: this.$t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
-        priority: item,
-        icon: item.icon,
-        handler: () => emitter.emit(CMD_AI_ASSIST, item.key),
-      }));
-      return [
-        {
-          id: 'ai_assist',
-          title: this.$t('COMMAND_BAR.COMMANDS.AI_ASSIST'),
-          section: this.$t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
-          icon: ICON_AI_ASSIST,
-          children: options.map(option => option.id),
-        },
-        ...options,
-      ];
-    },
-
-    isConversationOrInboxRoute() {
-      return (
-        isAConversationRoute(this.$route.name) ||
-        isAInboxViewRoute(this.$route.name)
-      );
-    },
-
-    shouldShowSnoozeOption() {
-      return (
-        isAConversationRoute(this.$route.name, true, false) &&
-        this.contextMenuChatId
-      );
-    },
-
-    getDefaultConversationHotKeys() {
-      const defaultConversationHotKeys = [
-        ...this.statusActions,
-        ...this.conversationAdditionalActions,
-        ...this.assignAgentActions,
-        ...this.assignTeamActions,
-        ...this.labelActions,
-        ...this.assignPriorityActions,
-      ];
-      if (this.isAIIntegrationEnabled) {
-        return [...defaultConversationHotKeys, ...this.AIAssistActions];
-      }
-      return defaultConversationHotKeys;
-    },
-
-    conversationHotKeys() {
-      if (this.shouldShowSnoozeOption) {
-        return this.prepareActions(SNOOZE_CONVERSATION_ACTIONS);
-      }
-      if (this.isConversationOrInboxRoute) {
-        return this.getDefaultConversationHotKeys;
-      }
-      return [];
-    },
-  },
-
-  methods: {
-    onChangeAssignee(action) {
-      this.$store.dispatch('assignAgent', {
-        conversationId: this.currentChat.id,
-        agentId: action.agentInfo.id,
-      });
-    },
-    onChangePriority(action) {
-      this.$store.dispatch('assignPriority', {
-        conversationId: this.currentChat.id,
-        priority: action.priority.key,
-      });
-    },
-    onChangeTeam(action) {
-      this.$store.dispatch('assignTeam', {
-        conversationId: this.currentChat.id,
-        teamId: action.teamInfo.id,
-      });
-    },
-    prepareActions(actions) {
-      return actions.map(action => ({
-        ...action,
-        title: this.$t(action.title),
-        section: this.$t(action.section),
-      }));
-    },
-  },
-};
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
index 41c986d03f862..e07580b0cbfc7 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -4,7 +4,7 @@ import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue
 import countries from 'shared/constants/countries.js';
 import { mapGetters } from 'vuex';
 import { filterAttributeGroups } from '../contactFilterItems';
-import filterMixin from 'shared/mixins/filterMixin';
+import { useFilter } from 'shared/composables/useFilter';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
@@ -13,7 +13,6 @@ export default {
   components: {
     FilterInputBox,
   },
-  mixins: [filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -36,6 +35,15 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { setFilterAttributes } = useFilter({
+      filteri18nKey: 'CONTACTS_FILTER',
+      attributeModel: 'contact_attribute',
+    });
+    return {
+      setFilterAttributes,
+    };
+  },
   data() {
     return {
       show: true,
@@ -69,7 +77,10 @@ export default {
     },
   },
   mounted() {
-    this.setFilterAttributes();
+    const { filterGroups, filterTypes } = this.setFilterAttributes();
+    this.filterTypes = [...this.filterTypes, ...filterTypes];
+    this.filterGroups = filterGroups;
+
     if (this.getAppliedContactFilters.length) {
       this.appliedFilters = [...this.getAppliedContactFilters];
     } else if (!this.isSegmentsView) {
@@ -297,7 +308,11 @@ export default {
           :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}`]"
+          :error-message="
+            validationErrors[`filter_${i}`]
+              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
+              : ''
+          "
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/routes.js b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
index a07ca6bf349b5..d28718c9e52fe 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
@@ -8,7 +8,7 @@ export const routes = [
     path: frontendURL('accounts/:accountId/contacts'),
     name: 'contacts_dashboard',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'contact_manage'],
     },
     component: ContactsView,
   },
@@ -16,7 +16,7 @@ export const routes = [
     path: frontendURL('accounts/:accountId/contacts/custom_view/:id'),
     name: 'contacts_segments_dashboard',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'contact_manage'],
     },
     component: ContactsView,
     props: route => {
@@ -27,7 +27,7 @@ export const routes = [
     path: frontendURL('accounts/:accountId/labels/:label/contacts'),
     name: 'contacts_labels_dashboard',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'contact_manage'],
     },
     component: ContactsView,
     props: route => {
@@ -38,7 +38,7 @@ export const routes = [
     path: frontendURL('accounts/:accountId/contacts/:contactId'),
     name: 'contact_profile_dashboard',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'contact_manage'],
     },
     component: ContactManageView,
     props: route => {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index d718d35988ca8..52a3c373a3a95 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -2,10 +2,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useAgentsList } from 'dashboard/composables/useAgentsList';
 import ContactDetailsItem from './ContactDetailsItem.vue';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import ConversationLabels from './labels/LabelBox.vue';
-import agentMixin from 'dashboard/mixins/agentMixin';
 import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
@@ -15,19 +15,17 @@ export default {
     MultiselectDropdown,
     ConversationLabels,
   },
-  mixins: [agentMixin],
   props: {
     conversationId: {
       type: [Number, String],
       required: true,
     },
-    // inboxId prop is used in /mixins/agentMixin,
-    // remove this props when refactoring to composable if not needed
-    // eslint-disable-next-line vue/no-unused-properties
-    inboxId: {
-      type: Number,
-      default: undefined,
-    },
+  },
+  setup() {
+    const { agentsList } = useAgentsList();
+    return {
+      agentsList,
+    };
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index f59f69b87fe52..265baa4859417 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -2,7 +2,8 @@
 import Spinner from 'shared/components/Spinner.vue';
 import { useAlert } from 'dashboard/composables';
 import { mapGetters } from 'vuex';
-import agentMixin from 'dashboard/mixins/agentMixin';
+import { useAgentsList } from 'dashboard/composables/useAgentsList';
+
 import ThumbnailGroup from 'dashboard/components/widgets/ThumbnailGroup.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
 
@@ -12,19 +13,17 @@ export default {
     ThumbnailGroup,
     MultiselectDropdownItems,
   },
-  mixins: [agentMixin],
   props: {
     conversationId: {
       type: [Number, String],
       required: true,
     },
-    // inboxId prop is used in /mixins/agentMixin,
-    // remove this props when refactoring to composable if not needed
-    // eslint-disable-next-line vue/no-unused-properties
-    inboxId: {
-      type: Number,
-      default: undefined,
-    },
+  },
+  setup() {
+    const { agentsList } = useAgentsList(false);
+    return {
+      agentsList,
+    };
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index 48b7ec89fe798..cb5cfcb5bf5da 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -15,6 +15,14 @@ export default {
     PopOverSearch,
     CmdBarConversationSnooze,
   },
+  beforeRouteLeave(to, from, next) {
+    // Clear selected state if navigating away from a conversation to a route without a conversationId to prevent stale data issues
+    // and resolves timing issues during navigation with conversation view and other screens
+    if (this.conversationId) {
+      this.$store.dispatch('clearSelectedState');
+    }
+    next(); // Continue with navigation
+  },
   props: {
     inboxId: {
       type: [String, Number],
@@ -87,6 +95,17 @@ export default {
       this.fetchConversationIfUnavailable();
     },
   },
+
+  created() {
+    // Clear selected state early if no conversation is selected
+    // This prevents child components from accessing stale data
+    // and resolves timing issues during navigation
+    // with conversation view and other screens
+    if (!this.conversationId) {
+      this.$store.dispatch('clearSelectedState');
+    }
+  },
+
   mounted() {
     this.$store.dispatch('agents/get');
     this.initialize();
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
index d86ca271b4443..019d659acc7f6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
@@ -2,13 +2,21 @@
 import { frontendURL } from '../../../helper/URLHelper';
 const ConversationView = () => import('./ConversationView.vue');
 
+const CONVERSATION_PERMISSIONS = [
+  'administrator',
+  'agent',
+  'conversation_manage',
+  'conversation_unassigned_manage',
+  'conversation_participating_manage',
+];
+
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/dashboard'),
       name: 'home',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: () => {
@@ -19,7 +27,7 @@ export default {
       path: frontendURL('accounts/:accountId/conversations/:conversation_id'),
       name: 'inbox_conversation',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => {
@@ -30,7 +38,7 @@ export default {
       path: frontendURL('accounts/:accountId/inbox/:inbox_id'),
       name: 'inbox_dashboard',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => {
@@ -43,7 +51,7 @@ export default {
       ),
       name: 'conversation_through_inbox',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => {
@@ -57,7 +65,7 @@ export default {
       path: frontendURL('accounts/:accountId/label/:label'),
       name: 'label_conversations',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => ({ label: route.params.label }),
@@ -68,7 +76,7 @@ export default {
       ),
       name: 'conversations_through_label',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => ({
@@ -80,7 +88,7 @@ export default {
       path: frontendURL('accounts/:accountId/team/:teamId'),
       name: 'team_conversations',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => ({ teamId: route.params.teamId }),
@@ -91,7 +99,7 @@ export default {
       ),
       name: 'conversations_through_team',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => ({
@@ -103,7 +111,7 @@ export default {
       path: frontendURL('accounts/:accountId/custom_view/:id'),
       name: 'folder_conversations',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => ({ foldersId: route.params.id }),
@@ -114,7 +122,7 @@ export default {
       ),
       name: 'conversations_through_folders',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => ({
@@ -126,7 +134,7 @@ export default {
       path: frontendURL('accounts/:accountId/mentions/conversations'),
       name: 'conversation_mentions',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: () => ({ conversationType: 'mention' }),
@@ -137,7 +145,7 @@ export default {
       ),
       name: 'conversation_through_mentions',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => ({
@@ -149,7 +157,7 @@ export default {
       path: frontendURL('accounts/:accountId/unattended/conversations'),
       name: 'conversation_unattended',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: () => ({ conversationType: 'unattended' }),
@@ -160,7 +168,7 @@ export default {
       ),
       name: 'conversation_through_unattended',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => ({
@@ -172,7 +180,7 @@ export default {
       path: frontendURL('accounts/:accountId/participating/conversations'),
       name: 'conversation_participating',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: () => ({ conversationType: 'participating' }),
@@ -183,7 +191,7 @@ export default {
       ),
       name: 'conversation_through_participating',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: CONVERSATION_PERMISSIONS,
       },
       component: ConversationView,
       props: route => ({
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index 942ba115cc4a6..a5b2a746826c5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -25,7 +25,6 @@ export default {
       removeLabelFromConversation,
     } = useConversationLabels();
 
-    const conversationLabelBoxRef = ref(null);
     const showSearchDropdownLabel = ref(false);
 
     const toggleLabels = () => {
@@ -52,7 +51,7 @@ export default {
         allowOnFocusedInput: true,
       },
     };
-    useKeyboardEvents(keyboardEvents, conversationLabelBoxRef);
+    useKeyboardEvents(keyboardEvents);
     return {
       isAdmin,
       savedLabels,
@@ -60,7 +59,6 @@ export default {
       accountLabels,
       addLabelToConversation,
       removeLabelFromConversation,
-      conversationLabelBoxRef,
       showSearchDropdownLabel,
       closeDropdownLabel,
       toggleLabels,
@@ -81,7 +79,7 @@ export default {
 </script>
 
 <template>
-  <div ref="conversationLabelBoxRef" class="sidebar-labels-wrap">
+  <div class="sidebar-labels-wrap">
     <div
       v-if="!conversationUiFlags.isFetching"
       class="contact-conversation--list"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index b7d5e17dd8441..03d41a77851df 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -1,6 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SwitchLayout from './SwitchLayout.vue';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 export default {
@@ -14,7 +13,6 @@ export default {
       },
     },
   },
-  mixins: [messageFormatterMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index 0f30f1efc63ac..4ca9f7e4bea41 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -38,7 +38,7 @@ export default {
       path: frontendURL('accounts/:accountId/suspended'),
       name: 'account_suspended',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: ['administrator', 'agent', 'custom_role'],
       },
       component: Suspended,
     },
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 da139ddb51fc2..e237a4a48600d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -11,7 +11,6 @@ defineProps({
 
 const emit = defineEmits(['search', 'close']);
 
-const articleSearchHeaderRef = ref(null);
 const searchInputRef = ref(null);
 const searchQuery = ref('');
 
@@ -41,11 +40,11 @@ const keyboardEvents = {
     allowOnFocusedInput: true,
   },
 };
-useKeyboardEvents(keyboardEvents, articleSearchHeaderRef);
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div ref="articleSearchHeaderRef" class="flex flex-col py-1">
+  <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 }}
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
index d17a24ab90749..95f678abc30be 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -33,7 +33,7 @@ const portalRoutes = [
     path: getPortalRoute(''),
     name: 'default_portal_articles',
     meta: {
-      permissions: ['administrator'],
+      permissions: ['administrator', 'knowledge_base_manage'],
     },
     component: DefaultPortalArticles,
   },
@@ -41,7 +41,7 @@ const portalRoutes = [
     path: getPortalRoute('all'),
     name: 'list_all_portals',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: ListAllPortals,
   },
@@ -54,7 +54,7 @@ const portalRoutes = [
         name: 'new_portal_information',
         component: PortalDetails,
         meta: {
-          permissions: ['administrator'],
+          permissions: ['administrator', 'knowledge_base_manage'],
         },
       },
       {
@@ -62,7 +62,7 @@ const portalRoutes = [
         name: 'portal_customization',
         component: PortalCustomization,
         meta: {
-          permissions: ['administrator'],
+          permissions: ['administrator', 'knowledge_base_manage'],
         },
       },
       {
@@ -70,7 +70,7 @@ const portalRoutes = [
         name: 'portal_finish',
         component: PortalSettingsFinish,
         meta: {
-          permissions: ['administrator'],
+          permissions: ['administrator', 'knowledge_base_manage'],
         },
       },
     ],
@@ -79,14 +79,14 @@ const portalRoutes = [
     path: getPortalRoute(':portalSlug'),
     name: 'portalSlug',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: ShowPortal,
   },
   {
     path: getPortalRoute(':portalSlug/edit'),
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: EditPortal,
     children: [
@@ -95,7 +95,7 @@ const portalRoutes = [
         name: 'edit_portal_information',
         component: EditPortalBasic,
         meta: {
-          permissions: ['administrator'],
+          permissions: ['administrator', 'knowledge_base_manage'],
         },
       },
       {
@@ -103,7 +103,7 @@ const portalRoutes = [
         name: 'edit_portal_customization',
         component: EditPortalCustomization,
         meta: {
-          permissions: ['administrator'],
+          permissions: ['administrator', 'knowledge_base_manage'],
         },
       },
       {
@@ -111,14 +111,14 @@ const portalRoutes = [
         name: 'edit_portal_locales',
         component: EditPortalLocales,
         meta: {
-          permissions: ['administrator'],
+          permissions: ['administrator', 'knowledge_base_manage'],
         },
       },
       {
         path: 'categories',
         name: 'list_all_locale_categories',
         meta: {
-          permissions: ['administrator', 'agent'],
+          permissions: ['administrator', 'agent', 'knowledge_base_manage'],
         },
         component: ListAllCategories,
       },
@@ -131,7 +131,7 @@ const articleRoutes = [
     path: getPortalRoute(':portalSlug/:locale/articles'),
     name: 'list_all_locale_articles',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: ListAllArticles,
   },
@@ -139,7 +139,7 @@ const articleRoutes = [
     path: getPortalRoute(':portalSlug/:locale/articles/new'),
     name: 'new_article',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: NewArticle,
   },
@@ -147,7 +147,7 @@ const articleRoutes = [
     path: getPortalRoute(':portalSlug/:locale/articles/mine'),
     name: 'list_mine_articles',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: ListAllArticles,
   },
@@ -155,7 +155,7 @@ const articleRoutes = [
     path: getPortalRoute(':portalSlug/:locale/articles/archived'),
     name: 'list_archived_articles',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: ListAllArticles,
   },
@@ -164,7 +164,7 @@ const articleRoutes = [
     path: getPortalRoute(':portalSlug/:locale/articles/draft'),
     name: 'list_draft_articles',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: ListAllArticles,
   },
@@ -173,7 +173,7 @@ const articleRoutes = [
     path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
     name: 'edit_article',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: EditArticle,
   },
@@ -184,7 +184,7 @@ const categoryRoutes = [
     path: getPortalRoute(':portalSlug/:locale/categories'),
     name: 'all_locale_categories',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: ListAllCategories,
   },
@@ -192,7 +192,7 @@ const categoryRoutes = [
     path: getPortalRoute(':portalSlug/:locale/categories/new'),
     name: 'new_category_in_locale',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: NewCategory,
   },
@@ -200,7 +200,7 @@ const categoryRoutes = [
     path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
     name: 'show_category',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: ListAllArticles,
   },
@@ -210,7 +210,7 @@ const categoryRoutes = [
     ),
     name: 'show_category_articles',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: ListCategoryArticles,
   },
@@ -218,7 +218,7 @@ const categoryRoutes = [
     path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
     name: 'edit_category',
     meta: {
-      permissions: ['administrator', 'agent'],
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
     component: EditCategory,
   },
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
index 271c4460aba1e..1b2895808f20a 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { getUnixTime } from 'date-fns';
-import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/helper/commandbar/events';
 import wootConstants from 'dashboard/constants/globals';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/routes.js b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
index 729fee76d07a2..b55c33d736d84 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -2,6 +2,10 @@ import { frontendURL } from 'dashboard/helper/URLHelper';
 const InboxListView = () => import('./InboxList.vue');
 const InboxDetailView = () => import('./InboxView.vue');
 const InboxEmptyStateView = () => import('./InboxEmptyState.vue');
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
 
 export const routes = [
   {
@@ -13,7 +17,7 @@ export const routes = [
         name: 'inbox_view',
         component: InboxEmptyStateView,
         meta: {
-          permissions: ['administrator', 'agent'],
+          permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
         },
       },
       {
@@ -21,7 +25,7 @@ export const routes = [
         name: 'inbox_view_conversation',
         component: InboxDetailView,
         meta: {
-          permissions: ['administrator', 'agent'],
+          permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
         },
       },
     ],
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/routes.js b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
index e3d1253339af1..f3d32ba1e42d9 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -19,7 +19,7 @@ export const routes = [
         name: 'notifications_index',
         component: NotificationsView,
         meta: {
-          permissions: ['administrator', 'agent'],
+          permissions: ['administrator', 'agent', 'custom_role'],
         },
       },
     ],
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
index 916f821add6eb..0e6a42fe825e8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
@@ -22,17 +22,21 @@ defineProps({
 <template>
   <div class="flex flex-col w-full h-full gap-10 font-inter">
     <slot name="header" />
-    <slot v-if="isLoading" name="loading">
-      <woot-loading-state :message="loadingMessage" />
-    </slot>
-    <p
-      v-else-if="noRecordsFound"
-      class="flex-1 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
-    >
-      {{ noRecordsMessage }}
-    </p>
-    <slot v-else name="body" />
-    <!-- Do not delete the slot below. It is required to render anything that is not defined in the above slots. -->
-    <slot />
+    <!-- Added to render any templates that should be rendered before body -->
+    <div>
+      <slot name="preBody" />
+      <slot v-if="isLoading" name="loading">
+        <woot-loading-state :message="loadingMessage" />
+      </slot>
+      <p
+        v-else-if="noRecordsFound"
+        class="flex-1 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
+      >
+        {{ noRecordsMessage }}
+      </p>
+      <slot v-else name="body" />
+      <!-- Do not delete the slot below. It is required to render anything that is not defined in the above slots. -->
+      <slot />
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
index 74720e28a7b3b..2822704c9d44b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
@@ -1,156 +1,164 @@
-<script>
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, email } from '@vuelidate/validators';
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
 import { useAlert } from 'dashboard/composables';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
+import WootSubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
 
-export default {
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      agentName: '',
-      agentEmail: '',
-      agentType: 'agent',
-      vertical: 'bottom',
-      horizontal: 'center',
-      roles: [
-        {
-          name: 'administrator',
-          label: this.$t('AGENT_MGMT.AGENT_TYPES.ADMINISTRATOR'),
-        },
-        {
-          name: 'agent',
-          label: this.$t('AGENT_MGMT.AGENT_TYPES.AGENT'),
-        },
-      ],
-      show: true,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'agents/getUIFlags',
-    }),
-  },
-  validations: {
-    agentName: {
-      required,
-      minLength: minLength(1),
-    },
-    agentEmail: {
-      required,
-      email,
-    },
-    agentType: {
-      required,
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const { t } = useI18n();
+
+const agentName = ref('');
+const agentEmail = ref('');
+const selectedRoleId = ref('agent');
+
+const rules = {
+  agentName: { required },
+  agentEmail: { required, email },
+  selectedRoleId: { required },
+};
+
+const v$ = useVuelidate(rules, {
+  agentName,
+  agentEmail,
+  selectedRoleId,
+});
+
+const uiFlags = useMapGetter('agents/getUIFlags');
+const getCustomRoles = useMapGetter('customRole/getCustomRoles');
+
+const roles = computed(() => {
+  const defaultRoles = [
+    {
+      id: 'administrator',
+      name: 'administrator',
+      label: t('AGENT_MGMT.AGENT_TYPES.ADMINISTRATOR'),
     },
-  },
-
-  methods: {
-    async addAgent() {
-      try {
-        await this.$store.dispatch('agents/create', {
-          name: this.agentName,
-          email: this.agentEmail,
-          role: this.agentType,
-        });
-        useAlert(this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
-        this.onClose();
-      } catch (error) {
-        const {
-          response: {
-            data: {
-              error: errorResponse = '',
-              attributes: attributes = [],
-              message: attrError = '',
-            } = {},
-          } = {},
-        } = error;
-
-        let errorMessage = '';
-        if (error?.response?.status === 422 && !attributes.includes('base')) {
-          errorMessage = this.$t('AGENT_MGMT.ADD.API.EXIST_MESSAGE');
-        } else {
-          errorMessage = this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE');
-        }
-        useAlert(errorResponse || attrError || errorMessage);
-      }
+    {
+      id: 'agent',
+      name: 'agent',
+      label: t('AGENT_MGMT.AGENT_TYPES.AGENT'),
     },
-  },
+  ];
+
+  const customRoles = getCustomRoles.value.map(role => ({
+    id: role.id,
+    name: `custom_${role.id}`,
+    label: role.name,
+  }));
+
+  return [...defaultRoles, ...customRoles];
+});
+
+const selectedRole = computed(() =>
+  roles.value.find(
+    role =>
+      role.id === selectedRoleId.value || role.name === selectedRoleId.value
+  )
+);
+
+const addAgent = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  try {
+    const payload = {
+      name: agentName.value,
+      email: agentEmail.value,
+    };
+
+    if (selectedRole.value.name.startsWith('custom_')) {
+      payload.custom_role_id = selectedRole.value.id;
+    } else {
+      payload.role = selectedRole.value.name;
+    }
+
+    await store.dispatch('agents/create', payload);
+    useAlert(t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
+    emit('close');
+  } catch (error) {
+    const {
+      response: {
+        data: {
+          error: errorResponse = '',
+          attributes: attributes = [],
+          message: attrError = '',
+        } = {},
+      } = {},
+    } = error;
+
+    let errorMessage = '';
+    if (error?.response?.status === 422 && !attributes.includes('base')) {
+      errorMessage = t('AGENT_MGMT.ADD.API.EXIST_MESSAGE');
+    } else {
+      errorMessage = t('AGENT_MGMT.ADD.API.ERROR_MESSAGE');
+    }
+    useAlert(errorResponse || attrError || errorMessage);
+  }
 };
 </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="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$.selectedRoleId.$error }">
+          {{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
+          <select v-model="selectedRoleId" @change="v$.selectedRoleId.$touch">
+            <option v-for="role in roles" :key="role.id" :value="role.id">
+              {{ role.label }}
+            </option>
+          </select>
+          <span v-if="v$.selectedRoleId.$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="email"
+            :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">
-          <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>
+          <WootSubmitButton
+            :disabled="v$.$invalid || uiFlags.isCreating"
+            :button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
+            :loading="uiFlags.isCreating"
+          />
+          <button class="button clear" @click.prevent="emit('close')">
+            {{ $t('AGENT_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+          </button>
         </div>
-      </form>
-    </div>
-  </woot-modal>
+      </div>
+    </form>
+  </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
index 4385723b69d7e..daca5511c3d51 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -1,203 +1,220 @@
-<script>
+<script setup>
+import { ref, computed } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
-import { mapGetters } from 'vuex';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
 import { useAlert } from 'dashboard/composables';
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
-import Modal from '../../../../components/Modal.vue';
+import WootSubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
 import Auth from '../../../../api/auth';
 import wootConstants from 'dashboard/constants/globals';
 
-const { AVAILABILITY_STATUS_KEYS } = wootConstants;
-
-export default {
-  components: {
-    WootSubmitButton,
-    Modal,
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
   },
-  props: {
-    id: {
-      type: Number,
-      required: true,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    email: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: '',
-    },
-    availability: {
-      type: String,
-      default: '',
-    },
-    onClose: {
-      type: Function,
-      required: true,
-    },
+  name: {
+    type: String,
+    required: true,
   },
-  setup() {
-    return { v$: useVuelidate() };
+  email: {
+    type: String,
+    default: '',
   },
-  data() {
-    return {
-      roles: [
-        {
-          name: 'administrator',
-          label: this.$t('AGENT_MGMT.AGENT_TYPES.ADMINISTRATOR'),
-        },
-        {
-          name: 'agent',
-          label: this.$t('AGENT_MGMT.AGENT_TYPES.AGENT'),
-        },
-      ],
-      agentName: this.name,
-      agentAvailability: this.availability,
-      agentType: this.type,
-      agentCredentials: {
-        email: this.email,
-      },
-      show: true,
-    };
+  type: {
+    type: String,
+    default: '',
   },
-  validations: {
-    agentName: {
-      required,
-      minLength: minLength(1),
-    },
-    agentType: {
-      required,
-    },
-    agentAvailability: {
-      required,
-    },
+  availability: {
+    type: String,
+    default: '',
   },
-  computed: {
-    pageTitle() {
-      return `${this.$t('AGENT_MGMT.EDIT.TITLE')} - ${this.name}`;
-    },
-    ...mapGetters({
-      uiFlags: 'agents/getUIFlags',
-    }),
-    availabilityStatuses() {
-      return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST').map(
-        (statusLabel, index) => ({
-          label: statusLabel,
-          value: AVAILABILITY_STATUS_KEYS[index],
-          disabled:
-            this.currentUserAvailability === AVAILABILITY_STATUS_KEYS[index],
-        })
-      );
-    },
+  customRoleId: {
+    type: Number,
+    default: null,
   },
-  methods: {
-    async editAgent() {
-      try {
-        await this.$store.dispatch('agents/update', {
-          id: this.id,
-          name: this.agentName,
-          role: this.agentType,
-          availability: this.agentAvailability,
-        });
-        useAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-        this.onClose();
-      } catch (error) {
-        useAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
-      }
+});
+
+const emit = defineEmits(['close']);
+
+const { AVAILABILITY_STATUS_KEYS } = wootConstants;
+
+const store = useStore();
+const { t } = useI18n();
+
+const agentName = ref(props.name);
+const agentAvailability = ref(props.availability);
+const selectedRoleId = ref(props.customRoleId || props.type);
+const agentCredentials = ref({ email: props.email });
+
+const rules = {
+  agentName: { required, minLength: minLength(1) },
+  selectedRoleId: { required },
+  agentAvailability: { required },
+};
+
+const v$ = useVuelidate(rules, {
+  agentName,
+  selectedRoleId,
+  agentAvailability,
+});
+
+const pageTitle = computed(
+  () => `${t('AGENT_MGMT.EDIT.TITLE')} - ${props.name}`
+);
+
+const uiFlags = useMapGetter('agents/getUIFlags');
+const getCustomRoles = useMapGetter('customRole/getCustomRoles');
+
+const roles = computed(() => {
+  const defaultRoles = [
+    {
+      id: 'administrator',
+      name: 'administrator',
+      label: t('AGENT_MGMT.AGENT_TYPES.ADMINISTRATOR'),
     },
-    async resetPassword() {
-      try {
-        await Auth.resetPassword(this.agentCredentials);
-        useAlert(
-          this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE')
-        );
-      } catch (error) {
-        useAlert(this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'));
-      }
+    {
+      id: 'agent',
+      name: 'agent',
+      label: t('AGENT_MGMT.AGENT_TYPES.AGENT'),
     },
-  },
+  ];
+
+  const customRoles = getCustomRoles.value.map(role => ({
+    id: role.id,
+    name: `custom_${role.id}`,
+    label: role.name,
+  }));
+
+  return [...defaultRoles, ...customRoles];
+});
+
+const selectedRole = computed(() =>
+  roles.value.find(
+    role =>
+      role.id === selectedRoleId.value || role.name === selectedRoleId.value
+  )
+);
+
+const availabilityStatuses = computed(() =>
+  t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST').map(
+    (statusLabel, index) => ({
+      label: statusLabel,
+      value: AVAILABILITY_STATUS_KEYS[index],
+      disabled: props.availability === AVAILABILITY_STATUS_KEYS[index],
+    })
+  )
+);
+
+const editAgent = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  try {
+    const payload = {
+      id: props.id,
+      name: agentName.value,
+      availability: agentAvailability.value,
+    };
+
+    if (selectedRole.value.name.startsWith('custom_')) {
+      payload.custom_role_id = selectedRole.value.id;
+    } else {
+      payload.role = selectedRole.value.name;
+      payload.custom_role_id = null;
+    }
+
+    await store.dispatch('agents/update', payload);
+    useAlert(t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+    emit('close');
+  } catch (error) {
+    useAlert(t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
+  }
+};
+
+const resetPassword = async () => {
+  try {
+    await Auth.resetPassword(agentCredentials.value);
+    useAlert(t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'));
+  }
 };
 </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="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$.selectedRoleId.$error }">
+          {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
+          <select v-model="selectedRoleId" @change="v$.selectedRoleId.$touch">
+            <option v-for="role in roles" :key="role.id" :value="role.id">
+              {{ role.label }}
+            </option>
+          </select>
+          <span v-if="v$.selectedRoleId.$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%]">
-            <WootSubmitButton
-              :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"
+      <div class="w-full">
+        <label :class="{ error: v$.agentAvailability.$error }">
+          {{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
+          <select
+            v-model="agentAvailability"
+            @change="v$.agentAvailability.$touch"
+          >
+            <option
+              v-for="status in availabilityStatuses"
+              :key="status.value"
+              :value="status.value"
             >
-              {{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
-            </woot-button>
-          </div>
+              {{ status.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%]">
+          <WootSubmitButton
+            :disabled="v$.$invalid || uiFlags.isUpdating"
+            :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
+            :loading="uiFlags.isUpdating"
+          />
+          <button class="button clear" @click.prevent="emit('close')">
+            {{ $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>
-      </form>
-    </div>
-  </Modal>
+      </div>
+    </form>
+  </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index cb0402e121767..48e738f111969 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -3,7 +3,11 @@ import { useAlert } from 'dashboard/composables';
 import { computed, onMounted, ref } from 'vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { useI18n } from 'dashboard/composables/useI18n';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import {
+  useStoreGetters,
+  useStore,
+  useMapGetter,
+} from 'dashboard/composables/store';
 
 import AddAgent from './AddAgent.vue';
 import EditAgent from './EditAgent.vue';
@@ -34,11 +38,32 @@ const deleteMessage = computed(() => {
 const agentList = computed(() => getters['agents/getAgents'].value);
 const uiFlags = computed(() => getters['agents/getUIFlags'].value);
 const currentUserId = computed(() => getters.getCurrentUserID.value);
+const customRoles = useMapGetter('customRole/getCustomRoles');
 
 onMounted(() => {
   store.dispatch('agents/get');
+  store.dispatch('customRole/getCustomRole');
 });
 
+const findCustomRole = agent =>
+  customRoles.value.find(role => role.id === agent.custom_role_id);
+
+const getAgentRoleName = agent => {
+  if (!agent.custom_role_id) {
+    return t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`);
+  }
+  const customRole = findCustomRole(agent);
+  return customRole ? customRole.name : '';
+};
+
+const getAgentRolePermissions = agent => {
+  if (!agent.custom_role_id) {
+    return [];
+  }
+  const customRole = findCustomRole(agent);
+  return customRole?.permissions || [];
+};
+
 const verifiedAdministrators = computed(() => {
   return agentList.value.filter(
     agent => agent.role === 'administrator' && agent.confirmed
@@ -63,6 +88,7 @@ const showDeleteAction = agent => {
   }
   return true;
 };
+
 const showAlertMessage = message => {
   loading.value[currentAgent.value.id] = false;
   currentAgent.value = {};
@@ -124,7 +150,7 @@ const confirmDeletion = () => {
       >
         <template #actions>
           <woot-button
-            class="button nice rounded-md"
+            class="rounded-md button nice"
             icon="add-circle"
             @click="openAddPopup"
           >
@@ -140,7 +166,7 @@ const confirmDeletion = () => {
         >
           <tr v-for="(agent, index) in agentList" :key="agent.email">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <div class="flex items-center flex-row gap-4">
+              <div class="flex flex-row items-center gap-4">
                 <Thumbnail
                   :src="agent.thumbnail"
                   :username="agent.name"
@@ -156,9 +182,39 @@ const confirmDeletion = () => {
               </div>
             </td>
 
-            <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <span class="block font-medium capitalize">
-                {{ $t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`) }}
+            <td class="relative py-4 ltr:pr-4 rtl:pl-4">
+              <span
+                class="block font-medium w-fit"
+                :class="{
+                  'hover:text-gray-900 group cursor-pointer':
+                    agent.custom_role_id,
+                }"
+              >
+                {{ getAgentRoleName(agent) }}
+
+                <div
+                  class="absolute left-0 z-10 hidden max-w-[300px] w-auto bg-white rounded-xl border border-slate-50 shadow-lg top-14 md:top-12 dark:bg-slate-800 dark:border-slate-700"
+                  :class="{ 'group-hover:block': agent.custom_role_id }"
+                >
+                  <div class="flex flex-col gap-1 p-4">
+                    <span class="font-semibold">
+                      {{ $t('AGENT_MGMT.LIST.AVAILABLE_CUSTOM_ROLE') }}
+                    </span>
+                    <ul class="pl-4 mb-0 list-disc">
+                      <li
+                        v-for="permission in getAgentRolePermissions(agent)"
+                        :key="permission"
+                        class="font-normal"
+                      >
+                        {{
+                          $t(
+                            `CUSTOM_ROLE.PERMISSIONS.${permission.toUpperCase()}`
+                          )
+                        }}
+                      </li>
+                    </ul>
+                  </div>
+                </div>
               </span>
             </td>
             <td class="py-4 ltr:pr-4 rtl:pl-4">
@@ -200,7 +256,7 @@ const confirmDeletion = () => {
     </template>
 
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <AddAgent :on-close="hideAddPopup" />
+      <AddAgent @close="hideAddPopup" />
     </woot-modal>
 
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
@@ -211,7 +267,8 @@ const confirmDeletion = () => {
         :type="currentAgent.role"
         :email="currentAgent.email"
         :availability="currentAgent.availability_status"
-        :on-close="hideEditPopup"
+        :custom-role-id="currentAgent.custom_role_id"
+        @close="hideEditPopup"
       />
     </woot-modal>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index 1ff257b7e20b9..33f9ab7a549c1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -12,6 +12,12 @@ export default {
       type: Function,
       default: () => {},
     },
+    // Passes 0 or 1 based on the selected AttributeModel tab selected in the UI
+    // Needs a better data type, todo: refactor this component later
+    selectedAttributeModelTab: {
+      type: Number,
+      default: 0,
+    },
   },
   setup() {
     return { v$: useVuelidate() };
@@ -20,7 +26,10 @@ export default {
     return {
       displayName: '',
       description: '',
-      attributeModel: 0,
+      // Using the prop as default. There is no side effect here as the component
+      // is destroyed completely when the modal is closed. The prop doesn't change
+      // dynamically when the modal is active.
+      attributeModel: this.selectedAttributeModelTab || 0,
       attributeType: 0,
       attributeKey: '',
       regexPattern: null,
@@ -280,13 +289,16 @@ export default {
   padding: 0 var(--space-small) var(--space-small) 0;
   font-family: monospace;
 }
+
 .multiselect--wrap {
   margin-bottom: var(--space-normal);
+
   .error-message {
     color: var(--r-400);
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-normal);
   }
+
   .invalid {
     ::v-deep {
       .multiselect__tags {
@@ -295,13 +307,16 @@ export default {
     }
   }
 }
+
 ::v-deep {
   .multiselect {
     margin-bottom: 0;
   }
+
   .multiselect__content-wrapper {
     display: none;
   }
+
   .multiselect--active .multiselect__tags {
     border-radius: var(--border-radius-normal);
   }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 5c234ec03e635..9e55c619d2e41 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -1,195 +1,141 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
 import { useAlert } from 'dashboard/composables';
 import EditAttribute from './EditAttribute.vue';
-
-export default {
-  components: {
-    EditAttribute,
-  },
-  data() {
-    return {
-      selectedTabIndex: 0,
-      showEditPopup: false,
-      showDeletePopup: false,
-      selectedAttribute: {},
-    };
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { computed, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+const props = defineProps({
+  attributeModel: {
+    type: String,
+    default: 'conversation_attribute',
   },
-  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 = {};
-    },
-  },
+const { t } = useI18n();
+
+const showEditPopup = ref(false);
+const showDeletePopup = ref(false);
+const selectedAttribute = ref({});
+
+const getters = useStoreGetters();
+const store = useStore();
+
+const attributes = computed(() =>
+  getters['attributes/getAttributesByModel'].value(props.attributeModel)
+);
+const uiFlags = computed(() => getters['attributes/getUIFlags'].value);
+
+const attributeDisplayName = computed(
+  () => selectedAttribute.value.attribute_display_name
+);
+const deleteConfirmText = computed(
+  () =>
+    `${t('ATTRIBUTES_MGMT.DELETE.CONFIRM.YES')} ${attributeDisplayName.value}`
+);
+const deleteRejectText = computed(() => t('ATTRIBUTES_MGMT.DELETE.CONFIRM.NO'));
+const confirmDeleteTitle = computed(() =>
+  t('ATTRIBUTES_MGMT.DELETE.CONFIRM.TITLE', {
+    attributeName: attributeDisplayName.value,
+  })
+);
+const confirmPlaceHolderText = computed(
+  () =>
+    `${t('ATTRIBUTES_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+      attributeName: attributeDisplayName.value,
+    })}`
+);
+
+const deleteAttributes = async ({ id }) => {
+  try {
+    await store.dispatch('attributes/delete', id);
+    useAlert(t('ATTRIBUTES_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t('ATTRIBUTES_MGMT.DELETE.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+const openEditPopup = response => {
+  showEditPopup.value = true;
+  selectedAttribute.value = response;
+};
+const hideEditPopup = () => {
+  showEditPopup.value = false;
+};
+
+const closeDelete = () => {
+  showDeletePopup.value = false;
+  selectedAttribute.value = {};
+};
+const confirmDeletion = () => {
+  deleteAttributes(selectedAttribute.value);
+  closeDelete();
+};
+const openDelete = value => {
+  showDeletePopup.value = true;
+  selectedAttribute.value = value;
 };
 </script>
 
 <template>
-  <div class="flex flex-row gap-4 p-8">
-    <div class="w-full lg:w-3/5">
-      <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="w-full">
-        <p
-          v-if="!uiFlags.isFetching && !attributes.length"
-          class="flex items-center justify-center mt-12"
+  <div class="flex flex-col">
+    <table class="min-w-full overflow-x-auto">
+      <thead>
+        <th
+          v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
+          :key="tableHeader"
+          class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-slate-700 dark:text-slate-300"
         >
-          {{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('ATTRIBUTES_MGMT.LOADING')"
-        />
-        <table
-          v-if="!uiFlags.isFetching && attributes.length"
-          class="w-full mt-2 table-fixed woot-table"
-        >
-          <thead>
-            <th
-              v-for="tableHeader in $t('ATTRIBUTES_MGMT.LIST.TABLE_HEADER')"
-              :key="tableHeader"
-              class="pl-0 max-w-[6.25rem] min-w-[5rem]"
-            >
-              {{ tableHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <tr v-for="attribute in attributes" :key="attribute.attribute_key">
-              <td
-                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_display_name }}
-              </td>
-              <td
-                class="pl-0 max-w-[10rem] min-w-[6.25rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_description }}
-              </td>
-              <td
-                class="pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_display_type }}
-              </td>
-              <td
-                class="attribute-key pl-0 max-w-[6.25rem] min-w-[5rem] overflow-hidden whitespace-nowrap text-ellipsis"
-              >
-                {{ attribute.attribute_key }}
-              </td>
-              <td class="button-wrapper">
-                <woot-button
-                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  class-names="grey-btn"
-                  icon="edit"
-                  @click="openEditPopup(attribute)"
-                />
-                <woot-button
-                  v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
-                  @click="openDelete(attribute)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <div class="hidden w-1/3 lg:block">
-      <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
-    </div>
+          {{ tableHeader }}
+        </th>
+      </thead>
+      <tbody
+        class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
+      >
+        <tr v-for="attribute in attributes" :key="attribute.attribute_key">
+          <td
+            class="py-4 ltr:pr-4 rtl:pl-4 overflow-hidden whitespace-nowrap text-ellipsis"
+          >
+            {{ attribute.attribute_display_name }}
+          </td>
+          <td class="py-4 ltr:pr-4 rtl:pl-4">
+            {{ attribute.attribute_description }}
+          </td>
+          <td
+            class="py-4 ltr:pr-4 rtl:pl-4 overflow-hidden whitespace-nowrap text-ellipsis"
+          >
+            {{ attribute.attribute_display_type }}
+          </td>
+          <td
+            class="py-4 ltr:pr-4 rtl:pl-4 attribute-key overflow-hidden whitespace-nowrap text-ellipsis"
+          >
+            {{ attribute.attribute_key }}
+          </td>
+          <td class="py-4 min-w-xs">
+            <div class="flex gap-1">
+              <woot-button
+                v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
+                variant="smooth"
+                size="tiny"
+                color-scheme="secondary"
+                class-names="grey-btn"
+                icon="edit"
+                @click="openEditPopup(attribute)"
+              />
+              <woot-button
+                v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
+                variant="smooth"
+                color-scheme="alert"
+                size="tiny"
+                icon="dismiss-circle"
+                class-names="grey-btn"
+                @click="openDelete(attribute)"
+              />
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <EditAttribute
         :selected-attribute="selectedAttribute"
@@ -216,17 +162,4 @@ export default {
 .attribute-key {
   font-family: monospace;
 }
-
-::v-deep {
-  .tabs--container {
-    .tabs {
-      @apply p-0;
-    }
-  }
-
-  .tabs-title a {
-    font-weight: var(--font-weight-medium);
-    padding-top: 0;
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index e7670caefc16d..67f461f016ab0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -1,40 +1,112 @@
-<script>
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import AddAttribute from './AddAttribute.vue';
 import CustomAttribute from './CustomAttribute.vue';
-export default {
-  components: {
-    AddAttribute,
-    CustomAttribute,
-  },
-  data() {
-    return {
-      showAddPopup: false,
-    };
-  },
-  methods: {
-    openAddPopup() {
-      this.showAddPopup = true;
+import SettingsLayout from '../SettingsLayout.vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+
+const { t } = useI18n();
+
+const getters = useStoreGetters();
+const store = useStore();
+
+const showAddPopup = ref(false);
+const selectedTabIndex = ref(0);
+const uiFlags = computed(() => getters['attributes/getUIFlags'].value);
+
+const openAddPopup = () => {
+  showAddPopup.value = true;
+};
+const hideAddPopup = () => {
+  showAddPopup.value = false;
+};
+
+const tabs = computed(() => {
+  return [
+    {
+      key: 0,
+      name: t('ATTRIBUTES_MGMT.TABS.CONVERSATION'),
     },
-    hideAddPopup() {
-      this.showAddPopup = false;
+    {
+      key: 1,
+      name: t('ATTRIBUTES_MGMT.TABS.CONTACT'),
     },
-  },
+  ];
+});
+
+onMounted(() => {
+  store.dispatch('attributes/get');
+});
+
+const attributeModel = computed(() =>
+  selectedTabIndex.value ? 'contact_attribute' : 'conversation_attribute'
+);
+
+const attributes = computed(() =>
+  getters['attributes/getAttributesByModel'].value(attributeModel.value)
+);
+
+const onClickTabChange = index => {
+  selectedTabIndex.value = index;
 };
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup()"
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('ATTRIBUTES_MGMT.LOADING')"
+    :no-records-found="!attributes.length"
+    :no-records-message="$t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('ATTRIBUTES_MGMT.HEADER')"
+        :description="$t('ATTRIBUTES_MGMT.DESCRIPTION')"
+        :link-text="$t('ATTRIBUTES_MGMT.LEARN_MORE')"
+        feature-name="custom_attributes"
+      >
+        <template #actions>
+          <woot-button
+            class="button nice rounded-md"
+            icon="add-circle"
+            @click="openAddPopup"
+          >
+            {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
+          </woot-button>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #preBody>
+      <woot-tabs
+        class="font-medium [&_.tabs]:p-0 mb-4"
+        :index="selectedTabIndex"
+        @change="onClickTabChange"
+      >
+        <woot-tabs-item
+          v-for="tab in tabs"
+          :key="tab.key"
+          :name="tab.name"
+          :show-badge="false"
+        />
+      </woot-tabs>
+    </template>
+    <template #body>
+      <CustomAttribute
+        :key="attributeModel"
+        :attribute-model="attributeModel"
+      />
+    </template>
+    <woot-modal
+      v-if="showAddPopup"
+      :show.sync="showAddPopup"
+      :on-close="hideAddPopup"
     >
-      {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
-    </woot-button>
-    <CustomAttribute />
-    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <AddAttribute :on-close="hideAddPopup" />
+      <AddAttribute
+        :on-close="hideAddPopup"
+        :selected-attribute-model-tab="selectedTabIndex"
+      />
     </woot-modal>
-  </div>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
index 93c4f8eda1843..3453f1afc3f28 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
@@ -1,17 +1,12 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const AttributesHome = () => import('./Index.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/custom-attributes'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'ATTRIBUTES_MGMT.HEADER',
-        icon: 'code',
-        showNewButton: false,
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index 8cb143a7e894e..63c352dbb2fba 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -1,9 +1,17 @@
 <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 { useAutomation } from 'dashboard/composables/useAutomation';
+import { validateAutomation } from 'dashboard/helper/validations';
+import {
+  generateAutomationPayload,
+  getAttributes,
+  getInputType,
+  getOperators,
+  getCustomAttributeType,
+  showActionInput,
+} from 'dashboard/helper/automationHelper';
 import {
   AUTOMATION_RULE_EVENTS,
   AUTOMATION_ACTION_TYPES,
@@ -14,13 +22,38 @@ export default {
     FilterInputBox,
     AutomationActionInput,
   },
-  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
       default: () => {},
     },
   },
+  setup() {
+    const {
+      onEventChange,
+      getConditionDropdownValues,
+      appendNewCondition,
+      appendNewAction,
+      removeFilter,
+      removeAction,
+      resetFilter,
+      resetAction,
+      getActionDropdownValues,
+      manifestCustomAttributes,
+    } = useAutomation();
+    return {
+      onEventChange,
+      getConditionDropdownValues,
+      appendNewCondition,
+      appendNewAction,
+      removeFilter,
+      removeAction,
+      resetFilter,
+      resetAction,
+      getActionDropdownValues,
+      manifestCustomAttributes,
+    };
+  },
   data() {
     return {
       automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -82,12 +115,24 @@ export default {
     this.$store.dispatch('labels/get');
     this.$store.dispatch('campaigns/get');
     this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.manifestCustomAttributes();
+    this.manifestCustomAttributes(this.automationTypes);
   },
   methods: {
+    getAttributes,
+    getInputType,
+    getOperators,
+    getCustomAttributeType,
+    showActionInput,
     isFeatureEnabled(flag) {
       return this.isFeatureEnabledonAccount(this.accountId, flag);
     },
+    emitSaveAutomation() {
+      this.errors = validateAutomation(this.automation);
+      if (Object.keys(this.errors).length === 0) {
+        const automation = generateAutomationPayload(this.automation);
+        this.$emit('saveAutomation', automation, this.mode);
+      }
+    },
   },
 };
 </script>
@@ -121,7 +166,7 @@ export default {
             <select
               v-model="automation.event_name"
               class="m-0"
-              @change="onEventChange()"
+              @change="onEventChange(automation)"
             >
               <option
                 v-for="event in automationRuleEvents"
@@ -154,9 +199,26 @@ export default {
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
-              :filter-attributes="getAttributes(automation.event_name)"
-              :input-type="getInputType(automation.conditions[i].attribute_key)"
-              :operators="getOperators(automation.conditions[i].attribute_key)"
+              :filter-attributes="
+                getAttributes(automationTypes, automation.event_name)
+              "
+              :input-type="
+                getInputType(
+                  allCustomAttributes,
+                  automationTypes,
+                  automation,
+                  automation.conditions[i].attribute_key
+                )
+              "
+              :operators="
+                getOperators(
+                  allCustomAttributes,
+                  automationTypes,
+                  automation,
+                  mode,
+                  automation.conditions[i].attribute_key
+                )
+              "
               :dropdown-values="
                 getConditionDropdownValues(
                   automation.conditions[i].attribute_key
@@ -164,15 +226,26 @@ export default {
               "
               :show-query-operator="i !== automation.conditions.length - 1"
               :custom-attribute-type="
-                getCustomAttributeType(automation.conditions[i].attribute_key)
+                getCustomAttributeType(
+                  automationTypes,
+                  automation,
+                  automation.conditions[i].attribute_key
+                )
               "
               :error-message="
                 errors[`condition_${i}`]
                   ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
                   : ''
               "
-              @resetFilter="resetFilter(i, automation.conditions[i])"
-              @removeFilter="removeFilter(i)"
+              @resetFilter="
+                resetFilter(
+                  automation,
+                  automationTypes,
+                  i,
+                  automation.conditions[i]
+                )
+              "
+              @removeFilter="removeFilter(automation, i)"
             />
             <div class="mt-4">
               <woot-button
@@ -180,7 +253,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewCondition"
+                @click="appendNewCondition(automation)"
               >
                 {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
               </woot-button>
@@ -205,15 +278,18 @@ export default {
                 getActionDropdownValues(automation.actions[i].action_name)
               "
               :show-action-input="
-                showActionInput(automation.actions[i].action_name)
+                showActionInput(
+                  automationActionTypes,
+                  automation.actions[i].action_name
+                )
               "
               :error-message="
                 errors[`action_${i}`]
                   ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
                   : ''
               "
-              @resetAction="resetAction(i)"
-              @removeAction="removeAction(i)"
+              @resetAction="resetAction(automation, i)"
+              @removeAction="removeAction(automation, i)"
             />
             <div class="mt-4">
               <woot-button
@@ -221,7 +297,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewAction"
+                @click="appendNewAction(automation)"
               >
                 {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
               </woot-button>
@@ -234,7 +310,7 @@ export default {
             <woot-button class="button clear" @click.prevent="onClose">
               {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
             </woot-button>
-            <woot-button @click="submitAutomation">
+            <woot-button @click="emitSaveAutomation">
               {{ $t('AUTOMATION.ADD.SUBMIT') }}
             </woot-button>
           </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue
new file mode 100644
index 0000000000000..95081919337e1
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { messageStamp } from 'shared/helpers/timeHelper';
+
+const props = defineProps({
+  automation: {
+    type: Object,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['toggle', 'edit', 'delete', 'clone']);
+
+const readableDate = date => messageStamp(new Date(date), 'LLL d, yyyy');
+const readableDateWithTime = date =>
+  messageStamp(new Date(date), 'LLL d, yyyy hh:mm a');
+
+const toggle = () => {
+  const { id, name, active } = props.automation;
+  emit('toggle', {
+    id,
+    name,
+    status: active,
+  });
+};
+</script>
+
+<template>
+  <tr>
+    <td class="py-4 ltr:pr-4 rtl:pl-4 min-w-[200px]">{{ automation.name }}</td>
+    <td class="py-4 ltr:pr-4 rtl:pl-4">{{ automation.description }}</td>
+    <td class="py-4 ltr:pr-4 rtl:pl-4">
+      <woot-switch :value="automation.active" @input="toggle" />
+    </td>
+    <td
+      class="py-4 ltr:pr-4 rtl:pl-4 min-w-[12px]"
+      :title="readableDateWithTime(automation.created_on)"
+    >
+      {{ readableDate(automation.created_on) }}
+    </td>
+    <td class="py-4 min-w-xs">
+      <div class="flex gap-1 justify-end flex-shrink-0">
+        <woot-button
+          v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
+          variant="smooth"
+          size="tiny"
+          color-scheme="secondary"
+          class-names="grey-btn"
+          icon="edit"
+          :is-loading="loading"
+          @click="$emit('edit', automation)"
+        />
+        <woot-button
+          v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
+          variant="smooth"
+          size="tiny"
+          :is-loading="loading"
+          color-scheme="primary"
+          class-names="grey-btn"
+          icon="copy"
+          @click="$emit('clone', automation)"
+        />
+        <woot-button
+          v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
+          variant="smooth"
+          :is-loading="loading"
+          color-scheme="alert"
+          size="tiny"
+          icon="dismiss-circle"
+          class-names="grey-btn"
+          @click="$emit('delete', automation)"
+        />
+      </div>
+    </td>
+  </tr>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index c11a56fc77213..b7e913cad2be6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -1,8 +1,18 @@
 <script>
 import { mapGetters } from 'vuex';
-import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
+import { useAutomation } from 'dashboard/composables/useAutomation';
 import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import {
+  getFileName,
+  generateAutomationPayload,
+  getAttributes,
+  getInputType,
+  getOperators,
+  getCustomAttributeType,
+  showActionInput,
+} from 'dashboard/helper/automationHelper';
+import { validateAutomation } from 'dashboard/helper/validations';
 
 import {
   AUTOMATION_RULE_EVENTS,
@@ -15,7 +25,6 @@ export default {
     FilterInputBox,
     AutomationActionInput,
   },
-  mixins: [automationMethodsMixin],
   props: {
     onClose: {
       type: Function,
@@ -26,6 +35,34 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const {
+      onEventChange,
+      getConditionDropdownValues,
+      appendNewCondition,
+      appendNewAction,
+      removeFilter,
+      removeAction,
+      resetFilter,
+      resetAction,
+      getActionDropdownValues,
+      formatAutomation,
+      manifestCustomAttributes,
+    } = useAutomation();
+    return {
+      onEventChange,
+      getConditionDropdownValues,
+      appendNewCondition,
+      appendNewAction,
+      removeFilter,
+      removeAction,
+      resetFilter,
+      resetAction,
+      getActionDropdownValues,
+      formatAutomation,
+      manifestCustomAttributes,
+    };
+  },
   data() {
     return {
       automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),
@@ -61,14 +98,33 @@ export default {
     },
   },
   mounted() {
-    this.manifestCustomAttributes();
+    this.manifestCustomAttributes(this.automationTypes);
     this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.formatAutomation(this.selectedResponse);
+
+    this.automation = this.formatAutomation(
+      this.selectedResponse,
+      this.allCustomAttributes,
+      this.automationTypes,
+      this.automationActionTypes
+    );
   },
   methods: {
+    getFileName,
+    getAttributes,
+    getInputType,
+    getOperators,
+    getCustomAttributeType,
+    showActionInput,
     isFeatureEnabled(flag) {
       return this.isFeatureEnabledonAccount(this.accountId, flag);
     },
+    emitSaveAutomation() {
+      this.errors = validateAutomation(this.automation);
+      if (Object.keys(this.errors).length === 0) {
+        const automation = generateAutomationPayload(this.automation);
+        this.$emit('saveAutomation', automation, this.mode);
+      }
+    },
   },
 };
 </script>
@@ -99,7 +155,10 @@ export default {
         <div class="event_wrapper">
           <label :class="{ error: errors.event_name }">
             {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select v-model="automation.event_name" @change="onEventChange()">
+            <select
+              v-model="automation.event_name"
+              @change="onEventChange(automation)"
+            >
               <option
                 v-for="event in automationRuleEvents"
                 :key="event.key"
@@ -125,16 +184,37 @@ export default {
               v-for="(condition, i) in automation.conditions"
               :key="i"
               v-model="automation.conditions[i]"
-              :filter-attributes="getAttributes(automation.event_name)"
-              :input-type="getInputType(automation.conditions[i].attribute_key)"
-              :operators="getOperators(automation.conditions[i].attribute_key)"
+              :filter-attributes="
+                getAttributes(automationTypes, automation.event_name)
+              "
+              :input-type="
+                getInputType(
+                  allCustomAttributes,
+                  automationTypes,
+                  automation,
+                  automation.conditions[i].attribute_key
+                )
+              "
+              :operators="
+                getOperators(
+                  allCustomAttributes,
+                  automationTypes,
+                  automation,
+                  mode,
+                  automation.conditions[i].attribute_key
+                )
+              "
               :dropdown-values="
                 getConditionDropdownValues(
                   automation.conditions[i].attribute_key
                 )
               "
               :custom-attribute-type="
-                getCustomAttributeType(automation.conditions[i].attribute_key)
+                getCustomAttributeType(
+                  automationTypes,
+                  automation,
+                  automation.conditions[i].attribute_key
+                )
               "
               :show-query-operator="i !== automation.conditions.length - 1"
               :error-message="
@@ -142,8 +222,15 @@ export default {
                   ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
                   : ''
               "
-              @resetFilter="resetFilter(i, automation.conditions[i])"
-              @removeFilter="removeFilter(i)"
+              @resetFilter="
+                resetFilter(
+                  automation,
+                  automationTypes,
+                  i,
+                  automation.conditions[i]
+                )
+              "
+              @removeFilter="removeFilter(automation, i)"
             />
             <div class="mt-4">
               <woot-button
@@ -151,7 +238,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewCondition"
+                @click="appendNewCondition(automation)"
               >
                 {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
               </woot-button>
@@ -173,15 +260,17 @@ export default {
               v-model="automation.actions[i]"
               :action-types="automationActionTypes"
               :dropdown-values="getActionDropdownValues(action.action_name)"
-              :show-action-input="showActionInput(action.action_name)"
+              :show-action-input="
+                showActionInput(automationActionTypes, action.action_name)
+              "
               :error-message="
                 errors[`action_${i}`]
                   ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
                   : ''
               "
               :initial-file-name="getFileName(action, automation.files)"
-              @resetAction="resetAction(i)"
-              @removeAction="removeAction(i)"
+              @resetAction="resetAction(automation, i)"
+              @removeAction="removeAction(automation, i)"
             />
             <div class="mt-4">
               <woot-button
@@ -189,7 +278,7 @@ export default {
                 color-scheme="success"
                 variant="smooth"
                 size="small"
-                @click="appendNewAction"
+                @click="appendNewAction(automation)"
               >
                 {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
               </woot-button>
@@ -206,7 +295,7 @@ export default {
             >
               {{ $t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT') }}
             </woot-button>
-            <woot-button @click="submitAutomation">
+            <woot-button @click="emitSaveAutomation">
               {{ $t('AUTOMATION.EDIT.SUBMIT') }}
             </woot-button>
           </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index cbd200f091e8f..f637b5c30d88d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -1,246 +1,219 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
 import { useAlert } from 'dashboard/composables';
-import { messageStamp } from 'shared/helpers/timeHelper';
 import AddAutomationRule from './AddAutomationRule.vue';
 import EditAutomationRule from './EditAutomationRule.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import AutomationRuleRow from './AutomationRuleRow.vue';
+const getters = useStoreGetters();
+const store = useStore();
+const { t } = useI18n();
+const confirmDialog = ref(null);
 
-export default {
-  components: {
-    AddAutomationRule,
-    EditAutomationRule,
-  },
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showEditPopup: false,
-      showDeleteConfirmationPopup: false,
-      selectedResponse: {},
-      toggleModalTitle: this.$t('AUTOMATION.TOGGLE.ACTIVATION_TITLE'),
-      toggleModalDescription: this.$t(
-        'AUTOMATION.TOGGLE.ACTIVATION_DESCRIPTION'
-      ),
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: ['automations/getAutomations'],
-      uiFlags: 'automations/getUIFlags',
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    // Delete Modal
-    deleteConfirmText() {
-      return `${this.$t('AUTOMATION.DELETE.CONFIRM.YES')} ${
-        this.selectedResponse.name
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('AUTOMATION.DELETE.CONFIRM.NO')} ${
-        this.selectedResponse.name
-      }`;
-    },
-    deleteMessage() {
-      return ` ${this.selectedResponse.name}?`;
-    },
-    isSLAEnabled() {
-      return this.isFeatureEnabledonAccount(this.accountId, '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.$store.dispatch('automations/get');
-    if (this.isSLAEnabled) this.$store.dispatch('sla/get');
-  },
-  methods: {
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-    openEditPopup(response) {
-      this.selectedResponse = response;
-      this.showEditPopup = true;
-    },
-    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.deleteAutomation(this.selectedResponse.id);
-    },
-    async deleteAutomation(id) {
-      try {
-        await this.$store.dispatch('automations/delete', id);
-        useAlert(this.$t('AUTOMATION.DELETE.API.SUCCESS_MESSAGE'));
-        this.loading[this.selectedResponse.id] = false;
-      } catch (error) {
-        useAlert(this.$t('AUTOMATION.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-    async cloneAutomation(id) {
-      try {
-        await this.$store.dispatch('automations/clone', id);
-        useAlert(this.$t('AUTOMATION.CLONE.API.SUCCESS_MESSAGE'));
-        this.$store.dispatch('automations/get');
-        this.loading[this.selectedResponse.id] = false;
-      } catch (error) {
-        useAlert(this.$t('AUTOMATION.CLONE.API.ERROR_MESSAGE'));
-      }
-    },
-    async submitAutomation(payload, mode) {
-      try {
-        const action =
-          mode === 'edit' ? 'automations/update' : 'automations/create';
-        const successMessage =
-          mode === 'edit'
-            ? this.$t('AUTOMATION.EDIT.API.SUCCESS_MESSAGE')
-            : this.$t('AUTOMATION.ADD.API.SUCCESS_MESSAGE');
-        await this.$store.dispatch(action, payload);
-        useAlert(successMessage);
-        this.hideAddPopup();
-        this.hideEditPopup();
-      } catch (error) {
-        const errorMessage =
-          mode === 'edit'
-            ? this.$t('AUTOMATION.EDIT.API.ERROR_MESSAGE')
-            : this.$t('AUTOMATION.ADD.API.ERROR_MESSAGE');
-        useAlert(errorMessage);
-      }
-    },
-    async toggleAutomation(automation, status) {
-      try {
-        this.toggleModalTitle = status
-          ? this.$t('AUTOMATION.TOGGLE.DEACTIVATION_TITLE')
-          : this.$t('AUTOMATION.TOGGLE.ACTIVATION_TITLE');
-        this.toggleModalDescription = status
-          ? this.$t('AUTOMATION.TOGGLE.DEACTIVATION_DESCRIPTION', {
-              automationName: automation.name,
-            })
-          : this.$t('AUTOMATION.TOGGLE.ACTIVATION_DESCRIPTION', {
-              automationName: automation.name,
-            });
-        // Check if user confirms to proceed
-        const ok = await this.$refs.confirmDialog.showConfirmation();
-        if (ok) {
-          await await this.$store.dispatch('automations/update', {
-            id: automation.id,
-            active: !status,
-          });
-          const message = status
-            ? this.$t('AUTOMATION.TOGGLE.DEACTIVATION_SUCCESFUL')
-            : this.$t('AUTOMATION.TOGGLE.ACTIVATION_SUCCESFUL');
-          useAlert(message);
+const loading = ref({});
+const showAddPopup = ref(false);
+const showEditPopup = ref(false);
+const showDeleteConfirmationPopup = ref(false);
+const selectedAutomation = ref({});
+const toggleModalTitle = ref(t('AUTOMATION.TOGGLE.ACTIVATION_TITLE'));
+const toggleModalDescription = ref(
+  t('AUTOMATION.TOGGLE.ACTIVATION_DESCRIPTION')
+);
+
+const records = computed(() => getters['automations/getAutomations'].value);
+const uiFlags = computed(() => getters['automations/getUIFlags'].value);
+const accountId = computed(() => getters.getCurrentAccountId.value);
+
+const deleteConfirmText = computed(
+  () => `${t('AUTOMATION.DELETE.CONFIRM.YES')} ${selectedAutomation.value.name}`
+);
+
+const deleteRejectText = computed(
+  () => `${t('AUTOMATION.DELETE.CONFIRM.NO')} ${selectedAutomation.value.name}`
+);
+
+const deleteMessage = computed(() => ` ${selectedAutomation.value.name}?`);
+
+const isSLAEnabled = computed(() =>
+  getters['accounts/isFeatureEnabledonAccount'].value(accountId.value, 'sla')
+);
+
+onMounted(() => {
+  store.dispatch('inboxes/get');
+  store.dispatch('agents/get');
+  store.dispatch('contacts/get');
+  store.dispatch('teams/get');
+  store.dispatch('labels/get');
+  store.dispatch('campaigns/get');
+  store.dispatch('automations/get');
+  if (isSLAEnabled.value) {
+    store.dispatch('sla/get');
+  }
+});
+
+const openAddPopup = () => {
+  showAddPopup.value = true;
+};
+const hideAddPopup = () => {
+  showAddPopup.value = false;
+};
+
+const openEditPopup = response => {
+  selectedAutomation.value = response;
+  showEditPopup.value = true;
+};
+const hideEditPopup = () => {
+  showEditPopup.value = false;
+};
+
+const openDeletePopup = response => {
+  showDeleteConfirmationPopup.value = true;
+  selectedAutomation.value = response;
+};
+const closeDeletePopup = () => {
+  showDeleteConfirmationPopup.value = false;
+};
+
+const deleteAutomation = async id => {
+  try {
+    await store.dispatch('automations/delete', id);
+    useAlert(t('AUTOMATION.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('AUTOMATION.DELETE.API.ERROR_MESSAGE'));
+  } finally {
+    loading.value[selectedAutomation.value.id] = false;
+  }
+};
+const confirmDeletion = () => {
+  loading.value[selectedAutomation.value.id] = true;
+  closeDeletePopup();
+  deleteAutomation(selectedAutomation.value.id);
+};
+const cloneAutomation = async ({ id }) => {
+  try {
+    await store.dispatch('automations/clone', id);
+    useAlert(t('AUTOMATION.CLONE.API.SUCCESS_MESSAGE'));
+    store.dispatch('automations/get');
+  } catch (error) {
+    useAlert(t('AUTOMATION.CLONE.API.ERROR_MESSAGE'));
+  } finally {
+    loading.value[selectedAutomation.value.id] = false;
+  }
+};
+
+const submitAutomation = async (payload, mode) => {
+  try {
+    const action =
+      mode === 'edit' ? 'automations/update' : 'automations/create';
+    const successMessage =
+      mode === 'edit'
+        ? t('AUTOMATION.EDIT.API.SUCCESS_MESSAGE')
+        : t('AUTOMATION.ADD.API.SUCCESS_MESSAGE');
+    await store.dispatch(action, payload);
+    useAlert(successMessage);
+    hideAddPopup();
+    hideEditPopup();
+  } catch (error) {
+    const errorMessage =
+      mode === 'edit'
+        ? t('AUTOMATION.EDIT.API.ERROR_MESSAGE')
+        : t('AUTOMATION.ADD.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+const toggleAutomation = async ({ id, name, status }) => {
+  try {
+    if (status) {
+      toggleModalTitle.value = t('AUTOMATION.TOGGLE.DEACTIVATION_TITLE');
+      toggleModalDescription.value = t(
+        'AUTOMATION.TOGGLE.DEACTIVATION_DESCRIPTION',
+        {
+          automationName: name,
         }
-      } catch (error) {
-        useAlert(this.$t('AUTOMATION.EDIT.API.ERROR_MESSAGE'));
-      }
-    },
-    readableTime(date) {
-      return messageStamp(new Date(date), 'LLL d, h:mm a');
-    },
-  },
+      );
+    } else {
+      toggleModalTitle.value = t('AUTOMATION.TOGGLE.ACTIVATION_TITLE');
+      toggleModalDescription.value = t(
+        'AUTOMATION.TOGGLE.ACTIVATION_DESCRIPTION',
+        {
+          automationName: name,
+        }
+      );
+    }
+
+    const ok = await confirmDialog.value.showConfirmation();
+    if (ok) {
+      await store.dispatch('automations/update', {
+        id: id,
+        active: !status,
+      });
+      const message = status
+        ? t('AUTOMATION.TOGGLE.DEACTIVATION_SUCCESFUL')
+        : t('AUTOMATION.TOGGLE.ACTIVATION_SUCCESFUL');
+      useAlert(message);
+    }
+  } catch (error) {
+    useAlert(t('AUTOMATION.EDIT.API.ERROR_MESSAGE'));
+  }
 };
 </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"
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('AUTOMATION.LOADING')"
+    :no-records-found="!records.length"
+    :no-records-message="$t('AUTOMATION.LIST.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('AUTOMATION.HEADER')"
+        :description="$t('AUTOMATION.DESCRIPTION')"
+        :link-text="$t('AUTOMATION.LEARN_MORE')"
+        feature-name="automation"
+      >
+        <template #actions>
+          <woot-button
+            class="button nice rounded-md"
+            icon="add-circle"
+            @click="openAddPopup"
+          >
+            {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
+          </woot-button>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+        <thead>
+          <th
+            v-for="thHeader in $t('AUTOMATION.LIST.TABLE_HEADER')"
+            :key="thHeader"
+            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+          >
+            {{ thHeader }}
+          </th>
+        </thead>
+        <tbody
+          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
         >
-          {{ $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>
+          <AutomationRuleRow
+            v-for="automation in records"
+            :key="automation.id"
+            :automation="automation"
+            :loading="loading[automation.id]"
+            @clone="cloneAutomation"
+            @toggle="toggleAutomation"
+            @edit="openEditPopup"
+            @delete="openDeletePopup"
+          />
+        </tbody>
+      </table>
+    </template>
 
-      <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"
@@ -272,7 +245,7 @@ export default {
       <EditAutomationRule
         v-if="showEditPopup"
         :on-close="hideEditPopup"
-        :selected-response="selectedResponse"
+        :selected-response="selectedAutomation"
         @saveAutomation="submitAutomation"
       />
     </woot-modal>
@@ -281,5 +254,5 @@ export default {
       :title="toggleModalTitle"
       :description="toggleModalDescription"
     />
-  </div>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
index 14b03a45a4813..39e13bd9417ab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
@@ -1,17 +1,12 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const Automation = () => import('./Index.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/automation'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'AUTOMATION.HEADER',
-        icon: 'automation',
-        showNewButton: false,
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
index 4fdf1ef67b2b3..cddcf37c80c3a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 import { mapGetters } from 'vuex';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -7,12 +7,12 @@ import BillingItem from './components/BillingItem.vue';
 
 export default {
   components: { BillingItem },
-  mixins: [messageFormatterMixin],
   setup() {
     const { accountId } = useAccount();
-
+    const { formatMessage } = useMessageFormatter();
     return {
       accountId,
+      formatMessage,
     };
   },
   computed: {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
index 8c0dc7b5cc37b..ee2846725f598 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
@@ -4,7 +4,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
 import { URLPattern } from 'urlpattern-polyfill';
 import { CAMPAIGNS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
@@ -14,9 +14,9 @@ export default {
     WootDateTimePicker,
     WootMessageEditor,
   },
-  mixins: [campaignMixin],
   setup() {
-    return { v$: useVuelidate() };
+    const { campaignType, isOngoingType, isOneOffType } = useCampaign();
+    return { v$: useVuelidate(), campaignType, isOngoingType, isOneOffType };
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
index 0e8dea361a349..7aa56362e715c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import CampaignsTable from './CampaignsTable.vue';
 import EditCampaign from './EditCampaign.vue';
 export default {
@@ -9,13 +9,16 @@ export default {
     CampaignsTable,
     EditCampaign,
   },
-  mixins: [campaignMixin],
   props: {
     type: {
       type: String,
       default: '',
     },
   },
+  setup() {
+    const { campaignType } = useCampaign();
+    return { campaignType };
+  },
   data() {
     return {
       showEditPopup: false,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
index 2989db04c35ef..ec98d651e0653 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
@@ -1,7 +1,7 @@
 <script>
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { messageStamp } from 'shared/helpers/timeHelper';
 
 export default {
@@ -9,7 +9,6 @@ export default {
     UserAvatarWithName,
     InboxName,
   },
-  mixins: [messageFormatterMixin],
   props: {
     campaign: {
       type: Object,
@@ -20,7 +19,12 @@ export default {
       default: true,
     },
   },
-
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   computed: {
     campaignStatus() {
       if (this.isOngoingType) {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index d1abc6490dd46..8c73f015a5ee5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -1,7 +1,7 @@
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import CampaignCard from './CampaignCard.vue';
 
 export default {
@@ -10,9 +10,6 @@ export default {
     Spinner,
     CampaignCard,
   },
-
-  mixins: [campaignMixin],
-
   props: {
     campaigns: {
       type: Array,
@@ -27,7 +24,10 @@ export default {
       default: false,
     },
   },
-
+  setup() {
+    const { isOngoingType } = useCampaign();
+    return { isOngoingType };
+  },
   computed: {
     currentInboxId() {
       return this.$route.params.inboxId;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
index 7bd4f2a15aafa..1f60b415da577 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
@@ -4,14 +4,13 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import { URLPattern } from 'urlpattern-polyfill';
 
 export default {
   components: {
     WootMessageEditor,
   },
-  mixins: [campaignMixin],
   props: {
     selectedCampaign: {
       type: Object,
@@ -19,7 +18,8 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    const { isOngoingType } = useCampaign();
+    return { v$: useVuelidate(), isOngoingType };
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
index d6f1918cfbae9..6fc9598c8b37e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -1,5 +1,5 @@
 <script>
-import campaignMixin from 'shared/mixins/campaignMixin';
+import { useCampaign } from 'shared/composables/useCampaign';
 import Campaign from './Campaign.vue';
 import AddCampaign from './AddCampaign.vue';
 
@@ -8,7 +8,10 @@ export default {
     Campaign,
     AddCampaign,
   },
-  mixins: [campaignMixin],
+  setup() {
+    const { isOngoingType } = useCampaign();
+    return { isOngoingType };
+  },
   data() {
     return { showAddPopup: false };
   },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
index 9140e2c17c7e6..2a464c1623c91 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
@@ -1,5 +1,8 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
 const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const CannedHome = () => import('./Index.vue');
 
@@ -17,7 +20,7 @@ export default {
           path: 'list',
           name: 'canned_list',
           meta: {
-            permissions: ['administrator', 'agent'],
+            permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
           },
           component: CannedHome,
         },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue
new file mode 100644
index 0000000000000..85d642dccfaa9
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BasePaywallModal.vue
@@ -0,0 +1,79 @@
+<script setup>
+defineProps({
+  featurePrefix: {
+    type: String,
+    required: true,
+  },
+  i18nKey: {
+    type: String,
+    required: true,
+  },
+  isOnChatwootCloud: {
+    type: Boolean,
+    default: false,
+  },
+  isSuperAdmin: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['click']);
+</script>
+
+<template>
+  <div
+    class="flex flex-col max-w-md px-6 py-6 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-100 dark:border-slate-900"
+  >
+    <div class="flex items-center w-full gap-2 mb-4">
+      <span
+        class="flex items-center justify-center w-6 h-6 rounded-full bg-woot-75/70 dark:bg-woot-800/40"
+      >
+        <fluent-icon
+          size="14"
+          class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+          icon="lock-closed"
+        />
+      </span>
+      <span class="text-base font-medium text-slate-900 dark:text-white">
+        {{ $t(`${featurePrefix}.PAYWALL.TITLE`) }}
+      </span>
+    </div>
+    <p
+      class="text-sm font-normal"
+      v-html="$t(`${featurePrefix}.${i18nKey}.AVAILABLE_ON`)"
+    />
+    <p class="text-sm font-normal">
+      {{ $t(`${featurePrefix}.${i18nKey}.UPGRADE_PROMPT`) }}
+      <span v-if="!isOnChatwootCloud && !isSuperAdmin">
+        {{ $t(`${featurePrefix}.ENTERPRISE_PAYWALL.ASK_ADMIN`) }}
+      </span>
+    </p>
+    <template v-if="isOnChatwootCloud || true">
+      <woot-button
+        color-scheme="primary"
+        class="w-full mt-2 text-center rounded-xl"
+        size="expanded"
+        is-expanded
+        @click="emit('click')"
+      >
+        {{ $t(`${featurePrefix}.PAYWALL.UPGRADE_NOW`) }}
+      </woot-button>
+      <span class="mt-2 text-xs tracking-tight text-center">
+        {{ $t(`${featurePrefix}.PAYWALL.CANCEL_ANYTIME`) }}
+      </span>
+    </template>
+    <template v-else-if="isSuperAdmin">
+      <a href="/super_admin" class="block w-full">
+        <woot-button
+          color-scheme="primary"
+          class="w-full mt-2 text-center rounded-xl"
+          size="expanded"
+          is-expanded
+        >
+          {{ $t(`${featurePrefix}.PAYWALL.UPGRADE_NOW`) }}
+        </woot-button>
+      </a>
+    </template>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
new file mode 100644
index 0000000000000..156ca4519a72d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
@@ -0,0 +1,189 @@
+<script setup>
+import { useAlert } from 'dashboard/composables';
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import CustomRoleModal from './component/CustomRoleModal.vue';
+import CustomRoleTableBody from './component/CustomRoleTableBody.vue';
+import CustomRolePaywall from './component/CustomRolePaywall.vue';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+
+const store = useStore();
+const { t } = useI18n();
+
+const showCustomRoleModal = ref(false);
+const customRoleModalMode = ref('add');
+const selectedRole = ref(null);
+const loading = ref({});
+const showDeleteConfirmationPopup = ref(false);
+const activeResponse = ref({});
+
+const records = useMapGetter('customRole/getCustomRoles');
+const uiFlags = useMapGetter('customRole/getUIFlags');
+
+const deleteConfirmText = computed(
+  () => `${t('CUSTOM_ROLE.DELETE.CONFIRM.YES')} ${activeResponse.value.name}`
+);
+
+const deleteRejectText = computed(
+  () => `${t('CUSTOM_ROLE.DELETE.CONFIRM.NO')} ${activeResponse.value.name}`
+);
+
+const deleteMessage = computed(() => {
+  return ` ${activeResponse.value.name} ? `;
+});
+
+const isFeatureEnabledOnAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+
+const isBehindAPaywall = computed(() => {
+  return !isFeatureEnabledOnAccount.value(
+    currentAccountId.value,
+    'custom_roles'
+  );
+});
+
+const fetchCustomRoles = async () => {
+  try {
+    await store.dispatch('customRole/getCustomRole');
+  } catch (error) {
+    // Ignore Error
+  }
+};
+
+onMounted(() => {
+  fetchCustomRoles();
+});
+
+const showAlertMessage = message => {
+  loading.value[activeResponse.value.id] = false;
+  activeResponse.value = {};
+  useAlert(message);
+};
+
+const openAddModal = () => {
+  if (isBehindAPaywall.value) return;
+  customRoleModalMode.value = 'add';
+  selectedRole.value = null;
+  showCustomRoleModal.value = true;
+};
+
+const openEditModal = role => {
+  customRoleModalMode.value = 'edit';
+  selectedRole.value = role;
+  showCustomRoleModal.value = true;
+};
+
+const hideCustomRoleModal = () => {
+  selectedRole.value = null;
+  showCustomRoleModal.value = false;
+};
+
+const openDeletePopup = response => {
+  showDeleteConfirmationPopup.value = true;
+  activeResponse.value = response;
+};
+
+const closeDeletePopup = () => {
+  showDeleteConfirmationPopup.value = false;
+};
+
+const deleteCustomRole = async id => {
+  try {
+    await store.dispatch('customRole/deleteCustomRole', id);
+    showAlertMessage(t('CUSTOM_ROLE.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.message || t('CUSTOM_ROLE.DELETE.API.ERROR_MESSAGE');
+    showAlertMessage(errorMessage);
+  }
+};
+
+const confirmDeletion = () => {
+  loading[activeResponse.value.id] = true;
+  closeDeletePopup();
+  deleteCustomRole(activeResponse.value.id);
+};
+</script>
+
+<template>
+  <SettingsLayout
+    :is-loading="uiFlags.fetchingList"
+    :loading-message="$t('CUSTOM_ROLE.LOADING')"
+    :no-records-found="!records.length && !isBehindAPaywall"
+    :no-records-message="$t('CUSTOM_ROLE.LIST.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('CUSTOM_ROLE.HEADER')"
+        :description="$t('CUSTOM_ROLE.DESCRIPTION')"
+        :link-text="$t('CUSTOM_ROLE.LEARN_MORE')"
+        feature-name="canned_responses"
+      >
+        <template #actions>
+          <woot-button
+            class="rounded-md button nice"
+            icon="add-circle"
+            :disabled="isBehindAPaywall"
+            @click="openAddModal"
+          >
+            {{ $t('CUSTOM_ROLE.HEADER_BTN_TXT') }}
+          </woot-button>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+
+    <template #body>
+      <CustomRolePaywall v-if="isBehindAPaywall" />
+      <table
+        v-else
+        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
+      >
+        <thead>
+          <th
+            v-for="thHeader in $t('CUSTOM_ROLE.LIST.TABLE_HEADER')"
+            :key="thHeader"
+            class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+          >
+            <span class="mb-0">
+              {{ thHeader }}
+            </span>
+          </th>
+        </thead>
+
+        <CustomRoleTableBody
+          :roles="records"
+          :loading="loading"
+          @edit="openEditModal"
+          @delete="openDeletePopup"
+        />
+      </table>
+    </template>
+
+    <woot-modal
+      :show.sync="showCustomRoleModal"
+      :on-close="hideCustomRoleModal"
+    >
+      <CustomRoleModal
+        :mode="customRoleModalMode"
+        :selected-role="selectedRole"
+        @close="hideCustomRoleModal"
+      />
+    </woot-modal>
+
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('CUSTOM_ROLE.DELETE.CONFIRM.TITLE')"
+      :message="$t('CUSTOM_ROLE.DELETE.CONFIRM.MESSAGE')"
+      :message-value="deleteMessage"
+      :confirm-text="deleteConfirmText"
+      :reject-text="deleteRejectText"
+    />
+  </SettingsLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
new file mode 100644
index 0000000000000..f1e011e01f24f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
@@ -0,0 +1,248 @@
+<script setup>
+import { ref, reactive, computed, onMounted, watch } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import {
+  AVAILABLE_CUSTOM_ROLE_PERMISSIONS,
+  MANAGE_ALL_CONVERSATION_PERMISSIONS,
+  CONVERSATION_UNASSIGNED_PERMISSIONS,
+  CONVERSATION_PARTICIPATING_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
+
+import WootSubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'add',
+    validator: value => ['add', 'edit'].includes(value),
+  },
+  selectedRole: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const { t } = useI18n();
+
+const name = ref('');
+const description = ref('');
+const selectedPermissions = ref([]);
+
+const nameInput = ref(null);
+
+const addCustomRole = reactive({
+  showLoading: false,
+  message: '',
+});
+
+const rules = computed(() => ({
+  name: { required, minLength: minLength(2) },
+  description: { required },
+  selectedPermissions: { required, minLength: minLength(1) },
+}));
+
+const v$ = useVuelidate(rules, { name, description, selectedPermissions });
+
+const resetForm = () => {
+  name.value = '';
+  description.value = '';
+  selectedPermissions.value = [];
+  v$.value.$reset();
+};
+
+const populateEditForm = () => {
+  name.value = props.selectedRole.name || '';
+  description.value = props.selectedRole.description || '';
+  selectedPermissions.value = props.selectedRole.permissions || [];
+};
+
+watch(
+  selectedPermissions,
+  (newValue, oldValue) => {
+    // Check if manage all conversation permission is added or removed
+    const hasAddedManageAllConversation =
+      newValue.includes(MANAGE_ALL_CONVERSATION_PERMISSIONS) &&
+      !oldValue.includes(MANAGE_ALL_CONVERSATION_PERMISSIONS);
+    const hasRemovedManageAllConversation =
+      oldValue.includes(MANAGE_ALL_CONVERSATION_PERMISSIONS) &&
+      !newValue.includes(MANAGE_ALL_CONVERSATION_PERMISSIONS);
+
+    if (hasAddedManageAllConversation) {
+      // If manage all conversation permission is added,
+      // then add unassigned and participating permissions automatically
+      selectedPermissions.value = [
+        ...new Set([
+          ...selectedPermissions.value,
+          CONVERSATION_UNASSIGNED_PERMISSIONS,
+          CONVERSATION_PARTICIPATING_PERMISSIONS,
+        ]),
+      ];
+    } else if (hasRemovedManageAllConversation) {
+      // If manage all conversation permission is removed,
+      // then only remove manage all conversation permission
+      selectedPermissions.value = selectedPermissions.value.filter(
+        p => p !== MANAGE_ALL_CONVERSATION_PERMISSIONS
+      );
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  if (props.mode === 'edit') {
+    populateEditForm();
+  }
+  // Focus the name input when mounted
+  nameInput.value?.focus();
+});
+
+const getTranslationKey = base => {
+  return props.mode === 'edit'
+    ? `CUSTOM_ROLE.EDIT.${base}`
+    : `CUSTOM_ROLE.ADD.${base}`;
+};
+
+const modalTitle = computed(() => t(getTranslationKey('TITLE')));
+const modalDescription = computed(() => t(getTranslationKey('DESC')));
+const submitButtonText = computed(() => t(getTranslationKey('SUBMIT')));
+
+const handleCustomRole = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  addCustomRole.showLoading = true;
+  try {
+    const roleData = {
+      name: name.value,
+      description: description.value,
+      permissions: selectedPermissions.value,
+    };
+
+    if (props.mode === 'edit') {
+      await store.dispatch('customRole/updateCustomRole', {
+        id: props.selectedRole.id,
+        ...roleData,
+      });
+      useAlert(t('CUSTOM_ROLE.EDIT.API.SUCCESS_MESSAGE'));
+    } else {
+      await store.dispatch('customRole/createCustomRole', roleData);
+      useAlert(t('CUSTOM_ROLE.ADD.API.SUCCESS_MESSAGE'));
+    }
+
+    resetForm();
+    emit('close');
+  } catch (error) {
+    const errorMessage =
+      error?.message || t(`CUSTOM_ROLE.FORM.API.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  } finally {
+    addCustomRole.showLoading = false;
+  }
+};
+
+const isSubmitDisabled = computed(
+  () => v$.value.$invalid || addCustomRole.showLoading
+);
+</script>
+
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="modalTitle"
+      :header-content="modalDescription"
+    />
+    <form class="flex flex-col w-full" @submit.prevent="handleCustomRole">
+      <div class="w-full">
+        <label :class="{ 'text-red-500': v$.name.$error }">
+          {{ $t('CUSTOM_ROLE.FORM.NAME.LABEL') }}
+          <input
+            ref="nameInput"
+            v-model.trim="name"
+            type="text"
+            :class="{ '!border-red-500': v$.name.$error }"
+            :placeholder="$t('CUSTOM_ROLE.FORM.NAME.PLACEHOLDER')"
+            @blur="v$.name.$touch"
+          />
+        </label>
+      </div>
+
+      <div class="w-full">
+        <label :class="{ 'text-red-500': v$.description.$error }">
+          {{ $t('CUSTOM_ROLE.FORM.DESCRIPTION.LABEL') }}
+        </label>
+        <div class="editor-wrap">
+          <WootMessageEditor
+            v-model="description"
+            class="message-editor [&>div]:px-1 h-28"
+            :class="{ editor_warning: v$.description.$error }"
+            enable-variables
+            :focus-on-mount="false"
+            :enable-canned-responses="false"
+            :placeholder="$t('CUSTOM_ROLE.FORM.DESCRIPTION.PLACEHOLDER')"
+            @blur="v$.description.$touch"
+          />
+        </div>
+      </div>
+
+      <div class="w-full">
+        <label :class="{ 'text-red-500': v$.selectedPermissions.$error }">
+          {{ $t('CUSTOM_ROLE.FORM.PERMISSIONS.LABEL') }}
+        </label>
+        <div class="flex flex-col gap-2.5 mb-4">
+          <div
+            v-for="permission in AVAILABLE_CUSTOM_ROLE_PERMISSIONS"
+            :key="permission"
+            class="flex items-center"
+          >
+            <input
+              :id="permission"
+              v-model="selectedPermissions"
+              type="checkbox"
+              :value="permission"
+              name="permissions"
+              class="ltr:mr-2 rtl:ml-2"
+            />
+            <label :for="permission" class="text-sm">
+              {{ $t(`CUSTOM_ROLE.PERMISSIONS.${permission.toUpperCase()}`) }}
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <WootSubmitButton
+          :disabled="isSubmitDisabled"
+          :button-text="submitButtonText"
+          :loading="addCustomRole.showLoading"
+        />
+        <button class="button clear" @click.prevent="emit('close')">
+          {{ $t('CUSTOM_ROLE.FORM.CANCEL_BUTTON_TEXT') }}
+        </button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped lang="scss">
+::v-deep {
+  .ProseMirror-menubar {
+    @apply hidden;
+  }
+
+  .ProseMirror-woot-style {
+    @apply max-h-[110px];
+
+    p {
+      @apply text-base;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue
new file mode 100644
index 0000000000000..69ed4acda3d68
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue
@@ -0,0 +1,96 @@
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRouter } from 'dashboard/composables/route';
+import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
+import CustomRoleListItem from './CustomRoleTableBody.vue';
+
+const dummyCustomRolesData = [
+  {
+    name: 'All Permissions',
+    description: 'All permissions',
+    permissions: [
+      'conversation_manage',
+      'conversation_participating_manage',
+      'conversation_unassigned_manage',
+      'contact_manage',
+      'report_manage',
+      'knowledge_base_manage',
+    ],
+  },
+  {
+    name: 'Conversation Permissions',
+    description: 'Conversation permissions',
+    permissions: [
+      'conversation_manage',
+      'conversation_participating_manage',
+      'conversation_unassigned_manage',
+    ],
+  },
+  {
+    name: 'Contact Permissions',
+    description: 'Contact permissions',
+    permissions: ['contact_manage'],
+  },
+  {
+    name: 'Report Permissions',
+    description: 'Report permissions',
+    permissions: ['report_manage'],
+  },
+];
+
+const router = useRouter();
+
+const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
+
+const currentUser = useMapGetter('getCurrentUser');
+const currentAccountId = useMapGetter('getCurrentAccountId');
+
+const isSuperAdmin = computed(() => {
+  return currentUser.value.type === 'SuperAdmin';
+});
+const i18nKey = computed(() =>
+  isOnChatwootCloud.value ? 'PAYWALL' : 'ENTERPRISE_PAYWALL'
+);
+
+const goToBillingSettings = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: currentAccountId.value },
+  });
+};
+</script>
+
+<template>
+  <div class="w-full min-h-[12rem] relative">
+    <div class="w-full space-y-3 text-sm">
+      <thead class="opacity-30 dark:opacity-30">
+        <th
+          v-for="thHeader in $t('CUSTOM_ROLE.LIST.TABLE_HEADER')"
+          :key="thHeader"
+          class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+        >
+          <span class="mb-0">
+            {{ thHeader }}
+          </span>
+        </th>
+      </thead>
+      <CustomRoleListItem
+        class="opacity-25 dark:opacity-20"
+        :roles="dummyCustomRolesData"
+        :loading="{}"
+      />
+    </div>
+    <div
+      class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
+    >
+      <BasePaywallModal
+        feature-prefix="CUSTOM_ROLE"
+        :i18n-key="i18nKey"
+        :is-on-chatwoot-cloud="isOnChatwootCloud"
+        :is-super-admin="isSuperAdmin"
+        @click="goToBillingSettings"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
new file mode 100644
index 0000000000000..a04f2f8cb7bc0
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { useI18n } from 'dashboard/composables/useI18n';
+import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
+
+defineProps({
+  roles: {
+    type: Array,
+    required: true,
+  },
+  loading: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const { t } = useI18n();
+
+const getFormattedPermissions = role => {
+  return role.permissions
+    .map(event => t(getI18nKey('CUSTOM_ROLE.PERMISSIONS', event)))
+    .join(', ');
+};
+</script>
+
+<template>
+  <tbody
+    class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+  >
+    <tr v-for="(customRole, index) in roles" :key="index">
+      <td
+        class="max-w-xs py-4 pr-4 font-medium truncate align-baseline"
+        :title="customRole.name"
+      >
+        {{ customRole.name }}
+      </td>
+      <td class="py-4 pr-4 whitespace-normal align-baseline md:break-words">
+        {{ customRole.description }}
+      </td>
+      <td class="py-4 pr-4 whitespace-normal align-baseline md:break-words">
+        {{ getFormattedPermissions(customRole) }}
+      </td>
+      <td class="flex justify-end gap-1 py-4">
+        <woot-button
+          v-tooltip.top="$t('CUSTOM_ROLE.EDIT.BUTTON_TEXT')"
+          variant="smooth"
+          size="tiny"
+          color-scheme="secondary"
+          class-names="grey-btn"
+          icon="edit"
+          @click="emit('edit', customRole)"
+        />
+        <woot-button
+          v-tooltip.top="$t('CUSTOM_ROLE.DELETE.BUTTON_TEXT')"
+          variant="smooth"
+          color-scheme="alert"
+          size="tiny"
+          icon="dismiss-circle"
+          class-names="grey-btn"
+          :is-loading="loading[customRole.id]"
+          @click="emit('delete', customRole)"
+        />
+      </td>
+    </tr>
+  </tbody>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js b/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
new file mode 100644
index 0000000000000..623a0081aabc7
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
@@ -0,0 +1,27 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
+const CustomRolesHome = () => import('./Index.vue');
+
+export default {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/settings/custom-roles'),
+      component: SettingsWrapper,
+      children: [
+        {
+          path: '',
+          redirect: 'list',
+        },
+        {
+          path: 'list',
+          name: 'custom_roles_list',
+          meta: {
+            permissions: ['administrator'],
+          },
+          component: CustomRolesHome,
+        },
+      ],
+    },
+  ],
+};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/helper/settingsHelper.js b/app/javascript/dashboard/routes/dashboard/settings/helper/settingsHelper.js
new file mode 100644
index 0000000000000..1da2bd54f02b1
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/helper/settingsHelper.js
@@ -0,0 +1,4 @@
+export const getI18nKey = (prefix, event) => {
+  const eventName = event.toUpperCase();
+  return `${prefix}.${eventName}`;
+};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/helper/spec/settingsHelper.spec.js b/app/javascript/dashboard/routes/dashboard/settings/helper/spec/settingsHelper.spec.js
new file mode 100644
index 0000000000000..e7d86eb520c4f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/helper/spec/settingsHelper.spec.js
@@ -0,0 +1,30 @@
+import { getI18nKey } from '../settingsHelper';
+
+describe('settingsHelper', () => {
+  describe('getI18nKey', () => {
+    it('should return the correct i18n key', () => {
+      const prefix = 'CUSTOM_ROLE.PERMISSIONS';
+      const event = 'conversation_manage';
+      const expectedKey = 'CUSTOM_ROLE.PERMISSIONS.CONVERSATION_MANAGE';
+
+      expect(getI18nKey(prefix, event)).toBe(expectedKey);
+    });
+
+    it('should handle different prefixes', () => {
+      const prefix = 'INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS';
+      const event = 'message_created';
+      const expectedKey =
+        'INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.MESSAGE_CREATED';
+
+      expect(getI18nKey(prefix, event)).toBe(expectedKey);
+    });
+
+    it('should convert event to uppercase', () => {
+      const prefix = 'TEST_PREFIX';
+      const event = 'lowercaseEvent';
+      const expectedKey = 'TEST_PREFIX.LOWERCASEEVENT';
+
+      expect(getI18nKey(prefix, event)).toBe(expectedKey);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index c7c7a2a4414a6..895d113604d26 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -1,219 +1,177 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
 import { useAlert } from 'dashboard/composables';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useAccount } from 'dashboard/composables/useAccount';
-import Settings from './Settings.vue';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import { computed, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import ChannelName from './components/ChannelName.vue';
 
-export default {
-  components: {
-    Settings,
-  },
-  mixins: [globalConfigMixin],
-  setup() {
-    const { isAdmin } = useAdmin();
-    const { accountScopedUrl } = useAccount();
-    return {
-      isAdmin,
-      accountScopedUrl,
-    };
-  },
-  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'));
-      }
-    },
+const getters = useStoreGetters();
+const store = useStore();
+const { t } = useI18n();
+const { isAdmin } = useAdmin();
 
-    confirmDeletion() {
-      this.deleteInbox(this.selectedInbox);
-      this.closeDelete();
-    },
-    openDelete(inbox) {
-      this.showDeletePopup = true;
-      this.selectedInbox = inbox;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedInbox = {};
-    },
-  },
+const showDeletePopup = ref(false);
+const selectedInbox = ref({});
+
+const inboxesList = computed(() => getters['inboxes/getInboxes'].value);
+const uiFlags = computed(() => getters['inboxes/getUIFlags'].value);
+
+const deleteConfirmText = computed(
+  () => `${t('INBOX_MGMT.DELETE.CONFIRM.YES')} ${selectedInbox.value.name}`
+);
+
+const deleteRejectText = computed(
+  () => `${t('INBOX_MGMT.DELETE.CONFIRM.NO')} ${selectedInbox.value.name}`
+);
+
+const confirmDeleteMessage = computed(
+  () => `${t('INBOX_MGMT.DELETE.CONFIRM.MESSAGE')} ${selectedInbox.value.name}?`
+);
+const confirmPlaceHolderText = computed(
+  () =>
+    `${t('INBOX_MGMT.DELETE.CONFIRM.PLACE_HOLDER', {
+      inboxName: selectedInbox.value.name,
+    })}`
+);
+
+const deleteInbox = async ({ id }) => {
+  try {
+    await store.dispatch('inboxes/delete', id);
+    useAlert(t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
+  }
+};
+const closeDelete = () => {
+  showDeletePopup.value = false;
+  selectedInbox.value = {};
+};
+
+const confirmDeletion = () => {
+  deleteInbox(selectedInbox.value);
+  closeDelete();
+};
+const openDelete = inbox => {
+  showDeletePopup.value = true;
+  selectedInbox.value = inbox;
 };
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto">
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full lg:w-3/5">
-        <p
-          v-if="!inboxesList.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('INBOX_MGMT.LIST.404') }}
+  <SettingsLayout
+    :no-records-found="!inboxesList.length"
+    :no-records-message="$t('INBOX_MGMT.LIST.404')"
+    :is-loading="uiFlags.isFetching"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('INBOX_MGMT.HEADER')"
+        :description="$t('INBOX_MGMT.DESCRIPTION')"
+        :link-text="$t('INBOX_MGMT.LEARN_MORE')"
+        feature-name="inboxes"
+      >
+        <template #actions>
           <router-link
             v-if="isAdmin"
-            :to="accountScopedUrl('settings/inboxes/new')"
+            class="button nice rounded-md"
+            :to="{ name: 'settings_inbox_new' }"
           >
+            <fluent-icon icon="add-circle" />
             {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
           </router-link>
-        </p>
-
-        <table v-if="inboxesList.length" class="woot-table">
-          <tbody>
-            <tr v-for="item in inboxesList" :key="item.id">
-              <td>
-                <img
-                  v-if="item.avatar_url"
-                  class="woot-thumbnail"
-                  :src="item.avatar_url"
-                  alt="No Page Image"
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <table
+        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
+      >
+        <tbody
+          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
+        >
+          <tr v-for="inbox in inboxesList" :key="inbox.id">
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
+              <div class="flex items-center flex-row gap-4">
+                <Thumbnail
+                  v-if="inbox.avatar_url"
+                  class="bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
+                  :src="inbox.avatar_url"
+                  :username="inbox.name"
+                  size="48px"
                 />
-                <img
+                <div
                   v-else
-                  class="woot-thumbnail"
-                  src="~dashboard/assets/images/flag.svg"
-                  alt="No Page Image"
-                />
-              </td>
-              <!-- Short Code  -->
-              <td>
-                <span class="agent-name">{{ item.name }}</span>
-                <span v-if="item.channel_type === 'Channel::FacebookPage'">
-                  {{ 'Facebook' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::WebWidget'">
-                  {{ 'Website' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::TwitterProfile'">
-                  {{ 'Twitter' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::TwilioSms'">
-                  {{ twilioChannelName(item) }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Whatsapp'">
-                  {{ 'Whatsapp' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Sms'">
-                  {{ 'Sms' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Email'">
-                  {{ 'Email' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Telegram'">
-                  {{ 'Telegram' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Line'">
-                  {{ 'Line' }}
-                </span>
-                <span v-if="item.channel_type === 'Channel::Api'">
-                  {{ globalConfig.apiChannelName || 'API' }}
-                </span>
-              </td>
-
-              <!-- Action Buttons -->
-              <td>
-                <div class="button-wrapper">
-                  <router-link
-                    :to="accountScopedUrl(`settings/inboxes/${item.id}`)"
+                  class="w-12 h-12 bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm block"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="32"
+                    height="32"
+                    viewBox="0 0 24 24"
+                    class="opacity-80 p-1"
                   >
-                    <woot-button
-                      v-if="isAdmin"
-                      v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
-                      variant="smooth"
-                      size="tiny"
-                      icon="settings"
-                      color-scheme="secondary"
-                      class-names="grey-btn"
+                    <path
+                      fill="currentColor"
+                      d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12"
+                      opacity=".35"
                     />
-                  </router-link>
+                    <path
+                      fill="currentColor"
+                      d="M2.61 21.389c1.612 1.61 4.205 1.61 9.39 1.61s7.778 0 9.39-1.61c1.492-1.493 1.601-3.829 1.61-8.29h-3.476c-.996 0-1.494 0-1.931.202c-.438.201-.762.58-1.41 1.335l-.666.777c-.648.756-.972 1.134-1.41 1.335s-.935.202-1.93.202h-.353c-.996 0-1.494 0-1.931-.202c-.438-.2-.762-.579-1.41-1.335l-.666-.777c-.648-.756-.972-1.134-1.41-1.335s-.935-.201-1.93-.201H1c.008 4.46.118 6.796 1.61 8.289"
+                    />
+                  </svg>
+                </div>
+                <div>
+                  <span class="block font-medium capitalize">
+                    {{ inbox.name }}
+                  </span>
+                  <ChannelName
+                    :channel-type="inbox.channel_type"
+                    :medium="inbox.medium"
+                  />
+                </div>
+              </div>
+            </td>
 
+            <td class="py-4">
+              <div class="flex gap-1 justify-end">
+                <router-link
+                  :to="{
+                    name: 'settings_inbox_show',
+                    params: { inboxId: inbox.id },
+                  }"
+                >
                   <woot-button
                     v-if="isAdmin"
-                    v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
+                    v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
                     variant="smooth"
-                    color-scheme="alert"
                     size="tiny"
+                    icon="settings"
+                    color-scheme="secondary"
                     class-names="grey-btn"
-                    :is-loading="loading[item.id]"
-                    icon="dismiss-circle"
-                    @click="openDelete(item)"
                   />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+                </router-link>
 
-      <div class="hidden w-1/3 lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('INBOX_MGMT.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-    <Settings
-      v-if="showSettings"
-      :show.sync="showSettings"
-      :on-close="closeSettings"
-      :inbox="selectedInbox"
-    />
+                <woot-button
+                  v-if="isAdmin"
+                  v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
+                  variant="smooth"
+                  color-scheme="alert"
+                  size="tiny"
+                  class-names="grey-btn"
+                  icon="dismiss-circle"
+                  @click="openDelete(inbox)"
+                />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
 
     <woot-confirm-delete-modal
       v-if="showDeletePopup"
@@ -227,5 +185,5 @@ export default {
       @onConfirm="confirmDeletion"
       @onClose="closeDelete"
     />
-  </div>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue
new file mode 100644
index 0000000000000..68b8d96a79642
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed } from 'vue';
+
+const props = defineProps({
+  channelType: {
+    type: String,
+    required: true,
+  },
+  medium: {
+    type: String,
+    default: '',
+  },
+});
+const getters = useStoreGetters();
+const { t } = useI18n();
+const globalConfig = computed(() => getters['globalConfig/get'].value);
+
+const i18nMap = {
+  'Channel::FacebookPage': 'MESSENGER',
+  'Channel::WebWidget': 'WEB_WIDGET',
+  'Channel::TwitterProfile': 'TWITTER_PROFILE',
+  'Channel::TwilioSms': 'TWILIO_SMS',
+  'Channel::Whatsapp': 'WHATSAPP',
+  'Channel::Sms': 'SMS',
+  'Channel::Email': 'EMAIL',
+  'Channel::Telegram': 'TELEGRAM',
+  'Channel::Line': 'LINE',
+  'Channel::Api': 'API',
+};
+
+const twilioChannelName = () => {
+  if (props.medium === 'whatsapp') {
+    return t(`INBOX_MGMT.CHANNELS.WHATSAPP`);
+  }
+  return t(`INBOX_MGMT.CHANNELS.TWILIO_SMS`);
+};
+
+const readableChannelName = computed(() => {
+  if (props.channelType === 'Channel::Api') {
+    return globalConfig.value.apiChannelName || t('INBOX_MGMT.CHANNELS.API');
+  }
+  if (props.channelType === 'Channel::TwilioSms') {
+    return twilioChannelName();
+  }
+  return t(`INBOX_MGMT.CHANNELS.${i18nMap[props.channelType]}`);
+});
+</script>
+
+<template>
+  <span>
+    {{ readableChannelName }}
+  </span>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
index 3866b96bd9e15..a12202e29eb70 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -1,8 +1,8 @@
-/* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../../helper/URLHelper';
 import channelFactory from './channel-factory';
 
 const SettingsContent = () => import('../Wrapper.vue');
+const SettingWrapper = () => import('../SettingsWrapper.vue');
 const InboxHome = () => import('./Index.vue');
 const Settings = () => import('./Settings.vue');
 const InboxChannel = () => import('./InboxChannels.vue');
@@ -14,17 +14,7 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/inboxes'),
-      component: SettingsContent,
-      props: params => {
-        const showBackButton = params.name !== 'settings_inbox_list';
-        return {
-          headerTitle: 'INBOX_MGMT.HEADER',
-          headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
-          icon: 'mail-inbox-all',
-          newButtonRoutes: ['settings_inbox_list'],
-          showBackButton,
-        };
-      },
+      component: SettingWrapper,
       children: [
         {
           path: '',
@@ -38,6 +28,22 @@ export default {
             permissions: ['administrator'],
           },
         },
+      ],
+    },
+    {
+      path: frontendURL('accounts/:accountId/settings/inboxes'),
+      component: SettingsContent,
+      props: params => {
+        const showBackButton = params.name !== 'settings_inbox_list';
+        return {
+          headerTitle: 'INBOX_MGMT.HEADER',
+          headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
+          icon: 'mail-inbox-all',
+          newButtonRoutes: ['settings_inbox_list'],
+          showBackButton,
+        };
+      },
+      children: [
         {
           path: 'new',
           component: InboxChannel,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index ad2daa5f32fb3..0f8b9155e99fd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -2,7 +2,7 @@
 import { isEmptyObject } from '../../../../helper/commons';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import hookMixin from './hookMixin';
+import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import NewHook from './NewHook.vue';
 import SingleIntegrationHooks from './SingleIntegrationHooks.vue';
 import MultipleIntegrationHooks from './MultipleIntegrationHooks.vue';
@@ -13,13 +13,28 @@ export default {
     SingleIntegrationHooks,
     MultipleIntegrationHooks,
   },
-  mixins: [hookMixin],
   props: {
     integrationId: {
       type: [String, Number],
       required: true,
     },
   },
+  setup(props) {
+    const { integrationId } = props;
+
+    const {
+      integration,
+      isIntegrationMultiple,
+      isIntegrationSingle,
+      isHookTypeInbox,
+    } = useIntegrationHook(integrationId);
+    return {
+      integration,
+      isIntegrationMultiple,
+      isIntegrationSingle,
+      isHookTypeInbox,
+    };
+  },
   data() {
     return {
       loading: {},
@@ -31,23 +46,9 @@ export default {
   },
   computed: {
     ...mapGetters({ uiFlags: 'integrations/getUIFlags' }),
-    integration() {
-      return this.$store.getters['integrations/getIntegration'](
-        this.integrationId
-      );
-    },
     showIntegrationHooks() {
       return !this.uiFlags.isFetching && !isEmptyObject(this.integration);
     },
-    integrationType() {
-      return this.integration.allow_multiple_hooks ? 'multiple' : 'single';
-    },
-    isIntegrationMultiple() {
-      return this.integrationType === 'multiple';
-    },
-    isIntegrationSingle() {
-      return this.integrationType === 'single';
-    },
     showAddButton() {
       return this.showIntegrationHooks && this.isIntegrationMultiple;
     },
@@ -120,14 +121,14 @@ export default {
     <div v-if="showIntegrationHooks" class="w-full">
       <div v-if="isIntegrationMultiple">
         <MultipleIntegrationHooks
-          :integration="integration"
+          :integration-id="integrationId"
           @delete="openDeletePopup"
         />
       </div>
 
       <div v-if="isIntegrationSingle">
         <SingleIntegrationHooks
-          :integration="integration"
+          :integration-id="integrationId"
           @add="openAddHookModal"
           @delete="openDeletePopup"
         />
@@ -135,7 +136,7 @@ export default {
     </div>
 
     <woot-modal :show.sync="showAddHookModal" :on-close="hideAddHookModal">
-      <NewHook :integration="integration" @close="hideAddHookModal" />
+      <NewHook :integration-id="integrationId" @close="hideAddHookModal" />
     </woot-modal>
 
     <woot-delete-modal
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
index 38deab6348881..e80c8fa2b0c18 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
@@ -1,14 +1,18 @@
 <script>
 import { mapGetters } from 'vuex';
-import hookMixin from './hookMixin';
+import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 export default {
-  mixins: [hookMixin],
   props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
+    integrationId: {
+      type: String,
+      required: true,
     },
   },
+  setup(props) {
+    const { integration, isHookTypeInbox, hasConnectedHooks } =
+      useIntegrationHook(props.integrationId);
+    return { integration, isHookTypeInbox, hasConnectedHooks };
+  },
   computed: {
     ...mapGetters({
       globalConfig: 'globalConfig/get',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
index afaf059a6a648..93526859250d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
@@ -2,16 +2,22 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import hookMixin from './hookMixin';
+import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 
 export default {
-  mixins: [hookMixin],
   props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
+    integrationId: {
+      type: String,
+      required: true,
     },
   },
+  setup(props) {
+    const { integration, isHookTypeInbox } = useIntegrationHook(
+      props.integrationId
+    );
+
+    return { integration, isHookTypeInbox };
+  },
   data() {
     return {
       endPoint: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index 45ea831684d77..cd17058c3cda1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,13 +1,18 @@
 <script>
-import hookMixin from './hookMixin';
+import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 export default {
-  mixins: [hookMixin],
   props: {
-    integration: {
-      type: Object,
-      default: () => ({}),
+    integrationId: {
+      type: String,
+      required: true,
     },
   },
+  setup(props) {
+    const { integration, hasConnectedHooks } = useIntegrationHook(
+      props.integrationId
+    );
+    return { integration, hasConnectedHooks };
+  },
 };
 </script>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
index ac090a2d5c7c6..d82adda9d83ed 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Integration from './Integration.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SelectChannelWarning from './Slack/SelectChannelWarning.vue';
 import SlackIntegrationHelpText from './Slack/SlackIntegrationHelpText.vue';
 import Spinner from 'shared/components/Spinner.vue';
@@ -13,7 +12,7 @@ export default {
     SelectChannelWarning,
     SlackIntegrationHelpText,
   },
-  mixins: [globalConfigMixin, messageFormatterMixin],
+  mixins: [globalConfigMixin],
   props: {
     code: { type: String, default: '' },
   },
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 00ad15bbfe6a3..8267a6c52c091 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -2,16 +2,22 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 export default {
-  mixins: [globalConfigMixin, messageFormatterMixin],
+  mixins: [globalConfigMixin],
   props: {
     hasConnectedAChannel: {
       type: Boolean,
       default: true,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   data() {
     return { selectedChannelId: '', availableChannels: [] };
   },
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 e1db3c30b35ab..ee6cad7e21822 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
@@ -1,13 +1,18 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 export default {
-  mixins: [messageFormatterMixin],
   props: {
     selectedChannelName: {
       type: String,
       required: true,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
 };
 </script>
 
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 e9ec855dc4865..23d0baa9cc992 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -3,16 +3,18 @@ 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';
+import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../../SettingsLayout.vue';
 
 export default {
   components: {
+    SettingsLayout,
+    BaseSettingsHeader,
     NewWebhook,
     EditWebhook,
     WebhookRow,
   },
-  mixins: [globalConfigMixin],
   data() {
     return {
       loading: {},
@@ -26,8 +28,10 @@ export default {
     ...mapGetters({
       records: 'webhooks/getWebhooks',
       uiFlags: 'webhooks/getUIFlags',
-      globalConfig: 'globalConfig/get',
     }),
+    integration() {
+      return this.$store.getters['integrations/getIntegration']('webhook');
+    },
   },
   mounted() {
     this.$store.dispatch('webhooks/get');
@@ -75,69 +79,59 @@ 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('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
-    </woot-button>
-
-    <div class="flex flex-row gap-4">
-      <div class="w-full lg:w-3/5">
-        <p
-          v-if="!uiFlags.fetchingList && !records.length"
-          class="flex flex-col items-center justify-center h-full"
-        >
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
-        </p>
-        <woot-loading-state
-          v-if="uiFlags.fetchingList"
-          :message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
-        />
-
-        <table
-          v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table"
+  <SettingsLayout
+    :is-loading="uiFlags.fetchingList"
+    :loading-message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
+    :no-records-message="$t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404')"
+    :no-records-found="!records.length"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        v-if="integration.name"
+        :title="integration.name"
+        :description="integration.description"
+        :link-text="$t('INTEGRATION_SETTINGS.WEBHOOK.LEARN_MORE')"
+        feature-name="webhook"
+        :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
+      >
+        <template #actions>
+          <woot-button
+            class="button nice rounded-md"
+            icon="add-circle"
+            @click="openAddPopup"
+          >
+            {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
+          </woot-button>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+        <thead>
+          <th
+            v-for="thHeader in $t(
+              'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
+            )"
+            :key="thHeader"
+            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300 last:text-right last:pr-4"
+          >
+            {{ thHeader }}
+          </th>
+        </thead>
+        <tbody
+          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
         >
-          <thead>
-            <th
-              v-for="thHeader in $t(
-                'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
-              )"
-              :key="thHeader"
-              class="last:text-right"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <WebhookRow
-              v-for="(webHookItem, index) in records"
-              :key="webHookItem.id"
-              :index="index"
-              :webhook="webHookItem"
-              @edit="openEditPopup"
-              @delete="openDeletePopup"
-            />
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-
+          <WebhookRow
+            v-for="(webHookItem, index) in records"
+            :key="webHookItem.id"
+            :index="index"
+            :webhook="webHookItem"
+            @edit="openEditPopup"
+            @delete="openDeletePopup"
+          />
+        </tbody>
+      </table>
+    </template>
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
       <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
     </woot-modal>
@@ -163,5 +157,5 @@ export default {
       :confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
       :reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
     />
-  </div>
+  </SettingsLayout>
 </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 d399adbdd6f24..1eca600150fd8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
@@ -1,8 +1,8 @@
 <script>
 import { useVuelidate } from '@vuelidate/core';
 import { required, url, minLength } from '@vuelidate/validators';
-import webhookMixin from './webhookMixin';
 import wootConstants from 'dashboard/constants/globals';
+import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 
 const { EXAMPLE_WEBHOOK_URL } = wootConstants;
 
@@ -18,7 +18,6 @@ const SUPPORTED_WEBHOOK_EVENTS = [
 ];
 
 export default {
-  mixins: [webhookMixin],
   props: {
     value: {
       type: Object,
@@ -70,6 +69,7 @@ export default {
         subscriptions: this.subscriptions,
       });
     },
+    getI18nKey,
   },
 };
 </script>
@@ -105,16 +105,23 @@ export default {
             type="checkbox"
             :value="event"
             name="subscriptions"
-            class="checkbox"
+            class="mr-2"
           />
           <label :for="event" class="text-sm">
-            {{ `${getEventLabel(event)} (${event})` }}
+            {{
+              `${$t(
+                getI18nKey(
+                  'INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS',
+                  event
+                )
+              )} (${event})`
+            }}
           </label>
         </div>
       </div>
     </div>
 
-    <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+    <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
       <div class="w-full">
         <woot-button
           :disabled="v$.$invalid || isSubmitting"
@@ -129,9 +136,3 @@ export default {
     </div>
   </form>
 </template>
-
-<style lang="scss" scoped>
-.checkbox {
-  @apply mr-2;
-}
-</style>
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 20e6d6c1a08f2..03bcc8884b796 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -1,59 +1,67 @@
-<script>
-import webhookMixin from './webhookMixin';
+<script setup>
+import { computed } from 'vue';
+import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
+import { useI18n } from 'dashboard/composables/useI18n';
 
-export default {
-  components: { ShowMore },
-  mixins: [webhookMixin],
-  props: {
-    webhook: {
-      type: Object,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
+const props = defineProps({
+  webhook: {
+    type: Object,
+    required: true,
   },
-  computed: {
-    subscribedEvents() {
-      const { subscriptions } = this.webhook;
-      return subscriptions.map(event => this.getEventLabel(event)).join(', ');
-    },
+  index: {
+    type: Number,
+    required: true,
   },
-};
+});
+const { t } = useI18n();
+const subscribedEvents = computed(() => {
+  const { subscriptions } = props.webhook;
+  return subscriptions
+    .map(event =>
+      t(
+        getI18nKey(
+          'INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS',
+          event
+        )
+      )
+    )
+    .join(', ');
+});
 </script>
 
 <template>
-  <tr class="space-x-2">
-    <td class="max-w-2xl">
+  <tr>
+    <td class="py-4 ltr:pr-4 rtl:pl-4">
       <div class="font-medium break-words text-slate-700 dark:text-slate-100">
         {{ webhook.url }}
       </div>
-      <span class="text-xs text-slate-500 dark:text-slate-400">
+      <div class="block mt-1 text-sm text-slate-500 dark:text-slate-400">
         <span class="font-medium">
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
         </span>
         <ShowMore :text="subscribedEvents" :limit="60" />
-      </span>
+      </div>
     </td>
-    <td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
-      <woot-button
-        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
-        variant="smooth"
-        size="tiny"
-        color-scheme="secondary"
-        icon="edit"
-        @click="$emit('edit', webhook)"
-      />
-      <woot-button
-        v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="dismiss-circle"
-        @click="$emit('delete', webhook, index)"
-      />
+    <td class="py-4 min-w-xs">
+      <div class="flex justify-end gap-1">
+        <woot-button
+          v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
+          variant="smooth"
+          size="tiny"
+          color-scheme="secondary"
+          icon="edit"
+          @click="$emit('edit', webhook)"
+        />
+        <woot-button
+          v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
+          variant="smooth"
+          color-scheme="alert"
+          size="tiny"
+          icon="dismiss-circle"
+          @click="$emit('delete', webhook, index)"
+        />
+      </div>
     </td>
   </tr>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/specs/webhookMixin.spec.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/specs/webhookMixin.spec.js
deleted file mode 100644
index c617b64b0db09..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/specs/webhookMixin.spec.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createWrapper } from '@vue/test-utils';
-import webhookMixin from '../webhookMixin';
-import Vue from 'vue';
-
-describe('webhookMixin', () => {
-  describe('#getEventLabel', () => {
-    it('returns correct i18n translation:', () => {
-      const Component = {
-        render() {},
-        title: 'WebhookComponent',
-        mixins: [webhookMixin],
-        methods: {
-          $t(text) {
-            return text;
-          },
-        },
-      };
-      const Constructor = Vue.extend(Component);
-      const vm = new Constructor().$mount();
-      const wrapper = createWrapper(vm);
-      expect(wrapper.vm.getEventLabel('message_created')).toEqual(
-        `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.MESSAGE_CREATED`
-      );
-    });
-  });
-});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/webhookMixin.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/webhookMixin.js
deleted file mode 100644
index 38283fe90f863..0000000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/webhookMixin.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default {
-  methods: {
-    getEventLabel(event) {
-      const eventName = event.toUpperCase();
-      return this.$t(
-        `INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.EVENTS.${eventName}`
-      );
-    },
-  },
-};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index c4d31917352d4..8a4937dd4b726 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -30,6 +30,14 @@ export default {
             permissions: ['administrator'],
           },
         },
+        {
+          path: 'webhook',
+          component: Webhook,
+          name: 'settings_integrations_webhook',
+          meta: {
+            permissions: ['administrator'],
+          },
+        },
       ],
     },
     {
@@ -49,14 +57,6 @@ export default {
         };
       },
       children: [
-        {
-          path: 'webhook',
-          component: Webhook,
-          name: 'settings_integrations_webhook',
-          meta: {
-            permissions: ['administrator'],
-          },
-        },
         {
           path: 'slack',
           name: 'settings_integrations_slack',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 5217f0199455c..195f0e2f5c564 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -1,117 +1,112 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
 import { useAlert } from 'dashboard/composables';
-import { useAccount } from 'dashboard/composables/useAccount';
 import MacrosTableRow from './MacrosTableRow.vue';
-export default {
-  components: {
-    MacrosTableRow,
-  },
-  setup() {
-    const { accountScopedUrl } = useAccount();
-    return {
-      accountScopedUrl,
-    };
-  },
-  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'));
-      }
-    },
-  },
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+
+const getters = useStoreGetters();
+const store = useStore();
+const { t } = useI18n();
+
+const showDeleteConfirmationPopup = ref(false);
+const selectedMacro = ref({});
+
+const records = computed(() => getters['macros/getMacros'].value);
+const uiFlags = computed(() => getters['macros/getUIFlags'].value);
+
+const deleteMessage = computed(() => ` ${selectedMacro.value.name}?`);
+
+onMounted(() => {
+  store.dispatch('macros/get');
+});
+
+const deleteMacro = async id => {
+  try {
+    await store.dispatch('macros/delete', id);
+    useAlert(t('MACROS.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('MACROS.DELETE.API.ERROR_MESSAGE'));
+  }
+};
+
+const openDeletePopup = response => {
+  showDeleteConfirmationPopup.value = true;
+  selectedMacro.value = response;
+};
+
+const closeDeletePopup = () => {
+  showDeleteConfirmationPopup.value = false;
+};
+
+const confirmDeletion = () => {
+  closeDeletePopup();
+  deleteMacro(selectedMacro.value.id);
 };
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto">
-    <router-link
-      :to="accountScopedUrl('settings/macros/new')"
-      class="button success button--fixed-top button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
-    >
-      <fluent-icon icon="add-circle" />
-      <span class="button__content">
-        {{ $t('MACROS.HEADER_BTN_TXT') }}
-      </span>
-    </router-link>
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full lg:w-3/5">
-        <div v-if="!uiFlags.isFetching && !records.length" class="p-3">
-          <p class="flex flex-col items-center justify-center h-full">
-            {{ $t('MACROS.LIST.404') }}
-          </p>
-        </div>
-        <woot-loading-state
-          v-if="uiFlags.isFetching"
-          :message="$t('MACROS.LOADING')"
-        />
-        <table v-if="!uiFlags.isFetching && records.length" class="woot-table">
-          <thead>
-            <th
-              v-for="thHeader in $t('MACROS.LIST.TABLE_HEADER')"
-              :key="thHeader"
-            >
-              {{ thHeader }}
-            </th>
-          </thead>
-          <tbody>
-            <MacrosTableRow
-              v-for="(macro, index) in records"
-              :key="index"
-              :macro="macro"
-              @delete="openDeletePopup(macro, index)"
-            />
-          </tbody>
-        </table>
-      </div>
-      <div class="hidden w-1/3 lg:block">
-        <span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
-      </div>
-    </div>
-    <woot-delete-modal
-      :show.sync="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
-      :message="$t('MACROS.DELETE.CONFIRM.MESSAGE')"
-      :message-value="deleteMessage"
-      :confirm-text="$t('MACROS.DELETE.CONFIRM.YES')"
-      :reject-text="$t('MACROS.DELETE.CONFIRM.NO')"
-    />
-  </div>
+  <SettingsLayout
+    :no-records-message="$t('MACROS.LIST.404')"
+    :no-records-found="!records.length"
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('MACROS.LOADING')"
+    feature-name="macros"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('MACROS.HEADER')"
+        :description="$t('MACROS.DESCRIPTION')"
+        :link-text="$t('MACROS.LEARN_MORE')"
+        feature-name="macros"
+      >
+        <template #actions>
+          <router-link
+            :to="{ name: 'macros_new' }"
+            class="button rounded-md primary"
+          >
+            <fluent-icon icon="add-circle" />
+            <span class="button__content">
+              {{ $t('MACROS.HEADER_BTN_TXT') }}
+            </span>
+          </router-link>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+        <thead>
+          <th
+            v-for="thHeader in $t('MACROS.LIST.TABLE_HEADER')"
+            :key="thHeader"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+          >
+            {{ thHeader }}
+          </th>
+        </thead>
+        <tbody
+          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+        >
+          <MacrosTableRow
+            v-for="(macro, index) in records"
+            :key="index"
+            :macro="macro"
+            @delete="openDeletePopup(macro)"
+          />
+        </tbody>
+      </table>
+      <woot-delete-modal
+        :show.sync="showDeleteConfirmationPopup"
+        :on-close="closeDeletePopup"
+        :on-confirm="confirmDeletion"
+        :title="$t('LABEL_MGMT.DELETE.CONFIRM.TITLE')"
+        :message="$t('MACROS.DELETE.CONFIRM.MESSAGE')"
+        :message-value="deleteMessage"
+        :confirm-text="$t('MACROS.DELETE.CONFIRM.YES')"
+        :reject-text="$t('MACROS.DELETE.CONFIRM.NO')"
+      />
+    </template>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
index 6eee853ead347..d79024adcb3dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -1,59 +1,56 @@
-<script>
-import { useAccount } from 'dashboard/composables/useAccount';
+<script setup>
+import { computed } from 'vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    macro: {
-      type: Object,
-      required: true,
-    },
-  },
-  setup() {
-    const { accountScopedUrl } = useAccount();
+import { useI18n } from 'dashboard/composables/useI18n';
 
-    return {
-      accountScopedUrl,
-    };
+const props = defineProps({
+  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');
-    },
-  },
-};
+});
+defineEmits(['delete']);
+const { t } = useI18n();
+
+const createdByName = computed(() => {
+  const createdBy = props.macro.created_by;
+  return createdBy.available_name ?? createdBy.email ?? '';
+});
+
+const updatedByName = computed(() => {
+  const updatedBy = props.macro.updated_by;
+  return updatedBy.available_name ?? updatedBy.email ?? '';
+});
+
+const visibilityLabel = computed(() => {
+  const i18nKey =
+    props.macro.visibility === 'global'
+      ? 'MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL'
+      : 'MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL';
+  return t(i18nKey);
+});
 </script>
 
 <template>
   <tr>
-    <td>{{ macro.name }}</td>
-    <td>
-      <div v-if="macro.created_by" class="avatar-container">
+    <td class="py-4 ltr:pr-4 rtl:pl-4 truncate">{{ macro.name }}</td>
+    <td class="py-4 ltr:pr-4 rtl:pl-4">
+      <div v-if="macro.created_by" class="flex items-center">
         <Thumbnail :username="createdByName" size="24px" />
-        <span>{{ createdByName }}</span>
+        <span class="mx-2">{{ createdByName }}</span>
       </div>
+      <div v-else>--</div>
     </td>
-    <td>
-      <div v-if="macro.updated_by" class="avatar-container">
+    <td class="py-4 ltr:pr-4 rtl:pl-4">
+      <div v-if="macro.updated_by" class="flex items-center">
         <Thumbnail :username="updatedByName" size="24px" />
-        <span>{{ updatedByName }}</span>
+        <span class="mx-2">{{ updatedByName }}</span>
       </div>
+      <div v-else>--</div>
     </td>
-    <td>{{ visibilityLabel }}</td>
-    <td class="button-wrapper">
-      <router-link :to="accountScopedUrl(`settings/macros/${macro.id}/edit`)">
+    <td class="py-4 ltr:pr-4 rtl:pl-4">{{ visibilityLabel }}</td>
+    <td class="py-4 flex justify-end gap-1">
+      <router-link :to="{ name: 'macros_edit', params: { macroId: macro.id } }">
         <woot-button
           v-tooltip.top="$t('MACROS.EDIT.TOOLTIP')"
           variant="smooth"
@@ -75,15 +72,3 @@ export default {
     </td>
   </tr>
 </template>
-
-<style scoped lang="scss">
-.avatar-container {
-  display: flex;
-  align-items: center;
-
-  span {
-    margin-left: var(--space-small);
-    margin-right: var(--space-small);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
index 06d0014b9758d..24559dffd8830 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
@@ -1,6 +1,11 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
 const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const Macros = () => import('./Index.vue');
 const MacroEditor = () => import('./MacroEditor.vue');
 
@@ -8,39 +13,43 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/macros'),
-      component: SettingsContent,
-      props: params => {
-        const showBackButton = params.name !== 'macros_wrapper';
-        return {
-          headerTitle: 'MACROS.HEADER',
-          headerButtonText: 'MACROS.HEADER_BTN_TXT',
-          icon: 'flash-settings',
-          showBackButton,
-        };
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: '',
           name: 'macros_wrapper',
           component: Macros,
           meta: {
-            permissions: ['administrator', 'agent'],
+            permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
           },
         },
+      ],
+    },
+    {
+      path: frontendURL('accounts/:accountId/settings/macros'),
+      component: SettingsContent,
+      props: () => {
+        return {
+          headerTitle: 'MACROS.HEADER',
+          icon: 'flash-settings',
+          showBackButton: true,
+        };
+      },
+      children: [
         {
-          path: 'new',
-          name: 'macros_new',
+          path: ':macroId/edit',
+          name: 'macros_edit',
           component: MacroEditor,
           meta: {
-            permissions: ['administrator', 'agent'],
+            permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
           },
         },
         {
-          path: ':macroId/edit',
-          name: 'macros_edit',
+          path: 'new',
+          name: 'macros_new',
           component: MacroEditor,
           meta: {
-            permissions: ['administrator', 'agent'],
+            permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
           },
         },
       ],
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 1f37a1355d829..f2a5452abbad4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -14,12 +14,18 @@ import NotificationPreferences from './NotificationPreferences.vue';
 import AudioNotifications from './AudioNotifications.vue';
 import FormSection from 'dashboard/components/FormSection.vue';
 import AccessToken from './AccessToken.vue';
+import Policy from 'dashboard/components/policy.vue';
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
 
 export default {
   components: {
     MessageSignature,
     FormSection,
     UserProfilePicture,
+    Policy,
     UserBasicDetails,
     HotKeyCard,
     ChangePassword,
@@ -71,6 +77,8 @@ export default {
             '/assets/images/dashboard/profile/hot-key-ctrl-enter-dark.svg',
         },
       ],
+      notificationPermissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+      audioNotificationPermissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
     };
   },
   computed: {
@@ -235,17 +243,21 @@ export default {
     >
       <ChangePassword />
     </FormSection>
-    <FormSection
-      :title="$t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE')"
-      :description="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE')
-      "
-    >
-      <AudioNotifications />
-    </FormSection>
-    <FormSection :title="$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TITLE')">
-      <NotificationPreferences />
-    </FormSection>
+    <Policy :permissions="audioNotificationPermissions">
+      <FormSection
+        :title="$t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE')"
+        :description="
+          $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE')
+        "
+      >
+        <AudioNotifications />
+      </FormSection>
+    </Policy>
+    <Policy :permissions="notificationPermissions">
+      <FormSection :title="$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TITLE')">
+        <NotificationPreferences />
+      </FormSection>
+    </Policy>
     <FormSection
       :title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE')"
       :description="
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index 31f386e37361f..a6cc1399791a1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -9,7 +9,7 @@ export default {
       path: frontendURL('accounts/:accountId/profile'),
       name: 'profile_settings',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: ['administrator', 'agent', 'custom_role'],
       },
       component: SettingsContent,
       children: [
@@ -18,7 +18,7 @@ export default {
           name: 'profile_settings_index',
           component: Index,
           meta: {
-            permissions: ['administrator', 'agent'],
+            permissions: ['administrator', 'agent', 'custom_role'],
           },
         },
       ],
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index 4927755421bdf..78b433a422580 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -3,7 +3,6 @@ import { useAlert } from 'dashboard/composables';
 import BotMetrics from './components/BotMetrics.vue';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
-import reportMixin from 'dashboard/mixins/reportMixin';
 import ReportContainer from './ReportContainer.vue';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
@@ -14,7 +13,6 @@ export default {
     ReportFilterSelector,
     ReportContainer,
   },
-  mixins: [reportMixin],
   data() {
     return {
       from: 0,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 1f96b161ff661..da2f2f232e952 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -4,7 +4,6 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
-import reportMixin from 'dashboard/mixins/reportMixin';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import ReportContainer from './ReportContainer.vue';
 
@@ -24,7 +23,6 @@ export default {
     ReportFilterSelector,
     ReportContainer,
   },
-  mixins: [reportMixin],
   data() {
     return {
       from: 0,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index f90c3730ca2d8..fc323d0371a2a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -1,19 +1,23 @@
 <script>
+import { mapGetters } from 'vuex';
+import { useReportMetrics } from 'dashboard/composables/useReportMetrics';
 import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import { formatTime } from '@chatwoot/utils';
-import reportMixin from 'dashboard/mixins/reportMixin';
 import ChartStats from './components/ChartElements/ChartStats.vue';
 
 export default {
   components: { ChartStats },
-  mixins: [reportMixin],
   props: {
     groupBy: {
       type: Object,
       default: () => ({}),
     },
+    accountSummaryKey: {
+      type: String,
+      default: 'getAccountSummary',
+    },
     reportKeys: {
       type: Object,
       default: () => ({
@@ -27,7 +31,16 @@ export default {
       }),
     },
   },
+  setup(props) {
+    const { calculateTrend, isAverageMetricType } = useReportMetrics(
+      props.accountSummaryKey
+    );
+    return { calculateTrend, isAverageMetricType };
+  },
   computed: {
+    ...mapGetters({
+      accountReport: 'getAccountReports',
+    }),
     metrics() {
       const reportKeys = Object.keys(this.reportKeys);
       const infoText = {
@@ -121,12 +134,12 @@ export default {
 
 <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"
+    class="grid grid-cols-1 p-2 bg-white border rounded-md md:grid-cols-2 lg:grid-cols-3 dark:bg-slate-800 border-slate-100 dark:border-slate-700"
   >
     <div
       v-for="metric in metrics"
       :key="metric.KEY"
-      class="p-4 rounded-md mb-3"
+      class="p-4 mb-3 rounded-md"
     >
       <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
       <div class="mt-4 h-72">
@@ -135,12 +148,12 @@ export default {
           class="text-xs"
           :message="$t('REPORT.LOADING_CHART')"
         />
-        <div v-else class="h-72 flex items-center justify-center">
+        <div v-else class="flex items-center justify-center h-72">
           <woot-bar
             v-if="accountReport.data[metric.KEY].length"
             :collection="getCollection(metric)"
             :chart-options="getChartOptions(metric)"
-            class="h-72 w-full"
+            class="w-full h-72"
           />
           <span v-else class="text-sm text-slate-600">
             {{ $t('REPORT.NO_ENOUGH_DATA') }}
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 26f68ea33fa6c..2ebeeb28e433b 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,25 +1,30 @@
-<script>
-import reportMixin from 'dashboard/mixins/reportMixin';
-export default {
-  mixins: [reportMixin],
-  props: {
-    metric: {
-      type: Object,
-      default: () => ({}),
-    },
+<script setup>
+import { useReportMetrics } from 'dashboard/composables/useReportMetrics';
+
+const props = defineProps({
+  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';
-    },
+  accountSummaryKey: {
+    type: String,
+    default: 'getAccountSummary',
   },
+});
+
+const { calculateTrend, displayMetric, isAverageMetricType } = useReportMetrics(
+  props.accountSummaryKey
+);
+
+const trendColor = (value, key) => {
+  if (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>
 
@@ -29,7 +34,7 @@ export default {
       {{ metric.NAME }}
     </span>
     <div class="flex items-end">
-      <div class="font-medium text-xl">
+      <div class="text-xl font-medium">
         {{ displayMetric(metric.KEY) }}
       </div>
       <div v-if="metric.trend" class="text-xs ml-4 flex items-center mb-0.5">
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 2d5e52462a5fa..51fb8932df819 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -3,7 +3,6 @@ import { useAlert } from 'dashboard/composables';
 import ReportFilters from './ReportFilters.vue';
 import ReportContainer from '../ReportContainer.vue';
 import { GROUP_BY_FILTER } from '../constants';
-import reportMixin from '../../../../../mixins/reportMixin';
 import { generateFileName } from '../../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 
@@ -22,7 +21,6 @@ export default {
     ReportFilters,
     ReportContainer,
   },
-  mixins: [reportMixin],
   props: {
     type: {
       type: String,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index eaca0e76d808c..b52b178bb869e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -30,7 +30,7 @@ export default {
           path: 'overview',
           name: 'account_overview_reports',
           meta: {
-            permissions: ['administrator'],
+            permissions: ['administrator', 'report_manage'],
           },
           component: LiveReports,
         },
@@ -49,7 +49,7 @@ export default {
           path: 'conversation',
           name: 'conversation_reports',
           meta: {
-            permissions: ['administrator'],
+            permissions: ['administrator', 'report_manage'],
           },
           component: Index,
         },
@@ -68,7 +68,7 @@ export default {
           path: 'csat',
           name: 'csat_reports',
           meta: {
-            permissions: ['administrator'],
+            permissions: ['administrator', 'report_manage'],
           },
           component: CsatResponses,
         },
@@ -87,7 +87,7 @@ export default {
           path: 'bot',
           name: 'bot_reports',
           meta: {
-            permissions: ['administrator'],
+            permissions: ['administrator', 'report_manage'],
           },
           component: BotReports,
         },
@@ -106,7 +106,7 @@ export default {
           path: 'agent',
           name: 'agent_reports',
           meta: {
-            permissions: ['administrator'],
+            permissions: ['administrator', 'report_manage'],
           },
           component: AgentReports,
         },
@@ -125,7 +125,7 @@ export default {
           path: 'label',
           name: 'label_reports',
           meta: {
-            permissions: ['administrator'],
+            permissions: ['administrator', 'report_manage'],
           },
           component: LabelReports,
         },
@@ -144,7 +144,7 @@ export default {
           path: 'inboxes',
           name: 'inbox_reports',
           meta: {
-            permissions: ['administrator'],
+            permissions: ['administrator', 'report_manage'],
           },
           component: InboxReports,
         },
@@ -162,7 +162,7 @@ export default {
           path: 'teams',
           name: 'team_reports',
           meta: {
-            permissions: ['administrator'],
+            permissions: ['administrator', 'report_manage'],
           },
           component: TeamReports,
         },
@@ -181,7 +181,7 @@ export default {
           path: 'sla',
           name: 'sla_reports',
           meta: {
-            permissions: ['administrator'],
+            permissions: ['administrator', 'report_manage'],
           },
           component: SLAReports,
         },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
index 229fe7e3a8391..1e440e4ae439b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
@@ -1,4 +1,9 @@
 import { frontendURL } from '../../../helper/URLHelper';
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions.js';
+
 import account from './account/account.routes';
 import agent from './agents/agent.routes';
 import agentBot from './agentBots/agentBot.routes';
@@ -16,6 +21,7 @@ import reports from './reports/reports.routes';
 import store from '../../../store';
 import sla from './sla/sla.routes';
 import teams from './teams/teams.routes';
+import customRoles from './customRoles/customRole.routes';
 import profile from './profile/profile.routes';
 
 export default {
@@ -24,10 +30,13 @@ export default {
       path: frontendURL('accounts/:accountId/settings'),
       name: 'settings_home',
       meta: {
-        permissions: ['administrator', 'agent'],
+        permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
       },
       redirect: () => {
-        if (store.getters.getCurrentRole === 'administrator') {
+        if (
+          store.getters.getCurrentRole === 'administrator' &&
+          store.getters.getCurrentCustomRoleId === null
+        ) {
           return frontendURL('accounts/:accountId/settings/general');
         }
         return frontendURL('accounts/:accountId/settings/canned-response');
@@ -49,6 +58,7 @@ export default {
     ...reports.routes,
     ...sla.routes,
     ...teams.routes,
+    ...customRoles.routes,
     ...profile.routes,
   ],
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
index 6c3ac5368a3ef..f93739b667a4a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
@@ -1,5 +1,6 @@
 <script setup>
 import BaseEmptyState from './BaseEmptyState.vue';
+import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
 
 const props = defineProps({
   isSuperAdmin: {
@@ -18,59 +19,12 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
 
 <template>
   <BaseEmptyState>
-    <div
-      class="flex flex-col max-w-md px-6 py-6 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-100 dark:border-slate-900"
-    >
-      <div class="flex items-center w-full gap-2 mb-4">
-        <span
-          class="flex items-center justify-center w-6 h-6 rounded-full bg-woot-75/70 dark:bg-woot-800/40"
-        >
-          <fluent-icon
-            size="14"
-            class="flex-shrink-0 text-woot-500 dark:text-woot-500"
-            icon="lock-closed"
-          />
-        </span>
-        <span class="text-base font-medium text-slate-900 dark:text-white">
-          {{ $t('SLA.PAYWALL.TITLE') }}
-        </span>
-      </div>
-      <p
-        class="text-sm font-normal"
-        v-html="$t(`SLA.${i18nKey}.AVAILABLE_ON`)"
-      />
-      <p class="text-sm font-normal">
-        {{ $t(`SLA.${i18nKey}.UPGRADE_PROMPT`) }}
-        <span v-if="!isOnChatwootCloud && !isSuperAdmin">
-          {{ $t('SLA.ENTERPRISE_PAYWALL.ASK_ADMIN') }}
-        </span>
-      </p>
-      <template v-if="isOnChatwootCloud || true">
-        <woot-button
-          color-scheme="primary"
-          class="w-full mt-2 text-center rounded-xl"
-          size="expanded"
-          is-expanded
-          @click="emit('click')"
-        >
-          {{ $t('SLA.PAYWALL.UPGRADE_NOW') }}
-        </woot-button>
-        <span class="mt-2 text-xs tracking-tight text-center">
-          {{ $t('SLA.PAYWALL.CANCEL_ANYTIME') }}
-        </span>
-      </template>
-      <template v-else-if="isSuperAdmin">
-        <a href="/super_admin" class="block w-full">
-          <woot-button
-            color-scheme="primary"
-            class="w-full mt-2 text-center rounded-xl"
-            size="expanded"
-            is-expanded
-          >
-            {{ $t('SLA.PAYWALL.UPGRADE_NOW') }}
-          </woot-button>
-        </a>
-      </template>
-    </div>
+    <BasePaywallModal
+      feature-prefix="SLA"
+      :i18n-key="i18nKey"
+      :is-on-chatwoot-cloud="isOnChatwootCloud"
+      :is-super-admin="isSuperAdmin"
+      @click="emit('click')"
+    />
   </BaseEmptyState>
 </template>
diff --git a/app/javascript/dashboard/routes/index.spec.js b/app/javascript/dashboard/routes/index.spec.js
index a169f8b76ba2c..ac67e8f2e7a65 100644
--- a/app/javascript/dashboard/routes/index.spec.js
+++ b/app/javascript/dashboard/routes/index.spec.js
@@ -34,8 +34,14 @@ describe('#validateAuthenticateRoutePermission', () => {
             getCurrentUser: {
               account_id: 1,
               id: 1,
-              permissions: ['agent'],
-              accounts: [{ id: 1, role: 'agent', status: 'active' }],
+              accounts: [
+                {
+                  permissions: ['agent'],
+                  id: 1,
+                  role: 'agent',
+                  status: 'active',
+                },
+              ],
             },
           };
           validateAuthenticateRoutePermission(to, next, { getters });
@@ -55,8 +61,14 @@ describe('#validateAuthenticateRoutePermission', () => {
             getCurrentUser: {
               account_id: 1,
               id: 1,
-              permissions: ['administrator'],
-              accounts: [{ id: 1, role: 'administrator', status: 'active' }],
+              accounts: [
+                {
+                  id: 1,
+                  role: 'administrator',
+                  permissions: ['administrator'],
+                  status: 'active',
+                },
+              ],
             },
           };
           validateAuthenticateRoutePermission(to, next, { getters });
diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js
index 4f5b5af6bf1e2..f2e03f733bffa 100755
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@@ -27,6 +27,7 @@ import conversationTypingStatus from './modules/conversationTypingStatus';
 import conversationWatchers from './modules/conversationWatchers';
 import csat from './modules/csat';
 import customViews from './modules/customViews';
+import customRole from './modules/customRole';
 import dashboardApps from './modules/dashboardApps';
 import globalConfig from 'shared/store/globalConfig';
 import inboxAssignableAgents from './modules/inboxAssignableAgents';
@@ -77,6 +78,7 @@ export default new Vuex.Store({
     conversationWatchers,
     csat,
     customViews,
+    customRole,
     dashboardApps,
     globalConfig,
     inboxAssignableAgents,
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index d1952f43d4bee..5f3604aa2a172 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -66,6 +66,14 @@ export const getters = {
     return currentAccount.role;
   },
 
+  getCurrentCustomRoleId($state, $getters) {
+    const { accounts = [] } = $state.currentUser;
+    const [currentAccount = {}] = accounts.filter(
+      account => account.id === $getters.getCurrentAccountId
+    );
+    return currentAccount.custom_role_id;
+  },
+
   getCurrentUser($state) {
     return $state.currentUser;
   },
diff --git a/app/javascript/dashboard/store/modules/automations.js b/app/javascript/dashboard/store/modules/automations.js
index df3bf6f6aad68..e36a2f4a41461 100644
--- a/app/javascript/dashboard/store/modules/automations.js
+++ b/app/javascript/dashboard/store/modules/automations.js
@@ -15,7 +15,7 @@ export const state = {
 
 export const getters = {
   getAutomations(_state) {
-    return _state.records;
+    return _state.records.sort((a1, a2) => a1.id - a2.id);
   },
   getUIFlags(_state) {
     return _state.uiFlags;
diff --git a/app/javascript/dashboard/store/modules/customRole.js b/app/javascript/dashboard/store/modules/customRole.js
new file mode 100644
index 0000000000000..7f931f6fa8c68
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/customRole.js
@@ -0,0 +1,100 @@
+import { throwErrorMessage } from 'dashboard/store/utils/api';
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import * as types from '../mutation-types';
+import CustomRoleAPI from '../../api/customRole';
+
+export const state = {
+  records: [],
+  uiFlags: {
+    fetchingList: false,
+    creatingItem: false,
+    updatingItem: false,
+    deletingItem: false,
+  },
+};
+
+export const getters = {
+  getCustomRoles($state) {
+    return $state.records;
+  },
+  getUIFlags($state) {
+    return $state.uiFlags;
+  },
+};
+
+export const actions = {
+  getCustomRole: async function getCustomRole({ commit }) {
+    commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: true });
+    try {
+      const response = await CustomRoleAPI.get();
+      commit(types.default.SET_CUSTOM_ROLE, response.data);
+      commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: false });
+    } catch (error) {
+      commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: false });
+    }
+  },
+
+  createCustomRole: async function createCustomRole({ commit }, customRoleObj) {
+    commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: true });
+    try {
+      const response = await CustomRoleAPI.create(customRoleObj);
+      commit(types.default.ADD_CUSTOM_ROLE, response.data);
+      commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: false });
+      return response.data;
+    } catch (error) {
+      commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: false });
+      return throwErrorMessage(error);
+    }
+  },
+
+  updateCustomRole: async function updateCustomRole(
+    { commit },
+    { id, ...updateObj }
+  ) {
+    commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: true });
+    try {
+      const response = await CustomRoleAPI.update(id, updateObj);
+      commit(types.default.EDIT_CUSTOM_ROLE, response.data);
+      commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: false });
+      return response.data;
+    } catch (error) {
+      commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: false });
+      return throwErrorMessage(error);
+    }
+  },
+
+  deleteCustomRole: async function deleteCustomRole({ commit }, id) {
+    commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true });
+    try {
+      await CustomRoleAPI.delete(id);
+      commit(types.default.DELETE_CUSTOM_ROLE, id);
+      commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true });
+      return id;
+    } catch (error) {
+      commit(types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true });
+      return throwErrorMessage(error);
+    }
+  },
+};
+
+export const mutations = {
+  [types.default.SET_CUSTOM_ROLE_UI_FLAG](_state, data) {
+    _state.uiFlags = {
+      ..._state.uiFlags,
+      ...data,
+    };
+  },
+
+  [types.default.SET_CUSTOM_ROLE]: MutationHelpers.set,
+  [types.default.ADD_CUSTOM_ROLE]: MutationHelpers.create,
+  [types.default.EDIT_CUSTOM_ROLE]: MutationHelpers.update,
+  [types.default.DELETE_CUSTOM_ROLE]: MutationHelpers.destroy,
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
index aa9e5242b493b..de6147fa84779 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
@@ -1,5 +1,5 @@
 import articlesAPI from 'dashboard/api/helpCenter/articles';
-import { uploadFile } from 'dashboard/helper/uploadHelper';
+import { uploadExternalImage, uploadFile } from 'dashboard/helper/uploadHelper';
 import { throwErrorMessage } from 'dashboard/store/utils/api';
 
 import types from '../../mutation-types';
@@ -132,6 +132,11 @@ export const actions = {
     return fileUrl;
   },
 
+  uploadExternalImage: async (_, { url }) => {
+    const { fileUrl } = await uploadExternalImage(url);
+    return fileUrl;
+  },
+
   reorder: async (_, { portalSlug, categorySlug, reorderedGroup }) => {
     try {
       await articlesAPI.reorderArticles({
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js
index bbd4f933be596..ffdb98e1545c5 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
-import { actions } from '../actions';
+import { uploadExternalImage, uploadFile } from 'dashboard/helper/uploadHelper';
 import * as types from '../../../mutation-types';
-import { uploadFile } from 'dashboard/helper/uploadHelper';
+import { actions } from '../actions';
 
 vi.mock('dashboard/helper/uploadHelper');
 
@@ -187,33 +187,53 @@ describe('#actions', () => {
 
   describe('attachImage', () => {
     it('should upload the file and return the fileUrl', async () => {
-      // Given
       const mockFile = new Blob(['test'], { type: 'image/png' });
       mockFile.name = 'test.png';
 
       const mockFileUrl = 'https://test.com/test.png';
       uploadFile.mockResolvedValueOnce({ fileUrl: mockFileUrl });
 
-      // When
       const result = await actions.attachImage({}, { file: mockFile });
 
-      // Then
       expect(uploadFile).toHaveBeenCalledWith(mockFile);
       expect(result).toBe(mockFileUrl);
     });
 
     it('should throw an error if the upload fails', async () => {
-      // Given
       const mockFile = new Blob(['test'], { type: 'image/png' });
       mockFile.name = 'test.png';
 
       const mockError = new Error('Upload failed');
       uploadFile.mockRejectedValueOnce(mockError);
 
-      // When & Then
       await expect(actions.attachImage({}, { file: mockFile })).rejects.toThrow(
         'Upload failed'
       );
     });
   });
+
+  describe('uploadExternalImage', () => {
+    it('should upload the image from external URL and return the fileUrl', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockFileUrl = 'https://uploaded.example.com/image.jpg';
+      uploadExternalImage.mockResolvedValueOnce({ fileUrl: mockFileUrl });
+
+      // When
+      const result = await actions.uploadExternalImage({}, { url: mockUrl });
+
+      // Then
+      expect(uploadExternalImage).toHaveBeenCalledWith(mockUrl);
+      expect(result).toBe(mockFileUrl);
+    });
+
+    it('should throw an error if the upload fails', async () => {
+      const mockUrl = 'https://example.com/image.jpg';
+      const mockError = new Error('Upload failed');
+      uploadExternalImage.mockRejectedValueOnce(mockError);
+
+      await expect(
+        actions.uploadExternalImage({}, { url: mockUrl })
+      ).rejects.toThrow('Upload failed');
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/auth/getters.spec.js b/app/javascript/dashboard/store/modules/specs/auth/getters.spec.js
index e89386af39651..8644428dbfa84 100644
--- a/app/javascript/dashboard/store/modules/specs/auth/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/auth/getters.spec.js
@@ -42,6 +42,26 @@ describe('#getters', () => {
     });
   });
 
+  describe('#getCurrentCustomRoleId', () => {
+    it('returns current custom role id', () => {
+      expect(
+        getters.getCurrentCustomRoleId(
+          { currentUser: { accounts: [{ id: 1, custom_role_id: 1 }] } },
+          { getCurrentAccountId: 1 }
+        )
+      ).toEqual(1);
+    });
+
+    it('returns undefined if account is not available', () => {
+      expect(
+        getters.getCurrentCustomRoleId(
+          { currentUser: { accounts: [{ id: 1, custom_role_id: 1 }] } },
+          { getCurrentAccountId: 2 }
+        )
+      ).toEqual(undefined);
+    });
+  });
+
   describe('#getCurrentUserAvailability', () => {
     it('returns correct availability status', () => {
       expect(
diff --git a/app/javascript/dashboard/store/modules/specs/customRole/actions.spec.js b/app/javascript/dashboard/store/modules/specs/customRole/actions.spec.js
new file mode 100644
index 0000000000000..27a08e279456e
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/customRole/actions.spec.js
@@ -0,0 +1,97 @@
+import axios from 'axios';
+import { actions } from '../../customRole';
+import * as types from '../../../mutation-types';
+import { customRoleList } from './fixtures';
+
+const commit = vi.fn();
+global.axios = axios;
+vi.mock('axios');
+
+describe('#actions', () => {
+  describe('#getCustomRole', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: customRoleList });
+      await actions.getCustomRole({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: true }],
+        [types.default.SET_CUSTOM_ROLE, customRoleList],
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.getCustomRole({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: true }],
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { fetchingList: false }],
+      ]);
+    });
+  });
+
+  describe('#createCustomRole', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: customRoleList[0] });
+      await actions.createCustomRole({ commit }, customRoleList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: true }],
+        [types.default.ADD_CUSTOM_ROLE, customRoleList[0]],
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.createCustomRole({ commit })).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: true }],
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { creatingItem: false }],
+      ]);
+    });
+  });
+
+  describe('#updateCustomRole', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.patch.mockResolvedValue({ data: customRoleList[0] });
+      await actions.updateCustomRole(
+        { commit },
+        { id: 1, ...customRoleList[0] }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: true }],
+        [types.default.EDIT_CUSTOM_ROLE, customRoleList[0]],
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.updateCustomRole({ commit }, { id: 1 })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: true }],
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { updatingItem: false }],
+      ]);
+    });
+  });
+
+  describe('#deleteCustomRole', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({ data: customRoleList[0] });
+      await actions.deleteCustomRole({ commit }, 1);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true }],
+        [types.default.DELETE_CUSTOM_ROLE, 1],
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.deleteCustomRole({ commit }, 1)).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true }],
+        [types.default.SET_CUSTOM_ROLE_UI_FLAG, { deletingItem: true }],
+      ]);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/customRole/fixtures.js b/app/javascript/dashboard/store/modules/specs/customRole/fixtures.js
new file mode 100644
index 0000000000000..dafe77a4836bf
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/customRole/fixtures.js
@@ -0,0 +1,77 @@
+export const customRoleList = [
+  {
+    id: 1,
+    name: 'Super Custom Role',
+    description: 'Role with all available custom role permissions',
+    permissions: [
+      'conversation_participating_manage',
+      'conversation_unassigned_manage',
+      'conversation_manage',
+      'contact_manage',
+      'report_manage',
+      'knowledge_base_manage',
+    ],
+    created_at: '2024-09-04T05:30:22.282Z',
+    updated_at: '2024-09-05T09:21:02.844Z',
+  },
+  {
+    id: 2,
+    name: 'Conversation Manager Role',
+    description: 'Role for managing all aspects of conversations',
+    permissions: [
+      'conversation_unassigned_manage',
+      'conversation_participating_manage',
+      'conversation_manage',
+    ],
+    created_at: '2024-09-05T09:21:38.692Z',
+    updated_at: '2024-09-05T09:21:38.692Z',
+  },
+  {
+    id: 3,
+    name: 'Participating Agent Role',
+    description: 'Role for agents participating in conversations',
+    permissions: ['conversation_participating_manage'],
+    created_at: '2024-09-06T08:03:14.550Z',
+    updated_at: '2024-09-06T08:03:14.550Z',
+  },
+  {
+    id: 4,
+    name: 'Contact Manager Role',
+    description: 'Role for managing contacts only',
+    permissions: ['contact_manage'],
+    created_at: '2024-09-06T08:15:56.877Z',
+    updated_at: '2024-09-06T09:53:28.103Z',
+  },
+  {
+    id: 5,
+    name: 'Report Analyst Role',
+    description: 'Role for accessing and managing reports',
+    permissions: ['report_manage'],
+    created_at: '2024-09-06T09:53:58.277Z',
+    updated_at: '2024-09-06T09:53:58.277Z',
+  },
+  {
+    id: 6,
+    name: 'Knowledge Base Editor Role',
+    description: 'Role for managing the knowledge base',
+    permissions: ['knowledge_base_manage'],
+    created_at: '2024-09-06T09:54:27.649Z',
+    updated_at: '2024-09-06T09:54:27.649Z',
+  },
+  {
+    id: 7,
+    name: 'Unassigned Queue Manager Role',
+    description: 'Role for managing unassigned conversations',
+    permissions: ['conversation_unassigned_manage'],
+    created_at: '2024-09-06T09:55:00.503Z',
+    updated_at: '2024-09-06T09:55:00.503Z',
+  },
+  {
+    id: 8,
+    name: 'Basic Conversation Handler Role',
+    description: 'Role for basic conversation management',
+    permissions: ['conversation_manage'],
+    created_at: '2024-09-06T09:55:19.519Z',
+    updated_at: '2024-09-06T09:55:19.519Z',
+  },
+];
diff --git a/app/javascript/dashboard/store/modules/specs/customRole/getters.spec.js b/app/javascript/dashboard/store/modules/specs/customRole/getters.spec.js
new file mode 100644
index 0000000000000..96a782e28dfe1
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/customRole/getters.spec.js
@@ -0,0 +1,26 @@
+import { getters } from '../../customRole';
+import { customRoleList } from './fixtures';
+
+describe('#getters', () => {
+  it('getCustomRoles', () => {
+    const state = { records: customRoleList };
+    expect(getters.getCustomRoles(state)).toEqual(customRoleList);
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        fetchingList: true,
+        creatingItem: false,
+        updatingItem: false,
+        deletingItem: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      fetchingList: true,
+      creatingItem: false,
+      updatingItem: false,
+      deletingItem: false,
+    });
+  });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/customRole/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/customRole/mutations.spec.js
new file mode 100644
index 0000000000000..1a099dd02cf65
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/customRole/mutations.spec.js
@@ -0,0 +1,48 @@
+import types from '../../../mutation-types';
+import { mutations } from '../../customRole';
+import { customRoleList } from './fixtures';
+
+describe('#mutations', () => {
+  describe('#SET_CUSTOM_ROLE', () => {
+    it('set custom role records', () => {
+      const state = { records: [] };
+      mutations[types.SET_CUSTOM_ROLE](state, customRoleList);
+      expect(state.records).toEqual(customRoleList);
+    });
+  });
+
+  describe('#ADD_CUSTOM_ROLE', () => {
+    it('push newly created custom role to the store', () => {
+      const state = { records: [customRoleList[0]] };
+      mutations[types.ADD_CUSTOM_ROLE](state, customRoleList[1]);
+      expect(state.records).toEqual([customRoleList[0], customRoleList[1]]);
+    });
+  });
+
+  describe('#EDIT_CUSTOM_ROLE', () => {
+    it('update custom role record', () => {
+      const state = { records: [customRoleList[0]] };
+      const updatedRole = { ...customRoleList[0], name: 'Updated Role' };
+      mutations[types.EDIT_CUSTOM_ROLE](state, updatedRole);
+      expect(state.records).toEqual([updatedRole]);
+    });
+  });
+
+  describe('#DELETE_CUSTOM_ROLE', () => {
+    it('delete custom role record', () => {
+      const state = { records: [customRoleList[0], customRoleList[1]] };
+      mutations[types.DELETE_CUSTOM_ROLE](state, customRoleList[0].id);
+      expect(state.records).toEqual([customRoleList[1]]);
+    });
+  });
+
+  describe('#SET_CUSTOM_ROLE_UI_FLAG', () => {
+    it('set custom role UI flags', () => {
+      const state = { uiFlags: {} };
+      mutations[types.SET_CUSTOM_ROLE_UI_FLAG](state, {
+        fetchingList: true,
+      });
+      expect(state.uiFlags).toEqual({ fetchingList: true });
+    });
+  });
+});
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index ef87a87d85881..2a6bcacb8ab5b 100644
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -98,6 +98,13 @@ export default {
   EDIT_CANNED: 'EDIT_CANNED',
   DELETE_CANNED: 'DELETE_CANNED',
 
+  // Custom Role
+  SET_CUSTOM_ROLE_UI_FLAG: 'SET_CUSTOM_ROLE_UI_FLAG',
+  SET_CUSTOM_ROLE: 'SET_CUSTOM_ROLE',
+  ADD_CUSTOM_ROLE: 'ADD_CUSTOM_ROLE',
+  EDIT_CUSTOM_ROLE: 'EDIT_CUSTOM_ROLE',
+  DELETE_CUSTOM_ROLE: 'DELETE_CUSTOM_ROLE',
+
   // Labels
   SET_LABEL_UI_FLAG: 'SET_LABEL_UI_FLAG',
   SET_LABELS: 'SET_LABELS',
diff --git a/app/javascript/portal/components/SearchSuggestions.vue b/app/javascript/portal/components/SearchSuggestions.vue
index 68abe44f56ca9..cb4adc9fc1316 100644
--- a/app/javascript/portal/components/SearchSuggestions.vue
+++ b/app/javascript/portal/components/SearchSuggestions.vue
@@ -1,10 +1,9 @@
 <script>
 import { ref, computed, nextTick } from 'vue';
 import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 export default {
-  mixins: [messageFormatterMixin],
   props: {
     items: {
       type: Array,
@@ -30,7 +29,7 @@ export default {
   setup(props) {
     const selectedIndex = ref(-1);
     const portalSearchSuggestionsRef = ref(null);
-
+    const { highlightContent } = useMessageFormatter();
     const adjustScroll = () => {
       nextTick(() => {
         portalSearchSuggestionsRef.value.scrollTop = 102 * selectedIndex.value;
@@ -44,7 +43,6 @@ export default {
     };
 
     useKeyboardNavigableList({
-      elementRef: portalSearchSuggestionsRef,
       items: computed(() => props.items),
       adjustScroll,
       selectedIndex,
@@ -54,6 +52,7 @@ export default {
       selectedIndex,
       portalSearchSuggestionsRef,
       isSearchItemActive,
+      highlightContent,
     };
   },
 
diff --git a/app/javascript/shared/components/ChatCard.vue b/app/javascript/shared/components/ChatCard.vue
index 14683784f29a9..7e333910181fe 100644
--- a/app/javascript/shared/components/ChatCard.vue
+++ b/app/javascript/shared/components/ChatCard.vue
@@ -1,12 +1,11 @@
 <script>
 import CardButton from 'shared/components/CardButton.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
     CardButton,
   },
-  mixins: [darkModeMixin],
   props: {
     title: {
       type: String,
@@ -25,21 +24,30 @@ export default {
       default: () => [],
     },
   },
-  computed: {},
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
 };
 </script>
 
 <template>
   <div
     class="card-message chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :class="getThemeClass('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')">
+      <h4
+        class="title"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
+      >
         {{ title }}
       </h4>
-      <p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
+      <p
+        class="body"
+        :class="getThemeClass('text-black-700', 'dark:text-slate-100')"
+      >
         {{ description }}
       </p>
       <CardButton v-for="action in actions" :key="action.id" :action="action" />
diff --git a/app/javascript/shared/components/ChatForm.vue b/app/javascript/shared/components/ChatForm.vue
index f246f94a799d7..80a45e26de779 100644
--- a/app/javascript/shared/components/ChatForm.vue
+++ b/app/javascript/shared/components/ChatForm.vue
@@ -1,10 +1,9 @@
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
-  mixins: [darkModeMixin],
   props: {
     buttonLabel: {
       type: String,
@@ -19,6 +18,10 @@ export default {
       default: () => [],
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   data() {
     return {
       formValues: {},
@@ -33,8 +36,8 @@ export default {
       return getContrastingTextColor(this.widgetColor);
     },
     inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
+        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
     },
     isFormValid() {
       return this.items.reduce((acc, { name }) => {
@@ -80,7 +83,7 @@ export default {
 <template>
   <div
     class="form chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
   >
     <form @submit.prevent="onSubmit">
       <div
@@ -91,7 +94,7 @@ export default {
           'has-submitted': hasSubmitted,
         }"
       >
-        <label :class="$dm('text-black-900', 'dark:text-slate-50')">{{
+        <label :class="getThemeClass('text-black-900', 'dark:text-slate-50')">{{
           item.label
         }}</label>
         <input
diff --git a/app/javascript/shared/components/ChatOptions.vue b/app/javascript/shared/components/ChatOptions.vue
index a6c7442347980..833e14ecb4a52 100644
--- a/app/javascript/shared/components/ChatOptions.vue
+++ b/app/javascript/shared/components/ChatOptions.vue
@@ -1,12 +1,11 @@
 <script>
 import ChatOption from 'shared/components/ChatOption.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 export default {
   components: {
     ChatOption,
   },
-  mixins: [messageFormatterMixin],
   props: {
     title: {
       type: String,
@@ -25,6 +24,12 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   methods: {
     isSelected(option) {
       return this.selected === option.id;
diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue
index 332892cd3e201..25c305b7cf6ac 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.vue
+++ b/app/javascript/shared/components/CustomerSatisfaction.vue
@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
@@ -11,7 +11,6 @@ export default {
     Spinner,
     FluentIcon,
   },
-  mixins: [darkModeMixin],
   props: {
     messageContentAttributes: {
       type: Object,
@@ -22,6 +21,10 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   data() {
     return {
       email: '',
@@ -44,8 +47,8 @@ export default {
       return !(this.selectedRating && this.feedback);
     },
     inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
+        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
     },
     textColor() {
       return getContrastingTextColor(this.widgetColor);
@@ -105,10 +108,13 @@ export default {
 <template>
   <div
     class="customer-satisfaction"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
     :style="{ borderColor: widgetColor }"
   >
-    <h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
+    <h6
+      class="title"
+      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
+    >
       {{ title }}
     </h6>
     <div class="ratings">
diff --git a/app/javascript/shared/components/DateSeparator.vue b/app/javascript/shared/components/DateSeparator.vue
index a06badcc6da89..a75f477859ee6 100644
--- a/app/javascript/shared/components/DateSeparator.vue
+++ b/app/javascript/shared/components/DateSeparator.vue
@@ -1,15 +1,18 @@
 <script>
 import { formatDate } from 'shared/helpers/DateHelper';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
-  mixins: [darkModeMixin],
   props: {
     date: {
       type: String,
       required: true,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     formattedDate() {
       return formatDate({
@@ -25,7 +28,7 @@ export default {
 <template>
   <div
     class="date--separator"
-    :class="$dm('text-slate-700', 'dark:text-slate-200')"
+    :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
   >
     {{ formattedDate }}
   </div>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 04255c560b779..918d012be783a 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -271,15 +271,9 @@
     "M11.1667 17.8333C14.8486 17.8333 17.8333 14.8486 17.8333 11.1667C17.8333 7.48477 14.8486 4.5 11.1667 4.5C7.48477 4.5 4.5 7.48477 4.5 11.1667C4.5 14.8486 7.48477 17.8333 11.1667 17.8333Z",
     "M19.5001 19.5001L15.9167 15.9167"
   ],
-  "chevrons-left-outline": [
-    "m11 17-5-5 5-5",
-    "m18 17-5-5 5-5"
-  ],
+  "chevrons-left-outline": ["m11 17-5-5 5-5", "m18 17-5-5 5-5"],
   "chevron-left-single-outline": "m15 18-6-6 6-6",
-  "chevrons-right-outline": [
-    "m6 17 5-5-5-5",
-    "m13 17 5-5-5-5"
-  ],
+  "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
   "chevron-right-single-outline": "m9 18 6-6-6-6",
   "avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z",
   "text-copy-outline": "M5.503 4.627L5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.25 2.25 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zm0 1.5h-9a.75.75 0 0 0-.75.75v13c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75",
@@ -290,5 +284,6 @@
     "M6.49573 9.20645C6.49573 8.67008 6.93058 8.23523 7.46695 8.23523C8.00337 8.23523 8.43817 8.67008 8.43817 9.20645V11.4511C8.43817 11.9875 8.00337 12.4223 7.46695 12.4223C6.93058 12.4223 6.49573 11.9875 6.49573 11.4511V9.20645Z",
     "M9.60364 9.20645C9.60364 8.67008 10.0385 8.23523 10.5749 8.23523C11.1113 8.23523 11.5461 8.67008 11.5461 9.20645V11.4511C11.5461 11.9875 11.1113 12.4223 10.5749 12.4223C10.0385 12.4223 9.60364 11.9875 9.60364 11.4511V9.20645Z",
     "M17.1442 5.57049C13.5275 5.06019 10.5793 5.04007 6.88135 5.56825C5.9466 5.70176 5.32812 5.79197 4.85654 5.92976C4.41928 6.05757 4.17061 6.20994 3.96492 6.43984C3.539 6.91583 3.48286 7.45419 3.4248 9.33184C3.36775 11.1772 3.48076 12.831 3.69481 14.6918C3.80887 15.6834 3.88736 16.3526 4.01268 16.8613C4.13155 17.3439 4.27532 17.6034 4.47513 17.802C4.67654 18.0023 4.93467 18.1435 5.40841 18.2581C5.90952 18.3793 6.56702 18.4526 7.5442 18.5592C10.7045 18.904 13.0702 18.9022 16.2423 18.561C17.2313 18.4546 17.8995 18.3813 18.4081 18.2609C18.8913 18.1465 19.1511 18.0063 19.3497 17.8118C19.5442 17.6213 19.6928 17.3587 19.8217 16.852C19.9561 16.3234 20.0476 15.624 20.18 14.5966C20.4162 12.7633 20.5863 11.1533 20.5929 9.3896C20.5999 7.50391 20.5613 6.96737 20.1306 6.46971C19.9226 6.22932 19.6696 6.0713 19.2224 5.93968C18.7395 5.79754 18.1042 5.70594 17.1442 5.57049ZM6.65555 3.98715C10.5078 3.43695 13.6072 3.45849 17.3674 3.98902L17.4224 3.99678C18.3127 4.12235 19.0648 4.22844 19.6733 4.40753C20.33 4.60078 20.8792 4.89417 21.3382 5.4245C22.2041 6.42482 22.1984 7.6117 22.1909 9.18858C22.1905 9.25686 22.1902 9.32584 22.19 9.3956C22.183 11.2604 22.0026 12.949 21.764 14.8006L21.7577 14.8496C21.6332 15.8159 21.5307 16.6121 21.3695 17.2458C21.2 17.9121 20.9467 18.4833 20.4672 18.9529C19.9919 19.4183 19.4302 19.6602 18.776 19.8151C18.1582 19.9613 17.3895 20.044 16.4629 20.1436L16.4131 20.149C13.1283 20.5023 10.6472 20.5043 7.37097 20.1469L7.32043 20.1414C6.40679 20.0417 5.64604 19.9587 5.03292 19.8104C4.38112 19.6527 3.82317 19.406 3.34911 18.9347C2.87346 18.4618 2.62363 17.8999 2.46191 17.2433C2.30938 16.6241 2.22071 15.8531 2.11393 14.9246L2.10815 14.8743C1.88863 12.9659 1.76823 11.23 1.82845 9.28246C1.83063 9.2118 1.83272 9.14191 1.83479 9.07281C1.8816 7.50776 1.91671 6.33374 2.7747 5.37486C3.22992 4.86612 3.76798 4.58399 4.40853 4.39678C5.00257 4.22316 5.73505 4.11858 6.60207 3.99479C6.61981 3.99225 6.63764 3.9897 6.65555 3.98715Z"
-  ]
+  ],
+  "scan-person-outline": "M5.25 3.5A1.75 1.75 0 0 0 3.5 5.25v3a.75.75 0 0 1-1.5 0v-3A3.25 3.25 0 0 1 5.25 2h3a.75.75 0 0 1 0 1.5zm0 17a1.75 1.75 0 0 1-1.75-1.75v-3a.75.75 0 0 0-1.5 0v3A3.25 3.25 0 0 0 5.25 22h3a.75.75 0 0 0 .707-1l-.005-.015a.75.75 0 0 0-.702-.485zM20.5 5.25a1.75 1.75 0 0 0-1.75-1.75h-3a.75.75 0 0 1 0-1.5h3A3.25 3.25 0 0 1 22 5.25v3a.75.75 0 0 1-1.5 0zM18.75 20.5a1.75 1.75 0 0 0 1.75-1.75v-3a.75.75 0 0 1 1.5 0v3A3.25 3.25 0 0 1 18.75 22h-3a.75.75 0 0 1 0-1.5zM6.5 18.616q0 .465.258.884H5.25a1 1 0 0 1-.129-.011A3.1 3.1 0 0 1 5 18.616v-.366A2.25 2.25 0 0 1 7.25 16h9.5A2.25 2.25 0 0 1 19 18.25v.366c0 .31-.047.601-.132.875a1 1 0 0 1-.118.009h-1.543a1.56 1.56 0 0 0 .293-.884v-.366a.75.75 0 0 0-.75-.75h-9.5a.75.75 0 0 0-.75.75zm8.25-8.866a2.75 2.75 0 1 0-5.5 0a2.75 2.75 0 0 0 5.5 0m1.5 0a4.25 4.25 0 1 1-8.5 0a4.25 4.25 0 0 1 8.5 0"
 }
diff --git a/app/javascript/shared/components/specs/DateSeparator.spec.js b/app/javascript/shared/components/specs/DateSeparator.spec.js
index 9667ad158cf11..6a092b88e4590 100644
--- a/app/javascript/shared/components/specs/DateSeparator.spec.js
+++ b/app/javascript/shared/components/specs/DateSeparator.spec.js
@@ -2,7 +2,6 @@ import DateSeparator from '../DateSeparator.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 const localVue = createLocalVue();
 import i18n from 'dashboard/i18n';
 localVue.use(Vuex);
@@ -40,7 +39,6 @@ describe('dateSeparator', () => {
       propsData: { date: 'Nov 18, 2019' },
       mocks: { $t: msg => msg },
       i18n: i18nConfig,
-      mixins: [darkModeMixin],
     });
   });
 
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
index d7f81cf5cc398..1b2ef75501ef6 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
@@ -52,7 +52,7 @@ const keyboardEvents = {
   },
 };
 
-useKeyboardEvents(keyboardEvents, dropdownMenuRef);
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
diff --git a/app/javascript/shared/composables/specs/useCampaign.spec.js b/app/javascript/shared/composables/specs/useCampaign.spec.js
new file mode 100644
index 0000000000000..baaad865cfa19
--- /dev/null
+++ b/app/javascript/shared/composables/specs/useCampaign.spec.js
@@ -0,0 +1,47 @@
+import { describe, it, expect, vi } from 'vitest';
+import { useCampaign } from '../useCampaign';
+import { useRoute } from 'dashboard/composables/route';
+import { CAMPAIGN_TYPES } from '../../constants/campaign';
+
+// Mock the useRoute composable
+vi.mock('dashboard/composables/route', () => ({
+  useRoute: vi.fn(),
+}));
+
+describe('useCampaign', () => {
+  it('returns the correct campaign type for ongoing campaigns', () => {
+    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
+    const { campaignType } = useCampaign();
+    expect(campaignType.value).toBe(CAMPAIGN_TYPES.ONGOING);
+  });
+
+  it('returns the correct campaign type for one-off campaigns', () => {
+    useRoute.mockReturnValue({ name: 'one_off' });
+    const { campaignType } = useCampaign();
+    expect(campaignType.value).toBe(CAMPAIGN_TYPES.ONE_OFF);
+  });
+
+  it('isOngoingType returns true for ongoing campaigns', () => {
+    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
+    const { isOngoingType } = useCampaign();
+    expect(isOngoingType.value).toBe(true);
+  });
+
+  it('isOngoingType returns false for one-off campaigns', () => {
+    useRoute.mockReturnValue({ name: 'one_off' });
+    const { isOngoingType } = useCampaign();
+    expect(isOngoingType.value).toBe(false);
+  });
+
+  it('isOneOffType returns true for one-off campaigns', () => {
+    useRoute.mockReturnValue({ name: 'one_off' });
+    const { isOneOffType } = useCampaign();
+    expect(isOneOffType.value).toBe(true);
+  });
+
+  it('isOneOffType returns false for ongoing campaigns', () => {
+    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
+    const { isOneOffType } = useCampaign();
+    expect(isOneOffType.value).toBe(false);
+  });
+});
diff --git a/app/javascript/shared/composables/specs/useFilter.spec.js b/app/javascript/shared/composables/specs/useFilter.spec.js
new file mode 100644
index 0000000000000..68922403a387e
--- /dev/null
+++ b/app/javascript/shared/composables/specs/useFilter.spec.js
@@ -0,0 +1,145 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useFilter } from '../useFilter';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+
+// Mock the dependencies
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables/useI18n');
+
+describe('useFilter', () => {
+  // Setup mocks
+  beforeEach(() => {
+    vi.mocked(useStore).mockReturnValue({
+      getters: {
+        'attributes/getAttributesByModel': vi.fn(),
+      },
+    });
+    vi.mocked(useI18n).mockReturnValue({
+      t: vi.fn(key => key),
+    });
+  });
+
+  it('should return the correct functions', () => {
+    const {
+      setFilterAttributes,
+      initializeStatusAndAssigneeFilterToModal,
+      initializeInboxTeamAndLabelFilterToModal,
+    } = useFilter({ filteri18nKey: 'TEST', attributeModel: 'conversation' });
+
+    expect(setFilterAttributes).toBeDefined();
+    expect(initializeStatusAndAssigneeFilterToModal).toBeDefined();
+    expect(initializeInboxTeamAndLabelFilterToModal).toBeDefined();
+  });
+
+  describe('setFilterAttributes', () => {
+    it('should return filterGroups and filterTypes', () => {
+      const mockAttributes = [
+        {
+          attribute_key: 'test_key',
+          attribute_display_name: 'Test Name',
+          attribute_display_type: 'text',
+        },
+      ];
+      vi.mocked(useStore)().getters[
+        'attributes/getAttributesByModel'
+      ].mockReturnValue(mockAttributes);
+
+      const { setFilterAttributes } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = setFilterAttributes();
+
+      expect(result).toHaveProperty('filterGroups');
+      expect(result).toHaveProperty('filterTypes');
+      expect(result.filterGroups.length).toBeGreaterThan(0);
+      expect(result.filterTypes.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('initializeStatusAndAssigneeFilterToModal', () => {
+    it('should return status filter when activeStatus is provided', () => {
+      const { initializeStatusAndAssigneeFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeStatusAndAssigneeFilterToModal('open', {}, '');
+
+      expect(result).toEqual({
+        attribute_key: 'status',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: [
+          { id: 'open', name: 'CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT' },
+        ],
+        query_operator: 'and',
+        custom_attribute_type: '',
+      });
+    });
+
+    it('should return null when no active filters', () => {
+      const { initializeStatusAndAssigneeFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeStatusAndAssigneeFilterToModal('', {}, '');
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('initializeInboxTeamAndLabelFilterToModal', () => {
+    it('should return filters for inbox, team, and label when provided', () => {
+      const { initializeInboxTeamAndLabelFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeInboxTeamAndLabelFilterToModal(
+        1,
+        { name: 'Inbox 1' },
+        2,
+        [{ id: 2, name: 'Team 2' }],
+        'Label 1'
+      );
+
+      expect(result).toHaveLength(3);
+      expect(result[0]).toHaveProperty('attribute_key', 'inbox_id');
+      expect(result[1]).toHaveProperty('attribute_key', 'team_id');
+      expect(result[2]).toHaveProperty('attribute_key', 'labels');
+    });
+
+    it('should return empty array when no filters are provided', () => {
+      const { initializeInboxTeamAndLabelFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeInboxTeamAndLabelFilterToModal(
+        null,
+        null,
+        null,
+        null,
+        null
+      );
+
+      expect(result).toEqual([]);
+    });
+
+    it('should return only inbox filter when only inbox is provided', () => {
+      const { initializeInboxTeamAndLabelFilterToModal } = useFilter({
+        filteri18nKey: 'TEST',
+        attributeModel: 'conversation',
+      });
+      const result = initializeInboxTeamAndLabelFilterToModal(
+        1,
+        { name: 'Inbox 1' },
+        null,
+        null,
+        null
+      );
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toHaveProperty('attribute_key', 'inbox_id');
+    });
+  });
+});
diff --git a/app/javascript/shared/composables/specs/useMessageFormatter.spec.js b/app/javascript/shared/composables/specs/useMessageFormatter.spec.js
new file mode 100644
index 0000000000000..e9e3962d72ac9
--- /dev/null
+++ b/app/javascript/shared/composables/specs/useMessageFormatter.spec.js
@@ -0,0 +1,79 @@
+import { useMessageFormatter } from '../useMessageFormatter';
+
+describe('useMessageFormatter', () => {
+  let messageFormatter;
+
+  beforeEach(() => {
+    messageFormatter = useMessageFormatter();
+  });
+
+  describe('formatMessage', () => {
+    it('should format a regular message correctly', () => {
+      const message = 'This is a [test](https://example.com) message';
+      const result = messageFormatter.formatMessage(message, false, false);
+      expect(result).toContain('<a href="https://example.com"');
+      expect(result).toContain('class="link"');
+    });
+
+    it('should format a tweet correctly', () => {
+      const message = '@user #hashtag';
+      const result = messageFormatter.formatMessage(message, true, false);
+      expect(result).toContain('<a href="http://twitter.com/user"');
+      expect(result).toContain('<a href="https://twitter.com/hashtag/hashtag"');
+    });
+
+    it('should not format mentions and hashtags for private notes', () => {
+      const message = '@user #hashtag';
+      const result = messageFormatter.formatMessage(message, false, true);
+      expect(result).not.toContain('<a href="http://twitter.com/user"');
+      expect(result).not.toContain(
+        '<a href="https://twitter.com/hashtag/hashtag"'
+      );
+    });
+  });
+
+  describe('truncateMessage', () => {
+    it('should not truncate short messages', () => {
+      const message = 'Short message';
+      const result = messageFormatter.truncateMessage(message);
+      expect(result).toBe(message);
+    });
+
+    it('should truncate long messages', () => {
+      const message = 'A'.repeat(150);
+      const result = messageFormatter.truncateMessage(message);
+      expect(result.length).toBe(100);
+      expect(result.endsWith('...')).toBe(true);
+    });
+  });
+
+  describe('highlightContent', () => {
+    it('should highlight search term in content', () => {
+      const content = 'This is a test message';
+      const searchTerm = 'test';
+      const highlightClass = 'highlight';
+      const result = messageFormatter.highlightContent(
+        content,
+        searchTerm,
+        highlightClass
+      );
+      expect(result.trim()).toBe(
+        'This is a <span class="highlight">test</span> message'
+      );
+    });
+
+    it('should handle special characters in search term', () => {
+      const content = 'This (message) contains [special] characters';
+      const searchTerm = '(message)';
+      const highlightClass = 'highlight';
+      const result = messageFormatter.highlightContent(
+        content,
+        searchTerm,
+        highlightClass
+      );
+      expect(result.trim()).toBe(
+        'This <span class="highlight">(message)</span> contains [special] characters'
+      );
+    });
+  });
+});
diff --git a/app/javascript/shared/composables/useCampaign.js b/app/javascript/shared/composables/useCampaign.js
new file mode 100644
index 0000000000000..1d48d360590f6
--- /dev/null
+++ b/app/javascript/shared/composables/useCampaign.js
@@ -0,0 +1,43 @@
+import { computed } from 'vue';
+import { useRoute } from 'dashboard/composables/route';
+import { CAMPAIGN_TYPES } from '../constants/campaign';
+
+/**
+ * Composable to manage campaign types.
+ *
+ * @returns {Object} - Computed properties for campaign type and its checks.
+ */
+export const useCampaign = () => {
+  const route = useRoute();
+
+  /**
+   * Computed property to determine the current campaign type based on the route name.
+   */
+  const campaignType = computed(() => {
+    const campaignTypeMap = {
+      ongoing_campaigns: CAMPAIGN_TYPES.ONGOING,
+      one_off: CAMPAIGN_TYPES.ONE_OFF,
+    };
+    return campaignTypeMap[route.name];
+  });
+
+  /**
+   * Computed property to check if the current campaign type is 'ongoing'.
+   */
+  const isOngoingType = computed(() => {
+    return campaignType.value === CAMPAIGN_TYPES.ONGOING;
+  });
+
+  /**
+   * Computed property to check if the current campaign type is 'one-off'.
+   */
+  const isOneOffType = computed(() => {
+    return campaignType.value === CAMPAIGN_TYPES.ONE_OFF;
+  });
+
+  return {
+    campaignType,
+    isOngoingType,
+    isOneOffType,
+  };
+};
diff --git a/app/javascript/shared/composables/useFilter.js b/app/javascript/shared/composables/useFilter.js
new file mode 100644
index 0000000000000..656b763392aa4
--- /dev/null
+++ b/app/javascript/shared/composables/useFilter.js
@@ -0,0 +1,181 @@
+import wootConstants from 'dashboard/constants/globals';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { filterAttributeGroups as conversationFilterAttributeGroups } from 'dashboard/components/widgets/conversation/advancedFilterItems';
+import { filterAttributeGroups as contactFilterAttributeGroups } from 'dashboard/routes/dashboard/contacts/contactFilterItems';
+import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
+
+const customAttributeInputType = key => {
+  switch (key) {
+    case 'date':
+      return 'date';
+    case 'text':
+      return 'plain_text';
+    case 'list':
+      return 'search_select';
+    case 'checkbox':
+      return 'search_select';
+    default:
+      return 'plain_text';
+  }
+};
+
+const getOperatorTypes = key => {
+  switch (key) {
+    case 'list':
+      return OPERATORS.OPERATOR_TYPES_1;
+    case 'text':
+      return OPERATORS.OPERATOR_TYPES_3;
+    case 'number':
+      return OPERATORS.OPERATOR_TYPES_1;
+    case 'link':
+      return OPERATORS.OPERATOR_TYPES_1;
+    case 'date':
+      return OPERATORS.OPERATOR_TYPES_4;
+    case 'checkbox':
+      return OPERATORS.OPERATOR_TYPES_1;
+    default:
+      return OPERATORS.OPERATOR_TYPES_1;
+  }
+};
+
+export const useFilter = ({ filteri18nKey, attributeModel }) => {
+  const { t: $t } = useI18n();
+  const { getters } = useStore();
+
+  const filterAttributeGroups =
+    attributeModel === 'contact_attribute'
+      ? contactFilterAttributeGroups
+      : conversationFilterAttributeGroups;
+
+  const setFilterAttributes = () => {
+    const allCustomAttributes =
+      getters['attributes/getAttributesByModel'](attributeModel);
+
+    const customAttributesFormatted = {
+      name: $t(`${filteri18nKey}.GROUPS.CUSTOM_ATTRIBUTES`),
+      attributes: allCustomAttributes.map(attr => {
+        return {
+          key: attr.attribute_key,
+          name: attr.attribute_display_name,
+        };
+      }),
+    };
+
+    const allFilterGroups = filterAttributeGroups.map(group => {
+      return {
+        name: $t(`${filteri18nKey}.GROUPS.${group.i18nGroup}`),
+        attributes: group.attributes.map(attribute => {
+          return {
+            key: attribute.key,
+            name: $t(`${filteri18nKey}.ATTRIBUTES.${attribute.i18nKey}`),
+          };
+        }),
+      };
+    });
+
+    const customAttributeTypes = allCustomAttributes.map(attr => {
+      return {
+        attributeKey: attr.attribute_key,
+        attributeI18nKey: `CUSTOM_ATTRIBUTE_${attr.attribute_display_type.toUpperCase()}`,
+        inputType: customAttributeInputType(attr.attribute_display_type),
+        filterOperators: getOperatorTypes(attr.attribute_display_type),
+        attributeModel: 'custom_attributes',
+      };
+    });
+
+    return {
+      filterGroups: [...allFilterGroups, customAttributesFormatted],
+      filterTypes: [...customAttributeTypes],
+    };
+  };
+
+  const initializeStatusAndAssigneeFilterToModal = (
+    activeStatus,
+    currentUserDetails,
+    activeAssigneeTab
+  ) => {
+    if (activeStatus !== '') {
+      return {
+        attribute_key: 'status',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: [
+          {
+            id: activeStatus,
+            name: $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`),
+          },
+        ],
+        query_operator: 'and',
+        custom_attribute_type: '',
+      };
+    }
+    if (activeAssigneeTab === wootConstants.ASSIGNEE_TYPE.ME) {
+      return {
+        attribute_key: 'assignee_id',
+        filter_operator: 'equal_to',
+        values: currentUserDetails,
+        query_operator: 'and',
+        custom_attribute_type: '',
+      };
+    }
+    return null;
+  };
+
+  const initializeInboxTeamAndLabelFilterToModal = (
+    conversationInbox,
+    inbox,
+    teamId,
+    activeTeam,
+    label
+  ) => {
+    const filters = [];
+    if (conversationInbox) {
+      filters.push({
+        attribute_key: 'inbox_id',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: [
+          {
+            id: conversationInbox,
+            name: inbox.name,
+          },
+        ],
+        query_operator: 'and',
+        custom_attribute_type: '',
+      });
+    }
+    if (teamId) {
+      filters.push({
+        attribute_key: 'team_id',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: activeTeam,
+        query_operator: 'and',
+        custom_attribute_type: '',
+      });
+    }
+    if (label) {
+      filters.push({
+        attribute_key: 'labels',
+        attribute_model: 'standard',
+        filter_operator: 'equal_to',
+        values: [
+          {
+            id: label,
+            name: label,
+          },
+        ],
+        query_operator: 'and',
+        custom_attribute_type: '',
+      });
+    }
+    return filters;
+  };
+
+  return {
+    setFilterAttributes,
+    initializeStatusAndAssigneeFilterToModal,
+    initializeInboxTeamAndLabelFilterToModal,
+  };
+};
diff --git a/app/javascript/shared/composables/useMessageFormatter.js b/app/javascript/shared/composables/useMessageFormatter.js
new file mode 100644
index 0000000000000..16b7f25a6d220
--- /dev/null
+++ b/app/javascript/shared/composables/useMessageFormatter.js
@@ -0,0 +1,82 @@
+import MessageFormatter from '../helpers/MessageFormatter';
+
+/**
+ * A composable providing utility functions for message formatting.
+ *
+ * @returns {Object} A set of functions for message formatting.
+ */
+export const useMessageFormatter = () => {
+  /**
+   * Formats a message based on specified conditions.
+   *
+   * @param {string} message - The message to be formatted.
+   * @param {boolean} isATweet - Whether the message is a tweet.
+   * @param {boolean} isAPrivateNote - Whether the message is a private note.
+   * @returns {string} - The formatted message.
+   */
+  const formatMessage = (message, isATweet, isAPrivateNote) => {
+    const messageFormatter = new MessageFormatter(
+      message,
+      isATweet,
+      isAPrivateNote
+    );
+    return messageFormatter.formattedMessage;
+  };
+
+  /**
+   * Converts a message to plain text.
+   *
+   * @param {string} message - The message to be converted.
+   * @param {boolean} isATweet - Whether the message is a tweet.
+   * @returns {string} - The plain text message.
+   */
+  const getPlainText = (message, isATweet) => {
+    const messageFormatter = new MessageFormatter(message, isATweet);
+    return messageFormatter.plainText;
+  };
+
+  /**
+   * Truncates a description to a maximum length of 100 characters.
+   *
+   * @param {string} [description=''] - The description to be truncated.
+   * @returns {string} - The truncated description.
+   */
+  const truncateMessage = (description = '') => {
+    if (description.length < 100) {
+      return description;
+    }
+
+    return `${description.slice(0, 97)}...`;
+  };
+
+  /**
+   * Highlights occurrences of a search term within given content.
+   *
+   * @param {string} [content=''] - The content in which to search.
+   * @param {string} [searchTerm=''] - The term to search for.
+   * @param {string} [highlightClass=''] - The CSS class to apply to the highlighted term.
+   * @returns {string} - The content with highlighted terms.
+   */
+  const highlightContent = (
+    content = '',
+    searchTerm = '',
+    highlightClass = ''
+  ) => {
+    const plainTextContent = getPlainText(content);
+
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
+    const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+    return plainTextContent.replace(
+      new RegExp(`(${escapedSearchTerm})`, 'ig'),
+      `<span class="${highlightClass}">$1</span>`
+    );
+  };
+
+  return {
+    formatMessage,
+    getPlainText,
+    truncateMessage,
+    highlightContent,
+  };
+};
diff --git a/app/javascript/shared/helpers/MessageTypeHelper.js b/app/javascript/shared/helpers/MessageTypeHelper.js
index 29bfaed60756b..4ec3f8bbc067d 100644
--- a/app/javascript/shared/helpers/MessageTypeHelper.js
+++ b/app/javascript/shared/helpers/MessageTypeHelper.js
@@ -7,4 +7,5 @@ export const MESSAGE_MAX_LENGTH = {
   FACEBOOK: 1000,
   TWILIO_SMS: 320,
   TWILIO_WHATSAPP: 1600,
+  EMAIL: 25000,
 };
diff --git a/app/javascript/shared/mixins/campaignMixin.js b/app/javascript/shared/mixins/campaignMixin.js
deleted file mode 100644
index 01c20b5bb8c0e..0000000000000
--- a/app/javascript/shared/mixins/campaignMixin.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { CAMPAIGN_TYPES } from '../constants/campaign';
-
-export default {
-  computed: {
-    campaignType() {
-      const campaignTypeMap = {
-        ongoing_campaigns: CAMPAIGN_TYPES.ONGOING,
-        one_off: CAMPAIGN_TYPES.ONE_OFF,
-      };
-      return campaignTypeMap[this.$route.name];
-    },
-    isOngoingType() {
-      return this.campaignType === CAMPAIGN_TYPES.ONGOING;
-    },
-    isOneOffType() {
-      return this.campaignType === CAMPAIGN_TYPES.ONE_OFF;
-    },
-  },
-};
diff --git a/app/javascript/shared/mixins/filterMixin.js b/app/javascript/shared/mixins/filterMixin.js
deleted file mode 100644
index 7d402ba028e65..0000000000000
--- a/app/javascript/shared/mixins/filterMixin.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import wootConstants from 'dashboard/constants/globals';
-
-export default {
-  methods: {
-    setFilterAttributes() {
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ](this.attributeModel);
-      const customAttributesFormatted = {
-        name: this.$t(`${this.filtersFori18n}.GROUPS.CUSTOM_ATTRIBUTES`),
-        attributes: allCustomAttributes.map(attr => {
-          return {
-            key: attr.attribute_key,
-            name: attr.attribute_display_name,
-          };
-        }),
-      };
-      const allFilterGroups = this.filterAttributeGroups.map(group => {
-        return {
-          name: this.$t(`${this.filtersFori18n}.GROUPS.${group.i18nGroup}`),
-          attributes: group.attributes.map(attribute => {
-            return {
-              key: attribute.key,
-              name: this.$t(
-                `${this.filtersFori18n}.ATTRIBUTES.${attribute.i18nKey}`
-              ),
-            };
-          }),
-        };
-      });
-      const customAttributeTypes = allCustomAttributes.map(attr => {
-        return {
-          attributeKey: attr.attribute_key,
-          attributeI18nKey: `CUSTOM_ATTRIBUTE_${attr.attribute_display_type.toUpperCase()}`,
-          inputType: this.customAttributeInputType(attr.attribute_display_type),
-          filterOperators: this.getOperatorTypes(attr.attribute_display_type),
-          attributeModel: 'custom_attributes',
-        };
-      });
-      this.filterTypes = [...this.filterTypes, ...customAttributeTypes];
-      this.filterGroups = [...allFilterGroups, customAttributesFormatted];
-    },
-
-    initializeExistingFilterToModal() {
-      this.initializeStatusAndAssigneeFilterToModal();
-      this.initializeInboxTeamAndLabelFilterToModal();
-    },
-    initializeStatusAndAssigneeFilterToModal() {
-      if (this.activeStatus !== '') {
-        this.appliedFilter.push({
-          attribute_key: 'status',
-          attribute_model: 'standard',
-          filter_operator: 'equal_to',
-          values: [
-            {
-              id: this.activeStatus,
-              name: this.$t(
-                `CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${this.activeStatus}.TEXT`
-              ),
-            },
-          ],
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-      if (this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE.ME) {
-        this.appliedFilter.push({
-          attribute_key: 'assignee_id',
-          filter_operator: 'equal_to',
-          values: this.currentUserDetails,
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-    },
-    initializeInboxTeamAndLabelFilterToModal() {
-      if (this.conversationInbox) {
-        this.appliedFilter.push({
-          attribute_key: 'inbox_id',
-          attribute_model: 'standard',
-          filter_operator: 'equal_to',
-          values: [
-            {
-              id: this.conversationInbox,
-              name: this.inbox.name,
-            },
-          ],
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-      if (this.teamId) {
-        this.appliedFilter.push({
-          attribute_key: 'team_id',
-          attribute_model: 'standard',
-          filter_operator: 'equal_to',
-          values: this.activeTeam,
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-      if (this.label) {
-        this.appliedFilter.push({
-          attribute_key: 'labels',
-          attribute_model: 'standard',
-          filter_operator: 'equal_to',
-          values: [
-            {
-              id: this.label,
-              name: this.label,
-            },
-          ],
-          query_operator: 'and',
-          custom_attribute_type: '',
-        });
-      }
-    },
-  },
-};
diff --git a/app/javascript/shared/mixins/messageFormatterMixin.js b/app/javascript/shared/mixins/messageFormatterMixin.js
deleted file mode 100644
index 01e2bef9e3c4f..0000000000000
--- a/app/javascript/shared/mixins/messageFormatterMixin.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import MessageFormatter from '../helpers/MessageFormatter';
-
-export default {
-  methods: {
-    formatMessage(message, isATweet, isAPrivateNote) {
-      const messageFormatter = new MessageFormatter(
-        message,
-        isATweet,
-        isAPrivateNote
-      );
-      return messageFormatter.formattedMessage;
-    },
-    getPlainText(message, isATweet) {
-      const messageFormatter = new MessageFormatter(message, isATweet);
-      return messageFormatter.plainText;
-    },
-    truncateMessage(description = '') {
-      if (description.length < 100) {
-        return description;
-      }
-
-      return `${description.slice(0, 97)}...`;
-    },
-
-    highlightContent(content = '', searchTerm = '', highlightClass = '') {
-      const plainTextContent = this.getPlainText(content);
-
-      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
-      const escapedSearchTerm = searchTerm.replace(
-        /[.*+?^${}()|[\]\\]/g,
-        '\\$&'
-      );
-
-      return plainTextContent.replace(
-        new RegExp(`(${escapedSearchTerm})`, 'ig'),
-        `<span class="${highlightClass}">$1</span>`
-      );
-    },
-  },
-};
diff --git a/app/javascript/shared/mixins/specs/automationMixin.spec.js b/app/javascript/shared/mixins/specs/automationMixin.spec.js
deleted file mode 100644
index 336e35294aeee..0000000000000
--- a/app/javascript/shared/mixins/specs/automationMixin.spec.js
+++ /dev/null
@@ -1,450 +0,0 @@
-import methodsMixin from '../../../dashboard/mixins/automations/methodsMixin';
-import {
-  automation,
-  customAttributes,
-  agents,
-  booleanFilterOptions,
-  teams,
-  labels,
-  statusFilterOptions,
-  campaigns,
-  contacts,
-  inboxes,
-  languages,
-  countries,
-  slaPolicies,
-  MESSAGE_CONDITION_VALUES,
-  automationToSubmit,
-  savedAutomation,
-} from './automationFixtures';
-import {
-  AUTOMATIONS,
-  AUTOMATION_ACTION_TYPES,
-} from '../../../dashboard/routes/dashboard/settings/automation/constants.js';
-
-import { createWrapper, createLocalVue } from '@vue/test-utils';
-import Vue from 'vue';
-import Vuex from 'vuex';
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-// Vuelidate required to test submit method
-
-const createComponent = (
-  mixins,
-  data,
-  // eslint-disable-next-line default-param-last
-  computed = {},
-  // eslint-disable-next-line default-param-last
-  methods = {},
-  validations
-) => {
-  const Component = {
-    render() {},
-    mixins,
-    data,
-    computed,
-    methods,
-    validations,
-  };
-  const Constructor = Vue.extend(Component);
-  const vm = new Constructor().$mount();
-  return createWrapper(vm);
-};
-
-const generateComputedProperties = () => {
-  return {
-    statusFilterOptions() {
-      return statusFilterOptions;
-    },
-    agents() {
-      return agents;
-    },
-    customAttributes() {
-      return customAttributes;
-    },
-    labels() {
-      return labels;
-    },
-    teams() {
-      return teams;
-    },
-    booleanFilterOptions() {
-      return booleanFilterOptions;
-    },
-    campaigns() {
-      return campaigns;
-    },
-    contacts() {
-      return contacts;
-    },
-    inboxes() {
-      return inboxes;
-    },
-    languages() {
-      return languages;
-    },
-    countries() {
-      return countries;
-    },
-    slaPolicies() {
-      return slaPolicies;
-    },
-    MESSAGE_CONDITION_VALUES() {
-      return MESSAGE_CONDITION_VALUES;
-    },
-  };
-};
-
-describe('automationMethodsMixin', () => {
-  it('getFileName returns the correct file name', () => {
-    const data = () => {
-      return {};
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    expect(
-      wrapper.vm.getFileName(automation.actions[0], automation.files)
-    ).toEqual(automation.files[0].filename);
-  });
-
-  it('getAttributes returns all attributes', () => {
-    const data = () => {
-      return {
-        automationTypes: AUTOMATIONS,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    expect(wrapper.vm.getAttributes('conversation_created')).toEqual(
-      AUTOMATIONS.conversation_created.conditions
-    );
-  });
-
-  it('getAttributes returns all respective attributes', () => {
-    const data = () => {
-      return {
-        allCustomAttributes: customAttributes,
-        automationTypes: AUTOMATIONS,
-        automation,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    expect(wrapper.vm.getInputType('status')).toEqual('multi_select');
-    expect(wrapper.vm.getInputType('my_list')).toEqual('search_select');
-  });
-
-  it('getOperators returns all respective operators', () => {
-    const data = () => {
-      return {
-        allCustomAttributes: customAttributes,
-        automationTypes: AUTOMATIONS,
-        automation,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    expect(wrapper.vm.getOperators('status')).toEqual(
-      AUTOMATIONS.conversation_created.conditions[0].filterOperators
-    );
-  });
-
-  it('getAutomationType returns the correct automationType', () => {
-    const data = () => {
-      return {
-        automationTypes: AUTOMATIONS,
-        automation,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    expect(wrapper.vm.getAutomationType('status')).toEqual(
-      AUTOMATIONS[automation.event_name].conditions[0]
-    );
-  });
-
-  it('getConditionDropdownValues returns respective condition dropdown values', () => {
-    const computed = generateComputedProperties();
-    const data = () => {
-      return {
-        allCustomAttributes: customAttributes,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data, computed);
-    expect(wrapper.vm.getConditionDropdownValues('status')).toEqual(
-      statusFilterOptions
-    );
-    expect(wrapper.vm.getConditionDropdownValues('team_id')).toEqual(teams);
-    expect(wrapper.vm.getConditionDropdownValues('assignee_id')).toEqual(
-      agents
-    );
-    expect(wrapper.vm.getConditionDropdownValues('contact')).toEqual(contacts);
-    expect(wrapper.vm.getConditionDropdownValues('inbox_id')).toEqual(inboxes);
-    expect(wrapper.vm.getConditionDropdownValues('campaigns')).toEqual(
-      campaigns
-    );
-    expect(wrapper.vm.getConditionDropdownValues('browser_language')).toEqual(
-      languages
-    );
-    expect(wrapper.vm.getConditionDropdownValues('country_code')).toEqual(
-      countries
-    );
-    expect(wrapper.vm.getConditionDropdownValues('message_type')).toEqual(
-      MESSAGE_CONDITION_VALUES
-    );
-  });
-
-  it('appendNewCondition appends a new condition to the automation data property', () => {
-    const condition = {
-      attribute_key: 'status',
-      filter_operator: 'equal_to',
-      values: '',
-      query_operator: 'and',
-      custom_attribute_type: '',
-    };
-    const data = () => {
-      return {
-        automation,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    wrapper.vm.appendNewCondition();
-    expect(automation.conditions[automation.conditions.length - 1]).toEqual(
-      condition
-    );
-  });
-
-  it('appendNewAction appends a new condition to the automation data property', () => {
-    const action = {
-      action_name: 'assign_agent',
-      action_params: [],
-    };
-    const data = () => {
-      return {
-        automation,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    wrapper.vm.appendNewAction();
-    expect(automation.actions[automation.actions.length - 1]).toEqual(action);
-  });
-
-  it('removeFilter removes the given condition in the automation', () => {
-    const data = () => {
-      return {
-        automation,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    wrapper.vm.removeFilter(0);
-    expect(automation.conditions.length).toEqual(1);
-  });
-
-  it('removeAction removes the given action in the automation', () => {
-    const data = () => {
-      return {
-        automation,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    wrapper.vm.removeAction(0);
-    expect(automation.actions.length).toEqual(1);
-  });
-
-  it('resetFilter resets the current automation conditions', () => {
-    const data = () => {
-      return {
-        automation: automationToSubmit,
-        automationTypes: AUTOMATIONS,
-      };
-    };
-    const conditionAfterReset = {
-      attribute_key: 'status',
-      filter_operator: 'equal_to',
-      values: '',
-      query_operator: 'and',
-      custom_attribute_type: '',
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    wrapper.vm.resetFilter(0, automationToSubmit.conditions[0]);
-    expect(automation.conditions[0]).toEqual(conditionAfterReset);
-  });
-
-  it('showUserInput returns boolean value based on the operator type', () => {
-    const data = () => {
-      return {};
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    expect(wrapper.vm.showUserInput('is_present')).toBeFalsy();
-    expect(wrapper.vm.showUserInput('is_not_present')).toBeFalsy();
-    expect(wrapper.vm.showUserInput('equal_to')).toBeTruthy();
-    expect(wrapper.vm.showUserInput('not_equal_to')).toBeTruthy();
-  });
-
-  it('showActionInput returns boolean value based on the action type', () => {
-    const data = () => {
-      return {
-        automationActionTypes: AUTOMATION_ACTION_TYPES,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    expect(wrapper.vm.showActionInput('send_email_to_team')).toBeFalsy();
-    expect(wrapper.vm.showActionInput('send_message')).toBeFalsy();
-    expect(wrapper.vm.showActionInput('send_webhook_event')).toBeTruthy();
-    expect(wrapper.vm.showActionInput('resolve_conversation')).toBeFalsy();
-    expect(wrapper.vm.showActionInput('add_label')).toBeTruthy();
-  });
-
-  it('resetAction resets the action to default state', () => {
-    const data = () => {
-      return {
-        automation,
-      };
-    };
-    const wrapper = createComponent([methodsMixin], data);
-    wrapper.vm.resetAction(0);
-    expect(automation.actions[0].action_params).toEqual([]);
-  });
-
-  it('manifestConditions resets the action to default state', () => {
-    const data = () => {
-      return {
-        automation: {},
-        allCustomAttributes: customAttributes,
-        automationTypes: AUTOMATIONS,
-      };
-    };
-    const methods = {
-      getConditionDropdownValues() {
-        return statusFilterOptions;
-      },
-    };
-
-    const manifestedConditions = [
-      {
-        values: [
-          {
-            id: 'open',
-            name: 'Open',
-          },
-        ],
-        attribute_key: 'status',
-        filter_operator: 'equal_to',
-        query_operator: 'and',
-      },
-    ];
-    const wrapper = createComponent([methodsMixin], data, {}, methods);
-    expect(wrapper.vm.manifestConditions(savedAutomation)).toEqual(
-      manifestedConditions
-    );
-  });
-
-  it('generateActionsArray return the manifested actions array', () => {
-    const data = () => {
-      return {
-        automationActionTypes: AUTOMATION_ACTION_TYPES,
-      };
-    };
-    const computed = {
-      agents() {
-        return agents;
-      },
-      labels() {
-        return labels;
-      },
-      teams() {
-        return teams;
-      },
-    };
-
-    const methods = {
-      getActionDropdownValues() {
-        return [
-          {
-            id: 2,
-            name: 'testlabel',
-          },
-          {
-            id: 1,
-            name: 'snoozes',
-          },
-        ];
-      },
-    };
-    const testAction = {
-      action_name: 'add_label',
-      action_params: [2],
-    };
-
-    const expectedActionArray = [
-      {
-        id: 2,
-        name: 'testlabel',
-      },
-    ];
-
-    const wrapper = createComponent([methodsMixin], data, computed, methods);
-    expect(wrapper.vm.generateActionsArray(testAction)).toEqual(
-      expectedActionArray
-    );
-  });
-
-  it('manifestActions manifest the received action and generate the correct array', () => {
-    const data = () => {
-      return {
-        automation: {},
-        allCustomAttributes: customAttributes,
-        automationTypes: AUTOMATIONS,
-      };
-    };
-    const methods = {
-      generateActionsArray() {
-        return [
-          {
-            id: 2,
-            name: 'testlabel',
-          },
-        ];
-      },
-    };
-    const expectedActions = [
-      {
-        action_name: 'add_label',
-        action_params: [
-          {
-            id: 2,
-            name: 'testlabel',
-          },
-        ],
-      },
-    ];
-    const wrapper = createComponent([methodsMixin], data, {}, methods);
-    expect(wrapper.vm.manifestActions(savedAutomation)).toEqual(
-      expectedActions
-    );
-  });
-
-  it('getActionDropdownValues returns Action dropdown Values', () => {
-    const data = () => {
-      return {};
-    };
-    const computed = {
-      agents() {
-        return agents;
-      },
-      labels() {
-        return labels;
-      },
-      teams() {
-        return teams;
-      },
-      slaPolicies() {
-        return slaPolicies;
-      },
-    };
-    const expectedActionDropdownValues = [
-      { id: 'testlabel', name: 'testlabel' },
-      { id: 'snoozes', name: 'snoozes' },
-    ];
-    const wrapper = createComponent([methodsMixin], data, computed);
-    expect(wrapper.vm.getActionDropdownValues('add_label')).toEqual(
-      expectedActionDropdownValues
-    );
-  });
-});
diff --git a/app/javascript/shared/mixins/specs/campaignMixin.spec.js b/app/javascript/shared/mixins/specs/campaignMixin.spec.js
deleted file mode 100644
index 625b538e8d5cf..0000000000000
--- a/app/javascript/shared/mixins/specs/campaignMixin.spec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import campaignMixin from '../campaignMixin';
-
-const buildComponent = routeName => ({
-  template: '<div></div>',
-  computed: {
-    $route() {
-      return { name: routeName };
-    },
-  },
-  mixins: [campaignMixin],
-});
-
-describe('campaignMixin', () => {
-  beforeEach(() => {
-    global.window = Object.create(window);
-  });
-  it('returns the correct campaign type', () => {
-    const Component = buildComponent('one_off');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.campaignType).toBe('one_off');
-  });
-  it('isOneOffType returns true if path is one_off', () => {
-    const Component = buildComponent('one_off');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isOneOffType).toBe(true);
-  });
-
-  it('isOngoingType returns true if path is ongoing_campaigns', () => {
-    const Component = buildComponent('ongoing_campaigns');
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isOngoingType).toBe(true);
-  });
-});
diff --git a/app/javascript/shared/mixins/specs/filterMixin.spec.js b/app/javascript/shared/mixins/specs/filterMixin.spec.js
deleted file mode 100644
index 4b54e9326a954..0000000000000
--- a/app/javascript/shared/mixins/specs/filterMixin.spec.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import filterMixin from '../filterMixin';
-import { shallowMount } from '@vue/test-utils';
-import MockComponent from './MockComponent.vue';
-
-describe('Test mixin function', () => {
-  const wrapper = shallowMount(MockComponent, {
-    mixins: [filterMixin],
-  });
-
-  it('should return proper value from bool', () => {
-    expect(wrapper.vm.setFilterAttributes).toBeTruthy();
-  });
-
-  it('should return proper value from bool', () => {
-    expect(wrapper.vm.initializeExistingFilterToModal).toBeTruthy();
-  });
-});
diff --git a/app/javascript/shared/mixins/specs/messageFormatterMixin.spec.js b/app/javascript/shared/mixins/specs/messageFormatterMixin.spec.js
deleted file mode 100644
index 81f653d7fed73..0000000000000
--- a/app/javascript/shared/mixins/specs/messageFormatterMixin.spec.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import messageFormatterMixin from '../messageFormatterMixin';
-
-describe('messageFormatterMixin', () => {
-  it('returns correct plain text', () => {
-    const Component = {
-      render() {},
-      mixins: [messageFormatterMixin],
-    };
-    const wrapper = shallowMount(Component);
-    const message =
-      '<b>Chatwoot is an opensource tool. https://www.chatwoot.com</b>';
-    expect(wrapper.vm.getPlainText(message)).toMatch(
-      'Chatwoot is an opensource tool. https://www.chatwoot.com'
-    );
-  });
-});
diff --git a/app/javascript/superadmin_pages/views/playground/Index.vue b/app/javascript/superadmin_pages/views/playground/Index.vue
index eda4941cce1b4..9116408344b41 100644
--- a/app/javascript/superadmin_pages/views/playground/Index.vue
+++ b/app/javascript/superadmin_pages/views/playground/Index.vue
@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import PlaygroundHeader from '../../components/playground/Header.vue';
 import UserMessage from '../../components/playground/UserMessage.vue';
 import BotMessage from '../../components/playground/BotMessage.vue';
@@ -12,13 +12,18 @@ export default {
     BotMessage,
     TypingIndicator,
   },
-  mixins: [messageFormatterMixin],
   props: {
     componentData: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   data() {
     return { messages: [], messageContent: '', isWaiting: false };
   },
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 6645465c596d0..ff9008321f924 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -18,7 +18,7 @@ import {
   ON_CAMPAIGN_MESSAGE_CLICK,
   ON_UNREAD_MESSAGE_CLICK,
 } from './constants/widgetBusEvents';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import { SDK_SET_BUBBLE_VISIBILITY } from '../shared/constants/sharedFrameEvents';
 import { emitter } from 'shared/helpers/mitt';
 
@@ -27,7 +27,11 @@ export default {
   components: {
     Spinner,
   },
-  mixins: [availabilityMixin, configMixin, routerMixin, darkModeMixin],
+  mixins: [availabilityMixin, configMixin, routerMixin],
+  setup() {
+    const { prefersDarkMode } = useDarkMode();
+    return { prefersDarkMode };
+  },
   data() {
     return {
       isMobile: false,
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index e7d592abdbf30..2ab00280c616b 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -9,9 +9,9 @@ import FileBubble from 'widget/components/FileBubble.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import configMixin from '../mixins/configMixin';
-import { useMessage } from '../composables/useMessage';
+import messageMixin from '../mixins/messageMixin';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
@@ -28,7 +28,7 @@ export default {
     MessageReplyButton,
     ReplyToChip,
   },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [configMixin, messageMixin],
   props: {
     message: {
       type: Object,
@@ -39,13 +39,10 @@ export default {
       default: () => {},
     },
   },
-  setup(props) {
-    const { messageContentAttributes, hasAttachments } = useMessage(
-      props.message
-    );
+  setup() {
+    const { getThemeClass } = useDarkMode();
     return {
-      messageContentAttributes,
-      hasAttachments,
+      getThemeClass,
     };
   },
   data() {
@@ -201,7 +198,9 @@ export default {
             <div
               v-if="hasAttachments"
               class="space-y-2 chat-bubble has-attachment agent"
-              :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
+              :class="
+                (wrapClass, getThemeClass('bg-white', 'dark:bg-slate-700'))
+              "
             >
               <div
                 v-for="attachment in message.attachments"
@@ -240,7 +239,7 @@ export default {
           v-if="message.showAvatar || hasRecordedResponse"
           v-dompurify-html="agentName"
           class="agent-name"
-          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+          :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
         />
       </div>
     </div>
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index c1c0cc8d054f2..1eac4e858ec4e 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -1,12 +1,12 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import ChatCard from 'shared/components/ChatCard.vue';
 import ChatForm from 'shared/components/ChatForm.vue';
 import ChatOptions from 'shared/components/ChatOptions.vue';
 import ChatArticle from './template/Article.vue';
 import EmailInput from './template/EmailInput.vue';
 import CustomerSatisfaction from 'shared/components/CustomerSatisfaction.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import IntegrationCard from './template/IntegrationCard.vue';
 
 export default {
@@ -20,7 +20,6 @@ export default {
     CustomerSatisfaction,
     IntegrationCard,
   },
-  mixins: [messageFormatterMixin, darkModeMixin],
   props: {
     message: { type: String, default: null },
     contentType: { type: String, default: null },
@@ -31,6 +30,18 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const { formatMessage, getPlainText, truncateMessage, highlightContent } =
+      useMessageFormatter();
+    const { getThemeClass } = useDarkMode();
+    return {
+      formatMessage,
+      getPlainText,
+      truncateMessage,
+      highlightContent,
+      getThemeClass,
+    };
+  },
   computed: {
     isTemplate() {
       return this.messageType === 3;
@@ -88,7 +99,7 @@ export default {
         !isCards && !isOptions && !isForm && !isArticle && !isCards && !isCSAT
       "
       class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-700 has-dark-mode')"
+      :class="getThemeClass('bg-white', 'dark:bg-slate-700 has-dark-mode')"
     >
       <div
         v-dompurify-html="formatMessage(message, false)"
diff --git a/app/javascript/widget/components/AgentTypingBubble.vue b/app/javascript/widget/components/AgentTypingBubble.vue
index a84d8fc7b38c4..6a27334bcd79a 100644
--- a/app/javascript/widget/components/AgentTypingBubble.vue
+++ b/app/javascript/widget/components/AgentTypingBubble.vue
@@ -1,8 +1,11 @@
 <script>
-import darkModeMixing from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
   name: 'AgentTypingBubble',
-  mixins: [darkModeMixing],
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
 };
 </script>
 
@@ -13,7 +16,7 @@ export default {
       <div class="message-wrap mt-2">
         <div
           class="typing-bubble chat-bubble agent"
-          :class="$dm('bg-white', 'dark:bg-slate-700')"
+          :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
         >
           <img
             src="~widget/assets/images/typing.gif"
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 5083f6ef5a87e..3f644fa609230 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -4,7 +4,7 @@ import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions.vue';
 import routerMixin from 'widget/mixins/routerMixin';
-import darkMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   name: 'ChatHeader',
@@ -12,7 +12,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [nextAvailabilityTime, availabilityMixin, routerMixin, darkMixin],
+  mixins: [nextAvailabilityTime, availabilityMixin, routerMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -35,6 +35,10 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
@@ -57,7 +61,7 @@ export default {
 <template>
   <header
     class="flex justify-between w-full p-5"
-    :class="$dm('bg-white', 'dark:bg-slate-900')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-900')"
   >
     <div class="flex items-center">
       <button
@@ -68,7 +72,7 @@ export default {
         <FluentIcon
           icon="chevron-left"
           size="24"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
+          :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
         />
       </button>
       <img
@@ -80,7 +84,7 @@ export default {
       <div>
         <div
           class="flex items-center text-base font-medium leading-4"
-          :class="$dm('text-black-900', 'dark:text-slate-50')"
+          :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
         >
           <span v-dompurify-html="title" class="mr-1" />
           <div
@@ -90,7 +94,7 @@ export default {
         </div>
         <div
           class="mt-1 text-xs leading-3"
-          :class="$dm('text-black-700', 'dark:text-slate-400')"
+          :class="getThemeClass('text-black-700', 'dark:text-slate-400')"
         >
           {{ replyWaitMessage }}
         </div>
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index 864985fdef0fd..526baba397542 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,13 +1,12 @@
 <script>
 import HeaderActions from './HeaderActions.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   name: 'ChatHeaderExpanded',
   components: {
     HeaderActions,
   },
-  mixins: [darkModeMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -26,6 +25,10 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
 };
 </script>
 
@@ -51,12 +54,12 @@ export default {
     <h2
       v-dompurify-html="introHeading"
       class="mt-4 text-2xl mb-1.5 font-medium"
-      :class="$dm('text-slate-900', 'dark:text-slate-50')"
+      :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
     />
     <p
       v-dompurify-html="introBody"
       class="text-base leading-normal"
-      :class="$dm('text-slate-700', 'dark:text-slate-200')"
+      :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
     />
   </header>
 </template>
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index c68ec3fdfac12..5f09659a3a687 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -6,7 +6,7 @@ import ChatSendButton from 'widget/components/ChatSendButton.vue';
 import configMixin from '../mixins/configMixin';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
@@ -19,7 +19,7 @@ export default {
     FluentIcon,
     ResizableTextArea,
   },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [configMixin],
   props: {
     onSendMessage: {
       type: Function,
@@ -30,7 +30,10 @@ export default {
       default: () => {},
     },
   },
-
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   data() {
     return {
       userInput: '',
@@ -51,13 +54,16 @@ export default {
       return this.userInput.length > 0;
     },
     inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
+        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}`;
     },
     emojiIconColor() {
       return this.showEmojiPicker
-        ? `text-woot-500 ${this.$dm('text-black-900', 'dark:text-slate-100')}`
-        : `${this.$dm('text-black-900', 'dark:text-slate-100')}`;
+        ? `text-woot-500 ${this.getThemeClass(
+            'text-black-900',
+            'dark:text-slate-100'
+          )}`
+        : `${this.getThemeClass('text-black-900', 'dark:text-slate-100')}`;
     },
   },
   watch: {
@@ -128,7 +134,7 @@ export default {
 <template>
   <div
     class="chat-message--input is-focused"
-    :class="$dm('bg-white ', 'dark:bg-slate-600')"
+    :class="getThemeClass('bg-white ', 'dark:bg-slate-600')"
     @keydown.esc="hideEmojiPicker"
   >
     <ResizableTextArea
@@ -148,7 +154,7 @@ export default {
     <div class="button-wrap">
       <ChatAttachmentButton
         v-if="showAttachment"
-        :class="$dm('text-black-900', 'dark:text-slate-100')"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-100')"
         :on-attach="onSendAttachment"
       />
       <button
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index 4213a0a578358..4e817241d2395 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -3,7 +3,7 @@ import ChatMessage from 'widget/components/ChatMessage.vue';
 import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
 import DateSeparator from 'shared/components/DateSeparator.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { mapActions, mapGetters } from 'vuex';
 
@@ -15,13 +15,16 @@ export default {
     DateSeparator,
     Spinner,
   },
-  mixins: [darkModeMixin],
   props: {
     groupedMessages: {
       type: Array,
       default: () => [],
     },
   },
+  setup() {
+    const { darkMode } = useDarkMode();
+    return { darkMode };
+  },
   data() {
     return {
       previousScrollHeight: 0,
diff --git a/app/javascript/widget/components/FileBubble.vue b/app/javascript/widget/components/FileBubble.vue
index faba119f05793..c4b18805d3bee 100644
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/app/javascript/widget/components/FileBubble.vue
@@ -1,13 +1,12 @@
 <script>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   components: {
     FluentIcon,
   },
-  mixins: [darkModeMixin],
   props: {
     url: {
       type: String,
@@ -26,6 +25,10 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     title() {
       return this.isInProgress
@@ -45,7 +48,7 @@ export default {
     },
     titleColor() {
       return !this.isUserBubble
-        ? this.$dm('text-black-900', 'dark:text-slate-50')
+        ? this.getThemeClass('text-black-900', 'dark:text-slate-50')
         : '';
     },
   },
diff --git a/app/javascript/widget/components/Form/Input.vue b/app/javascript/widget/components/Form/Input.vue
index 3c1c7a81c5cc3..29def58bacb88 100644
--- a/app/javascript/widget/components/Form/Input.vue
+++ b/app/javascript/widget/components/Form/Input.vue
@@ -1,7 +1,6 @@
 <script>
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
-  mixins: [darkModeMixin],
   props: {
     label: {
       type: String,
@@ -28,20 +27,33 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     labelClass() {
       return this.error
-        ? `text-red-400 ${this.$dm('text-black-800', 'dark:text-slate-50')}`
-        : `text-black-800 ${this.$dm('text-black-800', 'dark:text-slate-50')}`;
+        ? `text-red-400 ${this.getThemeClass(
+            'text-black-800',
+            'dark:text-slate-50'
+          )}`
+        : `text-black-800 ${this.getThemeClass(
+            'text-black-800',
+            'dark:text-slate-50'
+          )}`;
     },
     isInputDarkOrLightMode() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-600'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     inputBorderColor() {
-      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass(
+        'border-black-200',
+        'dark:border-black-500'
+      )}`;
     },
     inputHasError() {
       return this.error
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index 68ea3f8cb2f6b..06929322ba59d 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -2,13 +2,13 @@
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FormulateInputMixin from '@braid/vue-formulate/src/FormulateInputMixin';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
     FluentIcon,
   },
-  mixins: [FormulateInputMixin, darkModeMixin],
+  mixins: [FormulateInputMixin],
   props: {
     placeholder: {
       type: String,
@@ -19,6 +19,10 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   data() {
     return {
       selectedIndex: -1,
@@ -45,28 +49,31 @@ export default {
       return this.activeCountryCode ? 'Clear selection' : 'Select Country';
     },
     dropdownClass() {
-      return `${this.$dm('bg-slate-100', 'dark:bg-slate-700')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-slate-100',
+        'dark:bg-slate-700'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     dropdownBackgroundClass() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-700')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-700'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     dropdownItemClass() {
-      return `${this.$dm('text-slate-700', 'dark:text-slate-50')} ${this.$dm(
-        'hover:bg-slate-50',
-        'dark:hover:bg-slate-600'
-      )}`;
+      return `${this.getThemeClass(
+        'text-slate-700',
+        'dark:text-slate-50'
+      )} ${this.getThemeClass('hover:bg-slate-50', 'dark:hover:bg-slate-600')}`;
     },
     activeDropdownItemClass() {
-      return `active ${this.$dm('bg-slate-100', 'dark:bg-slate-800')}`;
+      return `active ${this.getThemeClass(
+        'bg-slate-100',
+        'dark:bg-slate-800'
+      )}`;
     },
     focusedDropdownItemClass() {
-      return `focus ${this.$dm('bg-slate-50', 'dark:bg-slate-600')}`;
+      return `focus ${this.getThemeClass('bg-slate-50', 'dark:bg-slate-600')}`;
     },
     inputHasError() {
       return this.hasErrorInPhoneInput
@@ -74,13 +81,16 @@ export default {
         : `hover:border-black-300 focus:border-black-300 ${this.inputLightAndDarkModeColor} ${this.inputBorderColor}`;
     },
     inputBorderColor() {
-      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass(
+        'border-black-200',
+        'dark:border-black-500'
+      )}`;
     },
     inputLightAndDarkModeColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-600'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     items() {
       return this.countries.filter(country => {
@@ -241,7 +251,7 @@ export default {
       <span
         v-if="activeDialCode"
         class="py-2 pl-2 pr-0 text-base"
-        :class="$dm('text-slate-700', 'dark:text-slate-50')"
+        :class="getThemeClass('text-slate-700', 'dark:text-slate-50')"
       >
         {{ activeDialCode }}
       </span>
@@ -273,7 +283,10 @@ export default {
           type="text"
           :placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
           class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"
-          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
+          :class="[
+            getThemeClass('bg-slate-50', 'dark:bg-slate-600'),
+            inputBorderColor,
+          ]"
         />
       </div>
       <div
@@ -298,7 +311,7 @@ export default {
       <div v-if="items.length === 0">
         <span
           class="flex justify-center mt-4 text-sm text-center"
-          :class="$dm('text-slate-700', 'dark:text-slate-50')"
+          :class="getThemeClass('text-slate-700', 'dark:text-slate-50')"
         >
           {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
         </span>
diff --git a/app/javascript/widget/components/Form/TextArea.vue b/app/javascript/widget/components/Form/TextArea.vue
index 3532b09f03adf..a6aa3656c43a6 100644
--- a/app/javascript/widget/components/Form/TextArea.vue
+++ b/app/javascript/widget/components/Form/TextArea.vue
@@ -1,7 +1,6 @@
 <script>
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
-  mixins: [darkModeMixin],
   props: {
     label: {
       type: String,
@@ -20,20 +19,33 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     labelClass() {
       return this.error
-        ? `text-red-400 ${this.$dm('text-black-800', 'dark:text-slate-50')}`
-        : `text-black-800 ${this.$dm('text-black-800', 'dark:text-slate-50')}`;
+        ? `text-red-400 ${this.getThemeClass(
+            'text-black-800',
+            'dark:text-slate-50'
+          )}`
+        : `text-black-800 ${this.getThemeClass(
+            'text-black-800',
+            'dark:text-slate-50'
+          )}`;
     },
     isTextAreaDarkOrLightMode() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-600'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     textAreaBorderColor() {
-      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass(
+        'border-black-200',
+        'dark:border-black-500'
+      )}`;
     },
     isTextAreaHasError() {
       return this.error
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index df8b5fdbf6835..7e945efbf2349 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -3,14 +3,14 @@ import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import configMixin from 'widget/mixins/configMixin';
 import { CONVERSATION_STATUS } from 'shared/constants/messages';
 
 export default {
   name: 'HeaderActions',
   components: { FluentIcon },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [configMixin],
   props: {
     showPopoutButton: {
       type: Boolean,
@@ -21,6 +21,10 @@ export default {
       default: true,
     },
   },
+  setup() {
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass };
+  },
   computed: {
     ...mapGetters({
       conversationAttributes: 'conversationAttributes/getConversationParams',
@@ -92,7 +96,7 @@ export default {
       <FluentIcon
         icon="sign-out"
         size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
       />
     </button>
     <button
@@ -103,7 +107,7 @@ export default {
       <FluentIcon
         icon="open"
         size="22"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
       />
     </button>
     <button
@@ -116,7 +120,7 @@ export default {
       <FluentIcon
         icon="dismiss"
         size="24"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
+        :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
       />
     </button>
   </div>
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 596ba16d9a7b3..96313f69f2cf6 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -5,9 +5,9 @@ import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import { isEmptyObject } from 'widget/helpers/utils';
 import { getRegexp } from 'shared/helpers/Validators';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import routerMixin from 'widget/mixins/routerMixin';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import configMixin from 'widget/mixins/configMixin';
 
 export default {
@@ -15,13 +15,18 @@ export default {
     CustomButton,
     Spinner,
   },
-  mixins: [routerMixin, darkModeMixin, messageFormatterMixin, configMixin],
+  mixins: [routerMixin, configMixin],
   props: {
     options: {
       type: Object,
       default: () => {},
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    const { getThemeClass } = useDarkMode();
+    return { formatMessage, getThemeClass };
+  },
   data() {
     return {
       locale: this.$root.$i18n.locale,
@@ -125,25 +130,28 @@ export default {
       return `mt-1 border rounded w-full py-2 px-3 text-slate-700 outline-none`;
     },
     isInputDarkOrLightMode() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-600'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     inputBorderColor() {
-      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass(
+        'border-black-200',
+        'dark:border-black-500'
+      )}`;
     },
   },
   methods: {
     labelClass(context) {
       const { hasErrors } = context;
       if (!hasErrors) {
-        return `text-xs font-medium ${this.$dm(
+        return `text-xs font-medium ${this.getThemeClass(
           'text-black-800',
           'dark:text-slate-50'
         )}`;
       }
-      return `text-xs font-medium ${this.$dm(
+      return `text-xs font-medium ${this.getThemeClass(
         'text-red-400',
         'dark:text-red-400'
       )}`;
@@ -258,7 +266,7 @@ export default {
       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')"
+      :class="getThemeClass('text-black-800', 'dark:text-slate-50')"
     />
     <FormulateInput
       v-for="item in enabledPreChatFields"
diff --git a/app/javascript/widget/components/UnreadMessage.vue b/app/javascript/widget/components/UnreadMessage.vue
index b90ad9011000c..72b81b860fafe 100644
--- a/app/javascript/widget/components/UnreadMessage.vue
+++ b/app/javascript/widget/components/UnreadMessage.vue
@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import configMixin from '../mixins/configMixin';
 import { isEmptyObject } from 'widget/helpers/utils';
@@ -7,11 +7,11 @@ import {
   ON_CAMPAIGN_MESSAGE_CLICK,
   ON_UNREAD_MESSAGE_CLICK,
 } from '../constants/widgetBusEvents';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 export default {
   name: 'UnreadMessage',
   components: { Thumbnail },
-  mixins: [messageFormatterMixin, configMixin, darkModeMixin],
+  mixins: [configMixin],
   props: {
     message: {
       type: String,
@@ -30,6 +30,18 @@ export default {
       default: null,
     },
   },
+  setup() {
+    const { formatMessage, getPlainText, truncateMessage, highlightContent } =
+      useMessageFormatter();
+    const { getThemeClass } = useDarkMode();
+    return {
+      formatMessage,
+      getPlainText,
+      truncateMessage,
+      highlightContent,
+      getThemeClass,
+    };
+  },
   computed: {
     companyName() {
       return `${this.$t('UNREAD_VIEW.COMPANY_FROM')} ${
@@ -85,7 +97,7 @@ export default {
   <div class="chat-bubble-wrap">
     <button
       class="chat-bubble agent"
-      :class="$dm('bg-white', 'dark:bg-slate-50')"
+      :class="getThemeClass('bg-white', 'dark:bg-slate-50')"
       @click="onClickMessage"
     >
       <div v-if="showSender" class="row--agent-block">
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index 7c7d844e9dc37..7f8528e08a431 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -6,7 +6,7 @@ import VideoBubble from 'widget/components/VideoBubble.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
 import { messageStamp } from 'shared/helpers/timeHelper';
-import { useMessage } from '../composables/useMessage';
+import messageMixin from '../mixins/messageMixin';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
 import DragWrapper from 'widget/components/DragWrapper.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -25,6 +25,7 @@ export default {
     ReplyToChip,
     DragWrapper,
   },
+  mixins: [messageMixin],
   props: {
     message: {
       type: Object,
@@ -35,12 +36,6 @@ export default {
       default: () => {},
     },
   },
-  setup(props) {
-    const { hasAttachments } = useMessage(props.message);
-    return {
-      hasAttachments,
-    };
-  },
   data() {
     return {
       hasImageError: false,
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index 0887c07304ed8..a3004aab9bddb 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -1,10 +1,9 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { getContrastingTextColor } from '@chatwoot/utils';
 
 export default {
   name: 'UserMessageBubble',
-  mixins: [messageFormatterMixin],
   props: {
     message: {
       type: String,
@@ -15,6 +14,12 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   computed: {
     textColor() {
       return getContrastingTextColor(this.widgetColor);
diff --git a/app/javascript/widget/components/template/Article.vue b/app/javascript/widget/components/template/Article.vue
index 65d8209ba6aed..7c3b679eff82f 100644
--- a/app/javascript/widget/components/template/Article.vue
+++ b/app/javascript/widget/components/template/Article.vue
@@ -1,19 +1,23 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
     FluentIcon,
   },
-  mixins: [messageFormatterMixin, darkModeMixin],
   props: {
     items: {
       type: Array,
       default: () => [],
     },
   },
+  setup() {
+    const { truncateMessage } = useMessageFormatter();
+    const { getThemeClass } = useDarkMode();
+    return { getThemeClass, truncateMessage };
+  },
 };
 </script>
 
@@ -21,7 +25,7 @@ export default {
   <div
     v-if="!!items.length"
     class="chat-bubble agent"
-    :class="$dm('bg-white', 'dark:bg-slate-700')"
+    :class="getThemeClass('bg-white', 'dark:bg-slate-700')"
   >
     <div v-for="item in items" :key="item.link" class="article-item">
       <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
@@ -29,15 +33,16 @@ export default {
           <FluentIcon
             icon="link"
             class="mr-1"
-            :class="$dm('text-black-900', 'dark:text-slate-50')"
+            :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
           />
-          <span :class="$dm('text-slate-900', 'dark:text-slate-50')">{{
-            item.title
-          }}</span>
+          <span
+            :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
+            >{{ item.title }}</span
+          >
         </span>
         <span
           class="description"
-          :class="$dm('text-slate-700', 'dark:text-slate-200')"
+          :class="getThemeClass('text-slate-700', 'dark:text-slate-200')"
         >
           {{ truncateMessage(item.description) }}
         </span>
diff --git a/app/javascript/widget/components/template/EmailInput.vue b/app/javascript/widget/components/template/EmailInput.vue
index 2d95569eb092e..45718a05570f5 100644
--- a/app/javascript/widget/components/template/EmailInput.vue
+++ b/app/javascript/widget/components/template/EmailInput.vue
@@ -6,14 +6,13 @@ import { getContrastingTextColor } from '@chatwoot/utils';
 
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import darkModeMixin from 'widget/mixins/darkModeMixin.js';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 
 export default {
   components: {
     FluentIcon,
     Spinner,
   },
-  mixins: [darkModeMixin],
   props: {
     messageId: {
       type: Number,
@@ -25,7 +24,8 @@ export default {
     },
   },
   setup() {
-    return { v$: useVuelidate() };
+    const { getThemeClass } = useDarkMode();
+    return { v$: useVuelidate(), getThemeClass };
   },
   data() {
     return {
@@ -47,9 +47,9 @@ export default {
       );
     },
     inputColor() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
-        ${this.$dm('text-black-900', 'dark:text-slate-50')}
-        ${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass('bg-white', 'dark:bg-slate-600')}
+        ${this.getThemeClass('text-black-900', 'dark:text-slate-50')}
+        ${this.getThemeClass('border-black-200', 'dark:border-black-500')}`;
     },
     inputHasError() {
       return this.v$.email.$error
diff --git a/app/javascript/widget/composables/specs/useDarkMode.spec.js b/app/javascript/widget/composables/specs/useDarkMode.spec.js
new file mode 100644
index 0000000000000..0ed6b43bbe369
--- /dev/null
+++ b/app/javascript/widget/composables/specs/useDarkMode.spec.js
@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useDarkMode } from '../useDarkMode';
+import { useMapGetter } from 'dashboard/composables/store';
+
+vi.mock('dashboard/composables/store', () => ({
+  useMapGetter: vi.fn(),
+}));
+
+describe('useDarkMode', () => {
+  let mockDarkMode;
+
+  beforeEach(() => {
+    mockDarkMode = { value: 'light' };
+    vi.mocked(useMapGetter).mockReturnValue(mockDarkMode);
+  });
+
+  it('returns darkMode, prefersDarkMode, and getThemeClass', () => {
+    const result = useDarkMode();
+    expect(result).toHaveProperty('darkMode');
+    expect(result).toHaveProperty('prefersDarkMode');
+    expect(result).toHaveProperty('getThemeClass');
+  });
+
+  describe('prefersDarkMode', () => {
+    it('returns false when darkMode is light', () => {
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(false);
+    });
+
+    it('returns true when darkMode is dark', () => {
+      mockDarkMode.value = 'dark';
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(true);
+    });
+
+    it('returns true when darkMode is auto and OS prefers dark mode', () => {
+      mockDarkMode.value = 'auto';
+      vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: true });
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(true);
+    });
+
+    it('returns false when darkMode is auto and OS prefers light mode', () => {
+      mockDarkMode.value = 'auto';
+      vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: false });
+      const { prefersDarkMode } = useDarkMode();
+      expect(prefersDarkMode.value).toBe(false);
+    });
+  });
+
+  describe('getThemeClass', () => {
+    it('returns light class when darkMode is light', () => {
+      const { getThemeClass } = useDarkMode();
+      expect(getThemeClass('light-class', 'dark-class')).toBe('light-class');
+    });
+
+    it('returns dark class when darkMode is dark', () => {
+      mockDarkMode.value = 'dark';
+      const { getThemeClass } = useDarkMode();
+      expect(getThemeClass('light-class', 'dark-class')).toBe('dark-class');
+    });
+
+    it('returns both classes when darkMode is auto', () => {
+      mockDarkMode.value = 'auto';
+      const { getThemeClass } = useDarkMode();
+      expect(getThemeClass('light-class', 'dark-class')).toBe(
+        'light-class dark-class'
+      );
+    });
+  });
+});
diff --git a/app/javascript/widget/composables/specs/useMessage.spec.js b/app/javascript/widget/composables/specs/useMessage.spec.js
deleted file mode 100644
index 1498c87af62d4..0000000000000
--- a/app/javascript/widget/composables/specs/useMessage.spec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { reactive, nextTick } from 'vue';
-import { useMessage } from '../useMessage';
-
-describe('useMessage', () => {
-  it('should handle deleted messages', () => {
-    const message = reactive({
-      content_attributes: { deleted: true },
-      attachments: [],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({ deleted: true });
-    expect(hasAttachments.value).toBe(false);
-  });
-
-  it('should handle non-deleted messages with attachments', () => {
-    const message = reactive({
-      content_attributes: {},
-      attachments: ['attachment1', 'attachment2'],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({});
-    expect(hasAttachments.value).toBe(true);
-  });
-
-  it('should handle messages without content_attributes', () => {
-    const message = reactive({
-      attachments: [],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({});
-    expect(hasAttachments.value).toBe(false);
-  });
-
-  it('should handle messages with empty attachments array', () => {
-    const message = reactive({
-      content_attributes: { someAttribute: 'value' },
-      attachments: [],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({ someAttribute: 'value' });
-    expect(hasAttachments.value).toBe(false);
-  });
-
-  it('should update reactive properties when message changes', async () => {
-    const message = reactive({
-      content_attributes: {},
-      attachments: [],
-    });
-
-    const { messageContentAttributes, hasAttachments } = useMessage(message);
-
-    expect(messageContentAttributes.value).toEqual({});
-    expect(hasAttachments.value).toBe(false);
-
-    message.content_attributes = { updated: true };
-    message.attachments.push('newAttachment');
-    await nextTick();
-
-    expect(messageContentAttributes.value).toEqual({ updated: true });
-    expect(hasAttachments.value).toBe(true);
-  });
-});
diff --git a/app/javascript/widget/composables/useDarkMode.js b/app/javascript/widget/composables/useDarkMode.js
new file mode 100644
index 0000000000000..118d07161d866
--- /dev/null
+++ b/app/javascript/widget/composables/useDarkMode.js
@@ -0,0 +1,39 @@
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const isDarkModeAuto = mode => mode === 'auto';
+const isDarkMode = mode => mode === 'dark';
+
+const getSystemPreference = () =>
+  window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+
+const calculatePrefersDarkMode = (mode, systemPreference) =>
+  isDarkModeAuto(mode) ? systemPreference : isDarkMode(mode);
+
+const calculateThemeClass = (mode, light, dark) => {
+  if (isDarkModeAuto(mode)) return `${light} ${dark}`;
+  return isDarkMode(mode) ? dark : light;
+};
+
+/**
+ * Composable for handling dark mode.
+ * @returns {Object} An object containing computed properties and methods for dark mode.
+ */
+export function useDarkMode() {
+  const darkMode = useMapGetter('appConfig/darkMode');
+
+  const systemPreference = computed(getSystemPreference);
+
+  const prefersDarkMode = computed(() =>
+    calculatePrefersDarkMode(darkMode.value, systemPreference.value)
+  );
+
+  const getThemeClass = (light, dark) =>
+    calculateThemeClass(darkMode.value, light, dark);
+
+  return {
+    darkMode,
+    prefersDarkMode,
+    getThemeClass,
+  };
+}
diff --git a/app/javascript/widget/composables/useMessage.js b/app/javascript/widget/composables/useMessage.js
deleted file mode 100644
index 97b7a7800bf9c..0000000000000
--- a/app/javascript/widget/composables/useMessage.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { computed } from 'vue';
-
-/**
- * Composable for handling message-related computations.
- * @param {Object} message - The message object to be processed.
- * @returns {Object} An object containing computed properties for message content and attachments.
- */
-export function useMessage(message) {
-  const messageContentAttributes = computed(() => {
-    const { content_attributes: attribute = {} } = message;
-    return attribute;
-  });
-
-  const hasAttachments = computed(() => {
-    return !!(message.attachments && message.attachments.length > 0);
-  });
-
-  return {
-    messageContentAttributes,
-    hasAttachments,
-  };
-}
diff --git a/app/javascript/widget/i18n/locale/hi.json b/app/javascript/widget/i18n/locale/hi.json
index 83b442e5139c3..33399e09be4a3 100644
--- a/app/javascript/widget/i18n/locale/hi.json
+++ b/app/javascript/widget/i18n/locale/hi.json
@@ -70,7 +70,8 @@
         "REQUIRED_ERROR": "Phone Number is required",
         "DIAL_CODE_VALID_ERROR": "Please select a country code",
         "VALID_ERROR": "Please enter a valid phone number",
-        "DROPDOWN_EMPTY": "No results found"
+        "DROPDOWN_EMPTY": "No results found",
+        "DROPDOWN_SEARCH": "Search country"
       },
       "MESSAGE": {
         "LABEL": "Message",
@@ -91,7 +92,8 @@
   },
   "EMOJI": {
     "PLACEHOLDER": "Search emojis",
-    "NOT_FOUND": "No emoji match your search"
+    "NOT_FOUND": "No emoji match your search",
+    "ARIA_LABEL": "Emoji picker"
   },
   "CSAT": {
     "TITLE": "Rate your conversation",
@@ -133,5 +135,8 @@
     "fallback": {
       "CONTENT": "has shared a url"
     }
+  },
+  "FOOTER_REPLY_TO": {
+    "REPLY_TO": "Replying to:"
   }
 }
diff --git a/app/javascript/widget/i18n/locale/ms.json b/app/javascript/widget/i18n/locale/ms.json
index ff6d6dd500a81..4d4e1dc00ac23 100644
--- a/app/javascript/widget/i18n/locale/ms.json
+++ b/app/javascript/widget/i18n/locale/ms.json
@@ -70,7 +70,8 @@
         "REQUIRED_ERROR": "Phone Number is required",
         "DIAL_CODE_VALID_ERROR": "Please select a country code",
         "VALID_ERROR": "Please enter a valid phone number",
-        "DROPDOWN_EMPTY": "Tiada dijumpa"
+        "DROPDOWN_EMPTY": "Tiada dijumpa",
+        "DROPDOWN_SEARCH": "Search country"
       },
       "MESSAGE": {
         "LABEL": "Message",
@@ -91,7 +92,8 @@
   },
   "EMOJI": {
     "PLACEHOLDER": "Search emojis",
-    "NOT_FOUND": "No emoji match your search"
+    "NOT_FOUND": "No emoji match your search",
+    "ARIA_LABEL": "Emoji picker"
   },
   "CSAT": {
     "TITLE": "Rate your conversation",
@@ -133,5 +135,8 @@
     "fallback": {
       "CONTENT": "has shared a url"
     }
+  },
+  "FOOTER_REPLY_TO": {
+    "REPLY_TO": "Replying to:"
   }
 }
diff --git a/app/javascript/widget/mixins/darkModeMixin.js b/app/javascript/widget/mixins/darkModeMixin.js
deleted file mode 100644
index 62a2255212a17..0000000000000
--- a/app/javascript/widget/mixins/darkModeMixin.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({ darkMode: 'appConfig/darkMode' }),
-    prefersDarkMode() {
-      const isOSOnDarkMode =
-        this.darkMode === 'auto' &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches;
-      return isOSOnDarkMode || this.darkMode === 'dark';
-    },
-  },
-  methods: {
-    $dm(light, dark) {
-      if (this.darkMode === 'light') {
-        return light;
-      }
-      if (this.darkMode === 'dark') {
-        return dark;
-      }
-      return light + ' ' + dark;
-    },
-  },
-};
diff --git a/app/javascript/widget/mixins/messageMixin.js b/app/javascript/widget/mixins/messageMixin.js
new file mode 100644
index 0000000000000..dfa1e0e6a5202
--- /dev/null
+++ b/app/javascript/widget/mixins/messageMixin.js
@@ -0,0 +1,13 @@
+export default {
+  computed: {
+    messageContentAttributes() {
+      const { content_attributes: attribute = {} } = this.message;
+      return attribute;
+    },
+    hasAttachments() {
+      return !!(
+        this.message.attachments && this.message.attachments.length > 0
+      );
+    },
+  },
+};
diff --git a/app/javascript/widget/mixins/specs/darkModeMixin.spec.js b/app/javascript/widget/mixins/specs/darkModeMixin.spec.js
deleted file mode 100644
index 852bcc6e67f06..0000000000000
--- a/app/javascript/widget/mixins/specs/darkModeMixin.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import darkModeMixin from '../darkModeMixin';
-import Vuex from 'vuex';
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const darkModeValues = ['light', 'auto'];
-
-describe('darkModeMixin', () => {
-  let getters;
-  let store;
-  beforeEach(() => {
-    getters = {
-      'appConfig/darkMode': () => darkModeValues[0],
-    };
-    store = new Vuex.Store({ getters });
-  });
-
-  it('if light theme', () => {
-    const Component = {
-      render() {},
-      mixins: [darkModeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.$dm('bg-100', 'bg-600')).toBe('bg-100');
-  });
-
-  it('if auto theme', () => {
-    getters = {
-      'appConfig/darkMode': () => darkModeValues[2],
-    };
-    store = new Vuex.Store({ getters });
-
-    const Component = {
-      render() {},
-      mixins: [darkModeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.$dm('bg-100', 'bg-600')).toBe('bg-100 bg-600');
-  });
-});
diff --git a/app/javascript/widget/mixins/specs/messageMixin.spec.js b/app/javascript/widget/mixins/specs/messageMixin.spec.js
new file mode 100644
index 0000000000000..a6443ccd63ae9
--- /dev/null
+++ b/app/javascript/widget/mixins/specs/messageMixin.spec.js
@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+import messageMixin from '../messageMixin';
+import messages from './messageFixture';
+
+describe('messageMixin', () => {
+  let Component = {
+    render() {},
+    title: 'TestComponent',
+    mixins: [messageMixin],
+  };
+
+  it('deleted messages', async () => {
+    const wrapper = shallowMount(Component, {
+      data() {
+        return {
+          message: messages.deletedMessage,
+        };
+      },
+    });
+    expect(wrapper.vm.messageContentAttributes).toEqual({
+      deleted: true,
+    });
+    expect(wrapper.vm.hasAttachments).toBe(false);
+  });
+  it('non-deleted messages', async () => {
+    const wrapper = shallowMount(Component, {
+      data() {
+        return {
+          message: messages.nonDeletedMessage,
+        };
+      },
+    });
+    expect(wrapper.vm.deletedMessage).toBe(undefined);
+    expect(wrapper.vm.messageContentAttributes).toEqual({});
+    expect(wrapper.vm.hasAttachments).toBe(true);
+  });
+});
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 5695f9e65de97..e3443e4197723 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -4,7 +4,7 @@ import ArticleHero from 'widget/components/ArticleHero.vue';
 import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoader.vue';
 
 import { mapGetters } from 'vuex';
-import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import routerMixin from 'widget/mixins/routerMixin';
 import configMixin from 'widget/mixins/configMixin';
 
@@ -15,7 +15,11 @@ export default {
     TeamAvailability,
     ArticleCardSkeletonLoader,
   },
-  mixins: [configMixin, routerMixin, darkModeMixin],
+  mixins: [configMixin, routerMixin],
+  setup() {
+    const { prefersDarkMode } = useDarkMode();
+    return { prefersDarkMode };
+  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
diff --git a/app/models/account_user.rb b/app/models/account_user.rb
index 176d52102b3d4..d559ab5b48bc0 100644
--- a/app/models/account_user.rb
+++ b/app/models/account_user.rb
@@ -2,22 +2,24 @@
 #
 # Table name: account_users
 #
-#  id           :bigint           not null, primary key
-#  active_at    :datetime
-#  auto_offline :boolean          default(TRUE), not null
-#  availability :integer          default("online"), not null
-#  role         :integer          default("agent")
-#  created_at   :datetime         not null
-#  updated_at   :datetime         not null
-#  account_id   :bigint
-#  inviter_id   :bigint
-#  user_id      :bigint
+#  id             :bigint           not null, primary key
+#  active_at      :datetime
+#  auto_offline   :boolean          default(TRUE), not null
+#  availability   :integer          default("online"), not null
+#  role           :integer          default("agent")
+#  created_at     :datetime         not null
+#  updated_at     :datetime         not null
+#  account_id     :bigint
+#  custom_role_id :bigint
+#  inviter_id     :bigint
+#  user_id        :bigint
 #
 # Indexes
 #
-#  index_account_users_on_account_id  (account_id)
-#  index_account_users_on_user_id     (user_id)
-#  uniq_user_id_per_account_id        (account_id,user_id) UNIQUE
+#  index_account_users_on_account_id      (account_id)
+#  index_account_users_on_custom_role_id  (custom_role_id)
+#  index_account_users_on_user_id         (user_id)
+#  uniq_user_id_per_account_id            (account_id,user_id) UNIQUE
 #
 
 class AccountUser < ApplicationRecord
@@ -77,4 +79,6 @@ def update_presence_in_redis
   end
 end
 
+AccountUser.prepend_mod_with('AccountUser')
 AccountUser.include_mod_with('Audit::AccountUser')
+AccountUser.include_mod_with('Concerns::AccountUser')
diff --git a/app/models/integrations/hook.rb b/app/models/integrations/hook.rb
index 076a5fce9bf65..f523af4a5bd27 100644
--- a/app/models/integrations/hook.rb
+++ b/app/models/integrations/hook.rb
@@ -56,7 +56,7 @@ def process_event(event)
     when 'openai'
       Integrations::Openai::ProcessorService.new(hook: self, event: event).perform if app_id == 'openai'
     else
-      'No processor found'
+      { error: 'No processor found' }
     end
   end
 
diff --git a/app/policies/article_policy.rb b/app/policies/article_policy.rb
index 4bfa7825e29b0..e48442337c6a5 100644
--- a/app/policies/article_policy.rb
+++ b/app/policies/article_policy.rb
@@ -33,3 +33,5 @@ def portal_member?
     @record.first.portal.members.include?(@user)
   end
 end
+
+ArticlePolicy.prepend_mod_with('Enterprise::ArticlePolicy')
diff --git a/app/policies/category_policy.rb b/app/policies/category_policy.rb
index 017906b5583fe..3dca6b8477187 100644
--- a/app/policies/category_policy.rb
+++ b/app/policies/category_policy.rb
@@ -29,3 +29,5 @@ def portal_member?
     @record.first.portal.members.include?(@user)
   end
 end
+
+CategoryPolicy.prepend_mod_with('Enterprise::CategoryPolicy')
diff --git a/app/policies/portal_policy.rb b/app/policies/portal_policy.rb
index 588fd82e87075..c52b44cacdaaa 100644
--- a/app/policies/portal_policy.rb
+++ b/app/policies/portal_policy.rb
@@ -37,3 +37,5 @@ def portal_member?
     @record.first.members.include?(@user)
   end
 end
+
+PortalPolicy.prepend_mod_with('Enterprise::PortalPolicy')
diff --git a/app/policies/report_policy.rb b/app/policies/report_policy.rb
index 7e7eeffdfcd97..a52607a678445 100644
--- a/app/policies/report_policy.rb
+++ b/app/policies/report_policy.rb
@@ -3,3 +3,5 @@ def view?
     @account_user.administrator?
   end
 end
+
+ReportPolicy.prepend_mod_with('Enterprise::ReportPolicy')
diff --git a/app/services/instagram/message_text.rb b/app/services/instagram/message_text.rb
index e4235599060f8..396f0cdacfe9d 100644
--- a/app/services/instagram/message_text.rb
+++ b/app/services/instagram/message_text.rb
@@ -83,6 +83,7 @@ def unsend_message
     )
     return if message_to_delete.blank?
 
+    message_to_delete.attachments.destroy_all
     message_to_delete.update!(content: I18n.t('conversations.messages.deleted'), deleted: true)
   end
 
diff --git a/app/views/api/v1/models/_agent.json.jbuilder b/app/views/api/v1/models/_agent.json.jbuilder
index 02601d6b0fbb7..9106706115bb7 100644
--- a/app/views/api/v1/models/_agent.json.jbuilder
+++ b/app/views/api/v1/models/_agent.json.jbuilder
@@ -10,3 +10,4 @@ json.custom_attributes resource.custom_attributes if resource.custom_attributes.
 json.name resource.name
 json.role resource.role
 json.thumbnail resource.avatar_url
+json.custom_role_id resource.current_account_user&.custom_role_id if ChatwootApp.enterprise?
diff --git a/app/views/api/v1/models/_user.json.jbuilder b/app/views/api/v1/models/_user.json.jbuilder
index 0e8c95adb5a6a..b6a44805093e0 100644
--- a/app/views/api/v1/models/_user.json.jbuilder
+++ b/app/views/api/v1/models/_user.json.jbuilder
@@ -14,7 +14,6 @@ json.provider resource.provider
 json.pubsub_token resource.pubsub_token
 json.custom_attributes resource.custom_attributes if resource.custom_attributes.present?
 json.role resource.active_account_user&.role
-json.permissions resource.active_account_user&.permissions
 json.ui_settings resource.ui_settings
 json.uid resource.uid
 json.type resource.type
@@ -31,5 +30,6 @@ json.accounts do
     # availability derived from presence
     json.availability_status account_user.availability_status
     json.auto_offline account_user.auto_offline
+    json.partial! 'api/v1/models/account_user', account_user: account_user if ChatwootApp.enterprise?
   end
 end
diff --git a/config/app.yml b/config/app.yml
index cb0dd3109e367..d81cf5c28a252 100644
--- a/config/app.yml
+++ b/config/app.yml
@@ -1,5 +1,5 @@
 shared: &shared
-  version: '3.12.0'
+  version: '3.13.0'
 
 development:
   <<: *shared
diff --git a/config/features.yml b/config/features.yml
index 42cf3460d6e59..4f62694f8e3cc 100644
--- a/config/features.yml
+++ b/config/features.yml
@@ -89,3 +89,6 @@
   enabled: false
 - name: captain_integration
   enabled: false
+- name: custom_roles
+  enabled: false
+  premium: true
diff --git a/config/installation_config.yml b/config/installation_config.yml
index 95d9cc6a5d7d5..26f05211eb4fd 100644
--- a/config/installation_config.yml
+++ b/config/installation_config.yml
@@ -168,6 +168,11 @@
   display_title: 'Dashboard Scripts'
   description: 'Scripts are loaded as the last item in the <body> tag'
   type: code
+- name: BLOCKED_EMAIL_DOMAINS
+  value:
+  display_title: 'Blocked Email Domains'
+  description: 'Add a domain per line to block them from signing up, accepts Regex'
+  type: code
 # ------- End of Chatwoot Internal Config for Cloud ----#
 
 # ------- Chatwoot Internal Config for Self Hosted ----#
@@ -220,11 +225,11 @@
 
 ## ----- Captain Configs ----- ##
 - name: CAPTAIN_API_URL
-  value: 
+  value:
   display_title: 'Captain API URL'
   description: 'The API URL for Captain'
 - name: CAPTAIN_APP_URL
-  value: 
+  value:
   display_title: 'Captain App URL'
   description: 'The App URL for Captain'
 ## ----- End of Captain Configs ----- ##
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 63593ef04550d..dd7b07bcf1801 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -43,6 +43,7 @@ en:
       invalid: Invalid events
     signup:
       disposable_email: We do not allow disposable emails
+      blocked_domain: This domain is not allowed. If you believe this is a mistake, please contact support.
       invalid_email: You have entered an invalid email
       email_already_exists: "You have already signed up for an account with %{email}"
       invalid_params: 'Invalid, please check the signup paramters and try again'
diff --git a/config/routes.rb b/config/routes.rb
index f23def55716ce..7006e8f4bc225 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -74,6 +74,7 @@
             post :execute, on: :member
           end
           resources :sla_policies, only: [:index, :create, :show, :update, :destroy]
+          resources :custom_roles, only: [:index, :create, :show, :update, :destroy]
           resources :campaigns, only: [:index, :create, :show, :update, :destroy]
           resources :dashboard_apps, only: [:index, :show, :create, :update, :destroy]
           namespace :channels do
diff --git a/db/migrate/20240726220747_add_custom_roles.rb b/db/migrate/20240726220747_add_custom_roles.rb
new file mode 100644
index 0000000000000..07ef770430b7c
--- /dev/null
+++ b/db/migrate/20240726220747_add_custom_roles.rb
@@ -0,0 +1,16 @@
+class AddCustomRoles < ActiveRecord::Migration[7.0]
+  def change
+    # Create the roles table
+    create_table :custom_roles do |t|
+      t.string :name
+      t.string :description
+      t.references :account, null: false
+      t.text :permissions, array: true, default: []
+      t.timestamps
+    end
+
+    # Associate the custom role with account user
+    # Add the custom_role_id column to the account_users table
+    add_reference :account_users, :custom_role, optional: true
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index b894f98da73b1..3ad9562b53011 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2024_05_16_003531) do
+ActiveRecord::Schema[7.0].define(version: 2024_07_26_220747) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"
@@ -37,8 +37,10 @@
     t.datetime "active_at", precision: nil
     t.integer "availability", default: 0, null: false
     t.boolean "auto_offline", default: true, null: false
+    t.bigint "custom_role_id"
     t.index ["account_id", "user_id"], name: "uniq_user_id_per_account_id", unique: true
     t.index ["account_id"], name: "index_account_users_on_account_id"
+    t.index ["custom_role_id"], name: "index_account_users_on_custom_role_id"
     t.index ["user_id"], name: "index_account_users_on_user_id"
   end
 
@@ -538,6 +540,16 @@
     t.index ["user_id"], name: "index_custom_filters_on_user_id"
   end
 
+  create_table "custom_roles", force: :cascade do |t|
+    t.string "name"
+    t.string "description"
+    t.bigint "account_id", null: false
+    t.text "permissions", default: [], array: true
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+    t.index ["account_id"], name: "index_custom_roles_on_account_id"
+  end
+
   create_table "dashboard_apps", force: :cascade do |t|
     t.string "title", null: false
     t.jsonb "content", default: []
diff --git a/enterprise/app/controllers/api/v1/accounts/custom_roles_controller.rb b/enterprise/app/controllers/api/v1/accounts/custom_roles_controller.rb
new file mode 100644
index 0000000000000..01650a7deadb6
--- /dev/null
+++ b/enterprise/app/controllers/api/v1/accounts/custom_roles_controller.rb
@@ -0,0 +1,31 @@
+class Api::V1::Accounts::CustomRolesController < Api::V1::Accounts::EnterpriseAccountsController
+  before_action :fetch_custom_role, only: [:show, :update, :destroy]
+  before_action :check_authorization
+
+  def index
+    @custom_roles = Current.account.custom_roles
+  end
+
+  def create
+    @custom_role = Current.account.custom_roles.create!(permitted_params)
+  end
+
+  def show; end
+
+  def update
+    @custom_role.update!(permitted_params)
+  end
+
+  def destroy
+    @custom_role.destroy!
+    head :ok
+  end
+
+  def permitted_params
+    params.require(:custom_role).permit(:name, :description, permissions: [])
+  end
+
+  def fetch_custom_role
+    @custom_role = Current.account.custom_roles.find_by(id: params[:id])
+  end
+end
diff --git a/enterprise/app/controllers/enterprise/api/v1/accounts/agents_controller.rb b/enterprise/app/controllers/enterprise/api/v1/accounts/agents_controller.rb
new file mode 100644
index 0000000000000..b3a27c4ad4501
--- /dev/null
+++ b/enterprise/app/controllers/enterprise/api/v1/accounts/agents_controller.rb
@@ -0,0 +1,17 @@
+module Enterprise::Api::V1::Accounts::AgentsController
+  def create
+    super
+    associate_agent_with_custom_role
+  end
+
+  def update
+    super
+    associate_agent_with_custom_role
+  end
+
+  private
+
+  def associate_agent_with_custom_role
+    @agent.current_account_user.update!(custom_role_id: params[:custom_role_id])
+  end
+end
diff --git a/enterprise/app/controllers/enterprise/api/v2/accounts/reports_controller.rb b/enterprise/app/controllers/enterprise/api/v2/accounts/reports_controller.rb
new file mode 100644
index 0000000000000..b5e2a9efeec50
--- /dev/null
+++ b/enterprise/app/controllers/enterprise/api/v2/accounts/reports_controller.rb
@@ -0,0 +1,7 @@
+module Enterprise::Api::V2::Accounts::ReportsController
+  def check_authorization
+    return if Current.account_user.custom_role&.permissions&.include?('report_manage')
+
+    super
+  end
+end
diff --git a/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb b/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb
index 126ed292e2046..a9c8ee1f07810 100644
--- a/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb
+++ b/enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb
@@ -32,6 +32,6 @@ def custom_branding_options
   end
 
   def internal_config_options
-    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY DASHBOARD_SCRIPTS]
+    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY DASHBOARD_SCRIPTS BLOCKED_EMAIL_DOMAINS]
   end
 end
diff --git a/enterprise/app/models/custom_role.rb b/enterprise/app/models/custom_role.rb
new file mode 100644
index 0000000000000..666f913787d96
--- /dev/null
+++ b/enterprise/app/models/custom_role.rb
@@ -0,0 +1,42 @@
+# == Schema Information
+#
+# Table name: custom_roles
+#
+#  id          :bigint           not null, primary key
+#  description :string
+#  name        :string
+#  permissions :text             default([]), is an Array
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  account_id  :bigint           not null
+#
+# Indexes
+#
+#  index_custom_roles_on_account_id  (account_id)
+#
+#
+
+# Available permissions for custom roles:
+# - 'conversation_manage': Can manage all conversations.
+# - 'conversation_unassigned_manage': Can manage unassigned conversations and assign to self.
+# - 'conversation_participating_manage': Can manage conversations they are participating in (assigned to or a participant).
+# - 'contact_manage': Can manage contacts.
+# - 'report_manage': Can manage reports.
+# - 'knowledge_base_manage': Can manage knowledge base portals.
+
+class CustomRole < ApplicationRecord
+  belongs_to :account
+  has_many :account_users, dependent: :nullify
+
+  PERMISSIONS = %w[
+    conversation_manage
+    conversation_unassigned_manage
+    conversation_participating_manage
+    contact_manage
+    report_manage
+    knowledge_base_manage
+  ].freeze
+
+  validates :name, presence: true
+  validates :permissions, inclusion: { in: PERMISSIONS }
+end
diff --git a/enterprise/app/models/enterprise/account_user.rb b/enterprise/app/models/enterprise/account_user.rb
new file mode 100644
index 0000000000000..c9726978f47c8
--- /dev/null
+++ b/enterprise/app/models/enterprise/account_user.rb
@@ -0,0 +1,5 @@
+module Enterprise::AccountUser
+  def permissions
+    custom_role.present? ? (custom_role.permissions + ['custom_role']) : super
+  end
+end
diff --git a/enterprise/app/models/enterprise/concerns/account.rb b/enterprise/app/models/enterprise/concerns/account.rb
index b4f9d189fc42d..37d5fcad4f1d1 100644
--- a/enterprise/app/models/enterprise/concerns/account.rb
+++ b/enterprise/app/models/enterprise/concerns/account.rb
@@ -4,6 +4,7 @@ module Enterprise::Concerns::Account
   included do
     has_many :sla_policies, dependent: :destroy_async
     has_many :applied_slas, dependent: :destroy_async
+    has_many :custom_roles, dependent: :destroy_async
 
     def self.add_response_related_associations
       has_many :response_sources, dependent: :destroy_async
diff --git a/enterprise/app/models/enterprise/concerns/account_user.rb b/enterprise/app/models/enterprise/concerns/account_user.rb
new file mode 100644
index 0000000000000..0887d31d91872
--- /dev/null
+++ b/enterprise/app/models/enterprise/concerns/account_user.rb
@@ -0,0 +1,7 @@
+module Enterprise::Concerns::AccountUser
+  extend ActiveSupport::Concern
+
+  included do
+    belongs_to :custom_role, optional: true
+  end
+end
diff --git a/enterprise/app/policies/custom_role_policy.rb b/enterprise/app/policies/custom_role_policy.rb
new file mode 100644
index 0000000000000..f16602488e453
--- /dev/null
+++ b/enterprise/app/policies/custom_role_policy.rb
@@ -0,0 +1,21 @@
+class CustomRolePolicy < ApplicationPolicy
+  def index?
+    @account_user.administrator?
+  end
+
+  def update?
+    @account_user.administrator?
+  end
+
+  def show?
+    @account_user.administrator?
+  end
+
+  def create?
+    @account_user.administrator?
+  end
+
+  def destroy?
+    @account_user.administrator?
+  end
+end
diff --git a/enterprise/app/policies/enterprise/article_policy.rb b/enterprise/app/policies/enterprise/article_policy.rb
new file mode 100644
index 0000000000000..745db0fc99398
--- /dev/null
+++ b/enterprise/app/policies/enterprise/article_policy.rb
@@ -0,0 +1,29 @@
+module Enterprise::ArticlePolicy
+  def index?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def update?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def show?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def edit?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def create?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def destroy?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def reorder?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+end
diff --git a/enterprise/app/policies/enterprise/category_policy.rb b/enterprise/app/policies/enterprise/category_policy.rb
new file mode 100644
index 0000000000000..b58a3806d13f9
--- /dev/null
+++ b/enterprise/app/policies/enterprise/category_policy.rb
@@ -0,0 +1,25 @@
+module Enterprise::CategoryPolicy
+  def index?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def update?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def show?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def edit?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def create?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def destroy?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+end
diff --git a/enterprise/app/policies/enterprise/portal_policy.rb b/enterprise/app/policies/enterprise/portal_policy.rb
new file mode 100644
index 0000000000000..45c3ea1409bb7
--- /dev/null
+++ b/enterprise/app/policies/enterprise/portal_policy.rb
@@ -0,0 +1,33 @@
+module Enterprise::PortalPolicy
+  def index?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def update?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def show?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def edit?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def create?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def destroy?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def add_members?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+
+  def logo?
+    @account_user.custom_role&.permissions&.include?('knowledge_base_manage') || super
+  end
+end
diff --git a/enterprise/app/policies/enterprise/report_policy.rb b/enterprise/app/policies/enterprise/report_policy.rb
new file mode 100644
index 0000000000000..0ad1fec6a670c
--- /dev/null
+++ b/enterprise/app/policies/enterprise/report_policy.rb
@@ -0,0 +1,5 @@
+module Enterprise::ReportPolicy
+  def view?
+    @account_user.custom_role&.permissions&.include?('report_manage') || super
+  end
+end
diff --git a/enterprise/app/views/api/v1/accounts/custom_roles/create.json.jbuilder b/enterprise/app/views/api/v1/accounts/custom_roles/create.json.jbuilder
new file mode 100644
index 0000000000000..cb722677672e7
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/custom_roles/create.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'api/v1/models/custom_role', formats: [:json], custom_role: @custom_role
diff --git a/enterprise/app/views/api/v1/accounts/custom_roles/index.json.jbuilder b/enterprise/app/views/api/v1/accounts/custom_roles/index.json.jbuilder
new file mode 100644
index 0000000000000..d606546209cb4
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/custom_roles/index.json.jbuilder
@@ -0,0 +1,3 @@
+json.array! @custom_roles do |custom_role|
+  json.partial! 'api/v1/models/custom_role', formats: [:json], custom_role: custom_role
+end
diff --git a/enterprise/app/views/api/v1/accounts/custom_roles/show.json.jbuilder b/enterprise/app/views/api/v1/accounts/custom_roles/show.json.jbuilder
new file mode 100644
index 0000000000000..cb722677672e7
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/custom_roles/show.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'api/v1/models/custom_role', formats: [:json], custom_role: @custom_role
diff --git a/enterprise/app/views/api/v1/accounts/custom_roles/update.json.jbuilder b/enterprise/app/views/api/v1/accounts/custom_roles/update.json.jbuilder
new file mode 100644
index 0000000000000..cb722677672e7
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/custom_roles/update.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'api/v1/models/custom_role', formats: [:json], custom_role: @custom_role
diff --git a/enterprise/app/views/api/v1/models/_account_user.json.jbuilder b/enterprise/app/views/api/v1/models/_account_user.json.jbuilder
new file mode 100644
index 0000000000000..8a822e65a1e03
--- /dev/null
+++ b/enterprise/app/views/api/v1/models/_account_user.json.jbuilder
@@ -0,0 +1,2 @@
+json.custom_role_id account_user&.custom_role_id
+json.custom_role account_user&.custom_role&.as_json(only: [:id, :name, :description, :permissions])
diff --git a/enterprise/app/views/api/v1/models/_custom_role.json.jbuilder b/enterprise/app/views/api/v1/models/_custom_role.json.jbuilder
new file mode 100644
index 0000000000000..32f1d05638b2f
--- /dev/null
+++ b/enterprise/app/views/api/v1/models/_custom_role.json.jbuilder
@@ -0,0 +1,6 @@
+json.id custom_role.id
+json.name custom_role.name
+json.description custom_role.description
+json.permissions custom_role.permissions
+json.created_at custom_role.created_at
+json.updated_at custom_role.updated_at
diff --git a/enterprise/config/premium_features.yml b/enterprise/config/premium_features.yml
index 18e5b15baf99e..a8e75962616da 100644
--- a/enterprise/config/premium_features.yml
+++ b/enterprise/config/premium_features.yml
@@ -3,3 +3,4 @@
 - audit_logs
 - response_bot
 - sla
+- custom_roles
diff --git a/enterprise/lib/enterprise/integrations/openai_processor_service.rb b/enterprise/lib/enterprise/integrations/openai_processor_service.rb
index b3cf9aeeeac06..69b2e3dfd80e5 100644
--- a/enterprise/lib/enterprise/integrations/openai_processor_service.rb
+++ b/enterprise/lib/enterprise/integrations/openai_processor_service.rb
@@ -27,11 +27,13 @@ def label_suggestion_message
 
     response = make_api_call(label_suggestion_body)
 
+    return response if response[:error].present?
+
     # LLMs are not deterministic, so this is bandaid solution
     # To what you ask? Sometimes, the response includes
     # "Labels:" in it's response in some format. This is a hacky way to remove it
     # TODO: Fix with with a better prompt
-    response.present? ? response.gsub(/^(label|labels):/i, '') : ''
+    { message: response[:message] ? response[:message].gsub(/^(label|labels):/i, '') : '' }
   end
 
   private
diff --git a/lib/custom_exceptions/account.rb b/lib/custom_exceptions/account.rb
index efacc9e6eb28d..08c6f0ddbc184 100644
--- a/lib/custom_exceptions/account.rb
+++ b/lib/custom_exceptions/account.rb
@@ -3,7 +3,9 @@
 module CustomExceptions::Account
   class InvalidEmail < CustomExceptions::Base
     def message
-      if @data[:disposable]
+      if @data[:domain_blocked]
+        I18n.t 'errors.signup.blocked_domain'
+      elsif @data[:disposable]
         I18n.t 'errors.signup.disposable_email'
       elsif !@data[:valid]
         I18n.t 'errors.signup.invalid_email'
diff --git a/lib/integrations/openai_base_service.rb b/lib/integrations/openai_base_service.rb
index da2878aabd423..908e496a7e500 100644
--- a/lib/integrations/openai_base_service.rb
+++ b/lib/integrations/openai_base_service.rb
@@ -1,10 +1,11 @@
 class Integrations::OpenaiBaseService
-  # 3.5 support 16,385 tokens
+  # gpt-4o-mini supports 128,000 tokens
   # 1 token is approx 4 characters
-  # 16385 * 4 = 65540 characters, sticking to 50,000 to be safe
-  TOKEN_LIMIT = 50_000
+  # sticking with 120000 to be safe
+  # 120000 * 4 = 480,000 characters (rounding off downwards to 400,000 to be safe)
+  TOKEN_LIMIT = 400_000
   API_URL = 'https://api.openai.com/v1/chat/completions'.freeze
-  GPT_MODEL = 'gpt-3.5-turbo'.freeze
+  GPT_MODEL = ENV.fetch('OPENAI_GPT_MODEL', 'gpt-4o-mini').freeze
 
   ALLOWED_EVENT_NAMES = %w[rephrase summarize reply_suggestion fix_spelling_grammar shorten expand make_friendly make_formal simplify].freeze
   CACHEABLE_EVENTS = %w[].freeze
@@ -42,13 +43,26 @@ def value_from_cache
     return nil unless event_is_cacheable?
     return nil if cache_key.blank?
 
-    Redis::Alfred.get(cache_key)
+    deserialize_cached_value(Redis::Alfred.get(cache_key))
+  end
+
+  def deserialize_cached_value(value)
+    return nil if value.blank?
+
+    JSON.parse(value, symbolize_names: true)
+  rescue JSON::ParserError
+    # If json parse failed, returning the value as is will fail too
+    # since we access the keys as symbols down the line
+    # So it's best to return nil
+    nil
   end
 
   def save_to_cache(response)
     return nil unless event_is_cacheable?
 
-    Redis::Alfred.setex(cache_key, response)
+    # Serialize to JSON
+    # This makes parsing easy when response is a hash
+    Redis::Alfred.setex(cache_key, response.to_json)
   end
 
   def conversation
@@ -77,8 +91,12 @@ def make_api_call(body)
     response = HTTParty.post(API_URL, headers: headers, body: body)
     Rails.logger.info("OpenAI API response: #{response.body}")
 
+    return { error: response.parsed_response, error_code: response.code } unless response.success?
+
     choices = JSON.parse(response.body)['choices']
 
-    choices.present? ? choices.first['message']['content'] : nil
+    return { message: choices.first['message']['content'] } if choices.present?
+
+    { message: nil }
   end
 end
diff --git a/lib/redis/redis_keys.rb b/lib/redis/redis_keys.rb
index 3e49d87a79cf4..f8c467c9a6cbe 100644
--- a/lib/redis/redis_keys.rb
+++ b/lib/redis/redis_keys.rb
@@ -33,7 +33,7 @@ module Redis::RedisKeys
   LATEST_CHATWOOT_VERSION = 'LATEST_CHATWOOT_VERSION'.freeze
   # Check if a message create with same source-id is in progress?
   MESSAGE_SOURCE_KEY = 'MESSAGE_SOURCE_KEY::%<id>s'.freeze
-  OPENAI_CONVERSATION_KEY = 'OPEN_AI_CONVERSATION_KEY::%<event_name>s::%<conversation_id>d::%<updated_at>d'.freeze
+  OPENAI_CONVERSATION_KEY = 'OPEN_AI_CONVERSATION_KEY::V1::%<event_name>s::%<conversation_id>d::%<updated_at>d'.freeze
 
   ## Sempahores / Locks
   # We don't want to process messages from the same sender concurrently to prevent creating double conversations
diff --git a/package.json b/package.json
index b63b51905742a..c2736d2277b1a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/**/*.{js,vue}",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@braid/vue-formulate": "^2.5.2",
     "@chatwoot/ninja-keys": "1.2.3",
-    "@chatwoot/prosemirror-schema": "1.0.11",
+    "@chatwoot/prosemirror-schema": "1.0.17",
     "@chatwoot/utils": "^0.0.25",
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
     "@june-so/analytics-next": "^2.0.0",
diff --git a/spec/controllers/api/v1/accounts/conversations/messages_controller_spec.rb b/spec/controllers/api/v1/accounts/conversations/messages_controller_spec.rb
index 8f7a5fea0ce7f..94d4cf27231ad 100644
--- a/spec/controllers/api/v1/accounts/conversations/messages_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/conversations/messages_controller_spec.rb
@@ -216,6 +216,21 @@
         expect(message.reload.deleted).to be true
         expect(message.reload.content_attributes['bcc_emails']).to be_nil
       end
+
+      it 'deletes interactive messages' do
+        interactive_message = create(
+          :message, message_type: :outgoing, content: 'test', content_type: 'input_select',
+                    content_attributes: { 'items' => [{ 'title' => 'test', 'value' => 'test' }] },
+                    conversation: conversation
+        )
+
+        delete "/api/v1/accounts/#{account.id}/conversations/#{conversation.display_id}/messages/#{interactive_message.id}",
+               headers: agent.create_new_auth_token,
+               as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(interactive_message.reload.deleted).to be true
+      end
     end
 
     context 'when the message id is invalid' do
diff --git a/spec/controllers/api/v1/accounts/integrations/hooks_controller_spec.rb b/spec/controllers/api/v1/accounts/integrations/hooks_controller_spec.rb
index 562272f14ca28..23c1045c53b7d 100644
--- a/spec/controllers/api/v1/accounts/integrations/hooks_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/integrations/hooks_controller_spec.rb
@@ -97,9 +97,8 @@
              params: params,
              headers: agent.create_new_auth_token,
              as: :json
-
-        expect(response).to have_http_status(:success)
-        expect(response.parsed_body['message']).to eq('No processor found')
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to eq 'No processor found'
       end
     end
   end
diff --git a/spec/controllers/api/v1/upload_controller_spec.rb b/spec/controllers/api/v1/upload_controller_spec.rb
index 0a5e758a316d9..bd039f684264d 100644
--- a/spec/controllers/api/v1/upload_controller_spec.rb
+++ b/spec/controllers/api/v1/upload_controller_spec.rb
@@ -1,42 +1,112 @@
 require 'rails_helper'
 
 RSpec.describe 'Api::V1::Accounts::UploadController', type: :request do
-  describe 'POST /api/v1/account/1/upload/' do
-    let(:account) { create(:account) }
-    let(:user) { create(:user, account: account) }
+  let(:account) { create(:account) }
+  let(:user) { create(:user, account: account) }
+  let(:upload_url) { "/api/v1/accounts/#{account.id}/upload/" }
 
-    it 'uploads the image when authorized' do
-      file = fixture_file_upload(Rails.root.join('spec/assets/avatar.png'), 'image/png')
+  describe 'POST /api/v1/accounts/:account_id/upload/' do
+    context 'when uploading a file' do
+      let(:file) { fixture_file_upload(Rails.root.join('spec/assets/avatar.png'), 'image/png') }
 
-      post "/api/v1/accounts/#{account.id}/upload/",
-           headers: user.create_new_auth_token,
-           params: { attachment: file }
+      it 'uploads the image when authorized' do
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { attachment: file }
 
-      expect(response).to have_http_status(:success)
-      blob = response.parsed_body
+        expect(response).to have_http_status(:success)
+        blob = response.parsed_body
+        expect(blob['errors']).to be_nil
+        expect(blob['file_url']).to be_present
+        expect(blob['blob_key']).to be_present
+        expect(blob['blob_id']).to be_present
+      end
 
-      expect(blob['errors']).to be_nil
+      it 'does not upload when unauthorized' do
+        post upload_url,
+             headers: {},
+             params: { attachment: file }
 
-      expect(blob['file_url']).to be_present
-      expect(blob['blob_key']).to be_present
-      expect(blob['blob_id']).to be_present
+        expect(response).to have_http_status(:unauthorized)
+        blob = response.parsed_body
+        expect(blob['errors']).to be_present
+        expect(blob['file_url']).to be_nil
+        expect(blob['blob_key']).to be_nil
+        expect(blob['blob_id']).to be_nil
+      end
     end
 
-    it 'does not upload when un-authorized' do
-      file = fixture_file_upload(Rails.root.join('spec/assets/avatar.png'), 'image/png')
+    context 'when uploading from a URL' do
+      let(:valid_external_url) { 'http://example.com/image.jpg' }
+
+      before do
+        stub_request(:get, valid_external_url)
+          .to_return(status: 200, body: File.new(Rails.root.join('spec/assets/avatar.png')), headers: { 'Content-Type' => 'image/png' })
+      end
+
+      it 'uploads the image from URL when authorized' do
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: valid_external_url }
+
+        expect(response).to have_http_status(:success)
+        blob = response.parsed_body
+        expect(blob['error']).to be_nil
+        expect(blob['file_url']).to be_present
+        expect(blob['blob_key']).to be_present
+        expect(blob['blob_id']).to be_present
+      end
+
+      it 'handles invalid URL format' do
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: 'not_a_url' }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to eq('Invalid URL provided')
+      end
+
+      it 'handles URL with unsupported protocol' do
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: 'ftp://example.com/image.jpg' }
 
-      post "/api/v1/accounts/#{account.id}/upload/",
-           headers: {},
-           params: { attachment: file }
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to eq('Invalid URL provided')
+      end
 
-      expect(response).to have_http_status(:unauthorized)
-      blob = response.parsed_body
+      it 'handles unreachable URLs' do
+        stub_request(:get, 'http://nonexistent.example.com')
+          .to_raise(SocketError.new('Failed to open TCP connection'))
 
-      expect(blob['errors']).to be_present
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: 'http://nonexistent.example.com' }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to eq('Invalid URL provided')
+      end
+
+      it 'handles HTTP errors' do
+        stub_request(:get, 'http://error.example.com')
+          .to_return(status: 404)
+
+        post upload_url,
+             headers: user.create_new_auth_token,
+             params: { external_url: 'http://error.example.com' }
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to start_with('Failed to fetch file from URL')
+      end
+    end
+
+    it 'returns an error when no file or URL is provided' do
+      post upload_url,
+           headers: user.create_new_auth_token,
+           params: {}
 
-      expect(blob['file_url']).to be_nil
-      expect(blob['blob_key']).to be_nil
-      expect(blob['blob_id']).to be_nil
+      expect(response).to have_http_status(:unprocessable_entity)
+      expect(response.parsed_body['error']).to eq('No file or URL provided')
     end
   end
 end
diff --git a/spec/controllers/api/v1/widget/conversations_controller_spec.rb b/spec/controllers/api/v1/widget/conversations_controller_spec.rb
index e4f5a4bdefbd1..6966c87ea5909 100644
--- a/spec/controllers/api/v1/widget/conversations_controller_spec.rb
+++ b/spec/controllers/api/v1/widget/conversations_controller_spec.rb
@@ -13,6 +13,21 @@
     Widget::TokenService.new(payload: { source_id: second_session.source_id, inbox_id: web_widget.inbox.id }).generate_token
   end
 
+  def conversation_params
+    {
+      website_token: web_widget.website_token,
+      contact: {
+        name: 'contact-name',
+        email: 'contact-email@chatwoot.com',
+        phone_number: '+919745313456'
+      },
+      message: {
+        content: 'This is a test message'
+      },
+      custom_attributes: { order_id: '12345' }
+    }
+  end
+
   describe 'GET /api/v1/widget/conversations' do
     context 'with a conversation' do
       it 'returns the correct conversation params' do
@@ -47,21 +62,10 @@
   end
 
   describe 'POST /api/v1/widget/conversations' do
-    it 'creates a conversation' do
+    it 'creates a conversation with correct details' do
       post '/api/v1/widget/conversations',
            headers: { 'X-Auth-Token' => token },
-           params: {
-             website_token: web_widget.website_token,
-             contact: {
-               name: 'contact-name',
-               email: 'contact-email@chatwoot.com',
-               phone_number: '+919745313456'
-             },
-             message: {
-               content: 'This is a test message'
-             },
-             custom_attributes: { order_id: '12345' }
-           },
+           params: conversation_params,
            as: :json
 
       expect(response).to have_http_status(:success)
@@ -70,8 +74,19 @@
       expect(json_response['contact']['email']).to eq 'contact-email@chatwoot.com'
       expect(json_response['contact']['phone_number']).to eq '+919745313456'
       expect(json_response['contact']['name']).to eq 'contact-name'
+    end
+
+    it 'creates a conversation with correct message and custom attributes' do
+      post '/api/v1/widget/conversations',
+           headers: { 'X-Auth-Token' => token },
+           params: conversation_params,
+           as: :json
+
+      expect(response).to have_http_status(:success)
+      json_response = response.parsed_body
       expect(json_response['custom_attributes']['order_id']).to eq '12345'
       expect(json_response['messages'][0]['content']).to eq 'This is a test message'
+      expect(json_response['messages'][0]['message_type']).to eq 0
     end
 
     it 'create a conversation with a name and without an email' do
diff --git a/spec/controllers/devise/session_controller_spec.rb b/spec/controllers/devise/session_controller_spec.rb
index ad6d76bf9ce12..f9c2ad1fd3933 100644
--- a/spec/controllers/devise/session_controller_spec.rb
+++ b/spec/controllers/devise/session_controller_spec.rb
@@ -50,7 +50,7 @@
              as: :json
 
         expect(response).to have_http_status(:success)
-        expect(response.parsed_body['data']['permissions']).to eq(['agent'])
+        expect(response.parsed_body['data']['accounts'].first['permissions']).to eq(['agent'])
       end
     end
 
diff --git a/spec/controllers/platform/api/v1/users_controller_spec.rb b/spec/controllers/platform/api/v1/users_controller_spec.rb
index 95d6cd452dc02..895f30b294349 100644
--- a/spec/controllers/platform/api/v1/users_controller_spec.rb
+++ b/spec/controllers/platform/api/v1/users_controller_spec.rb
@@ -94,13 +94,28 @@
     context 'when it is an authenticated platform app' do
       let(:platform_app) { create(:platform_app) }
 
-      it 'creates a new user and permissible for the user' do
-        expect do
-          post '/platform/api/v1/users/', params: { name: 'test', display_name: 'displaytest',
-                                                    email: 'test@test.com', password: 'Password1!',
-                                                    custom_attributes: { test: 'test_create' } },
-                                          headers: { api_access_token: platform_app.access_token.token }, as: :json
-        end.not_to enqueue_mail
+      it 'creates a new user and permissible for the user without sending an email' do
+        # TODO: enqueued mail check failes because of  : https://github.com/rspec/rspec-rails/pull/2793
+        # revert to this block when the issue is fixed
+
+        # expect do
+        #   post '/platform/api/v1/users/', params: { name: 'test', display_name: 'displaytest',
+        #                                             email: 'test@test.com', password: 'Password1!',
+        #                                             custom_attributes: { test: 'test_create' } },
+        #                                   headers: { api_access_token: platform_app.access_token.token }, as: :json
+        #   byebug
+        # end.not_to have_enqueued_mail
+
+        ##------ revert this block when the issue is fixed
+        post '/platform/api/v1/users/', params: { name: 'test', display_name: 'displaytest',
+                                                  email: 'test@test.com', password: 'Password1!',
+                                                  custom_attributes: { test: 'test_create' } },
+                                        headers: { api_access_token: platform_app.access_token.token }, as: :json
+        mail_jobs = ActiveJob::Base.queue_adapter.enqueued_jobs.select do |job|
+          job[:job] == 'ActionMailer::MailDeliveryJob'
+        end
+        expect(mail_jobs.count).to eq(0)
+        ##------ revert this block when the issue is fixed
 
         expect(response).to have_http_status(:success)
         data = response.parsed_body
diff --git a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
index 0f0164cd3f94e..7f0fca8a177d9 100644
--- a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
+++ b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
@@ -17,13 +17,20 @@
     create(:article, category: category, portal: portal, account_id: account.id, author_id: agent.id, associated_article_id: article.id, views: 1)
     create(:article, category: category_2, portal: portal, account_id: account.id, author_id: agent.id, associated_article_id: article.id, views: 5)
     create(:article, category: category_2, portal: portal, account_id: account.id, author_id: agent.id, views: 4)
+    create(:article, category: category_2, portal: portal, account_id: account.id, author_id: agent.id, status: :draft)
   end
 
   describe 'GET /public/api/v1/portals/:slug/articles' do
     it 'Fetch all articles in the portal' do
       get "/hc/#{portal.slug}/#{category.locale}/categories/#{category.slug}/articles"
+      expect(response).to have_http_status(:success)
+    end
 
+    it 'Fetches only the published articles in the portal' do
+      get "/hc/#{portal.slug}/#{category_2.locale}/categories/#{category.slug}/articles.json"
       expect(response).to have_http_status(:success)
+      response_data = JSON.parse(response.body, symbolize_names: true)[:payload]
+      expect(response_data.length).to eq(2)
     end
 
     it 'get all articles with searched text query' do
diff --git a/spec/enterprise/controllers/api/v1/accounts/custom_roles_controller_spec.rb b/spec/enterprise/controllers/api/v1/accounts/custom_roles_controller_spec.rb
new file mode 100644
index 0000000000000..5c6d96a7b0ceb
--- /dev/null
+++ b/spec/enterprise/controllers/api/v1/accounts/custom_roles_controller_spec.rb
@@ -0,0 +1,175 @@
+require 'rails_helper'
+
+RSpec.describe 'Custom Roles API', type: :request do
+  let!(:account) { create(:account) }
+  let!(:administrator) { create(:user, account: account, role: :administrator) }
+  let!(:agent) { create(:user, account: account, role: :agent) }
+  let!(:custom_role) { create(:custom_role, account: account, name: 'Manager') }
+
+  describe 'GET #index' do
+    context 'when it is an authenticated administrator' do
+      it 'returns all custom roles in the account' do
+        get "/api/v1/accounts/#{account.id}/custom_roles",
+            headers: administrator.create_new_auth_token
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body[0]).to include('name' => custom_role.name)
+      end
+    end
+
+    context 'when the user is an agent and is authenticated' do
+      it 'returns unauthorized' do
+        get "/api/v1/accounts/#{account.id}/custom_roles",
+            headers: agent.create_new_auth_token
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        get "/api/v1/accounts/#{account.id}/custom_roles"
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+  end
+
+  describe 'GET #show' do
+    context 'when it is an authenticated administrator' do
+      it 'returns the custom role details' do
+        get "/api/v1/accounts/#{account.id}/custom_roles/#{custom_role.id}",
+            headers: administrator.create_new_auth_token
+
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body).to include('name' => custom_role.name)
+      end
+    end
+
+    context 'when the user is an agent and is authenticated' do
+      it 'returns unauthorized' do
+        get "/api/v1/accounts/#{account.id}/custom_roles/#{custom_role.id}",
+            headers: agent.create_new_auth_token
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        get "/api/v1/accounts/#{account.id}/custom_roles/#{custom_role.id}"
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+  end
+
+  describe 'POST #create' do
+    let(:valid_params) do
+      { custom_role: { name: 'Support', description: 'Support role',
+                       permissions: CustomRole::PERMISSIONS.sample(SecureRandom.random_number(1..4)) } }
+    end
+
+    context 'when it is an authenticated administrator' do
+      it 'creates the custom role' do
+        expect do
+          post "/api/v1/accounts/#{account.id}/custom_roles",
+               params: valid_params,
+               headers: administrator.create_new_auth_token
+        end.to change(CustomRole, :count).by(1)
+
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body).to include('name' => 'Support')
+      end
+    end
+
+    context 'when the user is an agent and is authenticated' do
+      it 'returns unauthorized' do
+        post "/api/v1/accounts/#{account.id}/custom_roles",
+             params: valid_params,
+             headers: agent.create_new_auth_token
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        post "/api/v1/accounts/#{account.id}/custom_roles",
+             params: valid_params
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+  end
+
+  describe 'PUT #update' do
+    let(:update_params) { { custom_role: { name: 'Updated Role' } } }
+
+    context 'when it is an authenticated administrator' do
+      it 'updates the custom role' do
+        put "/api/v1/accounts/#{account.id}/custom_roles/#{custom_role.id}",
+            params: update_params,
+            headers: administrator.create_new_auth_token
+
+        expect(response).to have_http_status(:success)
+        body = JSON.parse(response.body)
+
+        expect(body).to include('name' => 'Updated Role')
+      end
+    end
+
+    context 'when the user is an agent and is authenticated' do
+      it 'returns unauthorized' do
+        put "/api/v1/accounts/#{account.id}/custom_roles/#{custom_role.id}",
+            params: update_params,
+            headers: agent.create_new_auth_token
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        put "/api/v1/accounts/#{account.id}/custom_roles/#{custom_role.id}",
+            params: update_params
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+  end
+
+  describe 'DELETE #destroy' do
+    context 'when it is an authenticated administrator' do
+      it 'deletes the custom role' do
+        delete "/api/v1/accounts/#{account.id}/custom_roles/#{custom_role.id}",
+               headers: administrator.create_new_auth_token
+
+        expect(response).to have_http_status(:success)
+        expect(CustomRole.count).to eq(0)
+      end
+    end
+
+    context 'when the user is an agent and is authenticated' do
+      it 'returns unauthorized' do
+        delete "/api/v1/accounts/#{account.id}/custom_roles/#{custom_role.id}",
+               headers: agent.create_new_auth_token
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        delete "/api/v1/accounts/#{account.id}/custom_roles/#{custom_role.id}"
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+  end
+end
diff --git a/spec/enterprise/controllers/api/v1/profiles_controller_spec.rb b/spec/enterprise/controllers/api/v1/profiles_controller_spec.rb
new file mode 100644
index 0000000000000..aa75451ad2cc1
--- /dev/null
+++ b/spec/enterprise/controllers/api/v1/profiles_controller_spec.rb
@@ -0,0 +1,28 @@
+require 'rails_helper'
+
+RSpec.describe 'Profile API', type: :request do
+  describe 'GET /api/v1/profile' do
+    let(:account) { create(:account) }
+    let!(:custom_role_account) { create(:account, name: 'Custom Role Account') }
+    let!(:custom_role) { create(:custom_role, name: 'Custom Role', account: custom_role_account) }
+    let!(:agent) { create(:user, account: account, custom_attributes: { test: 'test' }, role: :agent) }
+
+    before do
+      create(:account_user, account: custom_role_account, user: agent, custom_role: custom_role)
+    end
+
+    context 'when it is an authenticated user' do
+      it 'returns user custom role information' do
+        get '/api/v1/profile',
+            headers: agent.create_new_auth_token,
+            as: :json
+
+        parsed_response = response.parsed_body
+        # map accounts object and make sure custom role id and name are present
+        role_account = parsed_response['accounts'].find { |account| account['id'] == custom_role_account.id }
+        expect(role_account['custom_role']['id']).to eq(custom_role.id)
+        expect(role_account['custom_role']['name']).to eq(custom_role.name)
+      end
+    end
+  end
+end
diff --git a/spec/enterprise/controllers/enterprise/api/v1/accounts/agents_controller_spec.rb b/spec/enterprise/controllers/enterprise/api/v1/accounts/agents_controller_spec.rb
new file mode 100644
index 0000000000000..fbffe088ead4e
--- /dev/null
+++ b/spec/enterprise/controllers/enterprise/api/v1/accounts/agents_controller_spec.rb
@@ -0,0 +1,39 @@
+require 'rails_helper'
+
+RSpec.describe 'Enterprise Agents API', type: :request do
+  let(:account) { create(:account) }
+  let(:admin) { create(:user, account: account, role: :administrator) }
+  let!(:custom_role) { create(:custom_role, account: account) }
+
+  describe 'POST /api/v1/accounts/{account.id}/agents' do
+    let(:params) { { email: 'test@example.com', name: 'Test User', role: 'agent', custom_role_id: custom_role.id } }
+
+    context 'when it is an authenticated administrator' do
+      it 'creates an agent with the specified custom role' do
+        post "/api/v1/accounts/#{account.id}/agents", headers: admin.create_new_auth_token, params: params, as: :json
+
+        expect(response).to have_http_status(:success)
+        agent = account.agents.last
+        expect(agent.account_users.first.custom_role_id).to eq(custom_role.id)
+        expect(JSON.parse(response.body)['custom_role_id']).to eq(custom_role.id)
+      end
+    end
+  end
+
+  describe 'PUT /api/v1/accounts/{account.id}/agents/:id' do
+    let(:other_agent) { create(:user, account: account, role: :agent) }
+
+    context 'when it is an authenticated administrator' do
+      it 'modified the custom role of the agent' do
+        put "/api/v1/accounts/#{account.id}/agents/#{other_agent.id}",
+            headers: admin.create_new_auth_token,
+            params: { custom_role_id: custom_role.id },
+            as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(other_agent.account_users.first.reload.custom_role_id).to eq(custom_role.id)
+        expect(JSON.parse(response.body)['custom_role_id']).to eq(custom_role.id)
+      end
+    end
+  end
+end
diff --git a/spec/enterprise/jobs/sla/process_account_applied_slas_job_spec.rb b/spec/enterprise/jobs/sla/process_account_applied_slas_job_spec.rb
index 5d628f71ed64a..abddfca2349ad 100644
--- a/spec/enterprise/jobs/sla/process_account_applied_slas_job_spec.rb
+++ b/spec/enterprise/jobs/sla/process_account_applied_slas_job_spec.rb
@@ -10,8 +10,9 @@
     let!(:active_with_misses_applied_sla) { create(:applied_sla, account: account, sla_policy: sla_policy, sla_status: 'active_with_misses') }
 
     it 'enqueues the job' do
-      expect { described_class.perform_later }.to have_enqueued_job(described_class)
+      expect { described_class.perform_later(account) }.to have_enqueued_job(described_class)
         .on_queue('medium')
+        .with(account)
     end
 
     it 'calls the ProcessAppliedSlaJob for both active and active_with_misses' do
diff --git a/spec/enterprise/jobs/sla/process_applied_sla_job_spec.rb b/spec/enterprise/jobs/sla/process_applied_sla_job_spec.rb
index fd56e0df39c86..66c8da823c4f5 100644
--- a/spec/enterprise/jobs/sla/process_applied_sla_job_spec.rb
+++ b/spec/enterprise/jobs/sla/process_applied_sla_job_spec.rb
@@ -3,14 +3,15 @@
 RSpec.describe Sla::ProcessAppliedSlaJob do
   context 'when perform is called' do
     let(:account) { create(:account) }
+    let(:applied_sla) { create(:applied_sla, account: account) }
 
     it 'enqueues the job' do
-      expect { described_class.perform_later }.to have_enqueued_job(described_class)
+      expect { described_class.perform_later(applied_sla) }.to have_enqueued_job(described_class)
+        .with(applied_sla)
         .on_queue('medium')
     end
 
     it 'calls the EvaluateAppliedSlaService' do
-      applied_sla = create(:applied_sla)
       expect(Sla::EvaluateAppliedSlaService).to receive(:new).with(applied_sla: applied_sla).and_call_original
       described_class.perform_now(applied_sla)
     end
diff --git a/spec/enterprise/lib/integrations/openai/processor_service_spec.rb b/spec/enterprise/lib/integrations/openai/processor_service_spec.rb
index 2a98514cf9eb7..4707aff87f67c 100644
--- a/spec/enterprise/lib/integrations/openai/processor_service_spec.rb
+++ b/spec/enterprise/lib/integrations/openai/processor_service_spec.rb
@@ -54,7 +54,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
 
       it 'returns empty string if openai response is blank' do
@@ -63,7 +63,7 @@
           .to_return(status: 200, body: '{}', headers: {})
 
         result = subject.perform
-        expect(result).to eq('')
+        expect(result).to eq({ :message => '' })
       end
     end
 
diff --git a/spec/enterprise/models/account_spec.rb b/spec/enterprise/models/account_spec.rb
index 67397a066ea50..8e2681a9b4da3 100644
--- a/spec/enterprise/models/account_spec.rb
+++ b/spec/enterprise/models/account_spec.rb
@@ -2,9 +2,15 @@
 
 require 'rails_helper'
 
-RSpec.describe Account do
+RSpec.describe Account, type: :model do
   include ActiveJob::TestHelper
 
+  describe 'associations' do
+    it { is_expected.to have_many(:sla_policies).dependent(:destroy_async) }
+    it { is_expected.to have_many(:applied_slas).dependent(:destroy_async) }
+    it { is_expected.to have_many(:custom_roles).dependent(:destroy_async) }
+  end
+
   describe 'sla_policies' do
     let!(:account) { create(:account) }
     let!(:sla_policy) { create(:sla_policy, account: account) }
diff --git a/spec/enterprise/models/account_user_spec.rb b/spec/enterprise/models/account_user_spec.rb
index 3850cfa9ead3f..fb572e86a72d3 100644
--- a/spec/enterprise/models/account_user_spec.rb
+++ b/spec/enterprise/models/account_user_spec.rb
@@ -2,7 +2,33 @@
 
 require 'rails_helper'
 
-RSpec.describe AccountUser do
+RSpec.describe AccountUser, type: :model do
+  describe 'associations' do
+    # option and dependant nullify
+    it { is_expected.to belong_to(:custom_role).optional }
+  end
+
+  describe 'permissions' do
+    context 'when custom role is assigned' do
+      it 'returns permissions of the custom role along with `custom_role` permission' do
+        account = create(:account)
+        custom_role = create(:custom_role, account: account)
+        account_user = create(:account_user, account: account, custom_role: custom_role)
+
+        expect(account_user.permissions).to eq(custom_role.permissions + ['custom_role'])
+      end
+    end
+
+    context 'when custom role is not assigned' do
+      it 'returns permissions of the default role' do
+        account = create(:account)
+        account_user = create(:account_user, account: account)
+
+        expect(account_user.permissions).to eq([account_user.role])
+      end
+    end
+  end
+
   describe 'audit log' do
     context 'when account user is created' do
       it 'has associated audit log created' do
diff --git a/spec/enterprise/models/custom_role_spec.rb b/spec/enterprise/models/custom_role_spec.rb
new file mode 100644
index 0000000000000..f63f3c2dde75e
--- /dev/null
+++ b/spec/enterprise/models/custom_role_spec.rb
@@ -0,0 +1,12 @@
+require 'rails_helper'
+
+RSpec.describe CustomRole, type: :model do
+  describe 'associations' do
+    it { is_expected.to belong_to(:account) }
+    it { is_expected.to have_many(:account_users).dependent(:nullify) }
+  end
+
+  describe 'validations' do
+    it { is_expected.to validate_presence_of(:name) }
+  end
+end
diff --git a/spec/factories/custom_roles.rb b/spec/factories/custom_roles.rb
new file mode 100644
index 0000000000000..542f9dae10e0a
--- /dev/null
+++ b/spec/factories/custom_roles.rb
@@ -0,0 +1,8 @@
+FactoryBot.define do
+  factory :custom_role do
+    account
+    name { Faker::Name.name }
+    description { Faker::Lorem.sentence }
+    permissions { CustomRole::PERMISSIONS.sample(SecureRandom.random_number(1..4)) }
+  end
+end
diff --git a/spec/jobs/account/contacts_export_job_spec.rb b/spec/jobs/account/contacts_export_job_spec.rb
index 9fe10bb961d41..7c1858d0a50cd 100644
--- a/spec/jobs/account/contacts_export_job_spec.rb
+++ b/spec/jobs/account/contacts_export_job_spec.rb
@@ -1,7 +1,7 @@
 require 'rails_helper'
 
 RSpec.describe Account::ContactsExportJob do
-  subject(:job) { described_class.perform_later }
+  subject(:job) { described_class.perform_later(account.id, user.id, [], {}) }
 
   let(:account) { create(:account) }
   let(:user) { create(:user, account: account, email: 'account-user-test@test.com') }
diff --git a/spec/jobs/conversations/resolution_job_spec.rb b/spec/jobs/conversations/resolution_job_spec.rb
index ad2dee92be459..1a812ac86c543 100644
--- a/spec/jobs/conversations/resolution_job_spec.rb
+++ b/spec/jobs/conversations/resolution_job_spec.rb
@@ -1,14 +1,14 @@
 require 'rails_helper'
 
 RSpec.describe Conversations::ResolutionJob do
-  subject(:job) { described_class.perform_later(account) }
+  subject(:job) { described_class.perform_later(account: account) }
 
   let!(:account) { create(:account) }
   let!(:conversation) { create(:conversation, account: account) }
 
   it 'enqueues the job' do
     expect { job }.to have_enqueued_job(described_class)
-      .with(account)
+      .with(account: account)
       .on_queue('low')
   end
 
diff --git a/spec/jobs/conversations/update_message_status_job_spec.rb b/spec/jobs/conversations/update_message_status_job_spec.rb
index 0cdfb867d4650..ff5c902927a5c 100644
--- a/spec/jobs/conversations/update_message_status_job_spec.rb
+++ b/spec/jobs/conversations/update_message_status_job_spec.rb
@@ -1,7 +1,7 @@
 require 'rails_helper'
 
 RSpec.describe Conversations::UpdateMessageStatusJob do
-  subject(:job) { described_class.perform_later(account) }
+  subject(:job) { described_class.perform_later(conversation.id, conversation.contact_last_seen_at, :read) }
 
   let!(:account) { create(:account) }
   let!(:conversation) { create(:conversation, account: account, contact_last_seen_at: DateTime.now.utc) }
@@ -9,7 +9,7 @@
 
   it 'enqueues the job' do
     expect { job }.to have_enqueued_job(described_class)
-      .with(account)
+      .with(conversation.id, conversation.contact_last_seen_at, :read)
       .on_queue('low')
   end
 
diff --git a/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb b/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb
index 5054a519cfbda..da4b95b15de69 100644
--- a/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb
+++ b/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb
@@ -12,7 +12,7 @@
   describe '#perform' do
     it 'enqueues the job' do
       expect do
-        described_class.perform_later
+        described_class.perform_later(imap_email_channel, 1)
       end.to have_enqueued_job(described_class).on_queue('scheduled_jobs')
     end
 
diff --git a/spec/jobs/migration/conversations_first_reply_scheduler_job_spec.rb b/spec/jobs/migration/conversations_first_reply_scheduler_job_spec.rb
index 52ef7b5745975..4e3fcbb192257 100644
--- a/spec/jobs/migration/conversations_first_reply_scheduler_job_spec.rb
+++ b/spec/jobs/migration/conversations_first_reply_scheduler_job_spec.rb
@@ -1,7 +1,7 @@
 require 'rails_helper'
 
 RSpec.describe Migration::ConversationsFirstReplySchedulerJob do
-  subject(:job) { described_class.perform_later }
+  subject(:job) { described_class.perform_later(account) }
 
   let!(:account) { create(:account) }
   let!(:inbox) { create(:inbox, account: account) }
@@ -10,6 +10,7 @@
   it 'enqueues the job' do
     expect { job }.to have_enqueued_job(described_class)
       .on_queue('scheduled_jobs')
+      .with(account)
   end
 
   context 'when there is an outgoing message in conversation' do
diff --git a/spec/jobs/notification/remove_old_notification_job_spec.rb b/spec/jobs/notification/remove_old_notification_job_spec.rb
index efc6616eb764b..1605d2da64029 100644
--- a/spec/jobs/notification/remove_old_notification_job_spec.rb
+++ b/spec/jobs/notification/remove_old_notification_job_spec.rb
@@ -5,9 +5,8 @@
   let(:conversation) { create(:conversation) }
 
   it 'enqueues the job' do
-    notification = create(:notification, user: user, notification_type: 'conversation_creation', primary_actor: conversation)
     expect do
-      described_class.perform_later(notification)
+      described_class.perform_later
     end.to have_enqueued_job(described_class)
       .on_queue('low')
   end
diff --git a/spec/jobs/webhooks/instagram_events_job_spec.rb b/spec/jobs/webhooks/instagram_events_job_spec.rb
index 84bff722bba4f..1ffa8691c4168 100644
--- a/spec/jobs/webhooks/instagram_events_job_spec.rb
+++ b/spec/jobs/webhooks/instagram_events_job_spec.rb
@@ -81,9 +81,7 @@
       end
 
       it 'handle instagram unsend message event' do
-        create(:message,
-               source_id: 'message-id-to-delete',
-               inbox_id: instagram_inbox.id)
+        message = create(:message, inbox_id: instagram_inbox.id, source_id: 'message-id-to-delete')
         allow(Koala::Facebook::API).to receive(:new).and_return(fb_object)
         allow(fb_object).to receive(:get_object).and_return(
           {
@@ -93,10 +91,15 @@
             profile_pic: 'https://chatwoot-assets.local/sample.png'
           }.with_indifferent_access
         )
+        message.attachments.new(file_type: :image, external_url: 'https://www.example.com/test.jpeg')
+
         expect(instagram_inbox.messages.count).to be 1
+
         instagram_webhook.perform_now(unsend_event[:entry])
 
         expect(instagram_inbox.messages.last.content).to eq 'This message was deleted'
+        expect(instagram_inbox.messages.last.deleted).to be true
+        expect(instagram_inbox.messages.last.attachments.count).to be 0
         expect(instagram_inbox.messages.last.reload.deleted).to be true
       end
 
diff --git a/spec/lib/integrations/openai/processor_service_spec.rb b/spec/lib/integrations/openai/processor_service_spec.rb
index 4d8443ea11cae..8bbf5d5fb6123 100644
--- a/spec/lib/integrations/openai/processor_service_spec.rb
+++ b/spec/lib/integrations/openai/processor_service_spec.rb
@@ -35,7 +35,7 @@
 
       it 'returns the rephrased message using the tone in data' do
         request_body = {
-          'model' => 'gpt-3.5-turbo',
+          'model' => 'gpt-4o-mini',
           'messages' => [
             {
               'role' => 'system',
@@ -52,7 +52,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
     end
 
@@ -61,7 +61,7 @@
 
       it 'returns the suggested reply' do
         request_body = {
-          'model' => 'gpt-3.5-turbo',
+          'model' => 'gpt-4o-mini',
           'messages' => [
             { role: 'system',
               content: Rails.root.join('lib/integrations/openai/openai_prompts/reply.txt').read },
@@ -76,7 +76,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
     end
 
@@ -88,7 +88,7 @@
 
       it 'returns the summarized message' do
         request_body = {
-          'model' => 'gpt-3.5-turbo',
+          'model' => 'gpt-4o-mini',
           'messages' => [
             { 'role' => 'system',
               'content' => summary_prompt },
@@ -101,7 +101,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
     end
 
@@ -127,7 +127,7 @@
 
       it 'returns the corrected text' do
         request_body = {
-          'model' => 'gpt-3.5-turbo',
+          'model' => 'gpt-4o-mini',
           'messages' => [
             { 'role' => 'system', 'content' => 'You are a helpful support agent. Please fix the spelling and grammar of the following response. ' \
                                                'Ensure that the reply should be in user language.' },
@@ -140,7 +140,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
     end
 
@@ -149,7 +149,7 @@
 
       it 'returns the shortened text' do
         request_body = {
-          'model' => 'gpt-3.5-turbo',
+          'model' => 'gpt-4o-mini',
           'messages' => [
             { 'role' => 'system', 'content' => 'You are a helpful support agent. Please shorten the following response. ' \
                                                'Ensure that the reply should be in user language.' },
@@ -162,7 +162,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
     end
 
@@ -171,7 +171,7 @@
 
       it 'returns the expanded text' do
         request_body = {
-          'model' => 'gpt-3.5-turbo',
+          'model' => 'gpt-4o-mini',
           'messages' => [
             { 'role' => 'system', 'content' => 'You are a helpful support agent. Please expand the following response. ' \
                                                'Ensure that the reply should be in user language.' },
@@ -184,7 +184,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
     end
 
@@ -193,7 +193,7 @@
 
       it 'returns the friendly text' do
         request_body = {
-          'model' => 'gpt-3.5-turbo',
+          'model' => 'gpt-4o-mini',
           'messages' => [
             { 'role' => 'system', 'content' => 'You are a helpful support agent. Please make the following response more friendly. ' \
                                                'Ensure that the reply should be in user language.' },
@@ -206,7 +206,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
     end
 
@@ -215,7 +215,7 @@
 
       it 'returns the formal text' do
         request_body = {
-          'model' => 'gpt-3.5-turbo',
+          'model' => 'gpt-4o-mini',
           'messages' => [
             { 'role' => 'system', 'content' => 'You are a helpful support agent. Please make the following response more formal. ' \
                                                'Ensure that the reply should be in user language.' },
@@ -228,7 +228,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
     end
 
@@ -237,7 +237,7 @@
 
       it 'returns the simplified text' do
         request_body = {
-          'model' => 'gpt-3.5-turbo',
+          'model' => 'gpt-4o-mini',
           'messages' => [
             { 'role' => 'system', 'content' => 'You are a helpful support agent. Please simplify the following response. ' \
                                                'Ensure that the reply should be in user language.' },
@@ -250,7 +250,7 @@
           .to_return(status: 200, body: openai_response, headers: {})
 
         result = subject.perform
-        expect(result).to eq('This is a reply from openai.')
+        expect(result).to eq({ :message => 'This is a reply from openai.' })
       end
     end
   end
diff --git a/spec/models/integrations/hook_spec.rb b/spec/models/integrations/hook_spec.rb
index fbad9192e1ff9..aecb2981cd015 100644
--- a/spec/models/integrations/hook_spec.rb
+++ b/spec/models/integrations/hook_spec.rb
@@ -37,7 +37,7 @@
 
     it 'returns no processor found for hooks with out processor defined' do
       hook = create(:integrations_hook, account: account)
-      expect(hook.process_event(params)).to eq('No processor found')
+      expect(hook.process_event(params)).to eq({ :error => 'No processor found' })
     end
 
     it 'returns results from procesor for openai hook' do
diff --git a/yarn.lock b/yarn.lock
index 6bb82aa1503f4..56c7c42b30c91 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2914,10 +2914,10 @@
     hotkeys-js "3.8.7"
     lit "2.2.6"
 
-"@chatwoot/prosemirror-schema@1.0.11":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@chatwoot/prosemirror-schema/-/prosemirror-schema-1.0.11.tgz#b66201be8b09cd4c6370a60607cc5d4f9d924bdb"
-  integrity sha512-OAUa1CuHtetEPh/ZhRkMLVQHY2/eesCRb2IRdVzjh0z+4spp3fG826y8FbOEsa7m4hisNirnGF/mDH+NMmYetw==
+"@chatwoot/prosemirror-schema@1.0.17":
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/@chatwoot/prosemirror-schema/-/prosemirror-schema-1.0.17.tgz#5c04a94c8200b303d943369b2534730d5ba15a64"
+  integrity sha512-3hwBSMdb5a+Ilct0fNSlAvQu/9+pnyI/FoGshVRC9Hn1tCdZdS7LUlxOuDweta3HneVclhE+SxJN5lM33v5WGw==
   dependencies:
     markdown-it-sup "^1.0.0"
     prosemirror-commands "^1.1.4"
@@ -7845,10 +7845,10 @@ bn.js@^5.2.1:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
 
-body-parser@1.20.2:
-  version "1.20.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
-  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
+body-parser@1.20.3:
+  version "1.20.3"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
   dependencies:
     bytes "3.1.2"
     content-type "~1.0.5"
@@ -7858,7 +7858,7 @@ body-parser@1.20.2:
     http-errors "2.0.0"
     iconv-lite "0.4.24"
     on-finished "2.4.1"
-    qs "6.11.0"
+    qs "6.13.0"
     raw-body "2.5.2"
     type-is "~1.6.18"
     unpipe "1.0.0"
@@ -8211,6 +8211,17 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
 call-me-maybe@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.2.tgz#03f964f19522ba643b1b0693acb9152fe2074baa"
@@ -9513,6 +9524,15 @@ define-data-property@^1.0.1:
     gopd "^1.0.1"
     has-property-descriptors "^1.0.0"
 
+define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -9874,15 +9894,10 @@ dotenv@^8.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
   integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
 
-dset@^3.1.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/dset/-/dset-3.1.2.tgz#89c436ca6450398396dc6538ea00abc0c54cd45a"
-  integrity sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==
-
-dset@^3.1.2:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/dset/-/dset-3.1.3.tgz#c194147f159841148e8e34ca41f638556d9542d2"
-  integrity sha512-20TuZZHCEZ2O71q9/+8BwKwZ0QtD9D8ObhrihJPr+vLLYlSuAU3/zL4cSlgbfeoGHTjCSJBa7NGcrF9/Bx/WJQ==
+dset@^3.1.1, dset@^3.1.2:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/dset/-/dset-3.1.4.tgz#f8eaf5f023f068a036d08cd07dc9ffb7d0065248"
+  integrity sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==
 
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.7.1"
@@ -9943,9 +9958,9 @@ electron-to-chromium@^1.4.477, electron-to-chromium@^1.4.668:
   integrity sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==
 
 elliptic@^6.5.3, elliptic@^6.5.4:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
+  version "6.5.7"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
+  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"
@@ -9985,6 +10000,11 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
+encodeurl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -10172,6 +10192,18 @@ es-array-method-boxes-properly@^1.0.0:
   resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
   integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
 
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
 es-get-iterator@^1.0.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
@@ -10725,36 +10757,36 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
     homedir-polyfill "^1.0.1"
 
 express@^4.17.1:
-  version "4.19.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
-  integrity sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.20.0.tgz#f1d08e591fcec770c07be4767af8eb9bcfd67c48"
+  integrity sha512-pLdae7I6QqShF5PnNTCVn4hI91Dx0Grkn2+IAsMTgMIKuQVte2dN9PeGSSAME2FR8anOhVA62QDIUaWVfEXVLw==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.20.2"
+    body-parser "1.20.3"
     content-disposition "0.5.4"
     content-type "~1.0.4"
     cookie "0.6.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     etag "~1.8.1"
     finalhandler "1.2.0"
     fresh "0.5.2"
     http-errors "2.0.0"
-    merge-descriptors "1.0.1"
+    merge-descriptors "1.0.3"
     methods "~1.1.2"
     on-finished "2.4.1"
     parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
+    path-to-regexp "0.1.10"
     proxy-addr "~2.0.7"
     qs "6.11.0"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
-    send "0.18.0"
-    serve-static "1.15.0"
+    send "0.19.0"
+    serve-static "1.16.0"
     setprototypeof "1.2.0"
     statuses "2.0.1"
     type-is "~1.6.18"
@@ -11268,6 +11300,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
 function.prototype.name@^1.1.0, function.prototype.name@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
@@ -11351,6 +11388,17 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.0, get-intrinsic@^1.2.1:
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -11686,6 +11734,13 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
 has-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
@@ -11778,6 +11833,13 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hasown@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 hast-to-hyperscript@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz#9b67fd188e4c81e8ad66f803855334173920218d"
@@ -13984,10 +14046,10 @@ meow@^3.1.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
-merge-descriptors@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
+merge-descriptors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
 
 merge-source-map@^1.1.0:
   version "1.1.0"
@@ -14610,6 +14672,11 @@ object-inspect@^1.12.3:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
   integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
 
+object-inspect@^1.13.1:
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
+  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+
 object-inspect@^1.9.0:
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
@@ -15162,10 +15229,10 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
+path-to-regexp@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
+  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
 
 path-type@^1.0.0:
   version "1.1.0"
@@ -16867,6 +16934,13 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+  dependencies:
+    side-channel "^1.0.6"
+
 qs@^6.10.0:
   version "6.11.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
@@ -17877,6 +17951,25 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
+send@0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+  dependencies:
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    mime "1.6.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
+    range-parser "~1.2.1"
+    statuses "2.0.1"
+
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -17922,10 +18015,10 @@ serve-index@^1.9.1:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
-  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
+serve-static@1.16.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.0.tgz#2bf4ed49f8af311b519c46f272bf6ac3baf38a92"
+  integrity sha512-pDLK8zwl2eKaYrs8mrPZBJua4hMplRWJ1tIFksVC3FtBEBnl8dxgeHtsaMS8DhS9i4fLObaon6ABoc4/hQGdPA==
   dependencies:
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
@@ -17937,6 +18030,18 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
 set-function-name@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
@@ -18019,6 +18124,16 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
 siginfo@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/siginfo/-/siginfo-2.0.0.tgz#32e76c70b79724e3bb567cb9d543eb858ccfaf30"
@@ -18413,7 +18528,16 @@ string-argv@0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -18565,7 +18689,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -18593,6 +18717,13 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -20526,7 +20657,7 @@ worker-rpc@^0.1.0:
   dependencies:
     microevent.ts "~0.1.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -20553,6 +20684,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"