diff --git a/.codeclimate.yml b/.codeclimate.yml
index 5e16262da..213f7d172 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -57,3 +57,5 @@ exclude_patterns:
   - 'app/javascript/shared/constants/locales.js'
   - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
   - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
+  - '**/fixtures/**'
+  - '**/*/fixtures.js'
diff --git a/Gemfile b/Gemfile
index f18305970..439b0f63e 100644
--- a/Gemfile
+++ b/Gemfile
@@ -49,7 +49,7 @@ gem 'aws-sdk-s3', require: false
 # original gem isn't maintained actively
 # we wanted updated version of faraday which is a dependency for slack-ruby-client
 gem 'azure-storage-blob', git: 'https://github.com/chatwoot/azure-storage-ruby', branch: 'chatwoot', require: false
-gem 'google-cloud-storage', require: false
+gem 'google-cloud-storage', '>= 1.48.0', require: false
 gem 'image_processing'
 
 ##-- gems for database --#
diff --git a/Gemfile.lock b/Gemfile.lock
index e2f5c91be..74cdbeea8 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -33,70 +33,70 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actioncable (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionmailbox (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activestorage (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      actionview (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionmailer (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      actionview (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.5)
-      actionview (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionpack (7.0.8.7)
+      actionview (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       rack (~> 2.0, >= 2.2.4)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actiontext (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activestorage (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionview (7.0.8.7)
+      activesupport (= 7.0.8.7)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activejob (7.0.8.7)
+      activesupport (= 7.0.8.7)
       globalid (>= 0.3.6)
-    activemodel (7.0.8.5)
-      activesupport (= 7.0.8.5)
-    activerecord (7.0.8.5)
-      activemodel (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activemodel (7.0.8.7)
+      activesupport (= 7.0.8.7)
+    activerecord (7.0.8.7)
+      activemodel (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
     activerecord-import (1.4.1)
       activerecord (>= 4.2)
-    activestorage (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activestorage (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.8.5)
+    activesupport (7.0.8.7)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -209,7 +209,7 @@ GEM
       devise (> 3.5.2, < 5)
       rails (>= 4.2.0, < 7.2)
     diff-lcs (1.5.1)
-    digest-crc (0.6.4)
+    digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
     docile (1.4.0)
     domain_name (0.5.20190701)
@@ -284,39 +284,39 @@ GEM
       activesupport (>= 6.1)
     gmail_xoauth (0.4.3)
       oauth (>= 0.3.6)
-    google-apis-core (0.11.0)
+    google-apis-core (0.15.1)
       addressable (~> 2.5, >= 2.5.1)
-      googleauth (>= 0.16.2, < 2.a)
-      httpclient (>= 2.8.1, < 3.a)
+      googleauth (~> 1.9)
+      httpclient (>= 2.8.3, < 3.a)
       mini_mime (~> 1.0)
+      mutex_m
       representable (~> 3.0)
       retriable (>= 2.0, < 4.a)
-      rexml
-      webrick
-    google-apis-iamcredentials_v1 (0.17.0)
-      google-apis-core (>= 0.11.0, < 2.a)
-    google-apis-storage_v1 (0.19.0)
-      google-apis-core (>= 0.9.0, < 2.a)
-    google-cloud-core (1.6.0)
-      google-cloud-env (~> 1.0)
+    google-apis-iamcredentials_v1 (0.22.0)
+      google-apis-core (>= 0.15.0, < 2.a)
+    google-apis-storage_v1 (0.47.0)
+      google-apis-core (>= 0.15.0, < 2.a)
+    google-cloud-core (1.7.1)
+      google-cloud-env (>= 1.0, < 3.a)
       google-cloud-errors (~> 1.0)
     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-env (2.2.1)
+      faraday (>= 1.0, < 3.a)
     google-cloud-errors (1.3.1)
     google-cloud-location (0.6.0)
       gapic-common (>= 0.20.0, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-cloud-storage (1.44.0)
+    google-cloud-storage (1.52.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
-      google-apis-iamcredentials_v1 (~> 0.1)
-      google-apis-storage_v1 (~> 0.19.0)
+      google-apis-core (~> 0.13)
+      google-apis-iamcredentials_v1 (~> 0.18)
+      google-apis-storage_v1 (~> 0.38)
       google-cloud-core (~> 1.6)
-      googleauth (>= 0.16.2, < 2.a)
+      googleauth (~> 1.9)
       mini_mime (~> 1.0)
     google-cloud-translate-v3 (0.10.0)
       gapic-common (>= 0.20.0, < 2.a)
@@ -331,10 +331,10 @@ GEM
       grpc (~> 1.41)
     googleapis-common-protos-types (1.14.0)
       google-protobuf (~> 3.18)
-    googleauth (1.5.2)
-      faraday (>= 0.17.3, < 3.a)
+    googleauth (1.11.2)
+      faraday (>= 1.0, < 3.a)
+      google-cloud-env (~> 2.1)
       jwt (>= 1.4, < 3.0)
-      memoist (~> 0.16)
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
@@ -452,7 +452,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.22.0)
+    loofah (2.23.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -462,7 +462,6 @@ GEM
       net-smtp
     marcel (1.0.4)
     maxminddb (0.1.22)
-    memoist (0.16.2)
     meta_request (0.8.3)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
@@ -472,14 +471,15 @@ GEM
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
-    minitest (5.25.1)
+    mini_portile2 (2.8.8)
+    minitest (5.25.4)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
     multi_json (1.15.0)
     multi_xml (0.6.0)
     multipart-post (2.3.0)
+    mutex_m (0.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
     net-http (0.4.1)
@@ -502,14 +502,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.16.7)
+    nokogiri (1.17.1)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.7-arm64-darwin)
+    nokogiri (1.17.1-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-darwin)
+    nokogiri (1.17.1-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.17.1-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -581,30 +581,30 @@ GEM
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rails (7.0.8.5)
-      actioncable (= 7.0.8.5)
-      actionmailbox (= 7.0.8.5)
-      actionmailer (= 7.0.8.5)
-      actionpack (= 7.0.8.5)
-      actiontext (= 7.0.8.5)
-      actionview (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activemodel (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    rails (7.0.8.7)
+      actioncable (= 7.0.8.7)
+      actionmailbox (= 7.0.8.7)
+      actionmailer (= 7.0.8.7)
+      actionpack (= 7.0.8.7)
+      actiontext (= 7.0.8.7)
+      actionview (= 7.0.8.7)
+      activejob (= 7.0.8.7)
+      activemodel (= 7.0.8.7)
+      activerecord (= 7.0.8.7)
+      activestorage (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       bundler (>= 1.15.0)
-      railties (= 7.0.8.5)
+      railties (= 7.0.8.7)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.0)
+    rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
-      nokogiri (~> 1.14)
-    railties (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    railties (7.0.8.7)
+      actionpack (= 7.0.8.7)
+      activesupport (= 7.0.8.7)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
@@ -824,7 +824,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.8.2)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -886,7 +885,7 @@ DEPENDENCIES
   geocoder
   gmail_xoauth
   google-cloud-dialogflow-v2 (>= 0.24.0)
-  google-cloud-storage
+  google-cloud-storage (>= 1.48.0)
   google-cloud-translate-v3 (>= 0.7.0)
   groupdate
   grpc
diff --git a/app.json b/app.json
index d50040814..08e725c8e 100644
--- a/app.json
+++ b/app.json
@@ -48,7 +48,7 @@
       "size": "basic"
     }
   },
-  "stack": "heroku-20",
+  "stack": "heroku-24",
   "image": "heroku/ruby",
   "addons": [
     {
@@ -58,7 +58,7 @@
       "plan": "heroku-postgresql:essential-0"
     }
   ],
-  "stack": "heroku-20",
+  "stack": "heroku-24",
   "buildpacks": [
     {
       "url": "heroku/nodejs"
diff --git a/app/controllers/api/v1/accounts/contacts_controller.rb b/app/controllers/api/v1/accounts/contacts_controller.rb
index 250c64a86..0d8e0ed93 100644
--- a/app/controllers/api/v1/accounts/contacts_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts_controller.rb
@@ -14,7 +14,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
   before_action :set_current_page, only: [:index, :active, :search, :filter]
   before_action :fetch_contact, only: [:show, :update, :destroy, :avatar, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :search, :filter]
+  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
 
   def index
     @contacts_count = resolved_contacts.count
diff --git a/app/controllers/api/v1/accounts/integrations/captain_controller.rb b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
index 15e81b726..6813d14b5 100644
--- a/app/controllers/api/v1/accounts/integrations/captain_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
@@ -2,10 +2,22 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
   before_action :hook
 
   def proxy
+    request_url = build_request_url(request_path)
     response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
     render plain: response.body, status: response.code
   end
 
+  def copilot
+    request_url = build_request_url(build_request_path("/assistants/#{hook.settings['assistant_id']}/copilot"))
+    params = {
+      previous_messages: copilot_params[:previous_messages],
+      conversation_history: conversation_history,
+      message: copilot_params[:message]
+    }
+    response = HTTParty.send(:post, request_url, body: params.to_json, headers: headers)
+    render plain: response.body, status: response.code
+  end
+
   private
 
   def headers
@@ -17,15 +29,19 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
     }
   end
 
+  def build_request_path(route)
+    "api/accounts/#{hook.settings['account_id']}#{route}"
+  end
+
   def request_path
     request_route = with_leading_hash_on_route(params[:route])
 
     return 'api/sessions/profile' if request_route == '/sessions/profile'
 
-    "api/accounts/#{hook.settings['account_id']}#{request_route}"
+    build_request_path(request_route)
   end
 
-  def request_url
+  def build_request_url(request_path)
     base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
     URI.join(base_url, request_path).to_s
   end
@@ -47,6 +63,15 @@ class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::Ba
     request_route.start_with?('/') ? request_route : "/#{request_route}"
   end
 
+  def conversation_history
+    conversation = Current.account.conversations.find_by!(display_id: copilot_params[:conversation_id])
+    conversation.to_llm_text
+  end
+
+  def copilot_params
+    params.permit(:previous_messages, :conversation_id, :message)
+  end
+
   def permitted_params
     params.permit(:method, :route, body: {})
   end
diff --git a/app/controllers/api/v1/profiles_controller.rb b/app/controllers/api/v1/profiles_controller.rb
index bd3c2673c..ae1a1fe30 100644
--- a/app/controllers/api/v1/profiles_controller.rb
+++ b/app/controllers/api/v1/profiles_controller.rb
@@ -17,7 +17,7 @@ class Api::V1::ProfilesController < Api::BaseController
 
   def avatar
     @user.avatar.attachment.destroy! if @user.avatar.attached?
-    head :ok
+    @user.reload
   end
 
   def auto_offline
diff --git a/app/javascript/dashboard/api/contacts.js b/app/javascript/dashboard/api/contacts.js
index 85c4bba1d..2eee3f484 100644
--- a/app/javascript/dashboard/api/contacts.js
+++ b/app/javascript/dashboard/api/contacts.js
@@ -27,6 +27,14 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
+  show(id) {
+    return axios.get(`${this.url}/${id}?include_contact_inboxes=false`);
+  }
+
+  update(id, data) {
+    return axios.patch(`${this.url}/${id}?include_contact_inboxes=false`, data);
+  }
+
   getConversations(contactId) {
     return axios.get(`${this.url}/${contactId}/conversations`);
   }
diff --git a/app/javascript/dashboard/api/integrations.js b/app/javascript/dashboard/api/integrations.js
index 59a3e244a..b78a2ea7e 100644
--- a/app/javascript/dashboard/api/integrations.js
+++ b/app/javascript/dashboard/api/integrations.js
@@ -36,6 +36,10 @@ class IntegrationsAPI extends ApiClient {
   requestCaptain(body) {
     return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
   }
+
+  requestCaptainCopilot(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/copilot`, body);
+  }
 }
 
 export default new IntegrationsAPI();
diff --git a/app/javascript/dashboard/assets/scss/_date-picker.scss b/app/javascript/dashboard/assets/scss/_date-picker.scss
index 92deab095..2fa577673 100644
--- a/app/javascript/dashboard/assets/scss/_date-picker.scss
+++ b/app/javascript/dashboard/assets/scss/_date-picker.scss
@@ -25,7 +25,7 @@
   }
 
   .mx-input {
-    @apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
+    @apply h-[2.5rem] flex border border-solid border-n-weak rounded-md shadow-none;
   }
 
   .mx-input:disabled,
@@ -39,7 +39,7 @@
 }
 
 .mx-datepicker-main {
-  @apply border-0 bg-white dark:bg-slate-800;
+  @apply border-0 bg-n-solid-2 rounded-xl;
 
   .cell {
     &.disabled {
@@ -53,6 +53,14 @@
     }
   }
 
+  .mx-calendar+.mx-calendar {
+    @apply border-l border-n-weak;
+  }
+
+  .mx-datepicker-footer {
+    @apply border border-n-weak;
+  }
+
   .mx-time {
     @apply border-0 bg-white dark:bg-slate-800;
 
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index e3474e616..c6304cf19 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -72,6 +72,19 @@
     --slate-11: 96 100 108;
     --slate-12: 28 32 36;
 
+    --iris-1: 253 253 255;
+    --iris-2: 248 248 255;
+    --iris-3: 240 241 254;
+    --iris-4: 230 231 255;
+    --iris-5: 218 220 255;
+    --iris-6: 203 205 255;
+    --iris-7: 184 186 248;
+    --iris-8: 155 158 240;
+    --iris-9: 91 91 214;
+    --iris-10: 81 81 205;
+    --iris-11: 87 83 198;
+    --iris-12: 39 41 98;
+
     --ruby-1: 255 252 253;
     --ruby-2: 255 247 248;
     --ruby-3: 254 234 237;
@@ -122,6 +135,7 @@
     --solid-active: 255 255 255;
     --solid-amber: 252 232 193;
     --solid-blue: 218 236 255;
+    --solid-iris: 230 231 255;
 
     --alpha-1: 67, 67, 67, 0.06;
     --alpha-2: 201, 202, 207, 0.15;
@@ -129,10 +143,10 @@
     --black-alpha-1: 0, 0, 0, 0.12;
     --black-alpha-2: 0, 0, 0, 0.04;
     --border-blue: 39, 129, 246, 0.5;
-    --white-alpha: 255, 255, 255, 0.1;
+    --white-alpha: 255, 255, 255, 0.8;
   }
 
-  body.dark {
+  .dark {
     /* slate */
     --slate-1: 17 17 19;
     --slate-2: 24 25 27;
@@ -147,6 +161,19 @@
     --slate-11: 176 180 186;
     --slate-12: 237 238 240;
 
+    --iris-1: 19 19 30;
+    --iris-2: 23 22 37;
+    --iris-3: 32 34 72;
+    --iris-4: 38 42 101;
+    --iris-5: 48 51 116;
+    --iris-6: 61 62 130;
+    --iris-7: 74 74 149;
+    --iris-8: 89 88 177;
+    --iris-9: 91 91 214;
+    --iris-10: 84 114 228;
+    --iris-11: 158 177 255;
+    --iris-12: 224 223 254;
+
     --ruby-1: 25 17 19;
     --ruby-2: 30 21 23;
     --ruby-3: 58 20 30;
@@ -195,6 +222,7 @@
     --solid-active: 53 57 66;
     --solid-amber: 42 37 30;
     --solid-blue: 16 49 91;
+    --solid-iris: 38 42 101;
     --text-blue: 126 182 255;
 
     --alpha-1: 36, 36, 36, 0.8;
@@ -204,7 +232,7 @@
     --black-alpha-2: 0, 0, 0, 0.2;
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.1;
+    --white-alpha: 255, 255, 255, 0.8;
   }
   /* NEXT COLORS END */
 
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index b9999fac9..01ccaf671 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -6,6 +6,14 @@
   @apply border-b border-slate-50 dark:border-slate-800/50;
 }
 
+.tabs--container--compact.tab--chat-type {
+  .tabs-title {
+    a {
+      @apply py-2 text-sm;
+    }
+  }
+}
+
 .tabs {
   @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
 }
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
index 11006bfe3..3169dbc3e 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
@@ -22,7 +22,7 @@ const handleButtonClick = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto">
+      <div class="w-full max-w-[960px] mx-auto">
         <div class="flex items-center justify-between w-full h-20 gap-2">
           <span class="text-xl font-medium text-n-slate-12">
             {{ headerTitle }}
@@ -44,7 +44,7 @@ const handleButtonClick = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto py-4">
+      <div class="w-full max-w-[960px] mx-auto py-4">
         <slot name="default" />
       </div>
     </main>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
new file mode 100644
index 000000000..255c1b113
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { computed, watch, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+
+import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import AddLabel from 'dashboard/components-next/Label/AddLabel.vue';
+
+const props = defineProps({
+  contactId: {
+    type: [String, Number],
+    default: null,
+  },
+});
+
+const store = useStore();
+const route = useRoute();
+
+const showDropdown = ref(false);
+
+const allLabels = useMapGetter('labels/getLabels');
+const contactLabels = useMapGetter('contactLabels/getContactLabels');
+
+const savedLabels = computed(() => {
+  const availableContactLabels = contactLabels.value(props.contactId);
+  return allLabels.value.filter(({ title }) =>
+    availableContactLabels.includes(title)
+  );
+});
+
+const labelMenuItems = computed(() => {
+  return allLabels.value
+    ?.map(label => ({
+      label: label.title,
+      value: label.id,
+      thumbnail: { name: label.title, color: label.color },
+      isSelected: savedLabels.value.some(
+        savedLabel => savedLabel.id === label.id
+      ),
+      action: 'addLabel',
+    }))
+    .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
+});
+
+const fetchLabels = async contactId => {
+  if (!contactId) {
+    return;
+  }
+  store.dispatch('contactLabels/get', contactId);
+};
+
+const handleLabelAction = async ({ action, value }) => {
+  try {
+    // Get current label titles
+    const currentLabels = savedLabels.value.map(label => label.title);
+
+    // Find the label title for the ID (value)
+    const selectedLabel = allLabels.value.find(label => label.id === value);
+    if (!selectedLabel) return;
+
+    let updatedLabels;
+    if (action === 'addLabel') {
+      // If label is already selected, remove it (toggle behavior)
+      if (currentLabels.includes(selectedLabel.title)) {
+        updatedLabels = currentLabels.filter(
+          labelTitle => labelTitle !== selectedLabel.title
+        );
+      } else {
+        // Add the new label
+        updatedLabels = [...currentLabels, selectedLabel.title];
+      }
+    }
+
+    await store.dispatch('contactLabels/update', {
+      contactId: props.contactId,
+      labels: updatedLabels,
+    });
+
+    showDropdown.value = false;
+  } catch (error) {
+    // error
+  }
+};
+
+watch(
+  () => props.contactId,
+  (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      fetchLabels(newVal);
+    }
+  }
+);
+onMounted(() => {
+  if (route.params.contactId) {
+    fetchLabels(route.params.contactId);
+  }
+});
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
+    <AddLabel
+      :label-menu-items="labelMenuItems"
+      @update-label="handleLabelAction"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
index 4ba3546ce..a3b0bf37c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -1,10 +1,13 @@
 <script setup>
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Flag from 'dashboard/components-next/flag/Flag.vue';
+import countries from 'shared/constants/countries';
 
 const props = defineProps({
   id: { type: Number, required: true },
@@ -14,46 +17,118 @@ const props = defineProps({
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
   isExpanded: { type: Boolean, default: false },
+  isUpdating: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['toggle', 'updateContact', 'showContact']);
 
 const { t } = useI18n();
 
+const contactsFormRef = ref(null);
+
+const getInitialContactData = () => ({
+  id: props.id,
+  name: props.name,
+  email: props.email,
+  phoneNumber: props.phoneNumber,
+  additionalAttributes: props.additionalAttributes,
+});
+
+const contactData = ref(getInitialContactData());
+
+const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
+
+const countriesMap = computed(() => {
+  return countries.reduce((acc, country) => {
+    acc[country.code] = country;
+    acc[country.id] = country;
+    return acc;
+  }, {});
+});
+
+const countryDetails = computed(() => {
+  const attributes = props.additionalAttributes || {};
+  const { country, countryCode, city } = attributes;
+
+  if (!country && !countryCode) return null;
+
+  const activeCountry =
+    countriesMap.value[country] || countriesMap.value[countryCode];
+
+  if (!activeCountry) return null;
+
+  return {
+    countryCode: activeCountry.id,
+    city: city ? `${city},` : null,
+    name: activeCountry.name,
+  };
+});
+
+const formattedLocation = computed(() => {
+  if (!countryDetails.value) return '';
+
+  return [countryDetails.value.city, countryDetails.value.name]
+    .filter(Boolean)
+    .join(' ');
+});
+
 const handleFormUpdate = updatedData => {
-  emit('updateContact', { id: props.id, updatedData });
+  Object.assign(contactData.value, updatedData);
 };
 
-const onClickViewDetails = async () => {
-  emit('showContact', props.id);
+const handleUpdateContact = () => {
+  emit('updateContact', contactData.value);
 };
+
+const onClickExpand = () => {
+  emit('toggle');
+  contactData.value = getInitialContactData();
+};
+
+const onClickViewDetails = () => emit('showContact', props.id);
 </script>
 
 <template>
   <CardLayout :key="id" layout="row">
-    <div class="flex items-center justify-between gap-4">
+    <div class="flex items-center justify-start flex-1 gap-4">
       <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
-      <div class="flex flex-col gap-1">
-        <div class="flex items-center gap-2">
-          <span class="text-sm font-medium truncate text-n-slate-12">
+      <div class="flex flex-col gap-0.5 flex-1">
+        <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <span class="text-base font-medium truncate text-n-slate-12">
             {{ name }}
           </span>
-          <template v-if="additionalAttributes?.companyName">
-            <span class="text-sm text-n-slate-11">
-              {{ t('CONTACTS_LAYOUT.CARD.OF') }}
-            </span>
-            <span class="text-sm font-medium truncate text-n-slate-12">
+          <span class="inline-flex items-center gap-1">
+            <span
+              v-if="additionalAttributes?.companyName"
+              class="i-ph-building-light size-4 text-n-slate-10 mb-0.5"
+            />
+            <span
+              v-if="additionalAttributes?.companyName"
+              class="text-sm truncate text-n-slate-11"
+            >
               {{ additionalAttributes.companyName }}
             </span>
-          </template>
+          </span>
         </div>
-        <div class="flex items-center gap-3">
-          <span v-if="email" class="text-sm text-n-slate-11">{{ email }}</span>
-          <div v-if="email" class="w-px h-3 bg-n-slate-6" />
-          <span v-if="phoneNumber" class="text-sm text-n-slate-11">
+        <div class="flex flex-wrap items-center justify-start gap-x-3 gap-y-1">
+          <div v-if="email" class="truncate max-w-72" :title="email">
+            <span class="text-sm text-n-slate-11">
+              {{ email }}
+            </span>
+          </div>
+          <div v-if="email" class="w-px h-3 truncate bg-n-slate-6" />
+          <span v-if="phoneNumber" class="text-sm truncate text-n-slate-11">
             {{ phoneNumber }}
           </span>
-          <div v-if="phoneNumber" class="w-px h-3 bg-n-slate-6" />
+          <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
+          <span
+            v-if="countryDetails"
+            class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
+          >
+            <Flag :country="countryDetails.countryCode" class="size-3.5" />
+            {{ formattedLocation }}
+          </span>
+          <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
           <Button
             :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
             variant="link"
@@ -70,7 +145,7 @@ const onClickViewDetails = async () => {
       color="slate"
       size="xs"
       :class="{ 'rotate-180': isExpanded }"
-      @click="emit('toggle')"
+      @click="onClickExpand"
     />
 
     <template #after>
@@ -78,22 +153,28 @@ const onClickViewDetails = async () => {
         enter-active-class="overflow-hidden transition-all duration-300 ease-out"
         leave-active-class="overflow-hidden transition-all duration-300 ease-in"
         enter-from-class="overflow-hidden opacity-0 max-h-0"
-        enter-to-class="opacity-100 max-h-[360px]"
-        leave-from-class="opacity-100 max-h-[360px]"
+        enter-to-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
+        leave-from-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
         leave-to-class="overflow-hidden opacity-0 max-h-0"
       >
         <div v-show="isExpanded" class="w-full">
-          <div class="p-6 border-t border-n-strong">
+          <div class="flex flex-col gap-6 p-6 border-t border-n-strong">
             <ContactsForm
-              :contact-data="{
-                id,
-                name,
-                email,
-                phoneNumber,
-                additionalAttributes,
-              }"
+              ref="contactsFormRef"
+              :contact-data="contactData"
               @update="handleFormUpdate"
             />
+            <div>
+              <Button
+                :label="
+                  t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')
+                "
+                size="sm"
+                :is-loading="isUpdating"
+                :disabled="isUpdating || isFormInvalid"
+                @click="handleUpdateContact"
+              />
+            </div>
           </div>
         </div>
       </transition>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
new file mode 100644
index 000000000..ad007af1c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { computed, useSlots } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
+
+const props = defineProps({
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  selectedContact: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['goToContactsList']);
+
+const { t } = useI18n();
+const slots = useSlots();
+const route = useRoute();
+
+const contactId = computed(() => route.params.contactId);
+
+const selectedContactName = computed(() => {
+  return props.selectedContact?.name;
+});
+
+const breadcrumbItems = computed(() => {
+  const items = [
+    {
+      label: t('CONTACTS_LAYOUT.HEADER.BREADCRUMB.CONTACTS'),
+      link: '#',
+    },
+  ];
+  if (props.selectedContact) {
+    items.push({
+      label: selectedContactName.value,
+    });
+  }
+  return items;
+});
+
+const handleBreadcrumbClick = () => {
+  emit('goToContactsList');
+};
+</script>
+
+<template>
+  <section
+    class="flex w-full h-full overflow-hidden justify-evenly bg-n-background"
+  >
+    <div
+      class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
+    >
+      <header class="sticky top-0 z-10 px-6 xl:px-0">
+        <div class="w-full mx-auto max-w-[650px]">
+          <div class="flex items-center justify-between w-full h-20 gap-2">
+            <Breadcrumb
+              :items="breadcrumbItems"
+              @click="handleBreadcrumbClick"
+            />
+            <ComposeConversation :contact-id="contactId">
+              <template #trigger="{ toggle }">
+                <Button :label="buttonLabel" size="sm" @click="toggle" />
+              </template>
+            </ComposeConversation>
+          </div>
+        </div>
+      </header>
+      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
+        <div class="w-full py-4 mx-auto max-w-[650px]">
+          <slot name="default" />
+        </div>
+      </main>
+    </div>
+
+    <div
+      v-if="slots.sidebar"
+      class="overflow-y-auto justify-end min-w-[200px] w-full py-6 max-w-[440px] border-l border-n-weak bg-n-solid-2"
+    >
+      <slot name="sidebar" />
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue
new file mode 100644
index 000000000..d9c0deb1b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['goToContactsList']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const dialogRef = ref(null);
+
+const deleteContact = async id => {
+  if (!id) return;
+
+  try {
+    await store.dispatch('contacts/delete', id);
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.API.ERROR_MESSAGE'));
+  }
+};
+
+const handleDialogConfirm = async () => {
+  emit('goToContactsList');
+  await deleteContact(route.params.contactId || props.selectedContact.id);
+  dialogRef.value?.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.TITLE')"
+    :description="
+      t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION', {
+        contactName: props.selectedContact.name,
+      })
+    "
+    :confirm-button-label="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.CONFIRM')"
+    @confirm="handleDialogConfirm"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue
new file mode 100644
index 000000000..d2b57cbb8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const emit = defineEmits(['export']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const dialogRef = ref(null);
+
+const segments = useMapGetter('customViews/getContactCustomViews');
+const appliedFilters = useMapGetter('contacts/getAppliedContactFilters');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isExportingContact = computed(() => uiFlags.value.isExporting);
+
+const activeSegmentId = computed(() => route.params.segmentId);
+const activeSegment = computed(() =>
+  activeSegmentId.value
+    ? segments.value.find(view => view.id === Number(activeSegmentId.value))
+    : undefined
+);
+
+const exportContacts = async () => {
+  let query = { payload: [] };
+
+  if (activeSegmentId.value && activeSegment.value) {
+    query = activeSegment.value.query;
+  } else if (Object.keys(appliedFilters.value).length > 0) {
+    query = filterQueryGenerator(appliedFilters.value);
+  }
+
+  emit('export', {
+    ...query,
+    label: route.params.label || '',
+  });
+};
+
+const handleDialogConfirm = async () => {
+  await exportContacts();
+  dialogRef.value?.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.TITLE')"
+    :description="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.DESCRIPTION')
+    "
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.CONFIRM')
+    "
+    :is-loading="isExportingContact"
+    :disable-confirm-button="isExportingContact"
+    @confirm="handleDialogConfirm"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue
new file mode 100644
index 000000000..acb8f0f1c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const emit = defineEmits(['import']);
+const { t } = useI18n();
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isImportingContact = computed(() => uiFlags.value.isImporting);
+
+const dialogRef = ref(null);
+const fileInput = ref(null);
+
+const hasSelectedFile = ref(null);
+const selectedFileName = ref('');
+
+const csvUrl = '/downloads/import-contacts-sample.csv';
+
+const handleFileClick = () => fileInput.value?.click();
+
+const processFileName = fileName => {
+  const lastDotIndex = fileName.lastIndexOf('.');
+  const extension = fileName.slice(lastDotIndex);
+  const baseName = fileName.slice(0, lastDotIndex);
+
+  return baseName.length > 20
+    ? `${baseName.slice(0, 20)}...${extension}`
+    : fileName;
+};
+
+const handleFileChange = () => {
+  const file = fileInput.value?.files[0];
+  hasSelectedFile.value = file;
+  selectedFileName.value = file ? processFileName(file.name) : '';
+};
+
+const handleRemoveFile = () => {
+  hasSelectedFile.value = null;
+  if (fileInput.value) {
+    fileInput.value.value = null;
+  }
+  selectedFileName.value = '';
+};
+
+const uploadFile = async () => {
+  if (!hasSelectedFile.value) return;
+  emit('import', hasSelectedFile.value);
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.TITLE')"
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.IMPORT')
+    "
+    :is-loading="isImportingContact"
+    :disable-confirm-button="isImportingContact"
+    @confirm="uploadFile"
+  >
+    <template #description>
+      <p class="mb-0 text-sm text-n-slate-11">
+        {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DESCRIPTION') }}
+        <a
+          :href="csvUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          download="import-contacts-sample.csv"
+          class="text-n-blue-text"
+        >
+          {{
+            t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DOWNLOAD_LABEL')
+          }}
+        </a>
+      </p>
+    </template>
+
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center gap-2">
+        <label class="text-sm text-n-slate-12 whitespace-nowrap">
+          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.LABEL') }}
+        </label>
+        <div class="flex items-center justify-between w-full gap-2">
+          <span v-if="hasSelectedFile" class="text-sm text-n-slate-12">
+            {{ selectedFileName }}
+          </span>
+          <Button
+            v-if="!hasSelectedFile"
+            :label="
+              t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHOOSE_FILE')
+            "
+            icon="i-lucide-upload"
+            color="slate"
+            variant="ghost"
+            size="sm"
+            class="!w-fit"
+            @click="handleFileClick"
+          />
+          <div v-else class="flex items-center gap-1">
+            <Button
+              :label="t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHANGE')"
+              color="slate"
+              variant="ghost"
+              size="sm"
+              @click="handleFileClick"
+            />
+            <div class="w-px h-3 bg-n-strong" />
+            <Button
+              icon="i-lucide-trash"
+              color="slate"
+              variant="ghost"
+              size="sm"
+              @click="handleRemoveFile"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <input
+      ref="fileInput"
+      type="file"
+      accept="text/csv"
+      class="hidden"
+      @change="handleFileChange"
+    />
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
index dc38c4649..8adcce6b2 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue
@@ -98,7 +98,7 @@ const { t } = useI18n();
           :size="32"
           rounded-full
         />
-        <div class="flex flex-col gap-1">
+        <div class="flex flex-col w-full min-w-0 gap-1">
           <span class="text-sm leading-4 truncate text-n-slate-11">
             {{ selectedContact.name }}
           </span>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 866811ae2..a49236cb1 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -3,7 +3,7 @@ import { computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { required, email, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
-
+import { splitName } from '@chatwoot/utils';
 import countries from 'shared/constants/countries.js';
 import Input from 'dashboard/components-next/input/Input.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
@@ -41,11 +41,11 @@ const FORM_CONFIG = {
 };
 
 const SOCIAL_CONFIG = {
-  FACEBOOK: 'i-ri-facebook-circle-fill',
-  GITHUB: 'i-ri-github-fill',
-  INSTAGRAM: 'i-ri-instagram-line',
   LINKEDIN: 'i-ri-linkedin-box-fill',
+  FACEBOOK: 'i-ri-facebook-circle-fill',
+  INSTAGRAM: 'i-ri-instagram-line',
   TWITTER: 'i-ri-twitter-x-fill',
+  GITHUB: 'i-ri-github-fill',
 };
 
 const defaultState = {
@@ -80,6 +80,8 @@ const validationRules = {
 
 const v$ = useVuelidate(validationRules, state);
 
+const isFormInvalid = computed(() => v$.value.$invalid);
+
 const prepareStateBasedOnProps = () => {
   if (props.isNewContact) {
     return; // Added to prevent state update for new contact form
@@ -92,14 +94,13 @@ const prepareStateBasedOnProps = () => {
     phoneNumber,
     additionalAttributes = {},
   } = props.contactData || {};
-
-  const [firstName = '', lastName = ''] = name.split(' ');
+  const { firstName, lastName } = splitName(name);
   const {
-    description,
-    companyName,
-    countryCode,
-    country,
-    city,
+    description = '',
+    companyName = '',
+    countryCode = '',
+    country = '',
+    city = '',
     socialProfiles = {},
   } = additionalAttributes || {};
 
@@ -203,6 +204,20 @@ const getMessageType = key => {
     : 'info';
 };
 
+const handleCountrySelection = value => {
+  const selectedCountry = countries.find(option => option.name === value);
+  state.additionalAttributes.countryCode = selectedCountry?.id || '';
+  emit('update', state);
+};
+
+const resetValidation = () => {
+  v$.value.$reset();
+};
+
+const resetForm = () => {
+  Object.assign(state, defaultState);
+};
+
 watch(() => props.contactData, prepareStateBasedOnProps, {
   immediate: true,
   deep: true,
@@ -211,6 +226,9 @@ watch(() => props.contactData, prepareStateBasedOnProps, {
 // Expose state to parent component for avatar upload
 defineExpose({
   state,
+  resetValidation,
+  isFormInvalid,
+  resetForm,
 });
 </script>
 
@@ -220,7 +238,7 @@ defineExpose({
       <span class="py-1 text-sm font-medium text-n-slate-12">
         {{ t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.TITLE') }}
       </span>
-      <div class="grid w-full grid-cols-2 gap-4">
+      <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
         <template v-for="item in editDetailsForm" :key="item.key">
           <ComboBox
             v-if="item.key === 'COUNTRY'"
@@ -234,7 +252,7 @@ defineExpose({
               '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
                 isDetailsView,
             }"
-            @update:model-value="emit('update', state)"
+            @update:model-value="handleCountrySelection"
           />
           <PhoneNumberInput
             v-else-if="item.key === 'PHONE_NUMBER'"
@@ -248,7 +266,7 @@ defineExpose({
             :placeholder="item.placeholder"
             :message-type="getMessageType(item.key)"
             :custom-input-class="`h-8 !pt-1 !pb-1 ${
-              !isDetailsView ? '[&:not(.error)]:!border-transparent' : ''
+              !isDetailsView ? '[&:not(.error,.focus)]:!border-transparent' : ''
             }`"
             class="w-full"
             @input="
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
new file mode 100644
index 000000000..806fcf4ac
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue
@@ -0,0 +1,68 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+const contactsFormRef = ref(null);
+const contact = ref(null);
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isCreatingContact = computed(() => uiFlags.value.isCreating);
+
+const createNewContact = contactItem => {
+  contact.value = contactItem;
+};
+
+const handleDialogConfirm = async () => {
+  if (!contact.value) return;
+  emit('create', contact.value);
+};
+
+const onSuccess = () => {
+  contactsFormRef.value?.resetForm();
+  dialogRef.value.close();
+};
+
+const closeDialog = () => {
+  dialogRef.value.close();
+};
+
+defineExpose({ dialogRef, contactsFormRef, onSuccess });
+</script>
+
+<template>
+  <Dialog ref="dialogRef" width="3xl" @confirm="handleDialogConfirm">
+    <ContactsForm
+      ref="contactsFormRef"
+      is-new-contact
+      @update="createNewContact"
+    />
+    <template #footer>
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          :label="t('DIALOG.BUTTONS.CANCEL')"
+          variant="link"
+          class="h-10 hover:!no-underline hover:text-n-brand"
+          @click="closeDialog"
+        />
+        <Button
+          :label="
+            t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SAVE_CONTACT')
+          "
+          color="blue"
+          :is-loading="isCreatingContact"
+          @click="handleDialogConfirm"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue
new file mode 100644
index 000000000..a246c742c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const emit = defineEmits(['create']);
+
+const FILTER_TYPE_CONTACT = 1;
+
+const { t } = useI18n();
+
+const uiFlags = useMapGetter('customViews/getUIFlags');
+const isCreating = computed(() => uiFlags.value.isCreating);
+
+const dialogRef = ref(null);
+
+const state = reactive({
+  name: '',
+});
+
+const validationRules = {
+  name: { required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const handleDialogConfirm = async () => {
+  const isNameValid = await v$.value.$validate();
+  if (!isNameValid) return;
+  emit('create', {
+    name: state.name,
+    filter_type: FILTER_TYPE_CONTACT,
+  });
+  state.name = '';
+  v$.value.$reset();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.TITLE')"
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.CONFIRM')
+    "
+    :is-loading="isCreating"
+    :disable-confirm-button="isCreating"
+    @confirm="handleDialogConfirm"
+  >
+    <Input
+      v-model="state.name"
+      :label="t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.LABEL')"
+      :placeholder="
+        t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.PLACEHOLDER')
+      "
+      :message="
+        v$.name.$error
+          ? t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.ERROR')
+          : ''
+      "
+      :message-type="v$.name.$error ? 'error' : 'info'"
+    />
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue
new file mode 100644
index 000000000..60aa0e55e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const emit = defineEmits(['delete']);
+
+const FILTER_TYPE_CONTACT = 'contact';
+
+const { t } = useI18n();
+
+const uiFlags = useMapGetter('customViews/getUIFlags');
+const isDeleting = computed(() => uiFlags.value.isDeleting);
+
+const dialogRef = ref(null);
+
+const handleDialogConfirm = async () => {
+  emit('delete', {
+    filterType: FILTER_TYPE_CONTACT,
+  });
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.TITLE')"
+    :description="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.DESCRIPTION')
+    "
+    :confirm-button-label="
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.CONFIRM')
+    "
+    :is-loading="isDeleting"
+    :disable-confirm-button="isDeleting"
+    @confirm="handleDialogConfirm"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
new file mode 100644
index 000000000..44350bba1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -0,0 +1,143 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import ContactSortMenu from './components/ContactSortMenu.vue';
+import ContactMoreActions from './components/ContactMoreActions.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
+
+defineProps({
+  showSearch: {
+    type: Boolean,
+    default: true,
+  },
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  headerTitle: {
+    type: String,
+    required: true,
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+  isSegmentsView: {
+    type: Boolean,
+    default: false,
+  },
+  hasActiveFilters: {
+    type: Boolean,
+    default: false,
+  },
+  isLabelView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'search',
+  'filter',
+  'update:sort',
+  'add',
+  'import',
+  'export',
+  'createSegment',
+  'deleteSegment',
+]);
+</script>
+
+<template>
+  <header class="sticky top-0 z-10">
+    <div
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[960px]"
+    >
+      <span class="text-xl font-medium truncate text-n-slate-12">
+        {{ headerTitle }}
+      </span>
+      <div class="flex items-center flex-shrink-0 gap-4">
+        <div v-if="showSearch" class="flex items-center gap-2">
+          <Input
+            :model-value="searchValue"
+            type="search"
+            :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
+            :custom-input-class="[
+              'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
+            ]"
+            @input="emit('search', $event.target.value)"
+          >
+            <template #prefix>
+              <Icon
+                icon="i-lucide-search"
+                class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-2 rtl:right-2"
+              />
+            </template>
+          </Input>
+        </div>
+        <div class="flex items-center gap-2">
+          <div v-if="!isLabelView" class="relative">
+            <Button
+              id="toggleContactsFilterButton"
+              :icon="
+                isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
+              "
+              color="slate"
+              size="sm"
+              class="relative w-8"
+              variant="ghost"
+              @click="emit('filter')"
+            >
+              <div
+                v-if="hasActiveFilters && !isSegmentsView"
+                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
+              />
+            </Button>
+            <slot name="filter" />
+          </div>
+          <Button
+            v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
+            icon="i-lucide-save"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('createSegment')"
+          />
+          <Button
+            v-if="isSegmentsView && !isLabelView"
+            icon="i-lucide-trash"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('deleteSegment')"
+          />
+          <ContactSortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+          <ContactMoreActions
+            @add="emit('add')"
+            @import="emit('import')"
+            @export="emit('export')"
+          />
+        </div>
+        <div class="w-px h-4 bg-n-strong" />
+        <ComposeConversation>
+          <template #trigger="{ toggle }">
+            <Button :label="buttonLabel" size="sm" @click="toggle" />
+          </template>
+        </ComposeConversation>
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
new file mode 100644
index 000000000..627addff8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -0,0 +1,311 @@
+<script setup>
+import { ref, computed, unref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRouter } from 'vue-router';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+import contactFilterItems from 'dashboard/routes/dashboard/contacts/contactFilterItems';
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
+import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
+import countries from 'shared/constants/countries';
+import {
+  useCamelCase,
+  useSnakeCase,
+} from 'dashboard/composables/useTransformKeys';
+
+import ContactsHeader from 'dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue';
+import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
+import ContactExportDialog from 'dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue';
+import ContactImportDialog from 'dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue';
+import CreateSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue';
+import DeleteSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue';
+import ContactsFilter from 'dashboard/components-next/filter/ContactsFilter.vue';
+
+const props = defineProps({
+  showSearch: { type: Boolean, default: true },
+  searchValue: { type: String, default: '' },
+  activeSort: { type: String, default: 'last_activity_at' },
+  activeOrdering: { type: String, default: '' },
+  headerTitle: { type: String, default: '' },
+  segmentsId: { type: [String, Number], default: 0 },
+  activeSegment: { type: Object, default: null },
+  hasAppliedFilters: { type: Boolean, default: false },
+  isLabelView: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'update:sort',
+  'search',
+  'applyFilter',
+  'clearFilters',
+]);
+
+const { t } = useI18n();
+const store = useStore();
+const router = useRouter();
+
+const createNewContactDialogRef = ref(null);
+const contactExportDialogRef = ref(null);
+const contactImportDialogRef = ref(null);
+const createSegmentDialogRef = ref(null);
+const deleteSegmentDialogRef = ref(null);
+
+const showFiltersModal = ref(false);
+const appliedFilter = ref([]);
+const segmentsQuery = ref({});
+
+const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
+const contactAttributes = useMapGetter('attributes/getContactAttributes');
+const hasActiveSegments = computed(
+  () => props.activeSegment && props.segmentsId !== 0
+);
+const activeSegmentName = computed(() => props.activeSegment?.name);
+
+const openCreateNewContactDialog = async () => {
+  await createNewContactDialogRef.value?.contactsFormRef.resetValidation();
+  createNewContactDialogRef.value?.dialogRef.open();
+};
+const openContactImportDialog = () =>
+  contactImportDialogRef.value?.dialogRef.open();
+const openContactExportDialog = () =>
+  contactExportDialogRef.value?.dialogRef.open();
+const openCreateSegmentDialog = () =>
+  createSegmentDialogRef.value?.dialogRef.open();
+const openDeleteSegmentDialog = () =>
+  deleteSegmentDialogRef.value?.dialogRef.open();
+
+const onCreate = async contact => {
+  try {
+    await store.dispatch('contacts/create', contact);
+    createNewContactDialogRef.value?.onSuccess();
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    const i18nPrefix = 'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION';
+    if (error instanceof DuplicateContactException) {
+      if (error.data.includes('email')) {
+        useAlert(t(`${i18nPrefix}.EMAIL_ADDRESS_DUPLICATE`));
+      } else if (error.data.includes('phone_number')) {
+        useAlert(t(`${i18nPrefix}.PHONE_NUMBER_DUPLICATE`));
+      }
+    } else if (error instanceof ExceptionWithMessage) {
+      useAlert(error.data);
+    } else {
+      useAlert(t(`${i18nPrefix}.ERROR_MESSAGE`));
+    }
+  }
+};
+
+const onImport = async file => {
+  try {
+    await store.dispatch('contacts/import', file);
+    contactImportDialogRef.value?.dialogRef.close();
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.SUCCESS_MESSAGE')
+    );
+    useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
+  } catch (error) {
+    useAlert(
+      error.message ??
+        t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.ERROR_MESSAGE')
+    );
+    useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
+  }
+};
+
+const onExport = async query => {
+  try {
+    await store.dispatch('contacts/export', query);
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error.message ||
+        t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.ERROR_MESSAGE')
+    );
+  }
+};
+
+const onCreateSegment = async payload => {
+  try {
+    const payloadData = {
+      ...payload,
+      query: segmentsQuery.value,
+    };
+    const response = await store.dispatch('customViews/create', payloadData);
+    createSegmentDialogRef.value?.dialogRef.close();
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.SUCCESS_MESSAGE')
+    );
+    const segmentId = response?.data?.id;
+    if (!segmentId) return;
+    // Navigate to the created segment
+    router.push({
+      name: 'contacts_dashboard_segments_index',
+      params: { segmentId },
+      query: { page: 1 },
+    });
+  } catch {
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.ERROR_MESSAGE')
+    );
+  }
+};
+
+const onDeleteSegment = async payload => {
+  try {
+    await store.dispatch('customViews/delete', {
+      id: Number(props.segmentsId),
+      ...payload,
+    });
+    router.push({
+      name: 'contacts_dashboard_index',
+      query: {
+        page: 1,
+      },
+    });
+    deleteSegmentDialogRef.value?.dialogRef.close();
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.ERROR_MESSAGE')
+    );
+  }
+};
+
+const closeAdvanceFiltersModal = () => {
+  showFiltersModal.value = false;
+  appliedFilter.value = [];
+};
+
+const clearFilters = async () => {
+  emit('clearFilters');
+};
+
+const onApplyFilter = async payload => {
+  payload = useSnakeCase(payload);
+  segmentsQuery.value = filterQueryGenerator(payload);
+  emit('applyFilter', filterQueryGenerator(payload));
+  showFiltersModal.value = false;
+};
+
+const onUpdateSegment = async (payload, segmentName) => {
+  payload = useSnakeCase(payload);
+  const payloadData = {
+    ...props.activeSegment,
+    name: segmentName,
+    query: filterQueryGenerator(payload),
+  };
+  await store.dispatch('customViews/update', payloadData);
+  closeAdvanceFiltersModal();
+};
+
+const setParamsForEditSegmentModal = () => {
+  return {
+    countries,
+    filterTypes: contactFilterItems,
+    allCustomAttributes: useSnakeCase(contactAttributes.value),
+  };
+};
+
+const initializeSegmentToFilterModal = segment => {
+  const query = unref(segment)?.query?.payload;
+  if (!Array.isArray(query)) return;
+
+  const newFilters = query.map(filter => {
+    const transformed = useCamelCase(filter);
+    const values = Array.isArray(transformed.values)
+      ? generateValuesForEditCustomViews(
+          useSnakeCase(filter),
+          setParamsForEditSegmentModal()
+        )
+      : [];
+
+    return {
+      attributeKey: transformed.attributeKey,
+      attributeModel: transformed.attributeModel,
+      customAttributeType: transformed.customAttributeType,
+      filterOperator: transformed.filterOperator,
+      queryOperator: transformed.queryOperator ?? 'and',
+      values,
+    };
+  });
+
+  appliedFilter.value = [...appliedFilter.value, ...newFilters];
+};
+
+const onToggleFilters = () => {
+  appliedFilter.value = [];
+  if (hasActiveSegments.value) {
+    initializeSegmentToFilterModal(props.activeSegment);
+  } else {
+    appliedFilter.value = props.hasAppliedFilters
+      ? [...appliedFilters.value]
+      : [
+          {
+            attributeKey: 'name',
+            filterOperator: 'equal_to',
+            values: '',
+            queryOperator: 'and',
+            attributeModel: 'standard',
+          },
+        ];
+  }
+  showFiltersModal.value = true;
+};
+
+defineExpose({
+  onToggleFilters,
+});
+</script>
+
+<template>
+  <ContactsHeader
+    :show-search="showSearch"
+    :search-value="searchValue"
+    :active-sort="activeSort"
+    :active-ordering="activeOrdering"
+    :header-title="headerTitle"
+    :is-segments-view="hasActiveSegments"
+    :is-label-view="isLabelView"
+    :has-active-filters="hasAppliedFilters"
+    :button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
+    @search="emit('search', $event)"
+    @update:sort="emit('update:sort', $event)"
+    @add="openCreateNewContactDialog"
+    @import="openContactImportDialog"
+    @export="openContactExportDialog"
+    @filter="onToggleFilters"
+    @create-segment="openCreateSegmentDialog"
+    @delete-segment="openDeleteSegmentDialog"
+  >
+    <template #filter>
+      <ContactsFilter
+        v-if="showFiltersModal"
+        v-model="appliedFilter"
+        :segment-name="activeSegmentName"
+        :is-segment-view="hasActiveSegments"
+        class="absolute mt-1 ltr:right-0 rtl:left-0 top-full"
+        @apply-filter="onApplyFilter"
+        @update-segment="onUpdateSegment"
+        @close="closeAdvanceFiltersModal"
+        @clear-filters="clearFilters"
+      />
+    </template>
+  </ContactsHeader>
+
+  <CreateNewContactDialog ref="createNewContactDialogRef" @create="onCreate" />
+  <ContactExportDialog ref="contactExportDialogRef" @export="onExport" />
+  <ContactImportDialog ref="contactImportDialogRef" @import="onImport" />
+  <CreateSegmentDialog ref="createSegmentDialogRef" @create="onCreateSegment" />
+  <DeleteSegmentDialog ref="deleteSegmentDialogRef" @delete="onDeleteSegment" />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
new file mode 100644
index 000000000..d5932535c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const emit = defineEmits(['add', 'import', 'export']);
+
+const { t } = useI18n();
+
+const contactMenuItems = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
+    action: 'add',
+    value: 'add',
+    icon: 'i-lucide-plus',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
+    action: 'export',
+    value: 'export',
+    icon: 'i-lucide-upload',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
+    action: 'import',
+    value: 'import',
+    icon: 'i-lucide-download',
+  },
+];
+const showActionsDropdown = ref(false);
+
+const handleContactAction = ({ action }) => {
+  if (action === 'add') {
+    emit('add');
+  } else if (action === 'import') {
+    emit('import');
+  } else if (action === 'export') {
+    emit('export');
+  }
+};
+</script>
+
+<template>
+  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
+    <Button
+      icon="i-lucide-ellipsis-vertical"
+      color="slate"
+      variant="ghost"
+      size="sm"
+      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
+      @click="showActionsDropdown = !showActionsDropdown"
+    />
+    <DropdownMenu
+      v-if="showActionsDropdown"
+      :menu-items="contactMenuItems"
+      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
+      @action="handleContactAction($event)"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
new file mode 100644
index 000000000..b263b882d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
@@ -0,0 +1,138 @@
+<script setup>
+import { ref, computed, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import SelectMenu from 'dashboard/components-next/selectmenu/SelectMenu.vue';
+
+const props = defineProps({
+  activeSort: {
+    type: String,
+    default: 'last_activity_at',
+  },
+  activeOrdering: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:sort']);
+
+const { t } = useI18n();
+
+const isMenuOpen = ref(false);
+
+const sortMenus = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.NAME'),
+    value: 'name',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.EMAIL'),
+    value: 'email',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.PHONE_NUMBER'),
+    value: 'phone_number',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.COMPANY'),
+    value: 'company_name',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.COUNTRY'),
+    value: 'country',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.CITY'),
+    value: 'city',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.LAST_ACTIVITY'),
+    value: 'last_activity_at',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.CREATED_AT'),
+    value: 'created_at',
+  },
+];
+
+const orderingMenus = [
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.OPTIONS.ASCENDING'),
+    value: '',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.OPTIONS.DESCENDING'),
+    value: '-',
+  },
+];
+
+// Converted the props to refs for better reactivity
+const activeSort = toRef(props, 'activeSort');
+
+const activeOrdering = toRef(props, 'activeOrdering');
+
+const activeSortLabel = computed(() => {
+  const selectedMenu = sortMenus.find(menu => menu.value === activeSort.value);
+  return (
+    selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.LABEL')
+  );
+});
+
+const activeOrderingLabel = computed(() => {
+  const selectedMenu = orderingMenus.find(
+    menu => menu.value === activeOrdering.value
+  );
+  return selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.LABEL');
+});
+
+const handleSortChange = value => {
+  emit('update:sort', { sort: value, order: props.activeOrdering });
+};
+
+const handleOrderChange = value => {
+  emit('update:sort', { sort: props.activeSort, order: value });
+};
+</script>
+
+<template>
+  <div class="relative">
+    <Button
+      icon="i-lucide-arrow-down-up"
+      color="slate"
+      size="sm"
+      variant="ghost"
+      :class="isMenuOpen ? 'bg-n-alpha-2' : ''"
+      @click="isMenuOpen = !isMenuOpen"
+    />
+    <div
+      v-if="isMenuOpen"
+      v-on-clickaway="() => (isMenuOpen = false)"
+      class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+    >
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.LABEL') }}
+        </span>
+        <SelectMenu
+          :model-value="activeSort"
+          :options="sortMenus"
+          :label="activeSortLabel"
+          @update:model-value="handleSortChange"
+        />
+      </div>
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-sm text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.LABEL') }}
+        </span>
+        <SelectMenu
+          :model-value="activeOrdering"
+          :options="orderingMenus"
+          :label="activeOrderingLabel"
+          @update:model-value="handleOrderChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
new file mode 100644
index 000000000..36162520d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+
+import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
+
+const props = defineProps({
+  activeSegment: { type: Object, default: null },
+});
+
+const emit = defineEmits(['clearFilters', 'openFilter']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
+const activeSegmentId = computed(() => route.params.segmentId);
+
+const activeSegmentQuery = computed(() => {
+  const query = props.activeSegment?.query?.payload;
+  if (!Array.isArray(query)) return [];
+
+  const newFilters = query.map(filter => {
+    const transformed = useCamelCase(filter);
+    return {
+      attributeKey: transformed.attributeKey,
+      attributeModel: transformed.attributeModel,
+      customAttributeType: transformed.customAttributeType,
+      filterOperator: transformed.filterOperator,
+      queryOperator: transformed.queryOperator ?? 'and',
+      values: transformed.values,
+    };
+  });
+
+  return newFilters;
+});
+
+const hasActiveSegments = computed(
+  () => props.activeSegment && activeSegmentId.value !== 0
+);
+
+const activeFilterQueryData = computed(() => {
+  return hasActiveSegments.value
+    ? activeSegmentQuery.value
+    : appliedFilters.value;
+});
+</script>
+
+<template>
+  <ActiveFilterPreview
+    :applied-filters="activeFilterQueryData"
+    :max-visible-filters="2"
+    :more-filters-label="
+      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
+        count: activeFilterQueryData.length - 2,
+      })
+    "
+    :clear-button-label="
+      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
+    "
+    :show-clear-button="!hasActiveSegments"
+    class="max-w-[960px] px-6"
+    @open-filter="emit('openFilter')"
+    @clear-filters="emit('clearFilters')"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue
new file mode 100644
index 000000000..a89aa724c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/story/ContactHeader.story.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { ref } from 'vue';
+import ContactHeader from '../ContactHeader.vue';
+
+// Base state controls
+const searchValue = ref('');
+const activeSort = ref('last_activity_at');
+const activeOrdering = ref('');
+
+const onSearch = value => {
+  searchValue.value = value;
+  console.log('🔍 Search:', value);
+};
+
+const onSort = ({ sort, order }) => {
+  activeSort.value = sort;
+  activeOrdering.value = order;
+  console.log('🔄 Sort changed:', { sort, order });
+};
+
+const onFilter = () => {
+  console.log('🏷️ Filter clicked');
+};
+
+const onMessage = () => {
+  console.log('💬 Message clicked');
+};
+
+const onAdd = () => {
+  console.log('➕ Add contact clicked');
+};
+
+const onImport = () => {
+  console.log('📥 Import contacts clicked');
+};
+
+const onExport = () => {
+  console.log('📤 Export contacts clicked');
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactHeader"
+    :layout="{ type: 'grid', width: '900px' }"
+  >
+    <Variant title="Default">
+      <div class="w-full h-[400px]">
+        <ContactHeader
+          header-title="Contacts"
+          button-label="Message"
+          :search-value="searchValue"
+          :active-sort="activeSort"
+          :active-ordering="activeOrdering"
+          @search="onSearch"
+          @filter="onFilter"
+          @update:sort="onSort"
+          @message="onMessage"
+          @add="onAdd"
+          @import="onImport"
+          @export="onExport"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div class="w-full">
+        <ContactHeader
+          :show-search="false"
+          header-title="Contacts"
+          button-label="Message"
+          :search-value="searchValue"
+          :active-sort="activeSort"
+          :active-ordering="activeOrdering"
+          @search="onSearch"
+          @filter="onFilter"
+          @update:sort="onSort"
+          @message="onMessage"
+          @add="onAdd"
+          @import="onImport"
+          @export="onExport"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Segment View">
+      <div class="w-full">
+        <ContactHeader
+          :show-search="false"
+          header-title="Segment: VIP Customers"
+          button-label="Message"
+          :search-value="searchValue"
+          :active-sort="activeSort"
+          :active-ordering="activeOrdering"
+          @search="onSearch"
+          @filter="onFilter"
+          @update:sort="onSort"
+          @message="onMessage"
+          @add="onAdd"
+          @import="onImport"
+          @export="onExport"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
new file mode 100644
index 000000000..22b32d7b8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -0,0 +1,103 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue';
+import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+
+defineProps({
+  searchValue: { type: String, default: '' },
+  headerTitle: { type: String, default: '' },
+  showPaginationFooter: { type: Boolean, default: true },
+  currentPage: { type: Number, default: 1 },
+  totalItems: { type: Number, default: 100 },
+  itemsPerPage: { type: Number, default: 15 },
+  activeSort: { type: String, default: '' },
+  activeOrdering: { type: String, default: '' },
+  activeSegment: { type: Object, default: null },
+  segmentsId: { type: [String, Number], default: 0 },
+  hasAppliedFilters: { type: Boolean, default: false },
+  isFetchingList: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'update:currentPage',
+  'update:sort',
+  'search',
+  'applyFilter',
+  'clearFilters',
+]);
+
+const route = useRoute();
+
+const contactListHeaderWrapper = ref(null);
+
+const isNotSegmentView = computed(() => {
+  return route.name !== 'contacts_dashboard_segments_index';
+});
+
+const isLabelView = computed(
+  () => route.name === 'contacts_dashboard_labels_index'
+);
+
+const updateCurrentPage = page => {
+  emit('update:currentPage', page);
+};
+
+const openFilter = () => {
+  contactListHeaderWrapper.value?.onToggleFilters();
+};
+</script>
+
+<template>
+  <section
+    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
+  >
+    <div class="flex flex-col w-full h-full transition-all duration-300">
+      <ContactListHeaderWrapper
+        ref="contactListHeaderWrapper"
+        :show-search="isNotSegmentView"
+        :search-value="searchValue"
+        :active-sort="activeSort"
+        :active-ordering="activeOrdering"
+        :header-title="headerTitle"
+        :active-segment="activeSegment"
+        :segments-id="segmentsId"
+        :has-applied-filters="hasAppliedFilters"
+        :is-label-view="isLabelView"
+        @update:sort="emit('update:sort', $event)"
+        @search="emit('search', $event)"
+        @apply-filter="emit('applyFilter', $event)"
+        @clear-filters="emit('clearFilters')"
+      />
+      <main class="flex-1 overflow-y-auto">
+        <div class="w-full mx-auto max-w-[960px]">
+          <ContactsActiveFiltersPreview
+            v-if="
+              (hasAppliedFilters || !isNotSegmentView) &&
+              !isFetchingList &&
+              !isLabelView
+            "
+            :active-segment="activeSegment"
+            @clear-filters="emit('clearFilters')"
+            @open-filter="openFilter"
+          />
+          <slot name="default" />
+        </div>
+      </main>
+      <footer
+        v-if="showPaginationFooter"
+        class="sticky bottom-0 z-10 px-4 pb-4"
+      >
+        <PaginationFooter
+          current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
+          :current-page="currentPage"
+          :total-items="totalItems"
+          :items-per-page="itemsPerPage"
+          @update:current-page="updateCurrentPage"
+        />
+      </footer>
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue
new file mode 100644
index 000000000..dc52d8912
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+
+import ListAttribute from 'dashboard/components-next/CustomAttributes/ListAttribute.vue';
+import CheckboxAttribute from 'dashboard/components-next/CustomAttributes/CheckboxAttribute.vue';
+import DateAttribute from 'dashboard/components-next/CustomAttributes/DateAttribute.vue';
+import OtherAttribute from 'dashboard/components-next/CustomAttributes/OtherAttribute.vue';
+
+const props = defineProps({
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+const route = useRoute();
+
+const handleDelete = async () => {
+  try {
+    await store.dispatch('contacts/deleteCustomAttributes', {
+      id: route.params.contactId,
+      customAttributes: [props.attribute.attributeKey],
+    });
+    useAlert(
+      t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.DELETE_SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.DELETE_ERROR')
+    );
+  }
+};
+
+const handleUpdate = async value => {
+  try {
+    await store.dispatch('contacts/update', {
+      id: route.params.contactId,
+      customAttributes: {
+        [props.attribute.attributeKey]: value,
+      },
+    });
+    useAlert(t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.API.UPDATE_ERROR')
+    );
+  }
+};
+
+const componentMap = {
+  list: ListAttribute,
+  checkbox: CheckboxAttribute,
+  date: DateAttribute,
+  default: OtherAttribute,
+};
+
+const CurrentAttributeComponent = computed(() => {
+  return (
+    componentMap[props.attribute.attributeDisplayType] || componentMap.default
+  );
+});
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-2"
+    :class="isEditingView ? 'min-h-10' : 'min-h-11'"
+  >
+    <div class="flex items-center justify-between truncate">
+      <span class="text-sm font-medium truncate text-n-slate-12">
+        {{ attribute.attributeDisplayName }}
+      </span>
+    </div>
+
+    <component
+      :is="CurrentAttributeComponent"
+      :attribute="attribute"
+      :is-editing-view="isEditingView"
+      @update="handleUpdate"
+      @delete="handleDelete"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
new file mode 100644
index 000000000..f2a5c1ee8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
@@ -0,0 +1,129 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ContactCustomAttributeItem from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+
+const searchQuery = ref('');
+
+const contactAttributes = useMapGetter('attributes/getContactAttributes') || [];
+
+const hasContactAttributes = computed(
+  () => contactAttributes.value?.length > 0
+);
+
+const processContactAttributes = (
+  attributes,
+  customAttributes,
+  filterCondition
+) => {
+  if (!attributes.length || !customAttributes) {
+    return [];
+  }
+
+  return attributes.reduce((result, attribute) => {
+    const { attributeKey } = attribute;
+    const meetsCondition = filterCondition(attributeKey, customAttributes);
+
+    if (meetsCondition) {
+      result.push({
+        ...attribute,
+        value: customAttributes[attributeKey] ?? '',
+      });
+    }
+
+    return result;
+  }, []);
+};
+
+const usedAttributes = computed(() => {
+  return processContactAttributes(
+    contactAttributes.value,
+    props.selectedContact?.customAttributes,
+    (key, custom) => key in custom
+  );
+});
+
+const unusedAttributes = computed(() => {
+  return processContactAttributes(
+    contactAttributes.value,
+    props.selectedContact?.customAttributes,
+    (key, custom) => !(key in custom)
+  );
+});
+
+const filteredUnusedAttributes = computed(() => {
+  return unusedAttributes.value?.filter(attribute =>
+    attribute.attributeDisplayName
+      .toLowerCase()
+      .includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const unusedAttributesCount = computed(() => unusedAttributes.value?.length);
+const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
+const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
+</script>
+
+<template>
+  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
+    <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
+      <ContactCustomAttributeItem
+        v-for="attribute in usedAttributes"
+        :key="attribute.id"
+        is-editing-view
+        :attribute="attribute"
+      />
+    </div>
+    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-3">
+      <div class="flex-1 h-[1px] bg-n-slate-5" />
+      <span class="text-sm font-medium text-n-slate-10">{{
+        t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.UNUSED_ATTRIBUTES', {
+          count: unusedAttributesCount,
+        })
+      }}</span>
+      <div class="flex-1 h-[1px] bg-n-slate-5" />
+    </div>
+    <div class="flex flex-col gap-3">
+      <div v-if="!hasNoUnusedAttributes" class="relative">
+        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="
+            t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.SEARCH_PLACEHOLDER')
+          "
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        />
+      </div>
+      <div
+        v-if="filteredUnusedAttributes.length === 0 && !hasNoUnusedAttributes"
+        class="flex items-center justify-start h-11"
+      >
+        <p class="text-sm text-n-slate-11">
+          {{ t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.NO_ATTRIBUTES') }}
+        </p>
+      </div>
+      <div v-if="!hasNoUnusedAttributes" class="flex flex-col gap-2">
+        <ContactCustomAttributeItem
+          v-for="attribute in filteredUnusedAttributes"
+          :key="attribute.id"
+          :attribute="attribute"
+        />
+      </div>
+    </div>
+  </div>
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.EMPTY_STATE') }}
+  </p>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
new file mode 100644
index 000000000..3763d198a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const conversations = useMapGetter(
+  'contactConversations/getAllConversationsByContactId'
+);
+const contactsById = useMapGetter('contacts/getContactById');
+const stateInbox = useMapGetter('inboxes/getInboxById');
+const accountLabels = useMapGetter('labels/getLabels');
+
+const accountLabelsValue = computed(() => accountLabels.value);
+
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
+const isFetching = computed(() => uiFlags.value.isFetching);
+
+const contactConversations = computed(() =>
+  conversations.value(route.params.contactId)
+);
+</script>
+
+<template>
+  <div
+    v-if="isFetching"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+  <div
+    v-else-if="contactConversations.length > 0"
+    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+  >
+    <ConversationCard
+      v-for="conversation in contactConversations"
+      :key="conversation.id"
+      :conversation="conversation"
+      :contact="contactsById(conversation.meta.sender.id)"
+      :state-inbox="stateInbox(conversation.inboxId)"
+      :account-labels="accountLabelsValue"
+      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+    />
+  </div>
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('CONTACTS_LAYOUT.SIDEBAR.HISTORY.EMPTY_STATE') }}
+  </p>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
new file mode 100644
index 000000000..2a0e79931
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
@@ -0,0 +1,145 @@
+<script setup>
+import { reactive, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useRoute } from 'vue-router';
+import { useAlert, useTrack } from 'dashboard/composables';
+import ContactAPI from 'dashboard/api/contacts';
+import { debounce } from '@chatwoot/utils';
+import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactMergeForm from 'dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['goToContactsList', 'resetTab']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const state = reactive({
+  primaryContactId: null,
+});
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const searchResults = ref([]);
+const isSearching = ref(false);
+
+const validationRules = {
+  primaryContactId: { required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isMergingContact = computed(() => uiFlags.value.isMerging);
+
+const primaryContactList = computed(
+  () =>
+    searchResults.value?.map(item => ({
+      value: item.id,
+      label: `(ID: ${item.id}) ${item.name}`,
+    })) ?? []
+);
+
+const onContactSearch = debounce(
+  async query => {
+    isSearching.value = true;
+    searchResults.value = [];
+    try {
+      const {
+        data: { payload },
+      } = await ContactAPI.search(query);
+      searchResults.value = payload.filter(
+        contact => contact.id !== props.selectedContact.id
+      );
+      isSearching.value = false;
+    } catch (error) {
+      useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_ERROR_MESSAGE'));
+    } finally {
+      isSearching.value = false;
+    }
+  },
+  300,
+  false
+);
+
+const resetState = () => {
+  if (state.primaryContactId === null) {
+    emit('resetTab');
+  }
+  state.primaryContactId = null;
+  searchResults.value = [];
+  isSearching.value = false;
+};
+
+const onMergeContacts = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
+
+  try {
+    await store.dispatch('contacts/merge', {
+      childId: props.selectedContact.id || route.params.contactId,
+      parentId: state.primaryContactId,
+    });
+    emit('goToContactsList');
+    useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SUCCESS_MESSAGE'));
+    resetState();
+  } catch (error) {
+    useAlert(t('CONTACTS_LAYOUT.SIDEBAR.MERGE.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-8 px-6 py-6">
+    <div class="flex flex-col gap-2">
+      <h4 class="text-base text-n-slate-12">
+        {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.TITLE') }}
+      </h4>
+      <p class="text-sm text-n-slate-11">
+        {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.DESCRIPTION') }}
+      </p>
+    </div>
+    <ContactMergeForm
+      v-model:primary-contact-id="state.primaryContactId"
+      :selected-contact="selectedContact"
+      :primary-contact-list="primaryContactList"
+      :is-searching="isSearching"
+      :has-error="!!v$.primaryContactId.$error"
+      :error-message="
+        v$.primaryContactId.$error
+          ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_REQUIRED_ERROR')
+          : ''
+      "
+      @search="onContactSearch"
+    />
+    <div class="flex items-center justify-between gap-3">
+      <Button
+        variant="faded"
+        color="slate"
+        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="resetState"
+      />
+      <Button
+        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CONFIRM')"
+        class="w-full"
+        :is-loading="isMergingContact"
+        :disabled="isMergingContact"
+        @click="onMergeContacts"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
new file mode 100644
index 000000000..dfe3f437c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactNoteItem from './components/ContactNoteItem.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const state = reactive({
+  message: '',
+});
+
+const currentUser = useMapGetter('getCurrentUser');
+const notesByContact = useMapGetter('contactNotes/getAllNotesByContactId');
+const uiFlags = useMapGetter('contactNotes/getUIFlags');
+const isFetchingNotes = computed(() => uiFlags.value.isFetching);
+const isCreatingNote = computed(() => uiFlags.value.isCreating);
+const notes = computed(() => notesByContact.value(route.params.contactId));
+
+const getWrittenBy = note => {
+  const isCurrentUser = note?.user?.id === currentUser.value.id;
+  return isCurrentUser
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : note.user.name;
+};
+
+const onAdd = content => {
+  if (!content) return;
+  const { contactId } = route.params;
+  store.dispatch('contactNotes/create', { content, contactId });
+  state.message = '';
+};
+
+const onDelete = noteId => {
+  if (!noteId) return;
+  const { contactId } = route.params;
+  store.dispatch('contactNotes/delete', { noteId, contactId });
+};
+
+const keyboardEvents = {
+  '$mod+Enter': {
+    action: () => onAdd(state.message),
+    allowOnFocusedInput: true,
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 py-6">
+    <Editor
+      v-model="state.message"
+      :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
+      focus-on-mount
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 px-6"
+    >
+      <template #actions>
+        <div class="flex items-center gap-3">
+          <Button
+            variant="link"
+            color="blue"
+            size="sm"
+            :label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.SAVE')"
+            class="hover:no-underline"
+            :is-loading="isCreatingNote"
+            :disabled="!state.message || isCreatingNote"
+            @click="onAdd(state.message)"
+          />
+        </div>
+      </template>
+    </Editor>
+    <div
+      v-if="isFetchingNotes"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <div v-else-if="notes.length > 0">
+      <ContactNoteItem
+        v-for="note in notes"
+        :key="note.id"
+        :note="note"
+        :written-by="getWrittenBy(note)"
+        @delete="onDelete"
+      />
+    </div>
+    <p v-else class="px-6 py-6 text-sm leading-6 text-center text-n-slate-11">
+      {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EMPTY_STATE') }}
+    </p>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
index 81f7a147f..504be1547 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue
@@ -28,7 +28,7 @@ const handleDelete = () => {
 
 <template>
   <div
-    class="flex flex-col gap-2 px-6 py-2 border-b border-n-strong group/note"
+    class="flex flex-col gap-2 py-2 mx-6 border-b border-n-strong group/note"
   >
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-1.5 py-2.5 min-w-0">
diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue
new file mode 100644
index 000000000..0c1998a84
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.story.vue
@@ -0,0 +1,28 @@
+<script setup>
+import ContactEmptyState from './ContactEmptyState.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/EmptyState"
+    :layout="{ type: 'grid', width: '900px' }"
+  >
+    <!-- Default Story -->
+    <Variant title="Default">
+      <ContactEmptyState
+        title="No contacts found"
+        subtitle="Create your first contact to get started"
+        button-label="Add Contact"
+      />
+    </Variant>
+
+    <!-- Without Button -->
+    <Variant title="Without Button">
+      <ContactEmptyState
+        title="No contacts"
+        subtitle="These are your current contacts"
+        :show-button="false"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
new file mode 100644
index 000000000..f6f5ddaf6
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from 'vue';
+
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
+import contactContent from 'dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  showButton: {
+    type: Boolean,
+    default: true,
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['create']);
+
+const createNewContactDialogRef = ref(null);
+
+const onClick = () => {
+  createNewContactDialogRef.value?.dialogRef.open();
+};
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <ContactsCard
+          v-for="contact in contactContent.slice(0, 5)"
+          :id="contact.id"
+          :key="contact.id"
+          :name="contact.name"
+          :email="contact.email"
+          :thumbnail="contact.thumbnail"
+          :phone-number="contact.phoneNumber"
+          :additional-attributes="contact.additionalAttributes"
+          :is-expanded="0 === contact.id"
+          @toggle="toggleExpanded(contact.id)"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <div v-if="showButton">
+        <Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
+        <CreateNewContactDialog
+          ref="createNewContactDialogRef"
+          @create="emit('create', $event)"
+        />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js b/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js
new file mode 100644
index 000000000..6d80c9151
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js
@@ -0,0 +1,228 @@
+export default [
+  {
+    additionalAttributes: {
+      city: 'Los Angeles',
+      country: 'United States',
+      description:
+        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Chatwoot.",
+      companyName: 'Chatwoot',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'candice-dev',
+        twitter: 'candice_w_dev',
+        facebook: 'candice.dev',
+        linkedin: 'candice-matherson',
+        instagram: 'candice.codes',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'candice.matherson@chatwoot.com',
+    id: 22,
+    name: 'Candice Matherson',
+    phoneNumber: '+14155552671',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      dateContact: '2024-11-11T11:53:09.299Z',
+      linkContact: 'https://example.com',
+      listContact: 'Follow-Up',
+      textContact: 'Hi there!',
+      numberContact: '42',
+      checkboxContact: false,
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: 'San Francisco',
+      country: 'United States',
+      description: 'Passionate about design and user experience.',
+      companyName: 'Designify',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'ophelia-folkard',
+        twitter: 'oph_designs',
+        facebook: 'ophelia.folkard',
+        linkedin: 'ophelia-folkard',
+        instagram: 'ophelia.design',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'ophelia.folkard@designify.com',
+    id: 21,
+    name: 'Ophelia Folkard',
+    phoneNumber: '+14155552672',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      dateContact: '2024-10-05T10:12:34.567Z',
+      linkContact: 'https://designify.com',
+      listContact: 'Prospects',
+      textContact: 'Looking forward to connecting!',
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: 'Austin',
+      country: 'United States',
+      description: 'Avid coder and tech enthusiast.',
+      companyName: 'CodeHub',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'willy_castelot',
+        twitter: 'willy_code',
+        facebook: 'willy.castelot',
+        linkedin: 'willy-castelot',
+        instagram: 'willy.coder',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'willy.castelot@codehub.io',
+    id: 20,
+    name: 'Willy Castelot',
+    phoneNumber: '+14155552673',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      textContact: 'Let’s collaborate!',
+      checkboxContact: true,
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: 'Seattle',
+      country: 'United States',
+      description: 'Product manager with a love for innovation.',
+      companyName: 'InnovaTech',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'elisabeth-d',
+        twitter: 'elisabeth_innova',
+        facebook: 'elisabeth.derington',
+        linkedin: 'elisabeth-derington',
+        instagram: 'elisabeth.innovates',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'elisabeth.derington@innova.com',
+    id: 19,
+    name: 'Elisabeth Derington',
+    phoneNumber: '+14155552674',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {
+      textContact: 'Let’s schedule a call.',
+    },
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Chicago',
+      country: 'United States',
+      description: 'Marketing specialist and content creator.',
+      companyName: 'Contently',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'olia-olenchenko',
+        twitter: 'olia_content',
+        facebook: 'olia.olenchenko',
+        linkedin: 'olia-olenchenko',
+        instagram: 'olia.creates',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'olia.olenchenko@contently.com',
+    id: 18,
+    name: 'Olia Olenchenko',
+    phoneNumber: '+14155552675',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Boston',
+      country: 'United States',
+      description: 'SEO expert and analytics enthusiast.',
+      companyName: 'OptiSearch',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'nate-vannuchi',
+        twitter: 'nate_seo',
+        facebook: 'nathaniel.vannuchi',
+        linkedin: 'nathaniel-vannuchi',
+        instagram: 'nate.optimizes',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'nathaniel.vannuchi@optisearch.com',
+    id: 17,
+    name: 'Nathaniel Vannuchi',
+    phoneNumber: '+14155552676',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Denver',
+      country: 'United States',
+      description: 'UI/UX designer with a flair for minimalist designs.',
+      companyName: 'Minimal Designs',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'merrile-petruk',
+        twitter: 'merrile_ux',
+        facebook: 'merrile.petruk',
+        linkedin: 'merrile-petruk',
+        instagram: 'merrile.designs',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'merrile.petruk@minimal.com',
+    id: 16,
+    name: 'Merrile Petruk',
+    phoneNumber: '+14155552677',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+  {
+    additionalAttributes: {
+      city: 'Miami',
+      country: 'United States',
+      description: 'Entrepreneur with a background in e-commerce.',
+      companyName: 'Ecom Solutions',
+      countryCode: 'US',
+      socialProfiles: {
+        github: 'cordell-d',
+        twitter: 'cordell_entrepreneur',
+        facebook: 'cordell.dalinder',
+        linkedin: 'cordell-dalinder',
+        instagram: 'cordell.ecom',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'cordell.dalinder@ecomsolutions.com',
+    id: 15,
+    name: 'Cordell Dalinder',
+    phoneNumber: '+14155552678',
+    identifier: null,
+    thumbnail: '',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
new file mode 100644
index 000000000..aec21a976
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue
@@ -0,0 +1,200 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ContactLabels from 'dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue';
+import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
+import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
+
+const props = defineProps({
+  selectedContact: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['goToContactsList']);
+
+const { t } = useI18n();
+const store = useStore();
+
+const confirmDeleteContactDialogRef = ref(null);
+
+const avatarFile = ref(null);
+const avatarUrl = ref('');
+
+const contactsFormRef = ref(null);
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isUpdating = computed(() => uiFlags.value.isUpdating);
+
+const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
+
+const contactData = ref({});
+
+const getInitialContactData = () => {
+  if (!props.selectedContact) return {};
+  return { ...props.selectedContact };
+};
+
+onMounted(() => {
+  Object.assign(contactData.value, getInitialContactData());
+});
+
+const createdAt = computed(() => {
+  return contactData.value?.createdAt
+    ? dynamicTime(contactData.value.createdAt)
+    : '';
+});
+
+const lastActivityAt = computed(() => {
+  return contactData.value?.lastActivityAt
+    ? dynamicTime(contactData.value.lastActivityAt)
+    : '';
+});
+
+const avatarSrc = computed(() => {
+  return avatarUrl.value ? avatarUrl.value : contactData.value?.thumbnail;
+});
+
+const handleFormUpdate = updatedData => {
+  Object.assign(contactData.value, updatedData);
+};
+
+const updateContact = async () => {
+  try {
+    const { customAttributes, ...basicContactData } = contactData.value;
+    await store.dispatch('contacts/update', basicContactData);
+    await store.dispatch(
+      'contacts/fetchContactableInbox',
+      props.selectedContact.id
+    );
+    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.ERROR_MESSAGE'));
+  }
+};
+
+const openConfirmDeleteContactDialog = () => {
+  confirmDeleteContactDialogRef.value?.dialogRef.open();
+};
+
+const handleAvatarUpload = async ({ file, url }) => {
+  avatarFile.value = file;
+  avatarUrl.value = url;
+
+  try {
+    await store.dispatch('contacts/update', {
+      ...contactsFormRef.value?.state,
+      avatar: file,
+      isFormData: true,
+    });
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.SUCCESS_MESSAGE'));
+  } catch {
+    useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.UPLOAD.ERROR_MESSAGE'));
+  }
+};
+
+const handleAvatarDelete = async () => {
+  try {
+    if (props.selectedContact && props.selectedContact.id) {
+      await store.dispatch('contacts/deleteAvatar', props.selectedContact.id);
+      useAlert(t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.SUCCESS_MESSAGE'));
+    }
+    avatarFile.value = null;
+    avatarUrl.value = '';
+    contactData.value.thumbnail = null;
+  } catch (error) {
+    useAlert(
+      error.message
+        ? error.message
+        : t('CONTACTS_LAYOUT.DETAILS.AVATAR.DELETE.ERROR_MESSAGE')
+    );
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-8 pb-6">
+    <div class="flex flex-col items-start gap-3">
+      <Avatar
+        :src="avatarSrc || ''"
+        :name="selectedContact?.name || ''"
+        :size="72"
+        allow-upload
+        @upload="handleAvatarUpload"
+        @delete="handleAvatarDelete"
+      />
+      <div class="flex flex-col gap-1">
+        <h3 class="text-base font-medium text-n-slate-12">
+          {{ selectedContact?.name }}
+        </h3>
+        <div class="flex flex-col gap-1.5">
+          <span
+            v-if="selectedContact?.identifier"
+            class="inline-flex items-center gap-1 text-sm text-n-slate-11"
+          >
+            <span class="i-ph-user-gear text-n-slate-10 size-4" />
+            {{ selectedContact?.identifier }}
+          </span>
+          <span class="inline-flex items-center gap-1 text-sm text-n-slate-11">
+            <span
+              v-if="selectedContact?.identifier"
+              class="i-ph-activity text-n-slate-10 size-4"
+            />
+            {{ $t('CONTACTS_LAYOUT.DETAILS.CREATED_AT', { date: createdAt }) }}
+            •
+            {{
+              $t('CONTACTS_LAYOUT.DETAILS.LAST_ACTIVITY', {
+                date: lastActivityAt,
+              })
+            }}
+          </span>
+        </div>
+      </div>
+      <ContactLabels :contact-id="selectedContact?.id" />
+    </div>
+    <div class="flex flex-col items-start gap-6">
+      <ContactsForm
+        ref="contactsFormRef"
+        :contact-data="contactData"
+        is-details-view
+        @update="handleFormUpdate"
+      />
+      <Button
+        :label="t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')"
+        size="sm"
+        :is-loading="isUpdating"
+        :disabled="isUpdating || isFormInvalid"
+        @click="updateContact"
+      />
+    </div>
+    <div
+      class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
+    >
+      <div class="flex flex-col gap-2">
+        <h6 class="text-base font-medium text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT') }}
+        </h6>
+        <span class="text-sm text-n-slate-11">
+          {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT_DESCRIPTION') }}
+        </span>
+      </div>
+      <Button
+        :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
+        color="ruby"
+        @click="openConfirmDeleteContactDialog"
+      />
+    </div>
+    <ConfirmContactDeleteDialog
+      ref="confirmDeleteContactDialogRef"
+      :selected-contact="selectedContact"
+      @go-to-contacts-list="emit('goToContactsList')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
new file mode 100644
index 000000000..33532edcf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
+import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
+
+defineProps({ contacts: { type: Array, required: true } });
+
+const { t } = useI18n();
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const isUpdating = computed(() => uiFlags.value.isUpdating);
+const expandedCardId = ref(null);
+
+const updateContact = async updatedData => {
+  try {
+    await store.dispatch('contacts/update', updatedData);
+    useAlert(t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const i18nPrefix = 'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM';
+    if (error instanceof DuplicateContactException) {
+      if (error.data.includes('email')) {
+        useAlert(t(`${i18nPrefix}.EMAIL_ADDRESS.DUPLICATE`));
+      } else if (error.data.includes('phone_number')) {
+        useAlert(t(`${i18nPrefix}.PHONE_NUMBER.DUPLICATE`));
+      }
+    } else if (error instanceof ExceptionWithMessage) {
+      useAlert(error.data);
+    } else {
+      useAlert(t(`${i18nPrefix}.ERROR_MESSAGE`));
+    }
+  }
+};
+
+const onClickViewDetails = async id => {
+  const routeTypes = {
+    contacts_dashboard_segments_index: ['contacts_edit_segment', 'segmentId'],
+    contacts_dashboard_labels_index: ['contacts_edit_label', 'label'],
+  };
+  const [name, paramKey] = routeTypes[route.name] || ['contacts_edit'];
+  const params = {
+    contactId: id,
+    ...(paramKey && { [paramKey]: route.params[paramKey] }),
+  };
+
+  await router.push({ name, params, query: route.query });
+};
+
+const toggleExpanded = id => {
+  expandedCardId.value = expandedCardId.value === id ? null : id;
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 px-6 pt-4 pb-6">
+    <ContactsCard
+      v-for="contact in contacts"
+      :id="contact.id"
+      :key="contact.id"
+      :name="contact.name"
+      :email="contact.email"
+      :thumbnail="contact.thumbnail"
+      :phone-number="contact.phoneNumber"
+      :additional-attributes="contact.additionalAttributes"
+      :is-expanded="expandedCardId === contact.id"
+      :is-updating="isUpdating"
+      @toggle="toggleExpanded(contact.id)"
+      @update-contact="updateContact"
+      @show-contact="onClickViewDetails"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
index dfa31e100..a81c80b87 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
@@ -13,9 +14,15 @@ const props = defineProps({
 
 const { t } = useI18n();
 
+const { getPlainText } = useMessageFormatter();
+
 const lastNonActivityMessageContent = computed(() => {
-  const { lastNonActivityMessage = {} } = props.conversation;
-  return lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT');
+  const { lastNonActivityMessage = {}, customAttributes = {} } =
+    props.conversation;
+  const { email: { subject } = {} } = customAttributes;
+  return getPlainText(
+    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
+  );
 });
 
 const assignee = computed(() => {
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
index 374da1f88..19dc7008a 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import CardLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
@@ -19,9 +20,15 @@ const props = defineProps({
 
 const { t } = useI18n();
 
+const { getPlainText } = useMessageFormatter();
+
 const lastNonActivityMessageContent = computed(() => {
-  const { lastNonActivityMessage = {} } = props.conversation;
-  return lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT');
+  const { lastNonActivityMessage = {}, customAttributes = {} } =
+    props.conversation;
+  const { email: { subject } = {} } = customAttributes;
+  return getPlainText(
+    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
+  );
 });
 
 const assignee = computed(() => {
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
index d99234a27..bb643ee22 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { useRouter, useRoute } from 'vue-router';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
@@ -28,6 +30,9 @@ const props = defineProps({
   },
 });
 
+const router = useRouter();
+const route = useRoute();
+
 const currentContact = computed(() => props.contact);
 
 const currentContactName = computed(() => currentContact.value?.name);
@@ -54,11 +59,31 @@ const showMessagePreviewWithoutMeta = computed(() => {
   const { slaPolicyId, labels = [] } = props.conversation;
   return !slaPolicyId && labels.length === 0;
 });
+
+const onCardClick = e => {
+  const path = frontendURL(
+    conversationUrl({
+      accountId: route.params.accountId,
+      id: props.conversation.id,
+    })
+  );
+
+  if (e.metaKey || e.ctrlKey) {
+    window.open(
+      window.chatwootConfig.hostURL + path,
+      '_blank',
+      'noopener noreferrer nofollow'
+    );
+    return;
+  }
+  router.push({ path });
+};
 </script>
 
 <template>
   <div
-    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out rounded-xl"
+    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
+    @click="onCardClick"
   >
     <Avatar
       :name="currentContactName"
@@ -75,7 +100,7 @@ const showMessagePreviewWithoutMeta = computed(() => {
         <div class="flex items-center gap-2">
           <CardPriorityIcon :priority="conversation.priority || null" />
           <div
-            v-tooltip.top-start="inboxName"
+            v-tooltip.left="inboxName"
             class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
           >
             <Icon
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
index f564f0d1c..ba8090e02 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
@@ -88,7 +88,7 @@ const handleInputUpdate = async () => {
       :class="{
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
-        'text-n-slate-12 truncate flex-1': isEditingView,
+        'text-n-slate-12 truncate': isEditingView,
       }"
       @click="toggleEditValue(!isEditingView)"
     >
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
index 8b5b538c3..e76a744be 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
@@ -127,9 +127,8 @@ const handleInputUpdate = async () => {
       :class="{
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
-        'text-n-slate-12 truncate flex-1':
-          isEditingView && !isAttributeTypeLink,
-        'truncate flex-1 hover:text-n-brand text-n-blue-text':
+        'text-n-slate-12 truncate': isEditingView && !isAttributeTypeLink,
+        'truncate hover:text-n-brand text-n-blue-text':
           isEditingView && isAttributeTypeLink,
       }"
       @click="toggleEditValue(!isEditingView)"
diff --git a/app/javascript/dashboard/components-next/Editor/Editor.vue b/app/javascript/dashboard/components-next/Editor/Editor.vue
index 806534be7..671a628dc 100644
--- a/app/javascript/dashboard/components-next/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, useSlots } from 'vue';
 
 import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
@@ -45,6 +45,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
+const slots = useSlots();
+
 const isFocused = ref(false);
 
 const characterCount = computed(() => props.modelValue.length);
@@ -81,7 +83,7 @@ const handleBlur = () => {
 watch(
   () => props.modelValue,
   newValue => {
-    if (props.maxLength && props.showCharacterCount) {
+    if (props.maxLength && props.showCharacterCount && !slots.actions) {
       if (characterCount.value >= props.maxLength) {
         emit('update:modelValue', newValue.slice(0, props.maxLength));
       }
@@ -119,12 +121,16 @@ watch(
         @blur="handleBlur"
       />
       <div
-        v-if="showCharacterCount"
+        v-if="showCharacterCount || slots.actions"
         class="flex items-center justify-end h-4 ltr:right-3 rtl:left-3"
       >
-        <span class="text-xs tabular-nums text-n-slate-10">
+        <span
+          v-if="showCharacterCount && !slots.actions"
+          class="text-xs tabular-nums text-n-slate-10"
+        >
           {{ characterCount }} / {{ maxLength }}
         </span>
+        <slot v-else name="actions" />
       </div>
     </div>
     <p
@@ -144,7 +150,7 @@ watch(
       @apply gap-2 !important;
 
       .ProseMirror-menubar {
-        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5  !important;
+        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5 !top-0 !relative !important;
 
         .ProseMirror-menuitem {
           @apply h-5 !important;
@@ -163,7 +169,7 @@ watch(
           @apply m-0 !important;
 
           &::before {
-            @apply text-n-slate-11 dark:text-n-slate-11 !important;
+            @apply text-n-slate-11 dark:text-n-slate-11;
           }
         }
       }
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index d884b3557..9e3c9ee1e 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -60,7 +60,7 @@ const togglePortalSwitcher = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto">
+      <div class="w-full max-w-[960px] mx-auto">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
@@ -76,6 +76,7 @@ const togglePortalSwitcher = () => {
               <Button
                 icon="i-lucide-chevron-down"
                 variant="ghost"
+                color="slate"
                 size="xs"
                 class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
                 @click="togglePortalSwitcher"
@@ -95,7 +96,7 @@ const togglePortalSwitcher = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto py-3">
+      <div class="w-full max-w-[960px] mx-auto py-3">
         <slot name="content" />
       </div>
     </main>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
index 6b2c3543d..d46fb5264 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -182,6 +182,7 @@ onMounted(() => {
       <OnClickOutside @trigger="openAgentsList = false">
         <Button
           variant="ghost"
+          color="slate"
           class="!px-0 font-normal hover:!bg-transparent"
           text-variant="info"
           @click="openAgentsList = !openAgentsList"
@@ -214,6 +215,7 @@ onMounted(() => {
           "
           :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
           variant="ghost"
+          color="slate"
           class="!px-2 font-normal hover:!bg-transparent"
           @click="openCategoryList = !openCategoryList"
         >
@@ -244,6 +246,7 @@ onMounted(() => {
           "
           icon="i-lucide-plus"
           variant="ghost"
+          color="slate"
           :disabled="isNewArticle"
           class="!px-2 font-normal hover:!bg-transparent hover:!text-n-slate-11"
           @click="openProperties = !openProperties"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
index 0a49be942..4de31a6ba 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -66,6 +66,7 @@ onMounted(() => {
         icon="i-lucide-x"
         size="sm"
         variant="ghost"
+        color="slate"
         class="hover:text-n-slate-11"
         @click="emit('close')"
       />
@@ -110,7 +111,7 @@ onMounted(() => {
             custom-label-class="min-w-[120px]"
           />
         </div>
-        <div class="flex justify-between w-full gap-2 py-2">
+        <div class="flex justify-between w-full gap-3 py-2">
           <label
             class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
           >
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index a182c78d3..1b4668b91 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -108,6 +108,7 @@ const redirectToPortalHomePage = () => {
           <Button
             icon="i-lucide-arrow-up-right"
             variant="ghost"
+            color="slate"
             icon-lib="lucide"
             size="sm"
             class="!w-6 !h-6 hover:bg-n-slate-2 text-n-slate-11 !p-0.5 rounded-md"
@@ -133,6 +134,7 @@ const redirectToPortalHomePage = () => {
         :key="index"
         :label="portal.name"
         variant="ghost"
+        color="slate"
         trailing-icon
         :icon="isPortalActive(portal) ? 'i-lucide-check' : ''"
         class="!justify-end !px-2 !py-2 hover:!bg-n-alpha-2 [&>.i-lucide-check]:text-n-teal-10 h-9"
diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
new file mode 100644
index 000000000..b5d57f202
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -0,0 +1,214 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import { useAlert } from 'dashboard/composables';
+import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
+import { debounce } from '@chatwoot/utils';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import {
+  searchContacts,
+  createNewContact,
+  fetchContactableInboxes,
+  processContactableInboxes,
+} from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
+
+import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
+
+const props = defineProps({
+  alignPosition: {
+    type: String,
+    default: 'left',
+  },
+  contactId: {
+    type: String,
+    default: null,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const contacts = ref([]);
+const selectedContact = ref(null);
+const targetInbox = ref(null);
+const isCreatingContact = ref(false);
+const isFetchingInboxes = ref(false);
+const isSearching = ref(false);
+const showComposeNewConversation = ref(false);
+
+const contactById = useMapGetter('contacts/getContactById');
+const contactsUiFlags = useMapGetter('contacts/getUIFlags');
+const currentUser = useMapGetter('getCurrentUser');
+const globalConfig = useMapGetter('globalConfig/get');
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
+
+const directUploadsEnabled = computed(
+  () => globalConfig.value.directUploadsEnabled
+);
+
+const activeContact = computed(() => contactById.value(props.contactId));
+
+const composePopoverClass = computed(() => {
+  return props.alignPosition === 'right'
+    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
+    : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
+});
+
+const onContactSearch = debounce(
+  async query => {
+    isSearching.value = true;
+    contacts.value = [];
+    try {
+      contacts.value = await searchContacts(query);
+      isSearching.value = false;
+    } catch (error) {
+      useAlert(t('COMPOSE_NEW_CONVERSATION.CONTACT_SEARCH.ERROR_MESSAGE'));
+    } finally {
+      isSearching.value = false;
+    }
+  },
+  300,
+  false
+);
+
+const resetContacts = () => {
+  contacts.value = [];
+};
+
+const handleSelectedContact = async ({ value, action, ...rest }) => {
+  let contact;
+  if (action === 'create') {
+    isCreatingContact.value = true;
+    try {
+      contact = await createNewContact(value);
+      isCreatingContact.value = false;
+    } catch (error) {
+      isCreatingContact.value = false;
+      return;
+    }
+  } else {
+    contact = rest;
+  }
+  selectedContact.value = contact;
+  if (contact?.id) {
+    isFetchingInboxes.value = true;
+    try {
+      const contactableInboxes = await fetchContactableInboxes(contact.id);
+      selectedContact.value.contactInboxes = contactableInboxes;
+      isFetchingInboxes.value = false;
+    } catch (error) {
+      isFetchingInboxes.value = false;
+    }
+  }
+};
+
+const handleTargetInbox = inbox => {
+  targetInbox.value = inbox;
+  resetContacts();
+};
+
+const clearSelectedContact = () => {
+  selectedContact.value = null;
+  targetInbox.value = null;
+};
+
+const closeCompose = () => {
+  showComposeNewConversation.value = false;
+  selectedContact.value = null;
+  targetInbox.value = null;
+  resetContacts();
+};
+
+const createConversation = async ({ payload, isFromWhatsApp }) => {
+  try {
+    const data = await store.dispatch('contactConversations/create', {
+      params: payload,
+      isFromWhatsApp,
+    });
+    const action = {
+      type: 'link',
+      to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
+      message: t('COMPOSE_NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
+    };
+    closeCompose();
+    useAlert(t('COMPOSE_NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
+    return true; // Return success
+  } catch (error) {
+    useAlert(
+      error instanceof ExceptionWithMessage
+        ? error.data
+        : t('COMPOSE_NEW_CONVERSATION.FORM.ERROR_MESSAGE')
+    );
+    return false; // Return failure
+  }
+};
+
+const toggle = () => {
+  showComposeNewConversation.value = !showComposeNewConversation.value;
+};
+
+watch(
+  activeContact,
+  () => {
+    if (activeContact.value && props.contactId) {
+      const contactInboxes = activeContact.value?.contactInboxes || [];
+      selectedContact.value = {
+        ...activeContact.value,
+        contactInboxes: processContactableInboxes(contactInboxes),
+      };
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+onMounted(() => resetContacts());
+
+const keyboardEvents = {
+  Escape: {
+    action: () => {
+      if (showComposeNewConversation.value) {
+        showComposeNewConversation.value = false;
+      }
+    },
+  },
+};
+
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div
+    v-on-click-outside="() => (showComposeNewConversation = false)"
+    class="relative z-40"
+  >
+    <slot
+      name="trigger"
+      :is-open="showComposeNewConversation"
+      :toggle="toggle"
+    />
+    <ComposeNewConversationForm
+      v-if="showComposeNewConversation"
+      :contacts="contacts"
+      :contact-id="contactId"
+      :is-loading="isSearching"
+      :current-user="currentUser"
+      :selected-contact="selectedContact"
+      :target-inbox="targetInbox"
+      :is-creating-contact="isCreatingContact"
+      :is-fetching-inboxes="isFetchingInboxes"
+      :is-direct-uploads-enabled="directUploadsEnabled"
+      :contact-conversations-ui-flags="uiFlags"
+      :contacts-ui-flags="contactsUiFlags"
+      :class="composePopoverClass"
+      @search-contacts="onContactSearch"
+      @reset-contact-search="resetContacts"
+      @update-selected-contact="handleSelectedContact"
+      @update-target-inbox="handleTargetInbox"
+      @clear-selected-contact="clearSelectedContact"
+      @create-conversation="createConversation"
+      @discard="closeCompose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
new file mode 100644
index 000000000..89784037d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -0,0 +1,251 @@
+<script setup>
+import { defineAsyncComponent, ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useFileUpload } from 'dashboard/composables/useFileUpload';
+import { vOnClickOutside } from '@vueuse/components';
+import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import FileUpload from 'vue-upload-component';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import WhatsAppOptions from './WhatsAppOptions.vue';
+
+const props = defineProps({
+  attachedFiles: {
+    type: Array,
+    default: () => [],
+  },
+  isWhatsappInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isEmailOrWebWidgetInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isTwilioSmsInbox: {
+    type: Boolean,
+    default: false,
+  },
+  messageTemplates: {
+    type: Array,
+    default: () => [],
+  },
+  channelType: {
+    type: String,
+    default: '',
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  disableSendButton: {
+    type: Boolean,
+    default: false,
+  },
+  hasNoInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isDropdownActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'discard',
+  'sendMessage',
+  'sendWhatsappMessage',
+  'insertEmoji',
+  'addSignature',
+  'removeSignature',
+  'attachFile',
+]);
+
+const { t } = useI18n();
+
+const uploadAttachment = ref(null);
+const isEmojiPickerOpen = ref(false);
+
+const EmojiInput = defineAsyncComponent(
+  () => import('shared/components/emoji/EmojiInput.vue')
+);
+
+const messageSignature = useMapGetter('getMessageSignature');
+const signatureToApply = computed(() => messageSignature.value);
+
+const {
+  fetchSignatureFlagFromUISettings,
+  setSignatureFlagForInbox,
+  isEditorHotKeyEnabled,
+} = useUISettings();
+
+const sendWithSignature = computed(() => {
+  return fetchSignatureFlagFromUISettings(props.channelType);
+});
+
+const isSignatureEnabledForInbox = computed(() => {
+  return props.isEmailOrWebWidgetInbox && sendWithSignature.value;
+});
+
+const setSignature = () => {
+  if (signatureToApply.value) {
+    if (isSignatureEnabledForInbox.value) {
+      emit('addSignature', signatureToApply.value);
+    } else {
+      emit('removeSignature', signatureToApply.value);
+    }
+  }
+};
+
+const toggleMessageSignature = () => {
+  setSignatureFlagForInbox(props.channelType, !sendWithSignature.value);
+  setSignature();
+};
+
+const onClickInsertEmoji = emoji => {
+  emit('insertEmoji', emoji);
+};
+
+const { onFileUpload } = useFileUpload({
+  isATwilioSMSChannel: props.isTwilioSmsInbox,
+  attachFile: ({ blob, file }) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.readAsDataURL(file.file);
+    reader.onloadend = () => {
+      const newFile = {
+        resource: blob || file,
+        isPrivate: false,
+        thumb: reader.result,
+        blobSignedId: blob?.signed_id,
+      };
+      emit('attachFile', [...props.attachedFiles, newFile]);
+    };
+  },
+});
+
+const sendButtonLabel = computed(() => {
+  const keyCode = isEditorHotKeyEnabled('cmd_enter') ? '⌘ + ↵' : '↵';
+  return t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.SEND', {
+    keyCode,
+  });
+});
+
+const keyboardEvents = {
+  Enter: {
+    action: () => {
+      if (
+        isEditorHotKeyEnabled('enter') &&
+        !props.isWhatsappInbox &&
+        !props.isDropdownActive
+      ) {
+        emit('sendMessage');
+      }
+    },
+  },
+  '$mod+Enter': {
+    action: () => {
+      if (
+        isEditorHotKeyEnabled('cmd_enter') &&
+        !props.isWhatsappInbox &&
+        !props.isDropdownActive
+      ) {
+        emit('sendMessage');
+      }
+    },
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between w-full h-[52px] gap-2 px-4 py-3"
+  >
+    <div class="flex items-center gap-2">
+      <WhatsAppOptions
+        v-if="isWhatsappInbox"
+        :message-templates="messageTemplates"
+        @send-message="emit('sendWhatsappMessage', $event)"
+      />
+      <div
+        v-if="!isWhatsappInbox && !hasNoInbox"
+        v-on-click-outside="() => (isEmojiPickerOpen = false)"
+        class="relative"
+      >
+        <Button
+          icon="i-lucide-smile-plus"
+          color="slate"
+          size="sm"
+          class="!w-10"
+          @click="isEmojiPickerOpen = !isEmojiPickerOpen"
+        />
+        <EmojiInput
+          v-if="isEmojiPickerOpen"
+          class="left-0 top-full mt-1.5"
+          :on-click="onClickInsertEmoji"
+        />
+      </div>
+      <FileUpload
+        v-if="isEmailOrWebWidgetInbox"
+        ref="uploadAttachment"
+        input-id="composeNewConversationAttachment"
+        :size="4096 * 4096"
+        :accept="ALLOWED_FILE_TYPES"
+        multiple
+        :drop-directory="false"
+        :data="{
+          direct_upload_url: '/rails/active_storage/direct_uploads',
+          direct_upload: true,
+        }"
+        class="p-px"
+        @input-file="onFileUpload"
+      >
+        <Button
+          icon="i-lucide-plus"
+          color="slate"
+          size="sm"
+          class="!w-10 relative"
+        />
+      </FileUpload>
+      <Button
+        v-if="isEmailOrWebWidgetInbox"
+        icon="i-lucide-signature"
+        color="slate"
+        size="sm"
+        class="!w-10"
+        @click="toggleMessageSignature"
+      />
+    </div>
+
+    <div class="flex items-center gap-2">
+      <Button
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
+        variant="faded"
+        color="slate"
+        size="sm"
+        class="!text-xs font-medium"
+        @click="emit('discard')"
+      />
+      <Button
+        v-if="!isWhatsappInbox"
+        :label="sendButtonLabel"
+        size="sm"
+        class="!text-xs font-medium"
+        :disabled="isLoading || disableSendButton"
+        :is-loading="isLoading"
+        @click="emit('sendMessage')"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.emoji-dialog::before {
+  @apply hidden;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue b/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
new file mode 100644
index 000000000..2e03f64c0
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { computed } from 'vue';
+import { fileNameWithEllipsis } from '@chatwoot/utils';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:attachments']);
+
+const isTypeImage = file => {
+  const type = file.content_type || file.type;
+  return type.includes('image');
+};
+
+const filteredImageAttachments = computed(() => {
+  return props.attachments.filter(attachment =>
+    isTypeImage(attachment.resource)
+  );
+});
+
+const filteredNonImageAttachments = computed(() => {
+  return props.attachments.filter(
+    attachment => !isTypeImage(attachment.resource)
+  );
+});
+
+const removeAttachment = id => {
+  const updatedAttachments = props.attachments.filter(
+    attachment => attachment.resource.id !== id
+  );
+  emit('update:attachments', updatedAttachments);
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <div
+      v-if="filteredImageAttachments.length > 0"
+      class="flex flex-wrap gap-3"
+    >
+      <div
+        v-for="attachment in filteredImageAttachments"
+        :key="attachment.id"
+        class="relative group/image w-[72px] h-[72px]"
+      >
+        <img
+          class="object-cover w-[72px] h-[72px] rounded-lg"
+          :src="attachment.thumb"
+        />
+        <Button
+          variant="ghost"
+          icon="i-lucide-trash"
+          color="slate"
+          class="absolute top-1 right-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
+          @click="removeAttachment(attachment.resource.id)"
+        />
+      </div>
+    </div>
+    <div
+      v-if="filteredNonImageAttachments.length > 0"
+      class="flex flex-wrap gap-3"
+    >
+      <div
+        v-for="attachment in filteredNonImageAttachments"
+        :key="attachment.id"
+        class="max-w-[300px] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
+      >
+        <span class="text-sm font-medium text-n-slate-11">
+          {{ fileNameWithEllipsis(attachment.resource) }}
+        </span>
+        <Button
+          variant="ghost"
+          icon="i-lucide-x"
+          color="slate"
+          size="xs"
+          class="shrink-0 !h-5 !w-5"
+          @click="removeAttachment(attachment.resource.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
new file mode 100644
index 000000000..b1596ac04
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -0,0 +1,336 @@
+<script setup>
+import { reactive, ref, computed } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required, requiredIf } from '@vuelidate/validators';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import {
+  appendSignature,
+  removeSignature,
+} from 'dashboard/helper/editorHelper';
+import {
+  buildContactableInboxesList,
+  prepareNewMessagePayload,
+  prepareWhatsAppMessagePayload,
+} from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
+
+import ContactSelector from './ContactSelector.vue';
+import InboxSelector from './InboxSelector.vue';
+import EmailOptions from './EmailOptions.vue';
+import MessageEditor from './MessageEditor.vue';
+import ActionButtons from './ActionButtons.vue';
+import InboxEmptyState from './InboxEmptyState.vue';
+import AttachmentPreviews from './AttachmentPreviews.vue';
+
+const props = defineProps({
+  contacts: { type: Array, default: () => [] },
+  contactId: { type: String, default: null },
+  selectedContact: { type: Object, default: null },
+  targetInbox: { type: Object, default: null },
+  currentUser: { type: Object, default: null },
+  isCreatingContact: { type: Boolean, default: false },
+  isFetchingInboxes: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isDirectUploadsEnabled: { type: Boolean, default: false },
+  contactConversationsUiFlags: { type: Object, default: null },
+  contactsUiFlags: { type: Object, default: null },
+});
+
+const emit = defineEmits([
+  'searchContacts',
+  'discard',
+  'updateSelectedContact',
+  'updateTargetInbox',
+  'clearSelectedContact',
+  'createConversation',
+]);
+
+const showContactsDropdown = ref(false);
+const showInboxesDropdown = ref(false);
+const showCcEmailsDropdown = ref(false);
+const showBccEmailsDropdown = ref(false);
+
+const isCreating = computed(() => props.contactConversationsUiFlags.isCreating);
+
+const state = reactive({
+  message: '',
+  subject: '',
+  ccEmails: '',
+  bccEmails: '',
+  attachedFiles: [],
+});
+
+const inboxTypes = computed(() => ({
+  isEmail: props.targetInbox?.channelType === INBOX_TYPES.EMAIL,
+  isTwilio: props.targetInbox?.channelType === INBOX_TYPES.TWILIO,
+  isWhatsapp: props.targetInbox?.channelType === INBOX_TYPES.WHATSAPP,
+  isWebWidget: props.targetInbox?.channelType === INBOX_TYPES.WEB,
+  isApi: props.targetInbox?.channelType === INBOX_TYPES.API,
+  isEmailOrWebWidget:
+    props.targetInbox?.channelType === INBOX_TYPES.EMAIL ||
+    props.targetInbox?.channelType === INBOX_TYPES.WEB,
+  isTwilioSMS:
+    props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
+    props.targetInbox?.medium === 'sms',
+}));
+
+const whatsappMessageTemplates = computed(() =>
+  Object.keys(props.targetInbox?.messageTemplates || {}).length
+    ? props.targetInbox.messageTemplates
+    : []
+);
+
+const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
+
+const validationRules = computed(() => ({
+  selectedContact: { required },
+  targetInbox: { required },
+  message: { required: requiredIf(!inboxTypes.value.isWhatsapp) },
+  subject: { required: requiredIf(inboxTypes.value.isEmail) },
+}));
+
+const v$ = useVuelidate(validationRules, {
+  selectedContact: computed(() => props.selectedContact),
+  targetInbox: computed(() => props.targetInbox),
+  message: computed(() => state.message),
+  subject: computed(() => state.subject),
+});
+
+const validationStates = computed(() => ({
+  isContactInvalid:
+    v$.value.selectedContact.$dirty && v$.value.selectedContact.$invalid,
+  isInboxInvalid: v$.value.targetInbox.$dirty && v$.value.targetInbox.$invalid,
+  isSubjectInvalid: v$.value.subject.$dirty && v$.value.subject.$invalid,
+  isMessageInvalid: v$.value.message.$dirty && v$.value.message.$invalid,
+}));
+
+const newMessagePayload = () => {
+  const { message, subject, ccEmails, bccEmails, attachedFiles } = state;
+  return prepareNewMessagePayload({
+    targetInbox: props.targetInbox,
+    selectedContact: props.selectedContact,
+    message,
+    subject,
+    ccEmails,
+    bccEmails,
+    currentUser: props.currentUser,
+    attachedFiles,
+    directUploadsEnabled: props.isDirectUploadsEnabled,
+  });
+};
+
+const contactableInboxesList = computed(() => {
+  return buildContactableInboxesList(props.selectedContact?.contactInboxes);
+});
+
+const showNoInboxAlert = computed(() => {
+  return (
+    props.selectedContact &&
+    contactableInboxesList.value.length === 0 &&
+    !props.contactsUiFlags.isFetchingInboxes &&
+    !props.isFetchingInboxes
+  );
+});
+
+const isAnyDropdownActive = computed(() => {
+  return (
+    showContactsDropdown.value ||
+    showInboxesDropdown.value ||
+    showCcEmailsDropdown.value ||
+    showBccEmailsDropdown.value
+  );
+});
+
+const handleContactSearch = value => {
+  showContactsDropdown.value = true;
+  emit('searchContacts', {
+    keys: ['email', 'phone_number', 'name'],
+    query: value,
+  });
+};
+
+const handleDropdownUpdate = (type, value) => {
+  if (type === 'cc') {
+    showCcEmailsDropdown.value = value;
+  } else if (type === 'bcc') {
+    showBccEmailsDropdown.value = value;
+  } else {
+    showContactsDropdown.value = value;
+  }
+};
+
+const searchCcEmails = value => {
+  showCcEmailsDropdown.value = true;
+  emit('searchContacts', { keys: ['email'], query: value });
+};
+
+const searchBccEmails = value => {
+  showBccEmailsDropdown.value = true;
+  emit('searchContacts', { keys: ['email'], query: value });
+};
+
+const setSelectedContact = async ({ value, action, ...rest }) => {
+  v$.value.$reset();
+  emit('updateSelectedContact', { value, action, ...rest });
+  showContactsDropdown.value = false;
+  showInboxesDropdown.value = true;
+};
+
+const handleInboxAction = ({ value, action, ...rest }) => {
+  v$.value.$reset();
+  emit('updateTargetInbox', { ...rest });
+  showInboxesDropdown.value = false;
+  state.attachedFiles = [];
+};
+
+const removeTargetInbox = value => {
+  v$.value.$reset();
+  emit('updateTargetInbox', value);
+  state.attachedFiles = [];
+};
+
+const clearSelectedContact = () => {
+  emit('clearSelectedContact');
+  state.attachedFiles = [];
+};
+
+const onClickInsertEmoji = emoji => {
+  state.message += emoji;
+};
+
+const handleAddSignature = signature => {
+  state.message = appendSignature(state.message, signature);
+};
+
+const handleRemoveSignature = signature => {
+  state.message = removeSignature(state.message, signature);
+};
+
+const handleAttachFile = files => {
+  state.attachedFiles = files;
+};
+
+const clearForm = () => {
+  Object.assign(state, {
+    message: '',
+    subject: '',
+    ccEmails: '',
+    bccEmails: '',
+    attachedFiles: [],
+  });
+  v$.value.$reset();
+};
+
+const handleSendMessage = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  try {
+    const success = await emit('createConversation', {
+      payload: newMessagePayload(),
+      isFromWhatsApp: false,
+    });
+    if (success) {
+      clearForm();
+    }
+  } catch (error) {
+    // Form will not be cleared if conversation creation fails
+  }
+};
+
+const handleSendWhatsappMessage = async ({ message, templateParams }) => {
+  const whatsappMessagePayload = prepareWhatsAppMessagePayload({
+    targetInbox: props.targetInbox,
+    selectedContact: props.selectedContact,
+    message,
+    templateParams,
+    currentUser: props.currentUser,
+  });
+  await emit('createConversation', {
+    payload: whatsappMessagePayload,
+    isFromWhatsApp: true,
+  });
+};
+</script>
+
+<template>
+  <div
+    class="w-[670px] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
+  >
+    <ContactSelector
+      :contacts="contacts"
+      :selected-contact="selectedContact"
+      :show-contacts-dropdown="showContactsDropdown"
+      :is-loading="isLoading"
+      :is-creating-contact="isCreatingContact"
+      :contact-id="contactId"
+      :contactable-inboxes-list="contactableInboxesList"
+      :show-inboxes-dropdown="showInboxesDropdown"
+      :has-errors="validationStates.isContactInvalid"
+      @search-contacts="handleContactSearch"
+      @set-selected-contact="setSelectedContact"
+      @clear-selected-contact="clearSelectedContact"
+      @update-dropdown="handleDropdownUpdate"
+    />
+    <InboxEmptyState v-if="showNoInboxAlert" />
+    <InboxSelector
+      v-else
+      :target-inbox="targetInbox"
+      :selected-contact="selectedContact"
+      :show-inboxes-dropdown="showInboxesDropdown"
+      :contactable-inboxes-list="contactableInboxesList"
+      :has-errors="validationStates.isInboxInvalid"
+      @update-inbox="removeTargetInbox"
+      @toggle-dropdown="showInboxesDropdown = $event"
+      @handle-inbox-action="handleInboxAction"
+    />
+
+    <EmailOptions
+      v-if="inboxTypes.isEmail"
+      v-model:cc-emails="state.ccEmails"
+      v-model:bcc-emails="state.bccEmails"
+      v-model:subject="state.subject"
+      :contacts="contacts"
+      :show-cc-emails-dropdown="showCcEmailsDropdown"
+      :show-bcc-emails-dropdown="showBccEmailsDropdown"
+      :is-loading="isLoading"
+      :has-errors="validationStates.isSubjectInvalid"
+      @search-cc-emails="searchCcEmails"
+      @search-bcc-emails="searchBccEmails"
+      @update-dropdown="handleDropdownUpdate"
+    />
+
+    <MessageEditor
+      v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
+      v-model="state.message"
+      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
+      :has-errors="validationStates.isMessageInvalid"
+      :has-attachments="state.attachedFiles.length > 0"
+    />
+
+    <AttachmentPreviews
+      v-if="state.attachedFiles.length > 0"
+      :attachments="state.attachedFiles"
+      @update:attachments="state.attachedFiles = $event"
+    />
+
+    <ActionButtons
+      :attached-files="state.attachedFiles"
+      :is-whatsapp-inbox="inboxTypes.isWhatsapp"
+      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
+      :is-twilio-sms-inbox="inboxTypes.isTwilioSMS"
+      :message-templates="whatsappMessageTemplates"
+      :channel-type="inboxChannelType"
+      :is-loading="isCreating"
+      :disable-send-button="isCreating"
+      :has-no-inbox="showNoInboxAlert"
+      :is-dropdown-active="isAnyDropdownActive"
+      @insert-emoji="onClickInsertEmoji"
+      @add-signature="handleAddSignature"
+      @remove-signature="handleRemoveSignature"
+      @attach-file="handleAttachFile"
+      @discard="$emit('discard')"
+      @send-message="handleSendMessage"
+      @send-whatsapp-message="handleSendWhatsappMessage"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
new file mode 100644
index 000000000..33a2f8f20
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
@@ -0,0 +1,140 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+const props = defineProps({
+  contacts: {
+    type: Array,
+    required: true,
+  },
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+  showContactsDropdown: {
+    type: Boolean,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    required: true,
+  },
+  isCreatingContact: {
+    type: Boolean,
+    required: true,
+  },
+  contactId: {
+    type: String,
+    default: null,
+  },
+  contactableInboxesList: {
+    type: Array,
+    default: () => [],
+  },
+  showInboxesDropdown: {
+    type: Boolean,
+    required: true,
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits([
+  'searchContacts',
+  'setSelectedContact',
+  'clearSelectedContact',
+  'updateDropdown',
+]);
+const i18nPrefix = 'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR';
+const { t } = useI18n();
+
+const contactsList = computed(() => {
+  return props.contacts?.map(({ name, id, thumbnail, email, ...rest }) => ({
+    id,
+    label: email ? `${name} (${email})` : name,
+    value: id,
+    thumbnail: { name, src: thumbnail },
+    ...rest,
+    name,
+    email,
+    action: 'contact',
+  }));
+});
+
+const selectedContactLabel = computed(() => {
+  const { name, email = '', phoneNumber = '' } = props.selectedContact || {};
+  if (email) {
+    return `${name} (${email})`;
+  }
+  if (phoneNumber) {
+    return `${name} (${phoneNumber})`;
+  }
+  return name || '';
+});
+
+const errorClass = computed(() => {
+  return props.hasErrors
+    ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
+    : '';
+});
+</script>
+
+<template>
+  <div class="relative flex-1 px-4 py-3 overflow-y-visible">
+    <div class="flex items-baseline w-full gap-3 min-h-7">
+      <label class="text-sm font-medium text-n-slate-11 whitespace-nowrap">
+        {{ t(`${i18nPrefix}.LABEL`) }}
+      </label>
+
+      <div
+        v-if="isCreatingContact"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
+      >
+        <span class="text-sm truncate text-n-slate-12">
+          {{ t(`${i18nPrefix}.CONTACT_CREATING`) }}
+        </span>
+      </div>
+      <div
+        v-else-if="selectedContact"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
+      >
+        <span class="text-sm truncate text-n-slate-12">
+          {{
+            isCreatingContact
+              ? t(`${i18nPrefix}.CONTACT_CREATING`)
+              : selectedContactLabel
+          }}
+        </span>
+        <Button
+          variant="ghost"
+          icon="i-lucide-x"
+          color="slate"
+          :disabled="contactId"
+          size="xs"
+          @click="emit('clearSelectedContact')"
+        />
+      </div>
+      <TagInput
+        v-else
+        :placeholder="t(`${i18nPrefix}.TAG_INPUT_PLACEHOLDER`)"
+        mode="single"
+        :menu-items="contactsList"
+        :show-dropdown="showContactsDropdown"
+        :is-loading="isLoading"
+        :disabled="contactableInboxesList?.length > 0 && showInboxesDropdown"
+        allow-create
+        type="email"
+        class="flex-1 min-h-7"
+        :class="errorClass"
+        focus-on-mount
+        @input="emit('searchContacts', $event)"
+        @on-click-outside="emit('updateDropdown', 'contacts', false)"
+        @add="emit('setSelectedContact', $event)"
+        @remove="emit('clearSelectedContact')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue b/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
new file mode 100644
index 000000000..ac7e8d659
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+const props = defineProps({
+  contacts: { type: Array, required: true },
+  showCcEmailsDropdown: { type: Boolean, required: false },
+  showBccEmailsDropdown: { type: Boolean, required: false },
+  isLoading: { type: Boolean, default: false },
+  hasErrors: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'searchCcEmails',
+  'searchBccEmails',
+  'updateDropdown',
+]);
+
+const i18nPrefix = `COMPOSE_NEW_CONVERSATION.FORM.EMAIL_OPTIONS`;
+
+const showBccInput = ref(false);
+
+const toggleBccInput = () => {
+  showBccInput.value = !showBccInput.value;
+};
+
+const subject = defineModel('subject', { type: String, default: '' });
+const ccEmails = defineModel('ccEmails', { type: String, default: '' });
+const bccEmails = defineModel('bccEmails', { type: String, default: '' });
+
+const { t } = useI18n();
+
+// Convert string to array for TagInput
+const ccEmailsArray = computed(() =>
+  props.ccEmails ? props.ccEmails.split(',').map(email => email.trim()) : []
+);
+
+const bccEmailsArray = computed(() =>
+  props.bccEmails ? props.bccEmails.split(',').map(email => email.trim()) : []
+);
+
+const contactEmailsList = computed(() => {
+  return props.contacts?.map(({ name, id, email }) => ({
+    id,
+    label: email,
+    email,
+    thumbnail: { name: name, src: '' },
+    value: id,
+    action: 'email',
+  }));
+});
+
+// Handle updates from TagInput and convert array back to string
+const handleCcUpdate = value => {
+  ccEmails.value = value.join(',');
+};
+
+const handleBccUpdate = value => {
+  bccEmails.value = value.join(',');
+};
+
+const inputClass = computed(() => {
+  return props.hasErrors
+    ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+    : '';
+});
+</script>
+
+<template>
+  <div class="flex flex-col divide-y divide-n-strong">
+    <div class="flex items-baseline flex-1 w-full h-8 gap-3 px-4 py-3">
+      <InlineInput
+        v-model="subject"
+        :placeholder="t(`${i18nPrefix}.SUBJECT_PLACEHOLDER`)"
+        :label="t(`${i18nPrefix}.SUBJECT_LABEL`)"
+        focus-on-mount
+        :custom-input-class="inputClass"
+      />
+    </div>
+    <div class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8">
+      <label
+        class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
+      >
+        {{ t(`${i18nPrefix}.CC_LABEL`) }}
+      </label>
+      <div class="flex items-center w-full gap-3 min-h-7">
+        <TagInput
+          :model-value="ccEmailsArray"
+          :placeholder="t(`${i18nPrefix}.CC_PLACEHOLDER`)"
+          :menu-items="contactEmailsList"
+          :show-dropdown="showCcEmailsDropdown"
+          :is-loading="isLoading"
+          type="email"
+          class="flex-1 min-h-7"
+          @focus="emit('updateDropdown', 'cc', true)"
+          @input="emit('searchCcEmails', $event)"
+          @on-click-outside="emit('updateDropdown', 'cc', false)"
+          @update:model-value="handleCcUpdate"
+        />
+        <Button
+          :label="t(`${i18nPrefix}.BCC_BUTTON`)"
+          variant="ghost"
+          size="sm"
+          color="slate"
+          class="flex-shrink-0"
+          @click="toggleBccInput"
+        />
+      </div>
+    </div>
+    <div
+      v-if="showBccInput"
+      class="flex items-baseline flex-1 w-full gap-3 px-4 py-3 min-h-8"
+    >
+      <label
+        class="mb-0.5 text-sm font-medium whitespace-nowrap text-n-slate-11"
+      >
+        {{ t(`${i18nPrefix}.BCC_LABEL`) }}
+      </label>
+      <TagInput
+        :model-value="bccEmailsArray"
+        :placeholder="t(`${i18nPrefix}.BCC_PLACEHOLDER`)"
+        :menu-items="contactEmailsList"
+        :show-dropdown="showBccEmailsDropdown"
+        :is-loading="isLoading"
+        type="email"
+        class="flex-1 min-h-7"
+        focus-on-mount
+        @focus="emit('updateDropdown', 'bcc', true)"
+        @input="emit('searchBccEmails', $event)"
+        @on-click-outside="emit('updateDropdown', 'bcc', false)"
+        @update:model-value="handleBccUpdate"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue b/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue
new file mode 100644
index 000000000..7fed98806
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxEmptyState.vue
@@ -0,0 +1,9 @@
+<template>
+  <div
+    class="flex items-center w-full px-4 py-3 dark:bg-n-amber-11/15 bg-n-amber-3"
+  >
+    <span class="text-sm dark:text-n-amber-11 text-n-amber-11">
+      {{ $t('COMPOSE_NEW_CONVERSATION.FORM.NO_INBOX_ALERT') }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
new file mode 100644
index 000000000..4e1b0f510
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { vOnClickOutside } from '@vueuse/components';
+import { generateLabelForContactableInboxesList } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  targetInbox: {
+    type: Object,
+    default: null,
+  },
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+  showInboxesDropdown: {
+    type: Boolean,
+    required: true,
+  },
+  contactableInboxesList: {
+    type: Array,
+    default: () => [],
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'updateInbox',
+  'toggleDropdown',
+  'handleInboxAction',
+]);
+
+const { t } = useI18n();
+
+const targetInboxLabel = computed(() => {
+  return generateLabelForContactableInboxesList(props.targetInbox);
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center flex-1 w-full gap-3 px-4 py-3 overflow-y-visible"
+  >
+    <label class="mb-0.5 text-sm font-medium text-n-slate-11 whitespace-nowrap">
+      {{ t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.LABEL') }}
+    </label>
+    <div
+      v-if="targetInbox"
+      class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate px-3 h-7 min-w-0"
+    >
+      <span class="text-sm truncate text-n-slate-12">
+        {{ targetInboxLabel }}
+      </span>
+      <Button
+        variant="ghost"
+        icon="i-lucide-x"
+        color="slate"
+        size="xs"
+        class="flex-shrink-0"
+        @click="emit('updateInbox', null)"
+      />
+    </div>
+    <div
+      v-else
+      v-on-click-outside="() => emit('toggleDropdown', false)"
+      class="relative flex items-center h-7"
+    >
+      <Button
+        :label="t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.BUTTON')"
+        variant="link"
+        size="sm"
+        :color="hasErrors ? 'ruby' : 'slate'"
+        :disabled="!selectedContact"
+        class="hover:!no-underline"
+        @click="emit('toggleDropdown', !showInboxesDropdown)"
+      />
+      <DropdownMenu
+        v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
+        :menu-items="contactableInboxesList"
+        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
+        @action="emit('handleInboxAction', $event)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue b/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
new file mode 100644
index 000000000..ca54f7eca
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+
+defineProps({
+  isEmailOrWebWidgetInbox: {
+    type: Boolean,
+    required: true,
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+  hasAttachments: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
+</script>
+
+<template>
+  <div
+    v-if="isEmailOrWebWidgetInbox"
+    class="flex-1 h-full"
+    :class="!hasAttachments && 'min-h-[200px]'"
+  >
+    <Editor
+      v-model="modelValue"
+      :placeholder="
+        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+      "
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
+      :class="
+        hasErrors
+          ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
+          : ''
+      "
+      :show-character-count="false"
+    />
+  </div>
+  <div v-else class="flex-1 h-full" :class="!hasAttachments && 'min-h-[200px]'">
+    <TextArea
+      v-model="modelValue"
+      :placeholder="
+        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+      "
+      class="!px-0 [&>div]:!px-4 [&>div]:!border-transparent [&>div]:!bg-transparent"
+      auto-height
+      :custom-text-area-class="
+        hasErrors
+          ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+          : ''
+      "
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
new file mode 100644
index 000000000..8d32509b8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
@@ -0,0 +1,126 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import WhatsappTemplateParser from './WhatsappTemplateParser.vue';
+
+const props = defineProps({
+  messageTemplates: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['sendMessage']);
+
+const { t } = useI18n();
+
+// TODO: Remove this when we support all formats
+const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
+
+const searchQuery = ref('');
+const selectedTemplate = ref(null);
+
+const showTemplatesMenu = ref(false);
+
+const whatsAppTemplateMessages = computed(() => {
+  // Add null check and ensure it's an array
+  const templates = Array.isArray(props.messageTemplates)
+    ? props.messageTemplates
+    : [];
+
+  // TODO: Remove the last filter when we support all formats
+  return templates
+    .filter(template => template?.status?.toLowerCase() === 'approved')
+    .filter(template => {
+      return template?.components?.every(component => {
+        return !formatsToRemove.includes(component.format);
+      });
+    });
+});
+
+const filteredTemplates = computed(() => {
+  return whatsAppTemplateMessages.value.filter(template =>
+    template.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const getTemplateBody = template => {
+  return template.components.find(component => component.type === 'BODY').text;
+};
+
+const handleTriggerClick = () => {
+  searchQuery.value = '';
+  showTemplatesMenu.value = !showTemplatesMenu.value;
+};
+
+const handleTemplateClick = template => {
+  selectedTemplate.value = template;
+  showTemplatesMenu.value = false;
+};
+
+const handleBack = () => {
+  selectedTemplate.value = null;
+  showTemplatesMenu.value = true;
+};
+
+const handleSendMessage = template => {
+  emit('sendMessage', template);
+  selectedTemplate.value = null;
+};
+</script>
+
+<template>
+  <div class="relative">
+    <Button
+      icon="i-ri-whatsapp-line"
+      :label="t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.LABEL')"
+      color="slate"
+      size="sm"
+      :disabled="selectedTemplate"
+      class="!text-xs font-medium"
+      @click="handleTriggerClick"
+    />
+    <div
+      v-if="showTemplatesMenu"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[350px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    >
+      <div class="relative w-full">
+        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="
+            t(
+              'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
+            )
+          "
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        />
+      </div>
+      <div
+        v-for="template in filteredTemplates"
+        :key="template.id"
+        class="flex flex-col w-full gap-2 p-2 rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+        @click="handleTemplateClick(template)"
+      >
+        <span class="text-sm text-n-slate-12">{{ template.name }}</span>
+        <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
+          {{ getTemplateBody(template) }}
+        </p>
+      </div>
+      <template v-if="filteredTemplates.length === 0">
+        <p class="w-full pt-2 text-sm text-n-slate-11">
+          {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
+        </p>
+      </template>
+    </div>
+    <WhatsappTemplateParser
+      v-if="selectedTemplate"
+      :template="selectedTemplate"
+      @send-message="handleSendMessage"
+      @back="handleBack"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
new file mode 100644
index 000000000..85f69a665
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
@@ -0,0 +1,176 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'back']);
+
+const { t } = useI18n();
+
+const processedParams = ref({});
+
+const templateName = computed(() => {
+  return props.template?.name || '';
+});
+
+const templateString = computed(() => {
+  return props.template?.components?.find(
+    component => component.type === 'BODY'
+  ).text;
+});
+
+const processVariable = str => {
+  return str.replace(/{{|}}/g, '');
+};
+
+const processedString = computed(() => {
+  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+    const variableKey = processVariable(variable);
+    return processedParams.value[variableKey] || `{{${variable}}}`;
+  });
+});
+
+const processedStringWithVariableHighlight = computed(() => {
+  const variables = templateString.value.match(/{{([^}]+)}}/g) || [];
+
+  return variables.reduce((result, variable) => {
+    const variableKey = processVariable(variable);
+    const value = processedParams.value[variableKey] || variable;
+    return result.replace(
+      variable,
+      `<span class="break-all text-n-slate-12">${value}</span>`
+    );
+  }, templateString.value);
+});
+
+const rules = computed(() => {
+  const paramRules = {};
+  Object.keys(processedParams.value).forEach(key => {
+    paramRules[key] = { required: requiredIf(true) };
+  });
+  return {
+    processedParams: paramRules,
+  };
+});
+
+const v$ = useVuelidate(rules, { processedParams });
+
+const getFieldErrorType = key => {
+  if (!v$.value.processedParams[key]?.$error) return 'info';
+  return 'error';
+};
+
+const generateVariables = () => {
+  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+  if (!matchedVariables) return;
+
+  const finalVars = matchedVariables.map(i => processVariable(i));
+  processedParams.value = finalVars.reduce((acc, variable) => {
+    acc[variable] = '';
+    return acc;
+  }, {});
+};
+
+const sendMessage = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  const payload = {
+    message: processedString.value,
+    templateParams: {
+      name: props.template.name,
+      category: props.template.category,
+      language: props.template.language,
+      namespace: props.template.namespace,
+      processed_params: processedParams.value,
+    },
+  };
+  emit('sendMessage', payload);
+};
+
+onMounted(() => {
+  generateVariables();
+});
+</script>
+
+<template>
+  <div
+    class="absolute top-full mt-1.5 max-h-[500px] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[460px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+  >
+    <span class="text-sm text-n-slate-12">
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.TEMPLATE_NAME',
+          { templateName: templateName }
+        )
+      }}
+    </span>
+    <p
+      class="mb-0 text-sm text-n-slate-11"
+      v-html="processedStringWithVariableHighlight"
+    />
+
+    <span
+      v-if="Object.keys(processedParams).length"
+      class="text-sm font-medium text-n-slate-12"
+    >
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.VARIABLES'
+        )
+      }}
+    </span>
+
+    <div
+      v-for="(variable, key) in processedParams"
+      :key="key"
+      class="flex items-center w-full gap-2"
+    >
+      <span
+        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
+      >
+        {{ key }}
+      </span>
+      <Input
+        v-model="processedParams[key]"
+        custom-input-class="!h-8 w-full !bg-transparent"
+        class="w-full"
+        :message-type="getFieldErrorType(key)"
+      />
+    </div>
+
+    <div class="flex items-end justify-between w-full gap-3 h-14">
+      <Button
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
+          )
+        "
+        color="slate"
+        variant="faded"
+        class="w-full font-medium"
+        @click="emit('back')"
+      />
+      <Button
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
+          )
+        "
+        class="w-full font-medium"
+        @click="sendMessage"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/story/ComposeNewConversationForm.story.vue b/app/javascript/dashboard/components-next/NewConversation/components/story/ComposeNewConversationForm.story.vue
new file mode 100644
index 000000000..192c1b8ae
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/story/ComposeNewConversationForm.story.vue
@@ -0,0 +1,92 @@
+<script setup>
+import { ref } from 'vue';
+import { contacts, activeContact, emailInbox, currentUser } from './fixtures';
+import ComposeNewConversationForm from '../ComposeNewConversationForm.vue';
+
+const selectedContact = ref(activeContact);
+const targetInbox = ref(emailInbox);
+
+// Event handlers
+const onSearchContacts = query => {
+  console.log('Searching contacts:', query);
+};
+
+const onUpdateSelectedContact = contact => {
+  console.log('Selected contact updated:', contact);
+};
+
+const onUpdateTargetInbox = inbox => {
+  console.log('Target inbox updated:', inbox);
+  targetInbox.value = inbox;
+  console.log('Target inbox updated:', inbox);
+};
+
+const onClearSelectedContact = () => {
+  console.log('Contact cleared');
+};
+
+const onCreateConversation = payload => {
+  console.log('Creating conversation:', payload);
+};
+
+const onDiscard = () => {
+  console.log('Form discarded');
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Compose/ComposeNewConversationForm"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="With all props">
+      <div class="h-[600px] w-full relative">
+        <ComposeNewConversationForm
+          :contacts="contacts"
+          contact-id=""
+          :is-loading="false"
+          :current-user="currentUser"
+          :selected-contact="selectedContact"
+          :target-inbox="targetInbox"
+          :is-creating-contact="false"
+          is-fetching-inboxes
+          is-direct-uploads-enabled
+          :contact-conversations-ui-flags="{ isCreating: false }"
+          :contacts-ui-flags="{ isFetching: false }"
+          class="!top-0"
+          @search-contacts="onSearchContacts"
+          @update-selected-contact="onUpdateSelectedContact"
+          @update-target-inbox="onUpdateTargetInbox"
+          @clear-selected-contact="onClearSelectedContact"
+          @create-conversation="onCreateConversation"
+          @discard="onDiscard"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With no target inbox">
+      <div class="h-[200px] w-full relative">
+        <ComposeNewConversationForm
+          :contacts="contacts"
+          contact-id=""
+          :is-loading="false"
+          :current-user="currentUser"
+          :selected-contact="{ ...selectedContact, contactInboxes: [] }"
+          :target-inbox="null"
+          :is-creating-contact="false"
+          :is-fetching-inboxes="false"
+          is-direct-uploads-enabled
+          :contact-conversations-ui-flags="{ isCreating: false }"
+          :contacts-ui-flags="{ isFetching: false }"
+          class="!top-0"
+          @search-contacts="onSearchContacts"
+          @update-selected-contact="onUpdateSelectedContact"
+          @update-target-inbox="onUpdateTargetInbox"
+          @clear-selected-contact="onClearSelectedContact"
+          @create-conversation="onCreateConversation"
+          @discard="onDiscard"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/story/fixtures.js b/app/javascript/dashboard/components-next/NewConversation/components/story/fixtures.js
new file mode 100644
index 000000000..5c80466fa
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/components/story/fixtures.js
@@ -0,0 +1,168 @@
+export const contacts = [
+  {
+    additionalAttributes: {
+      city: 'kerala',
+      country: 'India',
+      description: 'Curious about the web. ',
+      companyName: 'Chatwoot',
+      countryCode: '',
+      socialProfiles: {
+        github: 'abozler',
+        twitter: 'ozler',
+        facebook: 'abozler',
+        linkedin: 'abozler',
+        instagram: 'ozler',
+      },
+    },
+    availabilityStatus: 'offline',
+    email: 'ozler@chatwoot.com',
+    id: 29,
+    name: 'Abraham Ozlers',
+    phoneNumber: '+246232222222',
+    identifier: null,
+    thumbnail:
+      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0FCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c20b627b384f5981112e949b8414cd4d3e5912ee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/Avatar%201.20.41%E2%80%AFAM.png',
+    customAttributes: {
+      dateContact: '2024-02-01T00:00:00.000Z',
+      linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
+      listContact: 'Not spam',
+      numberContact: '12',
+    },
+    lastActivityAt: 1712127410,
+    createdAt: 1712127389,
+  },
+];
+
+export const activeContact = {
+  email: 'ozler@chatwoot.com',
+  id: 29,
+  label: 'Abraham Ozlers (ozler@chatwoot.com)',
+  name: 'Abraham Ozlers',
+  thumbnail: {
+    name: 'Abraham Ozlers',
+    src: 'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc0FCIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c20b627b384f5981112e949b8414cd4d3e5912ee/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/Avatar%201.20.41%E2%80%AFAM.png',
+  },
+  contactInboxes: [
+    {
+      id: 7,
+      label: 'PaperLayer Email (testba@paperlayer.test)',
+      name: 'PaperLayer Email',
+      email: 'testba@paperlayer.test',
+      channelType: 'Channel::Email',
+    },
+    {
+      id: 8,
+      label: 'PaperLayer WhatsApp',
+      name: 'PaperLayer WhatsApp',
+      sourceId: '123456',
+      phoneNumber: '+1223233434',
+      channelType: 'Channel::Whatsapp',
+      messageTemplates: [
+        {
+          id: '1',
+          name: 'shipment_confirmation',
+          status: 'APPROVED',
+          category: 'UTILITY',
+          language: 'en_US',
+          components: [
+            {
+              text: '{{1}}, great news! Your order {{2}} has shipped.\n\nTracking #: {{3}}\nEstimated delivery: {{4}}\n\nWe will provide updates until delivery.',
+              type: 'BODY',
+              example: {
+                bodyText: [['John', '#12345', 'ZK4539O2311J', 'Jan 1, 2024']],
+              },
+            },
+            {
+              type: 'BUTTONS',
+              buttons: [
+                {
+                  url: 'https://www.example.com/',
+                  text: 'Track shipment',
+                  type: 'URL',
+                },
+              ],
+            },
+          ],
+          parameterFormat: 'POSITIONAL',
+          libraryTemplateName: 'shipment_confirmation_2',
+        },
+        {
+          id: '2',
+          name: 'otp_test',
+          status: 'APPROVED',
+          category: 'AUTHENTICATION',
+          language: 'en_US',
+          components: [
+            {
+              text: 'Use code *{{1}}* to authorize your transaction.',
+              type: 'BODY',
+              example: {
+                bodyText: [['123456']],
+              },
+            },
+            {
+              type: 'BUTTONS',
+              buttons: [
+                {
+                  url: 'https://www.example.com/otp/code/?otp_type=ZERO_TAP&cta_display_name=Autofill&package_name=com.app&signature_hash=weew&code=otp{{1}}',
+                  text: 'Copy code',
+                  type: 'URL',
+                  example: [
+                    'https://www.example.com/otp/code/?otp_type=ZERO_TAP&cta_display_name=Autofill&package_name=com.app&signature_hash=weew&code=otp123456',
+                  ],
+                },
+              ],
+            },
+          ],
+          parameterFormat: 'POSITIONAL',
+          libraryTemplateName: 'verify_transaction_1',
+          messageSendTtlSeconds: 900,
+        },
+        {
+          id: '3',
+          name: 'hello_world',
+          status: 'APPROVED',
+          category: 'UTILITY',
+          language: 'en_US',
+          components: [
+            {
+              text: 'Hello World',
+              type: 'HEADER',
+              format: 'TEXT',
+            },
+            {
+              text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+              type: 'BODY',
+            },
+            {
+              text: 'WhatsApp Business Platform sample message',
+              type: 'FOOTER',
+            },
+          ],
+          parameterFormat: 'POSITIONAL',
+        },
+      ],
+    },
+    {
+      id: 9,
+      label: 'PaperLayer API',
+      name: 'PaperLayer API',
+      email: '',
+      channelType: 'Channel::Api',
+    },
+  ],
+};
+
+export const emailInbox = {
+  id: 7,
+  label: 'PaperLayer Email (testba@paperlayer.test)',
+  name: 'PaperLayer Email',
+  email: 'testba@paperlayer.test',
+  channelType: 'Channel::Email',
+};
+
+export const currentUser = {
+  id: 1,
+  name: 'John Doe',
+  email: 'john@example.com',
+};
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
new file mode 100644
index 000000000..12a5e76b3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -0,0 +1,219 @@
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+import camelcaseKeys from 'camelcase-keys';
+import ContactAPI from 'dashboard/api/contacts';
+
+const CHANNEL_PRIORITY = {
+  'Channel::Email': 1,
+  'Channel::Whatsapp': 2,
+  'Channel::Sms': 3,
+  'Channel::TwilioSms': 4,
+  'Channel::WebWidget': 5,
+  'Channel::Api': 6,
+};
+
+export const generateLabelForContactableInboxesList = ({
+  name,
+  email,
+  channelType,
+  phoneNumber,
+}) => {
+  if (channelType === INBOX_TYPES.EMAIL) {
+    return `${name} (${email})`;
+  }
+  if (
+    channelType === INBOX_TYPES.TWILIO ||
+    channelType === INBOX_TYPES.WHATSAPP
+  ) {
+    return `${name} (${phoneNumber})`;
+  }
+  return name;
+};
+
+const transformInbox = ({
+  name,
+  id,
+  email,
+  channelType,
+  phoneNumber,
+  ...rest
+}) => ({
+  id,
+  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
+  label: generateLabelForContactableInboxesList({
+    name,
+    email,
+    channelType,
+    phoneNumber,
+  }),
+  action: 'inbox',
+  value: id,
+  name,
+  email,
+  phoneNumber,
+  channelType,
+  ...rest,
+});
+
+export const compareInboxes = (a, b) => {
+  // Channels that have no priority defined should come at the end.
+  const priorityA = CHANNEL_PRIORITY[a.channelType] || 999;
+  const priorityB = CHANNEL_PRIORITY[b.channelType] || 999;
+
+  if (priorityA !== priorityB) {
+    return priorityA - priorityB;
+  }
+
+  const nameA = a.name || '';
+  const nameB = b.name || '';
+  return nameA.localeCompare(nameB);
+};
+
+export const buildContactableInboxesList = contactInboxes => {
+  if (!contactInboxes) return [];
+
+  return contactInboxes.map(transformInbox).sort(compareInboxes);
+};
+
+export const getCapitalizedNameFromEmail = email => {
+  const name = email.match(/^([^@]*)@/)?.[1] || email.split('@')[0];
+  return name.charAt(0).toUpperCase() + name.slice(1);
+};
+
+export const processContactableInboxes = inboxes => {
+  return inboxes.map(inbox => ({
+    ...inbox.inbox,
+    sourceId: inbox.sourceId,
+  }));
+};
+
+export const prepareAttachmentPayload = (
+  attachedFiles,
+  directUploadsEnabled
+) => {
+  const files = [];
+  attachedFiles.forEach(attachment => {
+    if (directUploadsEnabled) {
+      files.push(attachment.blobSignedId);
+    } else {
+      files.push(attachment.resource.file);
+    }
+  });
+  return files;
+};
+
+export const prepareNewMessagePayload = ({
+  targetInbox,
+  selectedContact,
+  message,
+  subject,
+  ccEmails,
+  bccEmails,
+  currentUser,
+  attachedFiles = [],
+  directUploadsEnabled = false,
+}) => {
+  const payload = {
+    inboxId: targetInbox.id,
+    sourceId: targetInbox.sourceId,
+    contactId: Number(selectedContact.id),
+    message: { content: message },
+    assigneeId: currentUser.id,
+  };
+
+  if (attachedFiles?.length) {
+    payload.files = prepareAttachmentPayload(
+      attachedFiles,
+      directUploadsEnabled
+    );
+  }
+
+  if (subject) {
+    payload.mailSubject = subject;
+  }
+
+  if (ccEmails) {
+    payload.message.cc_emails = ccEmails;
+  }
+
+  if (bccEmails) {
+    payload.message.bcc_emails = bccEmails;
+  }
+
+  return payload;
+};
+
+export const prepareWhatsAppMessagePayload = ({
+  targetInbox,
+  selectedContact,
+  message,
+  templateParams,
+  currentUser,
+}) => {
+  return {
+    inboxId: targetInbox.id,
+    sourceId: targetInbox.sourceId,
+    contactId: selectedContact.id,
+    message: { content: message, template_params: templateParams },
+    assigneeId: currentUser.id,
+  };
+};
+
+export const generateContactQuery = ({ keys = ['email'], query }) => {
+  return {
+    payload: keys.map(key => {
+      const filterPayload = {
+        attribute_key: key,
+        filter_operator: 'contains',
+        values: [query],
+        attribute_model: 'standard',
+      };
+      if (keys.findIndex(k => k === key) !== keys.length - 1) {
+        filterPayload.query_operator = 'or';
+      }
+      return filterPayload;
+    }),
+  };
+};
+
+// API Calls
+export const searchContacts = async ({ keys, query }) => {
+  const {
+    data: { payload },
+  } = await ContactAPI.filter(
+    undefined,
+    'name',
+    generateContactQuery({ keys, query })
+  );
+  const camelCasedPayload = camelcaseKeys(payload, { deep: true });
+  // Filter contacts that have either phone_number or email
+  const filteredPayload = camelCasedPayload?.filter(
+    contact => contact.phoneNumber || contact.email
+  );
+  return filteredPayload || [];
+};
+
+export const createNewContact = async email => {
+  const payload = {
+    name: getCapitalizedNameFromEmail(email),
+    email,
+  };
+
+  const {
+    data: {
+      payload: { contact: newContact },
+    },
+  } = await ContactAPI.create(payload);
+
+  return camelcaseKeys(newContact, { deep: true });
+};
+
+export const fetchContactableInboxes = async contactId => {
+  const {
+    data: { payload: inboxes = [] },
+  } = await ContactAPI.getContactableInboxes(contactId);
+
+  const convertInboxesToCamelKeys = camelcaseKeys(inboxes, { deep: true });
+
+  return processContactableInboxes(convertInboxesToCamelKeys);
+};
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
new file mode 100644
index 000000000..5a2d0092d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -0,0 +1,536 @@
+import { describe, it, expect, vi } from 'vitest';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import ContactAPI from 'dashboard/api/contacts';
+import * as helpers from '../composeConversationHelper';
+
+vi.mock('dashboard/api/contacts');
+
+describe('composeConversationHelper', () => {
+  describe('generateLabelForContactableInboxesList', () => {
+    const contact = {
+      name: 'John Doe',
+      email: 'john@example.com',
+      phoneNumber: '+1234567890',
+    };
+
+    it('generates label for email inbox', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: INBOX_TYPES.EMAIL,
+        })
+      ).toBe('John Doe (john@example.com)');
+    });
+
+    it('generates label for twilio inbox', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: INBOX_TYPES.TWILIO,
+        })
+      ).toBe('John Doe (+1234567890)');
+    });
+
+    it('generates label for whatsapp inbox', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: INBOX_TYPES.WHATSAPP,
+        })
+      ).toBe('John Doe (+1234567890)');
+    });
+
+    it('generates label for other inbox types', () => {
+      expect(
+        helpers.generateLabelForContactableInboxesList({
+          ...contact,
+          channelType: 'Channel::Api',
+        })
+      ).toBe('John Doe');
+    });
+  });
+
+  describe('buildContactableInboxesList', () => {
+    it('returns empty array if no contact inboxes', () => {
+      expect(helpers.buildContactableInboxesList(null)).toEqual([]);
+      expect(helpers.buildContactableInboxesList(undefined)).toEqual([]);
+    });
+
+    it('builds list of contactable inboxes with correct format', () => {
+      const inboxes = [
+        {
+          id: 1,
+          name: 'Email Inbox',
+          email: 'support@example.com',
+          channelType: INBOX_TYPES.EMAIL,
+          phoneNumber: null,
+        },
+      ];
+
+      const result = helpers.buildContactableInboxesList(inboxes);
+      expect(result[0]).toMatchObject({
+        id: 1,
+        icon: 'i-ri-mail-line',
+        label: 'Email Inbox (support@example.com)',
+        action: 'inbox',
+        value: 1,
+        name: 'Email Inbox',
+        email: 'support@example.com',
+        channelType: INBOX_TYPES.EMAIL,
+      });
+    });
+  });
+
+  describe('getCapitalizedNameFromEmail', () => {
+    it('extracts and capitalizes name from email', () => {
+      expect(helpers.getCapitalizedNameFromEmail('john.doe@example.com')).toBe(
+        'John.doe'
+      );
+      expect(helpers.getCapitalizedNameFromEmail('jane@example.com')).toBe(
+        'Jane'
+      );
+    });
+  });
+
+  describe('processContactableInboxes', () => {
+    it('processes inboxes with correct structure', () => {
+      const inboxes = [
+        {
+          inbox: { id: 1, name: 'Inbox 1' },
+          sourceId: 'source1',
+        },
+      ];
+
+      const result = helpers.processContactableInboxes(inboxes);
+      expect(result[0]).toEqual({
+        id: 1,
+        name: 'Inbox 1',
+        sourceId: 'source1',
+      });
+    });
+  });
+
+  describe('prepareAttachmentPayload', () => {
+    it('prepares direct upload files', () => {
+      const files = [{ blobSignedId: 'signed1' }];
+      expect(helpers.prepareAttachmentPayload(files, true)).toEqual([
+        'signed1',
+      ]);
+    });
+
+    it('prepares regular files', () => {
+      const files = [{ resource: { file: 'file1' } }];
+      expect(helpers.prepareAttachmentPayload(files, false)).toEqual(['file1']);
+    });
+  });
+
+  describe('prepareNewMessagePayload', () => {
+    const baseParams = {
+      targetInbox: { id: 1, sourceId: 'source1' },
+      selectedContact: { id: '2' },
+      message: 'Hello',
+      currentUser: { id: 3 },
+    };
+
+    it('prepares basic message payload', () => {
+      const result = helpers.prepareNewMessagePayload(baseParams);
+      expect(result).toEqual({
+        inboxId: 1,
+        sourceId: 'source1',
+        contactId: 2,
+        message: { content: 'Hello' },
+        assigneeId: 3,
+      });
+    });
+
+    it('includes optional fields when provided', () => {
+      const result = helpers.prepareNewMessagePayload({
+        ...baseParams,
+        subject: 'Test',
+        ccEmails: 'cc@test.com',
+        bccEmails: 'bcc@test.com',
+        attachedFiles: [{ blobSignedId: 'file1' }],
+        directUploadsEnabled: true,
+      });
+
+      expect(result).toMatchObject({
+        mailSubject: 'Test',
+        message: {
+          content: 'Hello',
+          cc_emails: 'cc@test.com',
+          bcc_emails: 'bcc@test.com',
+        },
+        files: ['file1'],
+      });
+    });
+  });
+
+  describe('prepareWhatsAppMessagePayload', () => {
+    it('prepares whatsapp message payload', () => {
+      const params = {
+        targetInbox: { id: 1, sourceId: 'source1' },
+        selectedContact: { id: 2 },
+        message: 'Hello',
+        templateParams: { param1: 'value1' },
+        currentUser: { id: 3 },
+      };
+
+      const result = helpers.prepareWhatsAppMessagePayload(params);
+      expect(result).toEqual({
+        inboxId: 1,
+        sourceId: 'source1',
+        contactId: 2,
+        message: {
+          content: 'Hello',
+          template_params: { param1: 'value1' },
+        },
+        assigneeId: 3,
+      });
+    });
+  });
+
+  describe('generateContactQuery', () => {
+    it('generates correct query structure for contact search', () => {
+      const query = 'test@example.com';
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [query],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(helpers.generateContactQuery({ keys: ['email'], query })).toEqual(
+        expected
+      );
+    });
+
+    it('handles empty query', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [''],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({ keys: ['email'], query: '' })
+      ).toEqual(expected);
+    });
+
+    it('handles mutliple keys', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+            query_operator: 'or',
+          },
+          {
+            attribute_key: 'phone_number',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({
+          keys: ['email', 'phone_number'],
+          query: 'john',
+        })
+      ).toEqual(expected);
+    });
+  });
+
+  describe('API calls', () => {
+    describe('searchContacts', () => {
+      it('searches contacts and returns camelCase results', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phone_number: '+1234567890',
+            created_at: '2023-01-01',
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
+
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phoneNumber: '+1234567890',
+            createdAt: '2023-01-01',
+          },
+        ]);
+
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
+      });
+
+      it('searches contacts and returns only contacts with email or phone number', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phone_number: '+1234567890',
+            created_at: '2023-01-01',
+          },
+          {
+            id: 2,
+            name: 'Jane Doe',
+            email: null,
+            phone_number: null,
+            created_at: '2023-01-01',
+          },
+          {
+            id: 3,
+            name: 'Bob Smith',
+            email: 'bob@example.com',
+            phone_number: null,
+            created_at: '2023-01-01',
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
+
+        // Should only return contacts with either email or phone number
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            email: 'john@example.com',
+            phoneNumber: '+1234567890',
+            createdAt: '2023-01-01',
+          },
+          {
+            id: 3,
+            name: 'Bob Smith',
+            email: 'bob@example.com',
+            phoneNumber: null,
+            createdAt: '2023-01-01',
+          },
+        ]);
+
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
+      });
+
+      it('handles empty search results', async () => {
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: [] },
+        });
+
+        const result = await helpers.searchContacts('nonexistent');
+        expect(result).toEqual([]);
+      });
+
+      it('transforms nested objects to camelCase', async () => {
+        const mockPayload = [
+          {
+            id: 1,
+            name: 'John Doe',
+            phone_number: '+1234567890',
+            contact_inboxes: [
+              {
+                inbox_id: 1,
+                source_id: 'source1',
+                created_at: '2023-01-01',
+              },
+            ],
+            custom_attributes: {
+              custom_field_name: 'value',
+            },
+          },
+        ];
+
+        ContactAPI.filter.mockResolvedValue({
+          data: { payload: mockPayload },
+        });
+
+        const result = await helpers.searchContacts('test');
+
+        expect(result).toEqual([
+          {
+            id: 1,
+            name: 'John Doe',
+            phoneNumber: '+1234567890',
+            contactInboxes: [
+              {
+                inboxId: 1,
+                sourceId: 'source1',
+                createdAt: '2023-01-01',
+              },
+            ],
+            customAttributes: {
+              customFieldName: 'value',
+            },
+          },
+        ]);
+      });
+    });
+
+    describe('createNewContact', () => {
+      it('creates new contact with capitalized name', async () => {
+        const mockContact = { id: 1, name: 'John', email: 'john@example.com' };
+        ContactAPI.create.mockResolvedValue({
+          data: { payload: { contact: mockContact } },
+        });
+
+        const result = await helpers.createNewContact('john@example.com');
+        expect(result).toEqual(mockContact);
+        expect(ContactAPI.create).toHaveBeenCalledWith({
+          name: 'John',
+          email: 'john@example.com',
+        });
+      });
+    });
+
+    describe('fetchContactableInboxes', () => {
+      it('fetches and processes contactable inboxes', async () => {
+        const mockInboxes = [
+          {
+            inbox: { id: 1, name: 'Inbox 1' },
+            sourceId: 'source1',
+          },
+        ];
+        ContactAPI.getContactableInboxes.mockResolvedValue({
+          data: { payload: mockInboxes },
+        });
+
+        const result = await helpers.fetchContactableInboxes(1);
+        expect(result[0]).toEqual({
+          id: 1,
+          name: 'Inbox 1',
+          sourceId: 'source1',
+        });
+        expect(ContactAPI.getContactableInboxes).toHaveBeenCalledWith(1);
+      });
+
+      it('returns empty array when no inboxes found', async () => {
+        ContactAPI.getContactableInboxes.mockResolvedValue({
+          data: { payload: [] },
+        });
+
+        const result = await helpers.fetchContactableInboxes(1);
+        expect(result).toEqual([]);
+      });
+    });
+  });
+});
+
+describe('compareInboxes', () => {
+  it('should sort inboxes by channel priority', () => {
+    const inboxes = [
+      { channelType: 'Channel::Api', name: 'API Inbox' },
+      { channelType: 'Channel::Email', name: 'Email Inbox' },
+      { channelType: 'Channel::WebWidget', name: 'Widget' },
+      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted[0].channelType).toBe('Channel::Email');
+    expect(sorted[1].channelType).toBe('Channel::Whatsapp');
+    expect(sorted[2].channelType).toBe('Channel::WebWidget');
+    expect(sorted[3].channelType).toBe('Channel::Api');
+  });
+
+  it('should sort SMS channels correctly', () => {
+    const inboxes = [
+      { channelType: 'Channel::TwilioSms', name: 'Twilio' },
+      { channelType: 'Channel::Sms', name: 'Regular SMS' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted[0].channelType).toBe('Channel::Sms');
+    expect(sorted[1].channelType).toBe('Channel::TwilioSms');
+  });
+
+  it('should sort by name when channel types are same', () => {
+    const inboxes = [
+      { channelType: 'Channel::Email', name: 'Support' },
+      { channelType: 'Channel::Email', name: 'Marketing' },
+      { channelType: 'Channel::Email', name: 'Billing' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted.map(inbox => inbox.name)).toEqual([
+      'Billing',
+      'Marketing',
+      'Support',
+    ]);
+  });
+
+  it('should put channels without priority at the end', () => {
+    const inboxes = [
+      { channelType: 'Channel::Unknown', name: 'Unknown' },
+      { channelType: 'Channel::Email', name: 'Email' },
+      { channelType: 'Channel::LineChannel', name: 'Line' },
+      { channelType: 'Channel::Whatsapp', name: 'WhatsApp' },
+    ];
+
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+
+    expect(sorted.map(i => i.channelType)).toEqual([
+      'Channel::Email',
+      'Channel::Whatsapp',
+
+      'Channel::LineChannel',
+      'Channel::Unknown',
+    ]);
+  });
+
+  it('should handle empty array', () => {
+    const inboxes = [];
+    const sorted = [...inboxes].sort(helpers.compareInboxes);
+    expect(sorted).toEqual([]);
+  });
+});
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index 7fcc09dc7..fb23b3cff 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -132,7 +132,7 @@ const iconStyles = computed(() => ({
 }));
 
 const initialsStyles = computed(() => ({
-  fontSize: `${props.size / 2}px`,
+  fontSize: `${Math.min(props.size / 2.5, 24)}px`,
 }));
 
 const invalidateCurrentImage = () => {
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
index e87728d1e..bb848c62b 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
@@ -8,14 +8,6 @@ defineProps({
   items: {
     type: Array,
     required: true,
-    validator: value => {
-      return value.every(
-        item =>
-          typeof item.label === 'string' &&
-          (item.link === undefined || typeof item.link === 'string') &&
-          (item.count === undefined || typeof item.count === 'number')
-      );
-    },
   },
 });
 
diff --git a/app/javascript/dashboard/components-next/button/Button.story.vue b/app/javascript/dashboard/components-next/button/Button.story.vue
index fc0904156..404712b34 100644
--- a/app/javascript/dashboard/components-next/button/Button.story.vue
+++ b/app/javascript/dashboard/components-next/button/Button.story.vue
@@ -114,8 +114,13 @@ const SIZES = ['default', 'sm', 'lg'];
     <!-- Ghost & Link Variants -->
     <Variant title="Ghost & Link Variants">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Ghost Button" variant="ghost" />
-        <Button label="Ghost with Icon" variant="ghost" icon="i-lucide-plus" />
+        <Button label="Ghost Button" variant="ghost" color="slate" />
+        <Button
+          label="Ghost with Icon"
+          variant="ghost"
+          color="slate"
+          icon="i-lucide-plus"
+        />
         <Button label="Link Button" variant="link" />
         <Button label="Link with Icon" variant="link" icon="i-lucide-plus" />
       </div>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index b174ca375..fecdbaf9b 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -88,6 +88,7 @@ const STYLE_CONFIG = {
       faded:
         'bg-n-brand/10 text-n-blue-text hover:bg-n-brand/20 outline-transparent',
       outline: 'text-n-blue-text outline-n-blue-border',
+      ghost: 'text-n-blue-text hover:bg-n-alpha-2 outline-transparent',
       link: 'text-n-blue-text hover:underline outline-transparent',
     },
     ruby: {
@@ -95,6 +96,7 @@ const STYLE_CONFIG = {
       faded:
         'bg-n-ruby-9/10 text-n-ruby-11 hover:bg-n-ruby-9/20 outline-transparent',
       outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-8',
+      ghost: 'text-n-ruby-11 hover:bg-n-alpha-2 outline-transparent',
       link: 'text-n-ruby-9 hover:underline outline-transparent',
     },
     amber: {
@@ -103,6 +105,7 @@ const STYLE_CONFIG = {
         'bg-n-amber-9/10 text-n-slate-12 hover:bg-n-amber-9/20 outline-transparent',
       outline: 'text-n-amber-11 hover:bg-n-amber-9/10 outline-n-amber-9',
       link: 'text-n-amber-9 hover:underline outline-transparent',
+      ghost: 'text-n-amber-9 hover:bg-n-alpha-2 outline-transparent',
     },
     slate: {
       solid:
@@ -111,6 +114,7 @@ const STYLE_CONFIG = {
         'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent',
       outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10',
       link: 'text-n-slate-11 hover:text-n-slate-12 hover:underline outline-transparent',
+      ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
     },
     teal: {
       solid: 'bg-n-teal-9 text-white hover:bg-n-teal-10 outline-transparent',
@@ -118,6 +122,7 @@ const STYLE_CONFIG = {
         'bg-n-teal-9/10 text-n-slate-12 hover:bg-n-teal-9/20 outline-transparent',
       outline: 'text-n-teal-11 hover:bg-n-teal-9/10 outline-n-teal-9',
       link: 'text-n-teal-9 hover:underline outline-transparent',
+      ghost: 'text-n-teal-9 hover:bg-n-alpha-2 outline-transparent',
     },
   },
   sizes: {
@@ -151,7 +156,7 @@ const STYLE_CONFIG = {
 
 const variantClasses = computed(() => {
   const variantMap = {
-    ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
+    ghost: `${STYLE_CONFIG.colors[computedColor.value].ghost}`,
     link: `${STYLE_CONFIG.colors[computedColor.value].link} p-0 font-medium underline-offset-4`,
     outline: STYLE_CONFIG.colors[computedColor.value].outline,
     faded: STYLE_CONFIG.colors[computedColor.value].faded,
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
index a39657624..e1cd8a086 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
@@ -29,7 +29,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:searchValue', 'select', 'search']);
+const emit = defineEmits(['select', 'search']);
 
 const { t } = useI18n();
 
diff --git a/app/javascript/dashboard/components-next/copilot/Copilot.story.vue b/app/javascript/dashboard/components-next/copilot/Copilot.story.vue
new file mode 100644
index 000000000..ece5ec31f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.story.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { ref } from 'vue';
+import Copilot from './Copilot.vue';
+
+const supportAgent = {
+  available_name: 'Pranav Raj',
+  avatar_url:
+    'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBd3FodGc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d218a325af0ef45061eefd352f8efb9ac84275e8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/1707423736896.jpeg',
+};
+
+const messages = ref([
+  {
+    id: 1,
+    role: 'user',
+    content: 'Hi there! How can I help you today?',
+  },
+  {
+    id: 2,
+    role: 'assistant',
+    content:
+      "Hello! I'm the AI assistant. I'll be helping the support team today.",
+  },
+]);
+
+const isCaptainTyping = ref(false);
+
+const sendMessage = message => {
+  // Add user message
+  messages.value.push({
+    id: messages.value.length + 1,
+    role: 'user',
+    content: message,
+  });
+
+  // Simulate AI response
+  isCaptainTyping.value = true;
+  setTimeout(() => {
+    isCaptainTyping.value = false;
+    messages.value.push({
+      id: messages.value.length + 1,
+      role: 'assistant',
+      content: 'This is a simulated AI response.',
+    });
+  }, 2000);
+};
+</script>
+
+<template>
+  <Story
+    title="Captain/Copilot"
+    :layout="{ type: 'grid', width: '400px', height: '800px' }"
+  >
+    <Copilot
+      :support-agent="supportAgent"
+      :messages="messages"
+      :is-captain-typing="isCaptainTyping"
+      @send-message="sendMessage"
+    />
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/Copilot.vue b/app/javascript/dashboard/components-next/copilot/Copilot.vue
new file mode 100644
index 000000000..2fcb15bcc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/Copilot.vue
@@ -0,0 +1,73 @@
+<script setup>
+import CopilotInput from './CopilotInput.vue';
+import CopilotLoader from './CopilotLoader.vue';
+import CopilotAgentMessage from './CopilotAgentMessage.vue';
+import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
+import { nextTick, ref, watch } from 'vue';
+
+const props = defineProps({
+  supportAgent: {
+    type: Object,
+    default: () => ({}),
+  },
+  messages: {
+    type: Array,
+    default: () => [],
+  },
+  isCaptainTyping: {
+    type: Boolean,
+    default: false,
+  },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage']);
+
+const COPILOT_USER_ROLES = ['assistant', 'system'];
+
+const sendMessage = message => {
+  emit('sendMessage', message);
+};
+const chatContainer = ref(null);
+
+const scrollToBottom = async () => {
+  await nextTick();
+  if (chatContainer.value) {
+    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+  }
+};
+
+watch(
+  [() => props.messages, () => props.isCaptainTyping],
+  () => {
+    scrollToBottom();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col ]mx-auto h-full text-sm leading-6 tracking-tight">
+    <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
+      <template v-for="message in messages" :key="message.id">
+        <CopilotAgentMessage
+          v-if="message.role === 'user'"
+          :support-agent="supportAgent"
+          :message="message"
+        />
+        <CopilotAssistantMessage
+          v-else-if="COPILOT_USER_ROLES.includes(message.role)"
+          :message="message"
+          :conversation-inbox-type="conversationInboxType"
+        />
+      </template>
+
+      <CopilotLoader v-if="isCaptainTyping" />
+    </div>
+
+    <CopilotInput class="mx-3 mt-px mb-4" @send="sendMessage" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue b/app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue
new file mode 100644
index 000000000..ef8c2faf4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotAgentMessage.vue
@@ -0,0 +1,31 @@
+<script setup>
+import Avatar from '../avatar/Avatar.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  supportAgent: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-row gap-2">
+    <Avatar
+      :name="supportAgent.available_name"
+      :src="supportAgent.avatar_url"
+      :size="24"
+      rounded-full
+    />
+    <div class="space-y-1 text-n-slate-12">
+      <div class="font-medium">{{ $t('CAPTAIN.COPILOT.YOU') }}</div>
+      <div class="break-words">
+        {{ message.content }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue b/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
new file mode 100644
index 000000000..dd9d1defd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { computed } from 'vue';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Avatar from '../avatar/Avatar.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
+});
+
+const insertIntoRichEditor = computed(() => {
+  return [INBOX_TYPES.WEB, INBOX_TYPES.EMAIL].includes(
+    props.conversationInboxType
+  );
+});
+
+const useCopilotResponse = () => {
+  if (insertIntoRichEditor.value) {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, props.message?.content);
+  } else {
+    emitter.emit(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, props.message?.content);
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-row gap-2">
+    <Avatar
+      name="Captain Copilot"
+      icon-name="i-woot-captain"
+      :size="24"
+      rounded-full
+    />
+    <div class="flex flex-col gap-1 text-n-slate-12">
+      <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
+      <div class="break-words">
+        {{ message.content }}
+      </div>
+      <div class="flex flex-row mt-1">
+        <Button
+          :label="$t('CAPTAIN.COPILOT.USE')"
+          faded
+          sm
+          slate
+          @click="useCopilotResponse"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotInput.vue b/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
new file mode 100644
index 000000000..bf14945b5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotInput.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from 'vue';
+
+const emit = defineEmits(['send']);
+const message = ref('');
+
+const sendMessage = () => {
+  if (message.value.trim()) {
+    emit('send', message.value);
+    message.value = '';
+  }
+};
+</script>
+
+<template>
+  <form
+    class="border border-n-weak bg-n-alpha-3 rounded-lg h-12 flex"
+    @submit.prevent="sendMessage"
+  >
+    <input
+      v-model="message"
+      type="text"
+      :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
+      class="w-full reset-base bg-transparent px-4 py-3 text-n-slate-11 text-sm"
+      @keyup.enter="sendMessage"
+    />
+    <button
+      class="h-auto w-12 flex items-center justify-center text-n-slate-11"
+      type="submit"
+    >
+      <i class="i-ph-arrow-up" />
+    </button>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotLoader.story.vue b/app/javascript/dashboard/components-next/copilot/CopilotLoader.story.vue
new file mode 100644
index 000000000..3a5de84c7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotLoader.story.vue
@@ -0,0 +1,12 @@
+<script setup>
+import CopilotLoader from './CopilotLoader.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/CopilotLoader"
+    :layout="{ type: 'grid', width: '400px', height: '800px' }"
+  >
+    <CopilotLoader />
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotLoader.vue b/app/javascript/dashboard/components-next/copilot/CopilotLoader.vue
new file mode 100644
index 000000000..723439f33
--- /dev/null
+++ b/app/javascript/dashboard/components-next/copilot/CopilotLoader.vue
@@ -0,0 +1,22 @@
+<script>
+// Copilot Loader Component
+</script>
+
+<template>
+  <div class="flex justify-start">
+    <div class="flex items-center space-x-2">
+      <span class="text-n-iris-11 font-medium">
+        {{ $t('CAPTAIN.COPILOT.LOADER') }}
+      </span>
+      <div class="flex space-x-1">
+        <div
+          class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce [animation-delay:-0.3s]"
+        />
+        <div
+          class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce [animation-delay:-0.15s]"
+        />
+        <div class="w-2 h-2 rounded-full bg-n-iris-9 animate-bounce" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index 0b24b597d..95b368dae 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -25,6 +25,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['action']);
@@ -71,8 +75,8 @@ onMounted(() => {
       />
     </div>
     <button
-      v-for="item in filteredMenuItems"
-      :key="item.action"
+      v-for="(item, index) in filteredMenuItems"
+      :key="index"
       class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
       :class="{
         'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
@@ -81,7 +85,6 @@ onMounted(() => {
       }"
       :disabled="item.disabled"
       @click="handleAction(item)"
-      @keydown.enter="handleAction(item)"
     >
       <slot name="thumbnail" :item="item">
         <Avatar
@@ -92,7 +95,7 @@ onMounted(() => {
           rounded-full
         />
       </slot>
-      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
+      <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0 size-3.5" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
       <span v-if="item.label" class="min-w-0 text-sm truncate">{{
         item.label
@@ -102,7 +105,11 @@ onMounted(() => {
       v-if="filteredMenuItems.length === 0"
       class="text-sm text-n-slate-11 px-2 py-1.5"
     >
-      {{ t('DROPDOWN_MENU.EMPTY_STATE') }}
+      {{
+        isSearching
+          ? t('DROPDOWN_MENU.SEARCHING')
+          : t('DROPDOWN_MENU.EMPTY_STATE')
+      }}
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
index c0818283e..085aa0d28 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
@@ -14,22 +14,22 @@ const menuItems = ref([
   {
     label: 'Contact Support',
     icon: 'i-lucide-life-buoy',
-    click: () => window.alert('Contact Support'),
+    click: () => console.log('Contact Support'),
   },
   {
     label: 'Keyboard Shortcuts',
     icon: 'i-lucide-keyboard',
-    click: () => window.alert('Keyboard Shortcuts'),
+    click: () => console.log('Keyboard Shortcuts'),
   },
   {
     label: 'Profile Settings',
     icon: 'i-lucide-user-pen',
-    click: () => window.alert('Profile Settings'),
+    click: () => console.log('Profile Settings'),
   },
   {
     label: 'Change Appearance',
     icon: 'i-lucide-swatch-book',
-    click: () => window.alert('Change Appearance'),
+    click: () => console.log('Change Appearance'),
   },
   {
     label: 'Open SuperAdmin',
@@ -40,7 +40,7 @@ const menuItems = ref([
   {
     label: 'Log Out',
     icon: 'i-lucide-log-out',
-    click: () => window.alert('Log Out'),
+    click: () => console.log('Log Out'),
   },
 ]);
 </script>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
index 7616c16d8..246eba5aa 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
@@ -1,7 +1,33 @@
+<script setup>
+import { computed } from 'vue';
+const { strong } = defineProps({
+  // Use strong prop when this dropdown is stacked inside another dropdown
+  // Chrome has issues with stacked backdrop-blur, so we need an extra blur layer when stacked
+  // Also, stacked dropdowns should have a strong border
+  strong: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const borderClass = computed(() => {
+  return strong ? 'border-n-strong' : 'border-n-weak';
+});
+
+const beforeClass = computed(() => {
+  if (!strong) return '';
+
+  // Add extra blur layer only when strong prop is true, as a hack for Chrome's stacked backdrop-blur limitation
+  // https://issues.chromium.org/issues/40835530
+  return "before:content-['\x00A0'] before:absolute before:bottom-0 before:left-0 before:w-full before:h-full before:backdrop-contrast-70 before:backdrop-blur-sm before:z-0 [&>*]:relative";
+});
+</script>
+
 <template>
   <div class="absolute">
     <ul
-      class="text-sm bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak rounded-xl shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base"
+      class="text-sm bg-n-alpha-3 backdrop-blur-[100px] border rounded-xl shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base relative"
+      :class="[borderClass, beforeClass]"
     >
       <slot />
     </ul>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
index ee81e4b98..373bb526f 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
 import { provideDropdownContext } from './provider.js';
 
 const emit = defineEmits(['close']);
@@ -20,9 +21,9 @@ provideDropdownContext({
 </script>
 
 <template>
-  <div class="relative z-20 space-y-2">
+  <div v-on-click-outside="closeMenu" class="relative space-y-2">
     <slot name="trigger" :is-open :toggle="() => toggle()" />
-    <div v-if="isOpen" v-on-clickaway="closeMenu" class="absolute">
+    <div v-if="isOpen" class="absolute">
       <slot />
     </div>
   </div>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
index 48b746f2a..9db3a09d4 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
@@ -6,7 +6,8 @@ import { useDropdownContext } from './provider.js';
 const props = defineProps({
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
-  link: { type: String, default: '' },
+  link: { type: [String, Object], default: '' },
+  nativeLink: { type: Boolean, default: false },
   click: { type: Function, default: null },
   preserveOpen: { type: Boolean, default: false },
 });
@@ -18,7 +19,13 @@ defineOptions({
 const { closeMenu } = useDropdownContext();
 
 const componentIs = computed(() => {
-  if (props.link) return 'router-link';
+  if (props.link) {
+    if (props.nativeLink && typeof props.link === 'string') {
+      return 'a';
+    }
+
+    return 'router-link';
+  }
   if (props.click) return 'button';
 
   return 'div';
@@ -27,8 +34,8 @@ const componentIs = computed(() => {
 const triggerClick = () => {
   if (props.click) {
     props.click();
-    if (!props.preserveOpen) closeMenu();
   }
+  if (!props.preserveOpen) closeMenu();
 };
 </script>
 
@@ -41,7 +48,8 @@ const triggerClick = () => {
       :class="{
         'hover:bg-n-alpha-2 rounded-lg w-full gap-3': !$slots.default,
       }"
-      :href="props.link || null"
+      :href="componentIs === 'a' ? props.link : null"
+      :to="componentIs === 'router-link' ? props.link : null"
       @click="triggerClick"
     >
       <slot>
diff --git a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue
new file mode 100644
index 000000000..0c79b97da
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.story.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { sampleActiveFilters } from './fixtures/filterTypes';
+import ActiveFilterPreview from './ActiveFilterPreview.vue';
+
+const appliedFilters = ref([...sampleActiveFilters]);
+const maxVisibleFilters = ref(2);
+
+const moreFiltersLabel = computed(
+  () => `${appliedFilters.value.length - maxVisibleFilters.value} more filters`
+);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/ActiveFilterPreview"
+    :layout="{ type: 'grid', width: '960px' }"
+  >
+    <Variant title="Default (2 visible filters)">
+      <ActiveFilterPreview
+        :applied-filters="appliedFilters.slice(0, 2)"
+        :max-visible-filters="2"
+        clear-button-label="Clear Filters"
+        more-filters-label=""
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="Multiple Filters (with more indicator)">
+      <ActiveFilterPreview
+        :applied-filters="appliedFilters"
+        :max-visible-filters="maxVisibleFilters"
+        clear-button-label="Clear Filters"
+        :more-filters-label="moreFiltersLabel"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="Show All Filters">
+      <ActiveFilterPreview
+        :applied-filters="appliedFilters"
+        :max-visible-filters="10"
+        clear-button-label="Clear Filters"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="Single Filter">
+      <ActiveFilterPreview
+        :applied-filters="[appliedFilters[0]]"
+        :max-visible-filters="maxVisibleFilters"
+        clear-button-label="Clear Filters"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+
+    <Variant title="With Object Values">
+      <ActiveFilterPreview
+        :applied-filters="[appliedFilters[6]]"
+        :max-visible-filters="maxVisibleFilters"
+        clear-button-label="Clear Filters"
+        @clear-filters="() => {}"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
new file mode 100644
index 000000000..959d95ccc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { replaceUnderscoreWithSpace } from './helper/filterHelper.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  appliedFilters: { type: Array, default: () => [] },
+  maxVisibleFilters: { type: Number, default: 2 },
+  clearButtonLabel: { type: String, default: '' },
+  moreFiltersLabel: { type: String, default: '' },
+  showClearButton: { type: Boolean, default: true },
+});
+
+const emit = defineEmits(['clearFilters', 'openFilter']);
+
+const shouldCapitalizeFirstLetter = key => {
+  const lowercaseKeys = ['email'];
+  return !lowercaseKeys.includes(key);
+};
+
+const formatOperatorLabel = operator => {
+  const operators = {
+    equal_to: 'is',
+    not_equal_to: 'is not',
+    contains: 'contains',
+    does_not_contain: 'does not contain',
+    is_present: 'is present',
+    is_not_present: 'is not present',
+    is_greater_than: 'is greater than',
+    is_less_than: 'is less than',
+    days_before: 'days before',
+  };
+  return operators[operator] || replaceUnderscoreWithSpace(operator);
+};
+
+const formatFilterValue = value => {
+  if (!value) return '';
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+  if (typeof value === 'object' && value.name) {
+    return value.name;
+  }
+  return value;
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center w-full gap-2 mx-auto">
+    <template v-for="(filter, index) in appliedFilters" :key="index">
+      <div
+        v-if="index < maxVisibleFilters"
+        class="inline-flex items-center gap-2 h-7"
+      >
+        <div
+          class="flex items-center h-full min-w-0 gap-1 px-2 py-1 text-xs border rounded-lg hover:bg-n-solid-2 max-w-72 border-n-weak hover:cursor-pointer"
+          @click="emit('openFilter')"
+        >
+          <span
+            class="lowercase whitespace-nowrap first-letter:capitalize text-n-slate-12"
+          >
+            {{ replaceUnderscoreWithSpace(filter.attributeKey) }}
+          </span>
+          <span class="px-1 text-xs text-n-slate-10 whitespace-nowrap">
+            {{ formatOperatorLabel(filter.filterOperator) }}
+          </span>
+          <span
+            v-if="filter.values"
+            class="lowercase truncate text-n-slate-12"
+            :class="{
+              'first-letter:capitalize': shouldCapitalizeFirstLetter(
+                filter.attributeKey
+              ),
+            }"
+          >
+            {{ formatFilterValue(filter.values) }}
+          </span>
+        </div>
+        <template
+          v-if="
+            index < maxVisibleFilters - 1 && index < appliedFilters.length - 1
+          "
+        >
+          <span
+            class="content-center h-full px-1 text-xs font-medium uppercase rounded-lg text-n-slate-10"
+          >
+            {{ filter.queryOperator }}
+          </span>
+        </template>
+      </div>
+    </template>
+    <div
+      v-if="appliedFilters.length > maxVisibleFilters"
+      class="inline-flex items-center content-center px-1 text-xs rounded-lg text-n-slate-10 hover:text-n-slate-11 h-7 hover:cursor-pointer"
+      @click="emit('openFilter')"
+    >
+      {{ moreFiltersLabel }}
+    </div>
+    <div v-if="showClearButton" class="w-px h-3 rounded-lg bg-n-strong" />
+    <Button
+      v-if="showClearButton"
+      :label="clearButtonLabel"
+      size="xs"
+      class="!px-1"
+      variant="ghost"
+      @click="emit('clearFilters')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
new file mode 100644
index 000000000..0a59a902f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.story.vue
@@ -0,0 +1,68 @@
+<script setup>
+import { ref, useTemplateRef } from 'vue';
+import ConditionRow from './ConditionRow.vue';
+import Button from 'next/button/Button.vue';
+import { filterTypes } from './fixtures/filterTypes.js';
+
+const DEFAULT_FILTER = {
+  attributeKey: 'status',
+  filterOperator: 'equal_to',
+  values: [],
+  queryOperator: 'and',
+};
+
+const filters = ref([{ ...DEFAULT_FILTER }]);
+const conditionsRef = useTemplateRef('conditionsRef');
+
+const removeFilter = index => {
+  filters.value.splice(index, 1);
+};
+
+const showQueryOperator = true;
+
+const addFilter = () => {
+  filters.value.push({ ...DEFAULT_FILTER });
+};
+
+const saveFilter = () => {
+  console.log(conditionsRef.value.every(condition => condition.validate()));
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/ConditionRow"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <div class="min-h-[400px] p-2 space-y-2">
+      <template v-for="(filter, index) in filters" :key="`filter-${index}`">
+        <ConditionRow
+          v-if="index === 0"
+          ref="conditionsRef"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          :show-query-operator="false"
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+
+        <ConditionRow
+          v-else
+          ref="conditionsRef"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          v-model:query-operator="filters[index - 1].queryOperator"
+          :show-query-operator
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+      </template>
+      <div class="flex gap-3 mt-2">
+        <Button sm ghost label="Add Filter" @click="addFilter" />
+        <Button sm label="Save Filter" @click="saveFilter" />
+      </div>
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
new file mode 100644
index 000000000..e2a2bfb45
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -0,0 +1,201 @@
+<script setup>
+import { computed, defineModel, h, watch, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'next/button/Button.vue';
+import FilterSelect from './inputs/FilterSelect.vue';
+import MultiSelect from './inputs/MultiSelect.vue';
+import SingleSelect from './inputs/SingleSelect.vue';
+
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { validateSingleFilter } from 'dashboard/helper/validations.js';
+
+// filterTypes: import('vue').ComputedRef<FilterType[]>
+const { filterTypes } = defineProps({
+  showQueryOperator: { type: Boolean, default: false },
+  filterTypes: { type: Array, required: true },
+});
+
+const emit = defineEmits(['remove']);
+const { t } = useI18n();
+const showErrors = ref(false);
+
+const attributeKey = defineModel('attributeKey', {
+  type: String,
+  required: true,
+});
+
+const values = defineModel('values', {
+  type: [String, Number, Array, Object],
+  required: true,
+});
+
+const filterOperator = defineModel('filterOperator', {
+  type: String,
+  required: true,
+});
+
+const queryOperator = defineModel('queryOperator', {
+  type: String,
+  required: false,
+  default: undefined,
+  validator: value => ['and', 'or'].includes(value),
+});
+
+const getFilterFromFilterTypes = key =>
+  filterTypes.find(filterObj => filterObj.attributeKey === key);
+
+const currentFilter = computed(() =>
+  getFilterFromFilterTypes(attributeKey.value)
+);
+
+const getOperator = (filter, selectedOperator) => {
+  const operatorFromOptions = filter.filterOperators.find(
+    operator => operator.value === selectedOperator
+  );
+
+  if (!operatorFromOptions) {
+    return filter.filterOperators[0];
+  }
+
+  return operatorFromOptions;
+};
+
+const currentOperator = computed(() =>
+  getOperator(currentFilter.value, filterOperator.value)
+);
+
+const getInputType = (operator, filter) =>
+  operator.inputOverride ?? filter.inputType;
+
+const inputType = computed(() =>
+  getInputType(currentOperator.value, currentFilter.value)
+);
+
+const queryOperatorOptions = computed(() => {
+  return [
+    {
+      label: t(`FILTER.QUERY_DROPDOWN_LABELS.AND`),
+      value: 'and',
+      icon: h('span', { class: 'i-lucide-ampersands !text-n-blue-text' }),
+    },
+    {
+      label: t(`FILTER.QUERY_DROPDOWN_LABELS.OR`),
+      value: 'or',
+      icon: h('span', { class: 'i-woot-logic-or !text-n-blue-text' }),
+    },
+  ];
+});
+
+const booleanOptions = computed(() => [
+  { id: true, name: t('FILTER.ATTRIBUTE_LABELS.TRUE') },
+  { id: false, name: t('FILTER.ATTRIBUTE_LABELS.FALSE') },
+]);
+
+const validationError = computed(() => {
+  // TOOD: Migrate validateSingleFilter to use camelcase and then remove useSnakeCase here too
+  return validateSingleFilter(
+    useSnakeCase({
+      attributeKey: attributeKey.value,
+      filterOperator: filterOperator.value,
+      values: values.value,
+    })
+  );
+});
+
+const resetModelOnAttributeKeyChange = newAttributeKey => {
+  /**
+   * Resets the filter values and operator when the attribute key changes. This ensures that
+   * the values and operator remain compatible with the new attribute type. For example,
+   * switching from a text field to a multi-select should reset the value from '' (empty string)
+   * to an empty array.
+   */
+  const filter = getFilterFromFilterTypes(newAttributeKey);
+  const newOperator = getOperator(filter, filterOperator.value);
+  const newInputType = getInputType(newOperator, filter);
+  if (newInputType === 'multiSelect') {
+    values.value = [];
+  } else if (['searchSelect', 'booleanSelect'].includes(newInputType)) {
+    values.value = {};
+  } else {
+    values.value = '';
+  }
+  filterOperator.value = newOperator.value;
+};
+
+watch([attributeKey, values, filterOperator], () => {
+  showErrors.value = false;
+});
+
+const validate = () => {
+  showErrors.value = true;
+  return !validationError.value;
+};
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <li class="list-none">
+    <div
+      class="flex items-center gap-2 rounded-md"
+      :class="{
+        'animate-wiggle': showErrors && validationError,
+      }"
+    >
+      <FilterSelect
+        v-if="showQueryOperator"
+        v-model="queryOperator"
+        variant="faded"
+        hide-icon
+        class="text-sm"
+        :options="queryOperatorOptions"
+      />
+      <FilterSelect
+        v-model="attributeKey"
+        variant="faded"
+        :options="filterTypes"
+        @update:model-value="resetModelOnAttributeKeyChange"
+      />
+      <FilterSelect
+        v-model="filterOperator"
+        variant="ghost"
+        :options="currentFilter.filterOperators"
+      />
+      <template v-if="currentOperator.hasInput">
+        <MultiSelect
+          v-if="inputType === 'multiSelect'"
+          v-model="values"
+          :options="currentFilter.options"
+        />
+        <SingleSelect
+          v-else-if="inputType === 'searchSelect'"
+          v-model="values"
+          :options="currentFilter.options"
+        />
+        <SingleSelect
+          v-else-if="inputType === 'booleanSelect'"
+          v-model="values"
+          disable-search
+          :options="booleanOptions"
+        />
+        <input
+          v-else
+          v-model="values"
+          :type="inputType === 'date' ? 'date' : 'text'"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base"
+          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
+        />
+      </template>
+      <Button
+        sm
+        solid
+        slate
+        icon="i-lucide-trash"
+        @click.stop="emit('remove')"
+      />
+    </div>
+    <span v-if="showErrors && validationError" class="text-sm text-n-ruby-11">
+      {{ t(`FILTER.ERRORS.${validationError}`) }}
+    </span>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/ContactsFilter.vue b/app/javascript/dashboard/components-next/filter/ContactsFilter.vue
new file mode 100644
index 000000000..cff2e71e3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ContactsFilter.vue
@@ -0,0 +1,174 @@
+<script setup>
+import { useTemplateRef, onBeforeUnmount, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useTrack } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import { vOnClickOutside } from '@vueuse/components';
+import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { useContactFilterContext } from './contactProvider.js';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+
+import Button from 'next/button/Button.vue';
+import ConditionRow from './ConditionRow.vue';
+
+const props = defineProps({
+  isSegmentView: { type: Boolean, default: false },
+  segmentName: { type: String, default: '' },
+});
+
+const emit = defineEmits([
+  'applyFilter',
+  'updateSegment',
+  'close',
+  'clearFilters',
+]);
+const { filterTypes } = useContactFilterContext();
+
+const filters = defineModel({
+  type: Array,
+  default: [],
+});
+const segmentNameLocal = ref(props.segmentName);
+
+const DEFAULT_FILTER = {
+  attributeKey: 'name',
+  filterOperator: 'equal_to',
+  values: '',
+  queryOperator: 'and',
+  attributeModel: 'standard',
+};
+
+const { t } = useI18n();
+const store = useStore();
+
+const resetFilter = () => {
+  emit('clearFilters');
+  filters.value = [{ ...DEFAULT_FILTER }];
+};
+
+const removeFilter = index => {
+  if (filters.value.length === 1) {
+    resetFilter();
+  } else {
+    filters.value.splice(index, 1);
+  }
+};
+
+const addFilter = () => {
+  filters.value.push({ ...DEFAULT_FILTER });
+};
+
+const conditionsRef = useTemplateRef('conditionsRef');
+
+const isConditionsValid = () => {
+  return conditionsRef.value.every(condition => condition.validate());
+};
+
+const updateSavedSegment = () => {
+  if (isConditionsValid()) {
+    emit('updateSegment', filters.value, segmentNameLocal.value);
+  }
+};
+
+function validateAndSubmit() {
+  if (!isConditionsValid()) return;
+
+  store.dispatch(
+    'contacts/setContactFilters',
+    useSnakeCase(JSON.parse(JSON.stringify(filters.value)))
+  );
+  emit('applyFilter', filters.value);
+  useTrack(CONTACTS_EVENTS.APPLY_FILTER, {
+    appliedFilters: filters.value.map(filter => ({
+      key: filter.attributeKey,
+      operator: filter.filterOperator,
+      queryOperator: filter.queryOperator,
+    })),
+  });
+}
+
+const filterModalHeaderTitle = computed(() => {
+  return !props.isSegmentView
+    ? t('CONTACTS_LAYOUT.FILTER.TITLE')
+    : t('CONTACTS_LAYOUT.FILTER.EDIT_SEGMENT');
+});
+
+onBeforeUnmount(() => emit('close'));
+const outsideClickHandler = [
+  () => emit('close'),
+  { ignore: ['#toggleContactsFilterButton'] },
+];
+</script>
+
+<template>
+  <div
+    v-on-click-outside="outsideClickHandler"
+    class="z-40 max-w-3xl lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+  >
+    <h3 class="text-base font-medium leading-6 text-n-slate-12">
+      {{ filterModalHeaderTitle }}
+    </h3>
+    <div v-if="props.isSegmentView">
+      <label class="pb-6 border-b border-n-weak">
+        <div class="mb-2 text-sm text-n-slate-11">
+          {{ $t('CONTACTS_LAYOUT.FILTER.SEGMENT.LABEL') }}
+        </div>
+        <input
+          v-model="segmentNameLocal"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :placeholder="t('CONTACTS_LAYOUT.FILTER.SEGMENT.INPUT_PLACEHOLDER')"
+        />
+      </label>
+    </div>
+    <ul class="grid gap-4 list-none">
+      <template v-for="(filter, index) in filters" :key="filter.id">
+        <ConditionRow
+          v-if="index === 0"
+          ref="conditionsRef"
+          :key="`filter-${filter.attributeKey}-0`"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          :filter-types="filterTypes"
+          :show-query-operator="false"
+          @remove="removeFilter(index)"
+        />
+        <ConditionRow
+          v-else
+          :key="`filter-${filter.attributeKey}-${index}`"
+          ref="conditionsRef"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:query-operator="filters[index - 1].queryOperator"
+          v-model:values="filter.values"
+          show-query-operator
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+      </template>
+    </ul>
+    <div class="flex justify-between gap-2">
+      <Button sm ghost blue @click="addFilter">
+        {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.ADD_FILTER') }}
+      </Button>
+      <div class="flex gap-2">
+        <Button sm faded slate @click="resetFilter">
+          {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.CLEAR_FILTERS') }}
+        </Button>
+        <Button
+          v-if="isSegmentView"
+          sm
+          solid
+          blue
+          :disabled="!segmentNameLocal"
+          @click="updateSavedSegment"
+        >
+          {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.UPDATE_SEGMENT') }}
+        </Button>
+        <Button v-else sm solid blue @click="validateAndSubmit">
+          {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.APPLY_FILTERS') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/ConversationFilter.vue b/app/javascript/dashboard/components-next/filter/ConversationFilter.vue
new file mode 100644
index 000000000..d9ccb2c88
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/ConversationFilter.vue
@@ -0,0 +1,175 @@
+<script setup>
+import { useTemplateRef, onBeforeUnmount, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useTrack } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import { vOnClickOutside } from '@vueuse/components';
+import { CONVERSATION_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { useConversationFilterContext } from './provider.js';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+
+import Button from 'next/button/Button.vue';
+import ConditionRow from './ConditionRow.vue';
+
+const props = defineProps({
+  isFolderView: {
+    type: Boolean,
+    default: false,
+  },
+  folderName: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['applyFilter', 'updateFolder', 'close']);
+const { filterTypes } = useConversationFilterContext();
+
+const filters = defineModel({
+  type: Array,
+  default: [],
+});
+const folderNameLocal = ref(props.folderName);
+
+const DEFAULT_FILTER = {
+  attributeKey: 'status',
+  filterOperator: 'equal_to',
+  values: [],
+  queryOperator: 'and',
+};
+
+const { t } = useI18n();
+const store = useStore();
+
+const resetFilter = () => {
+  filters.value = [{ ...DEFAULT_FILTER }];
+};
+
+const removeFilter = index => {
+  if (filters.value.length === 1) {
+    resetFilter();
+  } else {
+    filters.value.splice(index, 1);
+  }
+};
+
+const addFilter = () => {
+  filters.value.push({ ...DEFAULT_FILTER });
+};
+
+const conditionsRef = useTemplateRef('conditionsRef');
+
+const isConditionsValid = () => {
+  return conditionsRef.value.every(condition => condition.validate());
+};
+
+const updateSavedCustomViews = () => {
+  if (isConditionsValid()) {
+    emit('updateFolder', filters.value, folderNameLocal.value);
+  }
+};
+
+function validateAndSubmit() {
+  if (!isConditionsValid()) {
+    return;
+  }
+
+  store.dispatch(
+    'setConversationFilters',
+    useSnakeCase(JSON.parse(JSON.stringify(filters.value)))
+  );
+  emit('applyFilter', filters.value);
+  useTrack(CONVERSATION_EVENTS.APPLY_FILTER, {
+    appliedFilters: filters.value.map(filter => ({
+      key: filter.attributeKey,
+      operator: filter.filterOperator,
+      queryOperator: filter.queryOperator,
+    })),
+  });
+}
+
+const filterModalHeaderTitle = computed(() => {
+  return !props.isFolderView
+    ? t('FILTER.TITLE')
+    : t('FILTER.EDIT_CUSTOM_FILTER');
+});
+
+onBeforeUnmount(() => emit('close'));
+const outsideClickHandler = [
+  () => emit('close'),
+  { ignore: ['#toggleConversationFilterButton'] },
+];
+</script>
+
+<template>
+  <div
+    v-on-click-outside="outsideClickHandler"
+    class="z-40 max-w-3xl lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+  >
+    <h3 class="text-base font-medium leading-6 text-n-slate-12">
+      {{ filterModalHeaderTitle }}
+    </h3>
+    <div v-if="props.isFolderView">
+      <label class="border-b border-n-weak pb-6">
+        <div class="text-n-slate-11 text-sm mb-2">
+          {{ t('FILTER.FOLDER_LABEL') }}
+        </div>
+        <input
+          v-model="folderNameLocal"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
+        />
+      </label>
+    </div>
+    <ul class="grid gap-4 list-none">
+      <template v-for="(filter, index) in filters" :key="filter.id">
+        <ConditionRow
+          v-if="index === 0"
+          ref="conditionsRef"
+          :key="`filter-${filter.attributeKey}-0`"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          :filter-types="filterTypes"
+          :show-query-operator="false"
+          @remove="removeFilter(index)"
+        />
+        <ConditionRow
+          v-else
+          :key="`filter-${filter.attributeKey}-${index}`"
+          ref="conditionsRef"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:query-operator="filters[index - 1].queryOperator"
+          v-model:values="filter.values"
+          show-query-operator
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+      </template>
+    </ul>
+    <div class="flex gap-2 justify-between">
+      <Button sm ghost blue @click="addFilter">
+        {{ $t('FILTER.ADD_NEW_FILTER') }}
+      </Button>
+      <div class="flex gap-2">
+        <Button sm faded slate @click="resetFilter">
+          {{ t('FILTER.CLEAR_BUTTON_LABEL') }}
+        </Button>
+        <Button
+          v-if="isFolderView"
+          sm
+          solid
+          blue
+          :disabled="!folderNameLocal"
+          @click="updateSavedCustomViews"
+        >
+          {{ t('FILTER.UPDATE_BUTTON_LABEL') }}
+        </Button>
+        <Button v-else sm solid blue @click="validateAndSubmit">
+          {{ t('FILTER.SUBMIT_BUTTON_LABEL') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/SaveCustomView.vue b/app/javascript/dashboard/components-next/filter/SaveCustomView.vue
new file mode 100644
index 000000000..95b2e0388
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/SaveCustomView.vue
@@ -0,0 +1,130 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { vOnClickOutside } from '@vueuse/components';
+import { useTrack } from 'dashboard/composables';
+import NextButton from 'next/button/Button.vue';
+
+export default {
+  components: {
+    NextButton,
+  },
+  directives: {
+    onClickOutside: vOnClickOutside,
+  },
+  props: {
+    filterType: {
+      type: Number,
+      default: 0,
+    },
+    customViewsQuery: {
+      type: Object,
+      default: () => {},
+    },
+    openLastSavedItem: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  emits: ['close'],
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      show: true,
+      name: '',
+    };
+  },
+
+  computed: {
+    isButtonDisabled() {
+      return this.v$.name.$invalid;
+    },
+  },
+
+  validations: {
+    name: {
+      required,
+      minLength: minLength(1),
+    },
+  },
+
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    async saveCustomViews() {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
+        return;
+      }
+      try {
+        await this.$store.dispatch('customViews/create', {
+          name: this.name,
+          filter_type: this.filterType,
+          query: this.customViewsQuery,
+        });
+        this.alertMessage =
+          this.filterType === 0
+            ? this.$t('FILTER.CUSTOM_VIEWS.ADD.API_FOLDERS.SUCCESS_MESSAGE')
+            : this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.SUCCESS_MESSAGE');
+        this.onClose();
+
+        useTrack(CONTACTS_EVENTS.SAVE_FILTER, {
+          type: this.filterType === 0 ? 'folder' : 'segment',
+        });
+      } catch (error) {
+        const errorMessage = error?.message;
+        this.alertMessage =
+          errorMessage || this.filterType === 0
+            ? errorMessage
+            : this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.ERROR_MESSAGE');
+      } finally {
+        useAlert(this.alertMessage);
+      }
+      this.openLastSavedItem();
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="[
+      () => $emit('close'),
+      { ignore: ['#saveFilterTeleportTarget'] },
+    ]"
+    class="z-40 max-w-3xl lg:w-[500px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+  >
+    <h3 class="text-base font-medium leading-6 text-n-slate-12">
+      {{ $t('FILTER.CUSTOM_VIEWS.ADD.TITLE') }}
+    </h3>
+    <form class="w-full grid gap-6" @submit.prevent="saveCustomViews">
+      <div>
+        <input
+          v-model="name"
+          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
+          @blur="v$.name.$touch"
+        />
+        <span
+          v-if="v$.name.$error"
+          class="text-xs text-n-ruby-11 ml-1 rtl:mr-1"
+        >
+          {{ $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') }}
+        </span>
+      </div>
+      <div class="flex flex-row justify-end w-full gap-2">
+        <NextButton sm solid blue :disabled="isButtonDisabled">
+          {{ $t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON') }}
+        </NextButton>
+        <NextButton faded slate sm @click.prevent="onClose">
+          {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
+        </NextButton>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/contactProvider.js b/app/javascript/dashboard/components-next/filter/contactProvider.js
new file mode 100644
index 000000000..4aceac359
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/contactProvider.js
@@ -0,0 +1,184 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useOperators } from './operators';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { buildAttributesFilterTypes } from './helper/filterHelper.js';
+import countries from 'shared/constants/countries.js';
+
+/**
+ * @typedef {Object} FilterOption
+ * @property {string|number} id
+ * @property {string} name
+ * @property {import('vue').VNode} [icon]
+ */
+
+/**
+ * @typedef {Object} FilterOperator
+ * @property {string} value
+ * @property {string} label
+ * @property {string} icon
+ * @property {boolean} hasInput
+ */
+
+/**
+ * @typedef {Object} FilterType
+ * @property {string} attributeKey - The attribute key
+ * @property {string} value - This is a proxy for the attribute key used in FilterSelect
+ * @property {string} attributeName - The attribute name used to display on the UI
+ * @property {string} label - This is a proxy for the attribute name used in FilterSelect
+ * @property {'multiSelect'|'searchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
+ * @property {FilterOption[]} [options] - The options available for the attribute if it is a multiSelect or singleSelect type
+ * @property {'text'|'number'} dataType
+ * @property {FilterOperator[]} filterOperators - The operators available for the attribute
+ * @property {'standard'|'additional'|'customAttributes'} attributeModel
+ */
+
+/**
+ * @typedef {Object} FilterGroup
+ * @property {string} name
+ * @property {FilterType[]} attributes
+ */
+
+/**
+ * Composable that provides conversation filtering context
+ * @returns {{ filterTypes: import('vue').ComputedRef<FilterType[]>, filterGroups: import('vue').ComputedRef<FilterGroup[]> }}
+ */
+export function useContactFilterContext() {
+  const { t } = useI18n();
+
+  const contactAttributes = useMapGetter('attributes/getContactAttributes');
+
+  const {
+    equalityOperators,
+    containmentOperators,
+    dateOperators,
+    getOperatorTypes,
+  } = useOperators();
+
+  /**
+   * @type {import('vue').ComputedRef<FilterType[]>}
+   */
+  const customFilterTypes = computed(() =>
+    buildAttributesFilterTypes(contactAttributes.value, getOperatorTypes)
+  );
+
+  /**
+   * @type {import('vue').ComputedRef<FilterType[]>}
+   */
+  const filterTypes = computed(() => [
+    {
+      attributeKey: 'name',
+      value: 'name',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.NAME'),
+      label: t('CONTACTS_LAYOUT.FILTER.NAME'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'email',
+      value: 'email',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.EMAIL'),
+      label: t('CONTACTS_LAYOUT.FILTER.EMAIL'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'phone_number',
+      value: 'phone_number',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.PHONE_NUMBER'),
+      label: t('CONTACTS_LAYOUT.FILTER.PHONE_NUMBER'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'identifier',
+      value: 'identifier',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.IDENTIFIER'),
+      label: t('CONTACTS_LAYOUT.FILTER.IDENTIFIER'),
+      inputType: 'plainText',
+      dataType: 'number',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'country_code',
+      value: 'country_code',
+      attributeName: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      label: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      inputType: 'searchSelect',
+      options: countries,
+      dataType: 'number',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'additional',
+    },
+    {
+      attributeKey: 'city',
+      value: 'city',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.CITY'),
+      label: t('CONTACTS_LAYOUT.FILTER.CITY'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'created_at',
+      value: 'created_at',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.CREATED_AT'),
+      label: t('CONTACTS_LAYOUT.FILTER.CREATED_AT'),
+      inputType: 'date',
+      dataType: 'text',
+      filterOperators: dateOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'last_activity_at',
+      value: 'last_activity_at',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.LAST_ACTIVITY'),
+      label: t('CONTACTS_LAYOUT.FILTER.LAST_ACTIVITY'),
+      inputType: 'date',
+      dataType: 'text',
+      filterOperators: dateOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'referer',
+      value: 'referer',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.REFERER_LINK'),
+      label: t('CONTACTS_LAYOUT.FILTER.REFERER_LINK'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'blocked',
+      value: 'blocked',
+      attributeName: t('CONTACTS_LAYOUT.FILTER.BLOCKED'),
+      label: t('CONTACTS_LAYOUT.FILTER.BLOCKED'),
+      inputType: 'searchSelect',
+      options: [
+        {
+          id: 'true',
+          name: t('CONTACTS_LAYOUT.FILTER.BLOCKED_TRUE'),
+        },
+        {
+          id: 'false',
+          name: t('CONTACTS_LAYOUT.FILTER.BLOCKED_FALSE'),
+        },
+      ],
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
+    ...customFilterTypes.value,
+  ]);
+
+  return { filterTypes };
+}
diff --git a/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
new file mode 100644
index 000000000..0eb618535
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/fixtures/filterTypes.js
@@ -0,0 +1,603 @@
+export const filterTypes = [
+  {
+    attributeKey: 'status',
+    value: 'status',
+    attributeName: 'Status',
+    label: 'Status',
+    inputType: 'multiSelect',
+    options: [
+      { id: 'open', name: 'Open' },
+      { id: 'resolved', name: 'Resolved' },
+      { id: 'pending', name: 'Pending' },
+      { id: 'snoozed', name: 'Snoozed' },
+      { id: 'all', name: 'All' },
+    ],
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'assignee_id',
+    value: 'assignee_id',
+    attributeName: 'Assignee name',
+    label: 'Assignee name',
+    inputType: 'searchSelect',
+    options: [
+      { id: 14, name: 'Ben Nugent' },
+      { id: 30, name: 'Bruce' },
+      { id: 16, name: 'Cathy Simms' },
+      { id: 7, name: 'Charles Miner' },
+      { id: 10, name: 'Craig D' },
+      { id: 9, name: 'Dan Gore' },
+      { id: 13, name: 'Danny Cordray' },
+      { id: 3, name: 'David Wallace' },
+      { id: 4, name: 'Deangelo Vickers' },
+      { id: 33, name: 'Devon White' },
+      { id: 8, name: 'Ed Truck' },
+      { id: 31, name: 'Frank' },
+      { id: 29, name: 'Gideon' },
+      { id: 24, name: 'Glenn Max' },
+    ],
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'team_id',
+    value: 'team_id',
+    attributeName: 'Team name',
+    label: 'Team name',
+    inputType: 'searchSelect',
+    options: [
+      { id: 223, name: '💰 sales' },
+      { id: 224, name: '💼 management' },
+      { id: 225, name: '👩‍💼 administration' },
+      { id: 226, name: '🚛 warehouse' },
+    ],
+    dataType: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'display_id',
+    value: 'display_id',
+    attributeName: 'Conversation identifier',
+    label: 'Conversation identifier',
+    inputType: 'plainText',
+    datatype: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-superset-of-bold',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-superset-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'campaign_id',
+    value: 'campaign_id',
+    attributeName: 'Campaign name',
+    label: 'Campaign name',
+    inputType: 'searchSelect',
+    options: [],
+    datatype: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'labels',
+    value: 'labels',
+    attributeName: 'Labels',
+    label: 'Labels',
+    inputType: 'multiSelect',
+    options: [
+      { id: 'billing', name: 'billing' },
+      { id: 'delivery', name: 'delivery' },
+      { id: 'lead', name: 'lead' },
+      { id: 'ops-handover', name: 'ops-handover' },
+      { id: 'premium-customer', name: 'premium-customer' },
+      { id: 'software', name: 'software' },
+    ],
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'referer',
+    value: 'referer',
+    attributeName: 'Referer link',
+    label: 'Referer link',
+    inputType: 'plainText',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-superset-of-bold',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-superset-of',
+      },
+    ],
+    attributeModel: 'additional',
+  },
+  {
+    attributeKey: 'created_at',
+    value: 'created_at',
+    attributeName: 'Created at',
+    label: 'Created at',
+    inputType: 'date',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'is_greater_than',
+        label: 'Is greater than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-greater-than-bold',
+      },
+      {
+        value: 'is_less_than',
+        label: 'Is lesser than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-less-than-bold',
+      },
+      {
+        value: 'days_before',
+        label: 'Is x days before',
+        hasInput: true,
+        inputOverride: 'plainText',
+        icon: 'i-ph-calendar-minus-bold',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'last_activity_at',
+    value: 'last_activity_at',
+    attributeName: 'Last activity',
+    label: 'Last activity',
+    inputType: 'date',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'is_greater_than',
+        label: 'Is greater than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-greater-than-bold',
+      },
+      {
+        value: 'is_less_than',
+        label: 'Is lesser than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-less-than-bold',
+      },
+      {
+        value: 'days_before',
+        label: 'Is x days before',
+        hasInput: true,
+        inputOverride: 'plainText',
+        icon: 'i-ph-calendar-minus-bold',
+      },
+    ],
+    attributeModel: 'standard',
+  },
+  {
+    attributeKey: 'are_you_a_paid_customer',
+    value: 'are_you_a_paid_customer',
+    attributeName: 'Are you a paid customer?',
+    label: 'Are you a paid customer?',
+    inputType: 'booleanSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'date_of_purchase',
+    value: 'date_of_purchase',
+    attributeName: 'Date of Purchase',
+    label: 'Date of Purchase',
+    inputType: 'date',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-member-of-bold',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+        hasInput: false,
+        inputOverride: null,
+        icon: 'i-ph-not-member-of',
+      },
+      {
+        value: 'is_greater_than',
+        label: 'Is greater than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-greater-than-bold',
+      },
+      {
+        value: 'is_less_than',
+        label: 'Is lesser than',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-less-than-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'your_website',
+    value: 'your_website',
+    attributeName: 'Your website',
+    label: 'Your website',
+    inputType: 'plainText',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'are_you_residing_in_india',
+    value: 'are_you_residing_in_india',
+    attributeName: 'Are you residing in India?',
+    label: 'Are you residing in India?',
+    inputType: 'booleanSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'cloud',
+    value: 'cloud',
+    attributeName: 'Cloud',
+    label: 'Cloud',
+    inputType: 'booleanSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [],
+    attributeModel: 'customAttributes',
+  },
+  {
+    attributeKey: 'license_type',
+    value: 'license_type',
+    attributeName: 'License Type',
+    label: 'License Type',
+    inputType: 'searchSelect',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-equals-bold',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+        hasInput: true,
+        inputOverride: null,
+        icon: 'i-ph-not-equals-bold',
+      },
+    ],
+    options: [
+      {
+        id: 'Personal',
+        name: 'Personal',
+      },
+      {
+        id: 'Enterprise',
+        name: 'Enterprise',
+      },
+      {
+        id: 'Teams',
+        name: 'Teams',
+      },
+      {
+        id: 'Professional',
+        name: 'Professional',
+      },
+    ],
+    attributeModel: 'customAttributes',
+  },
+];
+
+export const sampleActiveFilters = [
+  {
+    attributeKey: 'name',
+    filterOperator: 'contains',
+    values: 'John',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'email',
+    filterOperator: 'does_not_contain',
+    values: 'test@chatwoot.com',
+    queryOperator: 'or',
+  },
+  {
+    attributeKey: 'phone_number',
+    filterOperator: 'is_present',
+    values: '+928383822',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'created_at',
+    filterOperator: 'is_greater_than',
+    values: '2024-01-01',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'last_activity',
+    filterOperator: 'days_before',
+    values: '30',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'date_of_birth',
+    filterOperator: 'is_not_present',
+    values: '',
+    queryOperator: 'and',
+  },
+  {
+    attributeKey: 'country',
+    filterOperator: 'not_equal_to',
+    values: { id: 1, name: 'India' },
+    queryOperator: 'and',
+  },
+];
diff --git a/app/javascript/dashboard/components-next/filter/helper/filterHelper.js b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
new file mode 100644
index 000000000..2160365f6
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.js
@@ -0,0 +1,49 @@
+/**
+ * Determines the input type for a custom attribute based on its key
+ * @param {string} key - The attribute display type key
+ * @returns {'date'|'plainText'|'searchSelect'|'booleanSelect'} The corresponding input type
+ */
+export const getCustomAttributeInputType = key => {
+  switch (key) {
+    case 'date':
+      return 'date';
+    case 'text':
+      return 'plainText';
+    case 'list':
+      return 'searchSelect';
+    case 'checkbox':
+      return 'booleanSelect';
+    default:
+      return 'plainText';
+  }
+};
+
+/**
+ * Builds filter types for custom attributes
+ * @param {Array} attributes - The attributes array
+ * @param {Function} getOperatorTypes - Function to get operator types
+ * @returns {Array} Array of filter types
+ */
+export const buildAttributesFilterTypes = (attributes, getOperatorTypes) => {
+  return attributes.map(attr => ({
+    attributeKey: attr.attributeKey,
+    value: attr.attributeKey,
+    attributeName: attr.attributeDisplayName,
+    label: attr.attributeDisplayName,
+    inputType: getCustomAttributeInputType(attr.attributeDisplayType),
+    filterOperators: getOperatorTypes(attr.attributeDisplayType),
+    options:
+      attr.attributeDisplayType === 'list'
+        ? attr.attributeValues.map(item => ({ id: item, name: item }))
+        : [],
+    attributeModel: 'customAttributes',
+  }));
+};
+
+/**
+ * Replaces underscores with spaces in a string
+ * @param {string} text - The input string
+ * @returns {string} The string with underscores replaced by spaces
+ */
+export const replaceUnderscoreWithSpace = text =>
+  text?.replaceAll('_', ' ') ?? '';
diff --git a/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js b/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
new file mode 100644
index 000000000..58cf92cf3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/helper/filterHelper.spec.js
@@ -0,0 +1,137 @@
+import {
+  getCustomAttributeInputType,
+  buildAttributesFilterTypes,
+  replaceUnderscoreWithSpace,
+} from './filterHelper';
+
+describe('filterHelper', () => {
+  describe('getCustomAttributeInputType', () => {
+    it('returns date for date type', () => {
+      expect(getCustomAttributeInputType('date')).toBe('date');
+    });
+
+    it('returns plainText for text type', () => {
+      expect(getCustomAttributeInputType('text')).toBe('plainText');
+    });
+
+    it('returns searchSelect for list type', () => {
+      expect(getCustomAttributeInputType('list')).toBe('searchSelect');
+    });
+
+    it('returns booleanSelect for checkbox type', () => {
+      expect(getCustomAttributeInputType('checkbox')).toBe('booleanSelect');
+    });
+
+    it('returns plainText for unknown type', () => {
+      expect(getCustomAttributeInputType('unknown')).toBe('plainText');
+    });
+  });
+
+  describe('buildAttributesFilterTypes', () => {
+    const mockGetOperatorTypes = type => {
+      return type === 'list' ? ['is', 'is_not'] : ['contains', 'not_contains'];
+    };
+
+    it('builds filter types for text attributes', () => {
+      const attributes = [
+        {
+          attributeKey: 'test_key',
+          attributeDisplayName: 'Test Name',
+          attributeDisplayType: 'text',
+          attributeValues: [],
+        },
+      ];
+
+      const result = buildAttributesFilterTypes(
+        attributes,
+        mockGetOperatorTypes
+      );
+
+      expect(result).toEqual([
+        {
+          attributeKey: 'test_key',
+          value: 'test_key',
+          attributeName: 'Test Name',
+          label: 'Test Name',
+          inputType: 'plainText',
+          filterOperators: ['contains', 'not_contains'],
+          options: [],
+          attributeModel: 'customAttributes',
+        },
+      ]);
+    });
+
+    it('builds filter types for list attributes with options', () => {
+      const attributes = [
+        {
+          attributeKey: 'list_key',
+          attributeDisplayName: 'List Name',
+          attributeDisplayType: 'list',
+          attributeValues: ['option1', 'option2'],
+        },
+      ];
+
+      const result = buildAttributesFilterTypes(
+        attributes,
+        mockGetOperatorTypes
+      );
+
+      expect(result).toEqual([
+        {
+          attributeKey: 'list_key',
+          value: 'list_key',
+          attributeName: 'List Name',
+          label: 'List Name',
+          inputType: 'searchSelect',
+          filterOperators: ['is', 'is_not'],
+          options: [
+            { id: 'option1', name: 'option1' },
+            { id: 'option2', name: 'option2' },
+          ],
+          attributeModel: 'customAttributes',
+        },
+      ]);
+    });
+
+    it('handles multiple attributes', () => {
+      const attributes = [
+        {
+          attributeKey: 'date_key',
+          attributeDisplayName: 'Date Name',
+          attributeDisplayType: 'date',
+          attributeValues: [],
+        },
+        {
+          attributeKey: 'checkbox_key',
+          attributeDisplayName: 'Checkbox Name',
+          attributeDisplayType: 'checkbox',
+          attributeValues: [],
+        },
+      ];
+
+      const result = buildAttributesFilterTypes(
+        attributes,
+        mockGetOperatorTypes
+      );
+
+      expect(result).toHaveLength(2);
+      expect(result[0].inputType).toBe('date');
+      expect(result[1].inputType).toBe('booleanSelect');
+    });
+
+    it('handles empty attributes array', () => {
+      const result = buildAttributesFilterTypes([], mockGetOperatorTypes);
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('replaceUnderscoreWithSpace', () => {
+    it('replaces underscores with spaces', () => {
+      expect(replaceUnderscoreWithSpace('test_key')).toBe('test key');
+    });
+
+    it('returns empty string if input is null', () => {
+      expect(replaceUnderscoreWithSpace(null)).toBe('');
+    });
+  });
+});
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue
new file mode 100644
index 000000000..23b76081e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.story.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from 'vue';
+import FilterSelect from './FilterSelect.vue';
+
+const options = [
+  { value: 'EQUAL_TO', label: 'Equal To', icon: 'i-ph-equals-bold' },
+  {
+    value: 'NOT_EQUAL_TO',
+    label: 'Not Equal To',
+    icon: 'i-ph-not-equals-bold',
+  },
+  { value: 'IS_PRESENT', label: 'Is Present', icon: 'i-ph-member-of-bold' },
+  {
+    value: 'IS_NOT_PRESENT',
+    label: 'Is Not Present',
+    icon: 'i-ph-not-member-of-bold',
+  },
+  { value: 'CONTAINS', label: 'Contains', icon: 'i-ph-superset-of-bold' },
+  {
+    value: 'DOES_NOT_CONTAIN',
+    label: 'Does Not Contain',
+    icon: 'i-ph-not-superset-of-bold',
+  },
+  {
+    value: 'IS_GREATER_THAN',
+    label: 'Is Greater Than',
+    icon: 'i-ph-greater-than-bold',
+  },
+  { value: 'IS_LESS_THAN', label: 'Is Less Than', icon: 'i-ph-less-than-bold' },
+  {
+    value: 'DAYS_BEFORE',
+    label: 'Days Before',
+    icon: 'i-ph-calendar-minus-bold',
+  },
+  {
+    value: 'STARTS_WITH',
+    label: 'Starts With',
+    icon: 'i-ph-caret-line-right-bold',
+  },
+];
+
+const selected = ref(options[0].value);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/Filter Select"
+    :layout="{ type: 'grid', width: '250px' }"
+  >
+    <Variant title="With Icon & Label">
+      <div class="min-h-[400px]">
+        <FilterSelect v-model="selected" :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Without Icon">
+      <div class="min-h-[400px]">
+        <FilterSelect v-model="selected" hide-icon :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Without Label">
+      <div class="min-h-[400px]">
+        <FilterSelect v-model="selected" hide-label :options="options" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
new file mode 100644
index 000000000..db420920b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { computed } from 'vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+import Button from 'next/button/Button.vue';
+
+// [{label, icon, value}]
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  hideLabel: {
+    type: Boolean,
+    default: false,
+  },
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
+  variant: {
+    type: String,
+    default: 'faded',
+  },
+});
+
+const selected = defineModel({
+  type: [String, Number],
+  required: true,
+});
+
+const selectedOption = computed(() => {
+  return props.options.find(o => o.value === selected.value) || {};
+});
+
+const iconToRender = computed(() => {
+  if (props.hideIcon) return null;
+  return selectedOption.value.icon || 'i-lucide-chevron-down';
+});
+
+const updateSelected = newValue => {
+  selected.value = newValue;
+};
+</script>
+
+<template>
+  <DropdownContainer>
+    <template #trigger="{ toggle }">
+      <slot name="trigger" :toggle="toggle">
+        <Button
+          sm
+          slate
+          :variant
+          :icon="iconToRender"
+          :trailing-icon="selectedOption.icon ? false : true"
+          :label="hideLabel ? null : selectedOption.label"
+          @click="toggle"
+        />
+      </slot>
+    </template>
+    <DropdownBody class="top-0 min-w-48 z-50" strong>
+      <DropdownSection class="max-h-80 overflow-scroll">
+        <DropdownItem
+          v-for="option in options"
+          :key="option.value"
+          :label="option.label"
+          :icon="option.icon"
+          @click="updateSelected(option.value)"
+        />
+      </DropdownSection>
+    </DropdownBody>
+  </DropdownContainer>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue
new file mode 100644
index 000000000..6452945f3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.story.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from 'vue';
+import MultiSelect from './MultiSelect.vue';
+
+const options = [
+  { name: 'Open', id: 'open' },
+  { name: 'Closed', id: 'closed' },
+  { name: 'Pending', id: 'pending' },
+  { name: 'Resolved', id: 'resolved' },
+  { name: 'Spam', id: 'spam' },
+  { name: 'All', id: 'all' },
+];
+
+const selected = ref([]);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/Multiselect Input"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <div class="min-h-[400px]">
+      <MultiSelect v-model="selected" :options="options" />
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
new file mode 100644
index 000000000..be11847fb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
@@ -0,0 +1,146 @@
+<script setup>
+import { defineModel, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'next/icon/Icon.vue';
+import Button from 'next/button/Button.vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+const { options, maxChips } = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  maxChips: {
+    type: Number,
+    default: 3,
+  },
+});
+
+const { t } = useI18n();
+const selected = defineModel({
+  type: [Array, String],
+  required: true,
+});
+
+const hasItems = computed(() => {
+  if (!selected.value) return false;
+  if (!Array.isArray(selected.value)) return false;
+  if (selected.value.length === 0) return false;
+
+  return true;
+});
+
+const selectedIds = computed(() => {
+  if (!hasItems.value) return [];
+  return selected.value.map(value => value.id);
+});
+
+const selectedItems = computed(() => {
+  // Options has additional properties, so we need to use them directly
+  if (!hasItems.value) return [];
+  return options.filter(option => selectedIds.value.includes(option.id));
+});
+
+const selectedVisibleItems = computed(() => {
+  if (!hasItems.value) return [];
+  // avoid showing "+1 more" coz it takes up space anway, might as well show it
+  if (selectedItems.value.length === maxChips + 1) return selectedItems.value;
+  // if we have more than maxChips then show only maxChips
+  return selectedItems.value.slice(0, maxChips);
+});
+
+const remainingItems = computed(() => {
+  if (!hasItems.value) return [];
+  if (selectedItems.value.length === maxChips + 1) return [];
+  return selectedItems.value.slice(maxChips);
+});
+
+const remainingTooltip = computed(() => {
+  if (!hasItems.value) return '';
+  return remainingItems.value.map(item => item.name).join(', ');
+});
+
+const toggleOption = option => {
+  // Ensure that the `icon` prop is not included, icon is a VNode which has circular references
+  // This causes an error when creating a clone using JSON.parse(JSON.stringify())
+  const optionToToggle = {
+    id: option.id,
+    name: option.name,
+  };
+
+  const idToToggle = optionToToggle.id;
+
+  if (!hasItems.value) {
+    selected.value = [optionToToggle];
+    return;
+  }
+
+  if (selectedIds.value.includes(idToToggle)) {
+    selected.value = selected.value.filter(value => value.id !== idToToggle);
+  } else {
+    selected.value = [...selected.value, optionToToggle];
+  }
+};
+</script>
+
+<template>
+  <DropdownContainer>
+    <template #trigger="{ toggle }">
+      <button
+        v-if="hasItems"
+        class="bg-n-alpha-2 py-2 rounded-lg h-8 flex items-center px-0"
+        @click="toggle"
+      >
+        <div
+          v-for="item in selectedVisibleItems"
+          :key="item.name"
+          class="px-3 border-r rtl:border-l rtl:border-r-0 border-n-weak text-n-slate-12 text-sm flex gap-2 items-center max-w-[100px]"
+        >
+          <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
+          <span class="truncate">{{ item.name }}</span>
+        </div>
+        <div
+          v-if="remainingItems.length > 0"
+          v-tooltip.top="remainingTooltip"
+          class="px-3 border-r rtl:border-l rtl:border-r-0 border-n-weak text-n-slate-12 text-sm flex gap-2 items-center max-w-[100px]"
+        >
+          <span class="truncate">{{
+            t('COMBOBOX.MORE', { count: remainingItems.length })
+          }}</span>
+        </div>
+        <div class="flex items-center border-none px-3 gap-2">
+          <Icon icon="i-lucide-plus" />
+        </div>
+      </button>
+      <Button v-else sm slate faded @click="toggle">
+        <template #icon>
+          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
+        </template>
+        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
+      </Button>
+    </template>
+    <DropdownBody class="top-0 min-w-48 z-50" strong>
+      <DropdownSection class="max-h-80 overflow-scroll">
+        <DropdownItem
+          v-for="option in options"
+          :key="option.id"
+          :icon="option.icon"
+          preserve-open
+          @click="toggleOption(option)"
+        >
+          <template #label>
+            {{ option.name }}
+            <Icon
+              v-if="selectedIds.includes(option.id)"
+              icon="i-lucide-check"
+              class="bg-n-blue-text pointer-events-none"
+            />
+          </template>
+        </DropdownItem>
+      </DropdownSection>
+    </DropdownBody>
+  </DropdownContainer>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue
new file mode 100644
index 000000000..233a958f2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.story.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { ref } from 'vue';
+import SingleSelect from './SingleSelect.vue';
+
+const options = [
+  { name: 'Open', id: 'open' },
+  { name: 'Closed', id: 'closed' },
+  { name: 'Pending', id: 'pending' },
+  { name: 'Resolved', id: 'resolved' },
+  { name: 'Spam', id: 'spam' },
+  { name: 'All', id: 'all' },
+];
+
+const selected = ref(options[0]);
+</script>
+
+<template>
+  <Story
+    title="Components/Filters/Single Select Input"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="With Search">
+      <div class="min-h-[400px]">
+        <SingleSelect v-model="selected" :options="options" />
+      </div>
+    </Variant>
+    <Variant title="Without Search">
+      <div class="min-h-[400px]">
+        <SingleSelect v-model="selected" disable-search :options="options" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
new file mode 100644
index 000000000..7fb143883
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
@@ -0,0 +1,124 @@
+<script setup>
+import { defineModel, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { picoSearch } from '@scmmishra/pico-search';
+import Icon from 'next/icon/Icon.vue';
+import Button from 'next/button/Button.vue';
+import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
+import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
+import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
+import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
+
+const { options } = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  disableSearch: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const selected = defineModel({
+  type: Object,
+  required: true,
+});
+
+const searchTerm = ref('');
+const searchResults = computed(() => {
+  if (!options) return [];
+  return picoSearch(options, searchTerm.value, ['name']);
+});
+
+const selectedItem = computed(() => {
+  if (!options) return null;
+  if (!selected.value) return null;
+
+  // there are cases where the selected value is an array
+  const optionToSearch = Array.isArray(selected.value)
+    ? selected.value[0]
+    : selected.value;
+  // extract the selected item from the options array
+  // this ensures that options like icon is also included
+  return options.find(option => option.id === optionToSearch.id);
+});
+
+const toggleSelected = option => {
+  // Ensure that the `icon` prop is not included, icon is a VNode which has circular references
+  // This causes an error when creating a clone using JSON.parse(JSON.stringify())
+  const optionToToggle = {
+    id: option.id,
+    name: option.name,
+  };
+
+  if (selected.value && selected.value.id === optionToToggle.id) {
+    selected.value = null;
+  } else {
+    selected.value = optionToToggle;
+  }
+};
+</script>
+
+<template>
+  <DropdownContainer>
+    <template #trigger="{ toggle }">
+      <Button
+        v-if="selectedItem"
+        sm
+        slate
+        faded
+        :icon="selectedItem.icon"
+        :label="selectedItem.name"
+        @click="toggle"
+      />
+      <Button v-else sm slate faded @click="toggle">
+        <template #icon>
+          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
+        </template>
+        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
+      </Button>
+    </template>
+    <DropdownBody class="top-0 min-w-56 z-50" strong>
+      <div v-if="!disableSearch" class="relative">
+        <Icon class="absolute size-4 left-2 top-2" icon="i-lucide-search" />
+        <input
+          v-model="searchTerm"
+          autofocus
+          class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
+          :placeholder="t('COMBOBOX.SEARCH_PLACEHOLDER')"
+        />
+      </div>
+      <DropdownSection class="max-h-80 overflow-scroll">
+        <template v-if="searchResults.length">
+          <DropdownItem
+            v-for="option in searchResults"
+            :key="option.id"
+            :icon="option.icon"
+            @click="toggleSelected(option)"
+          >
+            <template #label>
+              {{ option.name }}
+              <Icon
+                v-if="selectedItem && selectedItem.id === option.id"
+                icon="i-lucide-check"
+                class="bg-n-blue-text pointer-events-none"
+              />
+            </template>
+          </DropdownItem>
+        </template>
+        <template v-else-if="searchTerm">
+          <DropdownItem disabled>
+            {{ t('COMBOBOX.EMPTY_SEARCH_RESULTS', { searchTerm: searchTerm }) }}
+          </DropdownItem>
+        </template>
+        <template v-else>
+          <DropdownItem disabled>
+            {{ t('COMBOBOX.EMPTY_STATE') }}
+          </DropdownItem>
+        </template>
+      </DropdownSection>
+    </DropdownBody>
+  </DropdownContainer>
+</template>
diff --git a/app/javascript/dashboard/components-next/filter/operators.js b/app/javascript/dashboard/components-next/filter/operators.js
new file mode 100644
index 000000000..22af84a89
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/operators.js
@@ -0,0 +1,164 @@
+import { computed, h } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+/**
+ * @typedef {Object} FilterOperations
+ * @property {string} EQUAL_TO - Equals comparison
+ * @property {string} NOT_EQUAL_TO - Not equals comparison
+ * @property {string} IS_PRESENT - Present check
+ * @property {string} IS_NOT_PRESENT - Not present check
+ * @property {string} CONTAINS - Contains check
+ * @property {string} DOES_NOT_CONTAIN - Does not contain check
+ * @property {string} IS_GREATER_THAN - Greater than comparison
+ * @property {string} IS_LESS_THAN - Less than comparison
+ * @property {string} DAYS_BEFORE - Days before check
+ * @property {string} STARTS_WITH - Starts with check
+ */
+
+/**
+ * @typedef {Object} Operator
+ * @property {string} value - Operator value from FILTER_OPS
+ * @property {string} label - Translated display label
+ * @property {import('vue').VNode} icon - Vue icon component instance
+ * @property {string|null} inputOverride - Input field type override
+ * @property {boolean} hasInput - Whether operator requires an input value
+ */
+
+const FILTER_OPS = {
+  EQUAL_TO: 'equal_to',
+  NOT_EQUAL_TO: 'not_equal_to',
+  IS_PRESENT: 'is_present',
+  IS_NOT_PRESENT: 'is_not_present',
+  CONTAINS: 'contains',
+  DOES_NOT_CONTAIN: 'does_not_contain',
+  IS_GREATER_THAN: 'is_greater_than',
+  IS_LESS_THAN: 'is_less_than',
+  DAYS_BEFORE: 'days_before',
+  STARTS_WITH: 'starts_with',
+};
+
+const NO_INPUT_OPTS = [FILTER_OPS.IS_PRESENT, FILTER_OPS.IS_NOT_PRESENT];
+
+const OPS_INPUT_OVERRIDE = {
+  [FILTER_OPS.DAYS_BEFORE]: 'plainText',
+};
+
+/**
+ * @type {Record<string, string>}
+ */
+const filterOperatorIcon = {
+  [FILTER_OPS.EQUAL_TO]: 'i-ph-equals-bold',
+  [FILTER_OPS.NOT_EQUAL_TO]: 'i-ph-not-equals-bold',
+  [FILTER_OPS.IS_PRESENT]: 'i-ph-member-of-bold',
+  [FILTER_OPS.IS_NOT_PRESENT]: 'i-ph-not-member-of-bold',
+  [FILTER_OPS.CONTAINS]: 'i-ph-superset-of-bold',
+  [FILTER_OPS.DOES_NOT_CONTAIN]: 'i-ph-not-superset-of-bold',
+  [FILTER_OPS.IS_GREATER_THAN]: 'i-ph-greater-than-bold',
+  [FILTER_OPS.IS_LESS_THAN]: 'i-ph-less-than-bold',
+  [FILTER_OPS.DAYS_BEFORE]: 'i-ph-calendar-minus-bold',
+  [FILTER_OPS.STARTS_WITH]: 'i-ph-caret-line-right-bold',
+};
+
+/**
+ * Vue composable providing access to filter operators and related functionality
+ * @returns {Object} Collection of operators and utility functions
+ * @property {import('vue').ComputedRef<Record<string, Operator>>} operators - All available operators
+ * @property {import('vue').ComputedRef<Operator[]>} equalityOperators - Equality comparison operators
+ * @property {import('vue').ComputedRef<Operator[]>} presenceOperators - Presence check operators
+ * @property {import('vue').ComputedRef<Operator[]>} containmentOperators - Containment check operators
+ * @property {import('vue').ComputedRef<Operator[]>} comparisonOperators - Numeric comparison operators
+ * @property {import('vue').ComputedRef<Operator[]>} dateOperators - Date-specific operators
+ * @property {(key: 'list'|'text'|'number'|'link'|'date'|'checkbox') => Operator[]} getOperatorTypes - Get operators for a field type
+ */
+export function useOperators() {
+  const { t } = useI18n();
+
+  /** @type {import('vue').ComputedRef<Record<string, Operator>>} */
+  const operators = computed(() => {
+    return Object.values(FILTER_OPS).reduce((acc, value) => {
+      acc[value] = {
+        value,
+        label: t(`FILTER.OPERATOR_LABELS.${value}`),
+        hasInput: !NO_INPUT_OPTS.includes(value),
+        inputOverride: OPS_INPUT_OVERRIDE[value] || null,
+        icon: h('span', {
+          class: `${filterOperatorIcon[value]} !text-n-blue-text`,
+        }),
+      };
+      return acc;
+    }, {});
+  });
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const equalityOperators = computed(() => [
+    operators.value[FILTER_OPS.EQUAL_TO],
+    operators.value[FILTER_OPS.NOT_EQUAL_TO],
+  ]);
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const presenceOperators = computed(() => [
+    operators.value[FILTER_OPS.EQUAL_TO],
+    operators.value[FILTER_OPS.NOT_EQUAL_TO],
+    operators.value[FILTER_OPS.IS_PRESENT],
+    operators.value[FILTER_OPS.IS_NOT_PRESENT],
+  ]);
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const containmentOperators = computed(() => [
+    operators.value[FILTER_OPS.EQUAL_TO],
+    operators.value[FILTER_OPS.NOT_EQUAL_TO],
+    operators.value[FILTER_OPS.CONTAINS],
+    operators.value[FILTER_OPS.DOES_NOT_CONTAIN],
+  ]);
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const comparisonOperators = computed(() => [
+    operators.value[FILTER_OPS.EQUAL_TO],
+    operators.value[FILTER_OPS.NOT_EQUAL_TO],
+    operators.value[FILTER_OPS.IS_PRESENT],
+    operators.value[FILTER_OPS.IS_NOT_PRESENT],
+    operators.value[FILTER_OPS.IS_GREATER_THAN],
+    operators.value[FILTER_OPS.IS_LESS_THAN],
+  ]);
+
+  /** @type {import('vue').ComputedRef<Array<Operator>>} */
+  const dateOperators = computed(() => [
+    operators.value[FILTER_OPS.IS_GREATER_THAN],
+    operators.value[FILTER_OPS.IS_LESS_THAN],
+    operators.value[FILTER_OPS.DAYS_BEFORE],
+  ]);
+
+  /**
+   * Get operator types based on key
+   * @param {string} key - Type of operator to get
+   * @returns {Array<Operator>}
+   */
+  const getOperatorTypes = key => {
+    switch (key) {
+      case 'list':
+        return equalityOperators.value;
+      case 'text':
+        return containmentOperators.value;
+      case 'number':
+        return equalityOperators.value;
+      case 'link':
+        return equalityOperators.value;
+      case 'date':
+        return comparisonOperators.value;
+      case 'checkbox':
+        return equalityOperators.value;
+      default:
+        return equalityOperators.value;
+    }
+  };
+
+  return {
+    operators,
+    equalityOperators,
+    presenceOperators,
+    containmentOperators,
+    comparisonOperators,
+    dateOperators,
+    getOperatorTypes,
+  };
+}
diff --git a/app/javascript/dashboard/components-next/filter/provider.js b/app/javascript/dashboard/components-next/filter/provider.js
new file mode 100644
index 000000000..bb775a663
--- /dev/null
+++ b/app/javascript/dashboard/components-next/filter/provider.js
@@ -0,0 +1,243 @@
+import { computed, h } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useOperators } from './operators';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useChannelIcon } from 'next/icon/provider';
+import { buildAttributesFilterTypes } from './helper/filterHelper';
+import countries from 'shared/constants/countries.js';
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
+
+/**
+ * @typedef {Object} FilterOption
+ * @property {string|number} id
+ * @property {string} name
+ * @property {import('vue').VNode} [icon]
+ */
+
+/**
+ * @typedef {Object} FilterOperator
+ * @property {string} value
+ * @property {string} label
+ * @property {string} icon
+ * @property {boolean} hasInput
+ */
+
+/**
+ * @typedef {Object} FilterType
+ * @property {string} attributeKey - The attribute key
+ * @property {string} value - This is a proxy for the attribute key used in FilterSelect
+ * @property {string} attributeName - The attribute name used to display on the UI
+ * @property {string} label - This is a proxy for the attribute name used in FilterSelect
+ * @property {'multiSelect'|'searchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
+ * @property {FilterOption[]} [options] - The options available for the attribute if it is a multiSelect or singleSelect type
+ * @property {'text'|'number'} dataType
+ * @property {FilterOperator[]} filterOperators - The operators available for the attribute
+ * @property {'standard'|'additional'|'customAttributes'} attributeModel
+ */
+
+/**
+ * @typedef {Object} FilterGroup
+ * @property {string} name
+ * @property {FilterType[]} attributes
+ */
+
+/**
+ * Composable that provides conversation filtering context
+ * @returns {{ filterTypes: import('vue').ComputedRef<FilterType[]>, filterGroups: import('vue').ComputedRef<FilterGroup[]> }}
+ */
+export function useConversationFilterContext() {
+  const { t } = useI18n();
+
+  const conversationAttributes = useMapGetter(
+    'attributes/getConversationAttributes'
+  );
+
+  const labels = useMapGetter('labels/getLabels');
+  const agents = useMapGetter('agents/getAgents');
+  const inboxes = useMapGetter('inboxes/getInboxes');
+  const teams = useMapGetter('teams/getTeams');
+  const campaigns = useMapGetter('campaigns/getAllCampaigns');
+
+  const {
+    equalityOperators,
+    presenceOperators,
+    containmentOperators,
+    dateOperators,
+    getOperatorTypes,
+  } = useOperators();
+
+  /**
+   * @type {import('vue').ComputedRef<FilterType[]>}
+   */
+  const customFilterTypes = computed(() =>
+    buildAttributesFilterTypes(conversationAttributes.value, getOperatorTypes)
+  );
+
+  /**
+   * @type {import('vue').ComputedRef<FilterType[]>}
+   */
+  const filterTypes = computed(() => [
+    {
+      attributeKey: 'status',
+      value: 'status',
+      attributeName: t('FILTER.ATTRIBUTES.STATUS'),
+      label: t('FILTER.ATTRIBUTES.STATUS'),
+      inputType: 'multiSelect',
+      options: ['open', 'resolved', 'pending', 'snoozed', 'all'].map(id => {
+        return {
+          id,
+          name: t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${id}.TEXT`),
+        };
+      }),
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'assignee_id',
+      value: 'assignee_id',
+      attributeName: t('FILTER.ATTRIBUTES.ASSIGNEE_NAME'),
+      label: t('FILTER.ATTRIBUTES.ASSIGNEE_NAME'),
+      inputType: 'searchSelect',
+      options: agents.value.map(agent => {
+        return {
+          id: agent.id,
+          name: agent.name,
+        };
+      }),
+      dataType: 'text',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'inbox_id',
+      value: 'inbox_id',
+      attributeName: t('FILTER.ATTRIBUTES.INBOX_NAME'),
+      label: t('FILTER.ATTRIBUTES.INBOX_NAME'),
+      inputType: 'searchSelect',
+      options: inboxes.value.map(inbox => {
+        return {
+          ...inbox,
+          icon: useChannelIcon(inbox).value,
+        };
+      }),
+      dataType: 'text',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'team_id',
+      value: 'team_id',
+      attributeName: t('FILTER.ATTRIBUTES.TEAM_NAME'),
+      label: t('FILTER.ATTRIBUTES.TEAM_NAME'),
+      inputType: 'searchSelect',
+      options: teams.value,
+      dataType: 'number',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'display_id',
+      value: 'display_id',
+      attributeName: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
+      label: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
+      inputType: 'plainText',
+      datatype: 'number',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'campaign_id',
+      value: 'campaign_id',
+      attributeName: t('FILTER.ATTRIBUTES.CAMPAIGN_NAME'),
+      label: t('FILTER.ATTRIBUTES.CAMPAIGN_NAME'),
+      inputType: 'searchSelect',
+      options: campaigns.value.map(campaign => ({
+        id: campaign.id,
+        name: campaign.title,
+      })),
+      datatype: 'number',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'labels',
+      value: 'labels',
+      attributeName: t('FILTER.ATTRIBUTES.LABELS'),
+      label: t('FILTER.ATTRIBUTES.LABELS'),
+      inputType: 'multiSelect',
+      options: labels.value.map(label => {
+        return {
+          id: label.title,
+          name: label.title,
+          icon: h('span', {
+            class: `rounded-full`,
+            style: {
+              backgroundColor: label.color,
+              height: '6px',
+              width: '6px',
+            },
+          }),
+        };
+      }),
+      dataType: 'text',
+      filterOperators: presenceOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'browser_language',
+      value: 'browser_language',
+      attributeName: t('FILTER.ATTRIBUTES.BROWSER_LANGUAGE'),
+      label: t('FILTER.ATTRIBUTES.BROWSER_LANGUAGE'),
+      inputType: 'searchSelect',
+      options: languages,
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'additional',
+    },
+    {
+      attributeKey: 'country_code',
+      value: 'country_code',
+      attributeName: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      label: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      inputType: 'searchSelect',
+      options: countries,
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'additional',
+    },
+    {
+      attributeKey: 'referer',
+      value: 'referer',
+      attributeName: t('FILTER.ATTRIBUTES.REFERER_LINK'),
+      label: t('FILTER.ATTRIBUTES.REFERER_LINK'),
+      inputType: 'plainText',
+      dataType: 'text',
+      filterOperators: containmentOperators.value,
+      attributeModel: 'additional',
+    },
+    {
+      attributeKey: 'created_at',
+      value: 'created_at',
+      attributeName: t('FILTER.ATTRIBUTES.CREATED_AT'),
+      label: t('FILTER.ATTRIBUTES.CREATED_AT'),
+      inputType: 'date',
+      dataType: 'text',
+      filterOperators: dateOperators.value,
+      attributeModel: 'standard',
+    },
+    {
+      attributeKey: 'last_activity_at',
+      value: 'last_activity_at',
+      attributeName: t('FILTER.ATTRIBUTES.LAST_ACTIVITY'),
+      label: t('FILTER.ATTRIBUTES.LAST_ACTIVITY'),
+      inputType: 'date',
+      dataType: 'text',
+      filterOperators: dateOperators.value,
+      attributeModel: 'standard',
+    },
+    ...customFilterTypes.value,
+  ]);
+
+  return { filterTypes };
+}
diff --git a/app/javascript/dashboard/components-next/flag/Flag.vue b/app/javascript/dashboard/components-next/flag/Flag.vue
new file mode 100644
index 000000000..5868ce552
--- /dev/null
+++ b/app/javascript/dashboard/components-next/flag/Flag.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { h, defineProps } from 'vue';
+
+const props = defineProps({
+  country: { type: String, required: true },
+  squared: { type: Boolean, default: false },
+});
+
+const renderFlag = () => {
+  const classes = ['fi', `fi-${props.country.toLowerCase()}`, 'flex-shrink-0'];
+  if (props.squared) {
+    classes.push('fis');
+  }
+  return h('span', { class: classes });
+};
+</script>
+
+<template>
+  <component :is="renderFlag" />
+</template>
+
+<style>
+@import 'flag-icons/css/flag-icons.min.css';
+</style>
diff --git a/app/javascript/dashboard/components-next/flag/story/Flag.story.vue b/app/javascript/dashboard/components-next/flag/story/Flag.story.vue
new file mode 100644
index 000000000..d0b6ddfe7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/flag/story/Flag.story.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { ref } from 'vue';
+import Flag from '../Flag.vue';
+import countries from 'shared/constants/countries';
+
+const BasicTemplate = {
+  components: { Flag },
+  props: {
+    country: {
+      type: String,
+      default: 'us',
+    },
+    squared: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  template: `
+    <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+      <Flag :country="country" :squared="squared" />
+    </div>
+  `,
+};
+
+const SizeVariants = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+      <div class="flex items-center gap-4 p-4 border rounded border-n-weak">
+        <Flag country="in" class="!size-4" :squared="isSquared" />
+        <Flag country="in" class="!size-6" :squared="isSquared" />
+        <Flag country="in" class="!size-8" :squared="isSquared" />
+        <Flag country="in" class="!size-10" :squared="isSquared" />
+      </div>
+    </div>
+  `,
+};
+
+const AllFlags = {
+  components: { Flag },
+  setup() {
+    const isSquared = ref(false);
+    return { countries, isSquared };
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <label class="flex items-center gap-2">
+        <input type="checkbox" v-model="isSquared">
+        Squared flags
+      </label>
+
+      <div class="grid grid-cols-2 gap-4 p-4 border rounded border-n-strong md:grid-cols-3 lg:grid-cols-4">
+        <div 
+          v-for="country in countries" 
+          :key="country.id"
+          class="flex items-center gap-2 px-4 py-2 border rounded border-n-strong"
+        >
+          <Flag 
+            :country="country.id" 
+            :squared="isSquared"
+            class="size-6" 
+          />
+          <span class="text-sm">{{ country.name }}</span>
+        </div>
+      </div>
+    </div>
+  `,
+};
+</script>
+
+<template>
+  <Story title="Components/Flag">
+    <Variant title="Basic Usage">
+      <BasicTemplate country="us" :squared="false" />
+    </Variant>
+
+    <Variant title="Size Variants">
+      <SizeVariants />
+    </Variant>
+
+    <Variant title="All Flags">
+      <AllFlags />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/FileIcon.story.vue b/app/javascript/dashboard/components-next/icon/FileIcon.story.vue
new file mode 100644
index 000000000..3a831b96f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/FileIcon.story.vue
@@ -0,0 +1,36 @@
+<script setup>
+import FileIcon from './FileIcon.vue';
+const files = [
+  { name: 'file.7z', type: '7z' },
+  { name: 'file.zip', type: 'zip' },
+  { name: 'file.rar', type: 'rar' },
+  { name: 'file.tar', type: 'tar' },
+  { name: 'file.csv', type: 'csv' },
+  { name: 'file.docx', type: 'docx' },
+  { name: 'file.doc', type: 'doc' },
+  { name: 'file.odt', type: 'odt' },
+  { name: 'file.pdf', type: 'pdf' },
+  { name: 'file.ppt', type: 'ppt' },
+  { name: 'file.pptx', type: 'pptx' },
+  { name: 'file.rtf', type: 'rtf' },
+  { name: 'file.json', type: 'json' },
+  { name: 'file.txt', type: 'txt' },
+  { name: 'file.xls', type: 'xls' },
+  { name: 'file.xlsx', type: 'xlsx' },
+];
+</script>
+
+<template>
+  <Story title="Components/Icons/FileIcon">
+    <div class="grid grid-cols-4 gap-5">
+      <div
+        v-for="file in files"
+        :key="file.type"
+        class="flex items-center gap-2"
+      >
+        <FileIcon :file-type="file.type" class="size-6" />
+        <p>{{ file.name }}</p>
+      </div>
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/FileIcon.vue b/app/javascript/dashboard/components-next/icon/FileIcon.vue
new file mode 100644
index 000000000..8dd9e7ce1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/FileIcon.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { fileType } = defineProps({
+  fileType: {
+    type: String,
+    required: true,
+  },
+});
+
+const fileTypeIcon = computed(() => {
+  const fileIconMap = {
+    '7z': 'i-woot-file-zip',
+    csv: 'i-woot-file-csv',
+    doc: 'i-woot-file-doc',
+    docx: 'i-woot-file-doc',
+    json: 'i-woot-file-txt',
+    odt: 'i-woot-file-doc',
+    pdf: 'i-woot-file-pdf',
+    ppt: 'i-woot-file-ppt',
+    pptx: 'i-woot-file-ppt',
+    rar: 'i-woot-file-zip',
+    rtf: 'i-woot-file-doc',
+    tar: 'i-woot-file-zip',
+    txt: 'i-woot-file-txt',
+    xls: 'i-woot-file-xls',
+    xlsx: 'i-woot-file-xls',
+    zip: 'i-woot-file-zip',
+  };
+
+  return fileIconMap[fileType] || 'i-teenyicons-text-document-solid';
+});
+</script>
+
+<template>
+  <Icon :icon="fileTypeIcon" />
+</template>
diff --git a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
index 7731e84bb..f63662745 100644
--- a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
@@ -1,9 +1,7 @@
 <script setup>
-defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
+import { ref, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
   type: {
     type: String,
     default: 'text',
@@ -32,13 +30,49 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue', 'enterPress']);
+const emit = defineEmits(['enterPress', 'input', 'blur', 'focus']);
+
+const modelValue = defineModel({
+  type: [String, Number],
+  default: '',
+});
+
+const inlineInputRef = ref(null);
 
 const onEnterPress = () => {
   emit('enterPress');
 };
+
+const handleInput = event => {
+  emit('input', event.target.value);
+  modelValue.value = event.target.value;
+};
+
+const handleBlur = event => {
+  emit('blur', event.target.value);
+};
+
+const handleFocus = event => {
+  emit('focus', event.target.value);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    if (props.focusOnMount) {
+      inlineInputRef.value?.focus();
+    }
+  });
+});
+
+defineExpose({
+  focus: () => inlineInputRef.value?.focus(),
+});
 </script>
 
 <template>
@@ -49,7 +83,7 @@ const onEnterPress = () => {
       v-if="label"
       :for="id"
       :class="customLabelClass"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-11"
     >
       {{ label }}
     </label>
@@ -57,13 +91,16 @@ const onEnterPress = () => {
     <slot name="prefix" />
     <input
       :id="id"
-      :value="modelValue"
+      ref="inlineInputRef"
+      v-model="modelValue"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
       :class="customInputClass"
-      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-lg bg-transparent dark:bg-transparent placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
-      @input="$emit('update:modelValue', $event.target.value)"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
       @keydown.enter.prevent="onEnterPress"
     />
   </div>
diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
new file mode 100644
index 000000000..07bcc203b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -0,0 +1,352 @@
+<script setup>
+import { computed, defineAsyncComponent } from 'vue';
+import { provideMessageContext } from './provider.js';
+import {
+  MESSAGE_TYPES,
+  ATTACHMENT_TYPES,
+  MESSAGE_VARIANTS,
+  SENDER_TYPES,
+  ORIENTATION,
+  MESSAGE_STATUS,
+} from './constants';
+
+import Avatar from 'next/avatar/Avatar.vue';
+
+import TextBubble from './bubbles/Text/Index.vue';
+import ActivityBubble from './bubbles/Activity.vue';
+import ImageBubble from './bubbles/Image.vue';
+import FileBubble from './bubbles/File.vue';
+import AudioBubble from './bubbles/Audio.vue';
+import VideoBubble from './bubbles/Video.vue';
+import InstagramStoryBubble from './bubbles/InstagramStory.vue';
+import AttachmentsBubble from './bubbles/Attachments.vue';
+import EmailBubble from './bubbles/Email/Index.vue';
+import UnsupportedBubble from './bubbles/Unsupported.vue';
+import ContactBubble from './bubbles/Contact.vue';
+import DyteBubble from './bubbles/Dyte.vue';
+const LocationBubble = defineAsyncComponent(
+  () => import('./bubbles/Location.vue')
+);
+
+import MessageError from './MessageError.vue';
+import MessageMeta from './MessageMeta.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Sender
+ * @property {Object} additional_attributes - Additional attributes of the sender
+ * @property {Object} custom_attributes - Custom attributes of the sender
+ * @property {string} email - Email of the sender
+ * @property {number} id - ID of the sender
+ * @property {string|null} identifier - Identifier of the sender
+ * @property {string} name - Name of the sender
+ * @property {string|null} phone_number - Phone number of the sender
+ * @property {string} thumbnail - Thumbnail URL of the sender
+ * @property {string} type - Type of sender
+ */
+
+/**
+ * @typedef {Object} ContentAttributes
+ * @property {string} externalError - an error message to be shown if the message failed to send
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
+ * @property {ContentAttributes} [contentAttributes={}] - Additional attributes of the message content
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ * @property {Sender|null} [sender=null] - The sender information
+ * @property {boolean} [private=false] - Whether the message is private
+ * @property {number|null} [senderId=null] - The ID of the sender
+ * @property {number} createdAt - Timestamp when the message was created
+ * @property {number} currentUserId - The ID of the current user
+ * @property {number} id - The unique identifier for the message
+ * @property {number} messageType - The type of message (must be one of MESSAGE_TYPES)
+ * @property {string|null} [error=null] - Error message if the message failed to send
+ * @property {string|null} [senderType=null] - The type of the sender
+ * @property {string} content - The message content
+ */
+
+// eslint-disable-next-line vue/define-macros-order
+const props = defineProps({
+  id: { type: Number, required: true },
+  messageType: {
+    type: Number,
+    required: true,
+    validator: value => Object.values(MESSAGE_TYPES).includes(value),
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: null,
+  },
+  senderId: {
+    type: Number,
+    default: null,
+  },
+  senderType: {
+    type: String,
+    default: null,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => {},
+  },
+  currentUserId: {
+    type: Number,
+    required: true,
+  },
+  groupWithNext: {
+    type: Boolean,
+    default: false,
+  },
+  inReplyTo: {
+    type: Object,
+    default: null,
+  },
+  isEmailInbox: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * Computes the message variant based on props
+ * @type {import('vue').ComputedRef<'user'|'agent'|'activity'|'private'|'bot'|'template'>}
+ */
+const variant = computed(() => {
+  if (props.private) return MESSAGE_VARIANTS.PRIVATE;
+  if (props.isEmailInbox) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) {
+      return MESSAGE_VARIANTS.EMAIL;
+    }
+  }
+  if (props.status === MESSAGE_STATUS.FAILED) return MESSAGE_VARIANTS.ERROR;
+  if (props.contentAttributes.isUnsupported)
+    return MESSAGE_VARIANTS.UNSUPPORTED;
+
+  const variants = {
+    [MESSAGE_TYPES.INCOMING]: MESSAGE_VARIANTS.USER,
+    [MESSAGE_TYPES.ACTIVITY]: MESSAGE_VARIANTS.ACTIVITY,
+    [MESSAGE_TYPES.OUTGOING]: MESSAGE_VARIANTS.AGENT,
+    [MESSAGE_TYPES.TEMPLATE]: MESSAGE_VARIANTS.TEMPLATE,
+  };
+
+  return variants[props.messageType] || MESSAGE_VARIANTS.USER;
+});
+
+const isMyMessage = computed(() => {
+  const senderId = props.senderId ?? props.sender?.id;
+  const senderType = props.senderType ?? props.sender?.type;
+
+  if (!senderType || !senderId) return false;
+
+  return (
+    senderType.toLowerCase() === SENDER_TYPES.USER.toLowerCase() &&
+    props.currentUserId === senderId
+  );
+});
+
+/**
+ * Computes the message orientation based on sender type and message type
+ * @returns {import('vue').ComputedRef<'left'|'right'|'center'>} The computed orientation
+ */
+const orientation = computed(() => {
+  if (isMyMessage.value) {
+    return ORIENTATION.RIGHT;
+  }
+
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return ORIENTATION.CENTER;
+
+  return ORIENTATION.LEFT;
+});
+
+const flexOrientationClass = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: 'justify-start',
+    [ORIENTATION.RIGHT]: 'justify-end',
+    [ORIENTATION.CENTER]: 'justify-center',
+  };
+
+  return map[orientation.value];
+});
+
+const gridClass = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: 'grid grid-cols-[24px_1fr]',
+    [ORIENTATION.RIGHT]: 'grid grid-cols-1fr',
+  };
+
+  return map[orientation.value];
+});
+
+const gridTemplate = computed(() => {
+  const map = {
+    [ORIENTATION.LEFT]: `
+      "avatar bubble"
+      "spacer meta"
+    `,
+    [ORIENTATION.RIGHT]: `
+      "bubble"
+      "meta"
+    `,
+  };
+
+  return map[orientation.value];
+});
+
+const shouldGroupWithNext = computed(() => {
+  if (props.status === MESSAGE_STATUS.FAILED) return false;
+
+  return props.groupWithNext;
+});
+
+const shouldShowAvatar = computed(() => {
+  if (props.messageType === MESSAGE_TYPES.ACTIVITY) return false;
+  if (orientation.value === ORIENTATION.RIGHT) return false;
+
+  return true;
+});
+
+const componentToRender = computed(() => {
+  if (props.isEmailInbox && !props.private) {
+    const emailInboxTypes = [MESSAGE_TYPES.INCOMING, MESSAGE_TYPES.OUTGOING];
+    if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
+  }
+
+  if (props.contentAttributes.isUnsupported) {
+    return UnsupportedBubble;
+  }
+
+  if (props.contentAttributes.type === 'dyte') {
+    return DyteBubble;
+  }
+
+  if (props.contentAttributes.imageType === 'story_mention') {
+    return InstagramStoryBubble;
+  }
+
+  if (props.attachments.length === 1) {
+    const fileType = props.attachments[0].fileType;
+
+    if (!props.content) {
+      if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
+      if (fileType === ATTACHMENT_TYPES.FILE) return FileBubble;
+      if (fileType === ATTACHMENT_TYPES.AUDIO) return AudioBubble;
+      if (fileType === ATTACHMENT_TYPES.VIDEO) return VideoBubble;
+      if (fileType === ATTACHMENT_TYPES.IG_REEL) return VideoBubble;
+      if (fileType === ATTACHMENT_TYPES.LOCATION) return LocationBubble;
+    }
+    // Attachment content is the name of the contact
+    if (fileType === ATTACHMENT_TYPES.CONTACT) return ContactBubble;
+  }
+
+  if (props.attachments.length > 1 && !props.content) {
+    return AttachmentsBubble;
+  }
+
+  return TextBubble;
+});
+
+provideMessageContext({
+  variant,
+  inReplyTo: props.inReplyTo,
+  orientation,
+  isMyMessage,
+});
+</script>
+
+<template>
+  <div
+    class="flex w-full"
+    :data-message-id="props.id"
+    :class="[flexOrientationClass, shouldGroupWithNext ? 'mb-2' : 'mb-4']"
+  >
+    <div v-if="variant === MESSAGE_VARIANTS.ACTIVITY">
+      <ActivityBubble :content="content" />
+    </div>
+    <div
+      v-else
+      :class="[
+        gridClass,
+        {
+          'gap-y-2': !shouldGroupWithNext,
+          'w-full': variant === MESSAGE_VARIANTS.EMAIL,
+        },
+      ]"
+      class="gap-x-3"
+      :style="{
+        gridTemplateAreas: gridTemplate,
+      }"
+    >
+      <div
+        v-if="!shouldGroupWithNext && shouldShowAvatar"
+        class="[grid-area:avatar] flex items-end"
+      >
+        <Avatar
+          :name="sender ? sender.name : ''"
+          :src="sender?.thumbnail"
+          :size="24"
+        />
+      </div>
+      <div
+        class="[grid-area:bubble]"
+        :class="{
+          'pl-9': ORIENTATION.RIGHT === orientation,
+        }"
+      >
+        <Component :is="componentToRender" v-bind="props" />
+      </div>
+      <MessageError
+        v-if="contentAttributes.externalError"
+        class="[grid-area:meta]"
+        :class="flexOrientationClass"
+        :error="contentAttributes.externalError"
+      />
+      <MessageMeta
+        v-else-if="!shouldGroupWithNext"
+        class="[grid-area:meta]"
+        :class="flexOrientationClass"
+        :sender="props.sender"
+        :status="props.status"
+        :private="props.private"
+        :is-my-message="isMyMessage"
+        :created-at="props.createdAt"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/MessageError.vue b/app/javascript/dashboard/components-next/message/MessageError.vue
new file mode 100644
index 000000000..128ab0b06
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/MessageError.vue
@@ -0,0 +1,31 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  error: { type: String, required: true },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="text-xs text-n-ruby-11 flex items-center gap-1.5">
+    <span>{{ t('CHAT_LIST.FAILED_TO_SEND') }}</span>
+    <div class="relative group">
+      <div
+        class="bg-n-alpha-2 rounded-md size-5 grid place-content-center cursor-pointer"
+      >
+        <Icon
+          icon="i-lucide-alert-triangle"
+          class="text-n-ruby-11 size-[14px]"
+        />
+      </div>
+      <div
+        class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 right-0 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
+      >
+        {{ error }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/MessageMeta.vue b/app/javascript/dashboard/components-next/message/MessageMeta.vue
new file mode 100644
index 000000000..237fb7c5b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/MessageMeta.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
+
+import MessageStatus from './MessageStatus.vue';
+import Icon from 'next/icon/Icon.vue';
+
+import { MESSAGE_STATUS } from './constants';
+
+/**
+ * @typedef {Object} Sender
+ * @property {Object} additional_attributes - Additional attributes of the sender
+ * @property {Object} custom_attributes - Custom attributes of the sender
+ * @property {string} email - Email of the sender
+ * @property {number} id - ID of the sender
+ * @property {string|null} identifier - Identifier of the sender
+ * @property {string} name - Name of the sender
+ * @property {string|null} phone_number - Phone number of the sender
+ * @property {string} thumbnail - Thumbnail URL of the sender
+ * @property {string} type - Type of sender
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {('sent'|'delivered'|'read'|'failed')} status - The delivery status of the message
+ * @property {boolean} [private=false] - Whether the message is private
+ * @property {isMyMessage} [private=false] - Whether the message is sent by the current user or not
+ * @property {number} createdAt - Timestamp when the message was created
+ * @property {Sender|null} [sender=null] - The sender information
+ */
+
+const props = defineProps({
+  sender: {
+    type: Object,
+    required: true,
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  private: {
+    type: Boolean,
+    default: false,
+  },
+  isMyMessage: {
+    type: Boolean,
+    default: false,
+  },
+  createdAt: {
+    type: Number,
+    required: true,
+  },
+});
+
+const readableTime = computed(() =>
+  messageTimestamp(props.createdAt, 'LLL d, h:mm a')
+);
+
+const showSender = computed(() => !props.isMyMessage && props.sender);
+</script>
+
+<template>
+  <div class="text-xs text-n-slate-11 flex items-center gap-1.5">
+    <div class="inline">
+      <span v-if="showSender" class="inline capitalize">{{ sender.name }}</span>
+      <span v-if="showSender && readableTime" class="inline"> • </span>
+      <span class="inline">{{ readableTime }}</span>
+    </div>
+    <Icon
+      v-if="props.private"
+      icon="i-lucide-lock-keyhole"
+      class="text-n-slate-10 size-3"
+    />
+    <MessageStatus v-if="props.isMyMessage" :status />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/MessageStatus.vue b/app/javascript/dashboard/components-next/message/MessageStatus.vue
new file mode 100644
index 000000000..d8f996cf5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/MessageStatus.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { MESSAGE_STATUS } from './constants';
+
+import Icon from 'next/icon/Icon.vue';
+
+const { status } = defineProps({
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+});
+
+const { t } = useI18n();
+
+const progresIconSequence = [
+  'i-lucide-clock-1',
+  'i-lucide-clock-2',
+  'i-lucide-clock-3',
+  'i-lucide-clock-4',
+  'i-lucide-clock-5',
+  'i-lucide-clock-6',
+  'i-lucide-clock-7',
+  'i-lucide-clock-8',
+  'i-lucide-clock-9',
+  'i-lucide-clock-10',
+  'i-lucide-clock-11',
+  'i-lucide-clock-12',
+];
+
+const progessIcon = ref(progresIconSequence[0]);
+
+const rotateIcon = () => {
+  const currentIndex = progresIconSequence.indexOf(progessIcon.value);
+  const nextIndex = (currentIndex + 1) % progresIconSequence.length;
+  progessIcon.value = progresIconSequence[nextIndex];
+};
+
+useIntervalFn(rotateIcon, 500, {
+  immediate: status === MESSAGE_STATUS.PROGRESS,
+  immediateCallback: false,
+});
+
+const statusIcon = computed(() => {
+  const statusIconMap = {
+    [MESSAGE_STATUS.SENT]: 'i-lucide-check',
+    [MESSAGE_STATUS.DELIVERED]: 'i-lucide-check-check',
+    [MESSAGE_STATUS.READ]: 'i-lucide-check-check',
+  };
+
+  return statusIconMap[status];
+});
+
+const statusColor = computed(() => {
+  const statusIconMap = {
+    [MESSAGE_STATUS.SENT]: 'text-n-slate-10',
+    [MESSAGE_STATUS.DELIVERED]: 'text-n-slate-10',
+    [MESSAGE_STATUS.READ]: 'text-[#7EB6FF]',
+  };
+
+  return statusIconMap[status];
+});
+
+const tooltipText = computed(() => {
+  const statusTextMap = {
+    [MESSAGE_STATUS.SENT]: t('CHAT_LIST.SENT'),
+    [MESSAGE_STATUS.DELIVERED]: t('CHAT_LIST.DELIVERED'),
+    [MESSAGE_STATUS.READ]: t('CHAT_LIST.MESSAGE_READ'),
+    [MESSAGE_STATUS.PROGRESS]: t('CHAT_LIST.SENDING'),
+  };
+
+  return statusTextMap[status];
+});
+</script>
+
+<template>
+  <Icon
+    v-if="status === MESSAGE_STATUS.PROGRESS"
+    v-tooltip.top-start="tooltipText"
+    :icon="progessIcon"
+    class="text-n-slate-10"
+  />
+  <Icon
+    v-else
+    v-tooltip.top-start="tooltipText"
+    :icon="statusIcon"
+    :class="statusColor"
+    class="size-[14px]"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Activity.vue b/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
new file mode 100644
index 000000000..72fa1a3b9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Activity.vue
@@ -0,0 +1,16 @@
+<script setup>
+import BaseBubble from './Base.vue';
+
+defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <BaseBubble class="px-2 py-0.5" data-bubble-name="activity">
+    <span v-dompurify-html="content" />
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
new file mode 100644
index 000000000..af3593d82
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
@@ -0,0 +1,30 @@
+<script setup>
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <BaseBubble class="grid gap-2 bg-transparent" data-bubble-name="attachments">
+    <AttachmentChips :attachments="attachments" class="gap-1" />
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Audio.vue b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
new file mode 100644
index 000000000..eed369abc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Audio.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+</script>
+
+<template>
+  <BaseBubble class="bg-transparent" data-bubble-name="audio">
+    <AudioChip
+      :attachment="attachment"
+      class="p-2 text-n-slate-12 bg-n-alpha-3"
+    />
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Base.vue b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
new file mode 100644
index 000000000..a6530f743
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Base.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { computed } from 'vue';
+
+import { emitter } from 'shared/helpers/mitt';
+import { useMessageContext } from '../provider.js';
+import { useI18n } from 'vue-i18n';
+
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
+
+const { variant, orientation, inReplyTo } = useMessageContext();
+const { t } = useI18n();
+
+const varaintBaseMap = {
+  [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
+  [MESSAGE_VARIANTS.PRIVATE]:
+    'bg-n-solid-amber text-n-amber-12 [&_.prosemirror-mention-node]:font-semibold',
+  [MESSAGE_VARIANTS.USER]: 'bg-n-slate-4 text-n-slate-12',
+  [MESSAGE_VARIANTS.ACTIVITY]: 'bg-n-alpha-1 text-n-slate-11 text-sm',
+  [MESSAGE_VARIANTS.BOT]: 'bg-n-solid-iris text-n-slate-12',
+  [MESSAGE_VARIANTS.TEMPLATE]: 'bg-n-solid-iris text-n-slate-12',
+  [MESSAGE_VARIANTS.ERROR]: 'bg-n-ruby-4 text-n-ruby-12',
+  [MESSAGE_VARIANTS.EMAIL]: 'bg-n-alpha-2 w-full',
+  [MESSAGE_VARIANTS.UNSUPPORTED]:
+    'bg-n-solid-amber/70 border border-dashed border-n-amber-12 text-n-amber-12',
+};
+
+const orientationMap = {
+  [ORIENTATION.LEFT]: 'rounded-xl rounded-bl-sm',
+  [ORIENTATION.RIGHT]: 'rounded-xl rounded-br-sm',
+  [ORIENTATION.CENTER]: 'rounded-md',
+};
+
+const messageClass = computed(() => {
+  const classToApply = [varaintBaseMap[variant.value]];
+
+  if (variant.value !== MESSAGE_VARIANTS.ACTIVITY) {
+    classToApply.push(orientationMap[orientation.value]);
+  } else {
+    classToApply.push('rounded-lg');
+  }
+
+  return classToApply;
+});
+
+const scrollToMessage = () => {
+  emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
+    messageId: this.message.id,
+  });
+};
+
+const previewMessage = computed(() => {
+  if (!inReplyTo) return '';
+
+  const { content, attachments } = inReplyTo;
+
+  if (content) return content;
+  if (attachments?.length) {
+    const firstAttachment = attachments[0];
+    const fileType = firstAttachment.fileType ?? firstAttachment.file_type;
+
+    return t(`CHAT_LIST.ATTACHMENTS.${fileType}.CONTENT`);
+  }
+
+  return t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND');
+});
+</script>
+
+<template>
+  <div
+    class="text-sm min-w-32 break-words"
+    :class="[
+      messageClass,
+      {
+        'max-w-md': variant !== MESSAGE_VARIANTS.EMAIL,
+      },
+    ]"
+  >
+    <div
+      v-if="inReplyTo"
+      class="bg-n-alpha-black1 rounded-lg p-2"
+      @click="scrollToMessage"
+    >
+      <span class="line-clamp-2">
+        {{ previewMessage }}
+      </span>
+    </div>
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
new file mode 100644
index 000000000..45880d521
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BaseBubble from './Base.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  icon: { type: [String, Object], required: true },
+  iconBgColor: { type: String, default: 'bg-n-alpha-3' },
+  sender: { type: Object, default: () => ({}) },
+  senderTranslationKey: { type: String, required: true },
+  content: { type: String, required: true },
+  action: {
+    type: Object,
+    required: true,
+    validator: action => {
+      return action.label && (action.href || action.onClick);
+    },
+  },
+});
+
+const { t } = useI18n();
+
+const senderName = computed(() => {
+  return props.sender.name;
+});
+</script>
+
+<template>
+  <BaseBubble
+    class="overflow-hidden grid gap-4 min-w-64 p-0"
+    data-bubble-name="attachment"
+  >
+    <slot name="before" />
+    <div class="grid gap-3 px-3 pt-3 z-20">
+      <div
+        class="size-8 rounded-lg grid place-content-center"
+        :class="iconBgColor"
+      >
+        <slot name="icon">
+          <Icon :icon="icon" class="text-white size-4" />
+        </slot>
+      </div>
+      <div class="space-y-1">
+        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
+          {{
+            t(senderTranslationKey, {
+              sender: senderName,
+            })
+          }}
+        </div>
+        <slot>
+          <div v-if="content" class="truncate text-sm text-n-slate-11">
+            {{ content }}
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div v-if="action" class="px-3 pb-3">
+      <a
+        v-if="action.href"
+        :href="action.href"
+        rel="noreferrer noopener nofollow"
+        target="_blank"
+        class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center"
+      >
+        {{ action.label }}
+      </a>
+      <button
+        v-else
+        class="w-full bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
+        @click="action.onClick"
+      >
+        {{ action.label }}
+      </button>
+    </div>
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Contact.vue b/app/javascript/dashboard/components-next/message/bubbles/Contact.vue
new file mode 100644
index 000000000..ce16e1b1e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Contact.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { computed } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+
+import {
+  DuplicateContactException,
+  ExceptionWithMessage,
+} from 'shared/helpers/CustomErrors';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const $store = useStore();
+const { t } = useI18n();
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const phoneNumber = computed(() => {
+  return attachment.value.fallbackTitle;
+});
+
+const formattedPhoneNumber = computed(() => {
+  return phoneNumber.value.replace(/\s|-|[A-Za-z]/g, '');
+});
+
+const rawPhoneNumber = computed(() => {
+  return phoneNumber.value.replace(/\D/g, '');
+});
+
+const name = computed(() => {
+  return props.content;
+});
+
+function getContactObject() {
+  const contactItem = {
+    name: name.value,
+    phone_number: `+${rawPhoneNumber.value}`,
+  };
+  return contactItem;
+}
+
+async function filterContactByNumber(searchCandidate) {
+  const query = {
+    attribute_key: 'phone_number',
+    filter_operator: 'equal_to',
+    values: [searchCandidate],
+    attribute_model: 'standard',
+    custom_attribute_type: '',
+  };
+
+  const queryPayload = { payload: [query] };
+  const contacts = await $store.dispatch('contacts/filter', {
+    queryPayload,
+    resetState: false,
+  });
+  return contacts.shift();
+}
+
+function openContactNewTab(contactId) {
+  const accountId = window.location.pathname.split('/')[3];
+  const url = `/app/accounts/${accountId}/contacts/${contactId}`;
+  window.open(url, '_blank');
+}
+
+async function addContact() {
+  try {
+    let contact = await filterContactByNumber(rawPhoneNumber);
+    if (!contact) {
+      contact = await $store.dispatch('contacts/create', getContactObject());
+      useAlert(t('CONTACT_FORM.SUCCESS_MESSAGE'));
+    }
+    openContactNewTab(contact.id);
+  } catch (error) {
+    if (error instanceof DuplicateContactException) {
+      if (error.data.includes('phone_number')) {
+        useAlert(t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
+      }
+    } else if (error instanceof ExceptionWithMessage) {
+      useAlert(error.data);
+    } else {
+      useAlert(t('CONTACT_FORM.ERROR_MESSAGE'));
+    }
+  }
+}
+
+const action = computed(() => ({
+  label: t('CONVERSATION.SAVE_CONTACT'),
+  onClick: addContact,
+}));
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-teenyicons-user-circle-solid"
+    icon-bg-color="bg-[#D6409F]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.CONTACT"
+    :content="phoneNumber"
+    :action="formattedPhoneNumber ? action : null"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue b/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue
new file mode 100644
index 000000000..63932c18d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { computed, ref } from 'vue';
+import DyteAPI from 'dashboard/api/integrations/dyte';
+import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+
+const props = defineProps({
+  contentAttributes: {
+    type: String,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const meetingData = computed(() => {
+  return useCamelCase(props.contentAttributes.data);
+});
+
+const isLoading = ref(false);
+const dyteAuthToken = ref('');
+
+const meetingLink = computed(() => {
+  return buildDyteURL(meetingData.value.roomName, dyteAuthToken.value);
+});
+
+const joinTheCall = async () => {
+  isLoading.value = true;
+  try {
+    const { data: { authResponse: { authToken } = {} } = {} } =
+      await DyteAPI.addParticipantToMeeting(meetingData.value.messageId);
+    dyteAuthToken.value = authToken;
+  } catch (err) {
+    useAlert(t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const leaveTheRoom = () => {
+  this.dyteAuthToken = '';
+};
+const action = computed(() => ({
+  label: t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN'),
+  onClick: joinTheCall,
+}));
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-ph-video-camera-fill"
+    icon-bg-color="bg-[#2781F6]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.MEETING"
+    :action="action"
+  >
+    <div v-if="dyteAuthToken" class="video-call--container">
+      <iframe
+        :src="meetingLink"
+        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+      />
+      <button
+        class="bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
+        @click="leaveTheRoom"
+      >
+        {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
+      </button>
+    </div>
+    <div v-else>
+      {{ '' }}
+    </div>
+  </BaseAttachmentBubble>
+</template>
+
+<style lang="scss">
+.join-call-button {
+  margin: var(--space-small) 0;
+}
+
+.video-call--container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-index-high);
+  padding: var(--space-smaller);
+  background: var(--b-800);
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  button {
+    position: absolute;
+    top: var(--space-smaller);
+    right: 10rem;
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
new file mode 100644
index 000000000..0549a806d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
@@ -0,0 +1,98 @@
+<script setup>
+import { computed } from 'vue';
+import { MESSAGE_STATUS } from '../../constants';
+
+const props = defineProps({
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const hasError = computed(() => {
+  return props.status === MESSAGE_STATUS.FAILED;
+});
+
+const fromEmail = computed(() => {
+  return props.contentAttributes?.email?.from ?? [];
+});
+
+const toEmail = computed(() => {
+  return props.contentAttributes?.email?.to ?? [];
+});
+
+const ccEmail = computed(() => {
+  return (
+    props.contentAttributes?.ccEmails ??
+    props.contentAttributes?.email?.cc ??
+    []
+  );
+});
+
+const senderName = computed(() => {
+  return props.sender.name ?? '';
+});
+
+const bccEmail = computed(() => {
+  return (
+    props.contentAttributes?.bccEmails ??
+    props.contentAttributes?.email?.bcc ??
+    []
+  );
+});
+
+const subject = computed(() => {
+  return props.contentAttributes?.email?.subject ?? '';
+});
+
+const showMeta = computed(() => {
+  return (
+    fromEmail.value[0] ||
+    toEmail.value.length ||
+    ccEmail.value.length ||
+    bccEmail.value.length ||
+    subject.value
+  );
+});
+</script>
+
+<template>
+  <section
+    v-show="showMeta"
+    class="p-4 space-y-1 pr-9 border-b border-n-strong"
+    :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
+  >
+    <template v-if="showMeta">
+      <div v-if="fromEmail[0]">
+        <span :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'">
+          {{ senderName }}
+        </span>
+        &lt;{{ fromEmail[0] }}&gt;
+      </div>
+      <div v-if="toEmail.length">
+        {{ $t('EMAIL_HEADER.TO') }}: {{ toEmail.join(', ') }}
+      </div>
+      <div v-if="ccEmail.length">
+        {{ $t('EMAIL_HEADER.CC') }}:
+        {{ ccEmail.join(', ') }}
+      </div>
+      <div v-if="bccEmail.length">
+        {{ $t('EMAIL_HEADER.BCC') }}:
+        {{ bccEmail.join(', ') }}
+      </div>
+      <div v-if="subject">
+        {{ $t('EMAIL_HEADER.SUBJECT') }}:
+        {{ subject }}
+      </div>
+    </template>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
new file mode 100644
index 000000000..ec32c1c37
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -0,0 +1,133 @@
+<script setup>
+import { computed, useTemplateRef, ref, onMounted } from 'vue';
+import { Letter } from 'vue-letter';
+
+import Icon from 'next/icon/Icon.vue';
+import { EmailQuoteExtractor } from './removeReply.js';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+
+import EmailMeta from './EmailMeta.vue';
+import { MESSAGE_STATUS, MESSAGE_TYPES } from '../../constants';
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  status: {
+    type: String,
+    required: true,
+    validator: value => Object.values(MESSAGE_STATUS).includes(value),
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+  messageType: {
+    type: Number,
+    required: true,
+  },
+});
+
+const isExpandable = ref(false);
+const isExpanded = ref(false);
+const showQuotedMessage = ref(false);
+const contentContainer = useTemplateRef('contentContainer');
+
+onMounted(() => {
+  isExpandable.value = contentContainer.value.scrollHeight > 400;
+});
+
+const isOutgoing = computed(() => {
+  return props.messageType === MESSAGE_TYPES.OUTGOING;
+});
+
+const fullHTML = computed(() => {
+  return props.contentAttributes?.email?.htmlContent?.full ?? props.content;
+});
+
+const unquotedHTML = computed(() => {
+  return EmailQuoteExtractor.extractQuotes(fullHTML.value);
+});
+
+const hasQuotedMessage = computed(() => {
+  return EmailQuoteExtractor.hasQuotes(fullHTML.value);
+});
+
+const textToShow = computed(() => {
+  const text =
+    props.contentAttributes?.email?.textContent?.full ?? props.content;
+  return text.replace(/\n/g, '<br>');
+});
+</script>
+
+<template>
+  <BaseBubble class="w-full overflow-hidden" data-bubble-name="email">
+    <EmailMeta :status :sender :content-attributes />
+    <section
+      ref="contentContainer"
+      class="p-4"
+      :class="{
+        'max-h-[400px] overflow-hidden relative': !isExpanded && isExpandable,
+      }"
+    >
+      <div
+        v-if="isExpandable && !isExpanded"
+        class="absolute left-0 right-0 bottom-0 h-40 p-8 flex items-end bg-gradient-to-t dark:from-[#24252b] from-[#F5F5F6] dark:via-[rgba(36,37,43,0.5)] via-[rgba(245,245,246,0.50)] dark:to-transparent to-[rgba(245,245,246,0.00)]"
+      >
+        <button
+          class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
+          @click="isExpanded = true"
+        >
+          <Icon icon="i-lucide-maximize-2" />
+          {{ $t('EMAIL_HEADER.EXPAND') }}
+        </button>
+      </div>
+      <FormattedContent v-if="isOutgoing && content" :content="content" />
+      <template v-else>
+        <Letter
+          v-if="showQuotedMessage"
+          class-name="prose prose-email !max-w-none"
+          :html="fullHTML"
+          :text="textToShow"
+        />
+        <Letter
+          v-else
+          class-name="prose prose-email !max-w-none"
+          :html="unquotedHTML"
+          :text="textToShow"
+        />
+      </template>
+      <button
+        v-if="hasQuotedMessage"
+        class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
+        @click="showQuotedMessage = !showQuotedMessage"
+      >
+        <template v-if="showQuotedMessage">
+          {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
+        </template>
+        <template v-else>
+          {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
+        </template>
+        <Icon
+          :icon="
+            showQuotedMessage ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
+          "
+        />
+      </button>
+    </section>
+    <section v-if="attachments.length" class="px-4 pb-4 space-y-2">
+      <AttachmentChips :attachments="attachments" class="gap-1" />
+    </section>
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/removeReply.js b/app/javascript/dashboard/components-next/message/bubbles/Email/removeReply.js
new file mode 100644
index 000000000..50b0c9df9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/removeReply.js
@@ -0,0 +1,126 @@
+// Quote detection strategies
+const QUOTE_INDICATORS = [
+  '.gmail_quote_container',
+  '.gmail_quote',
+  '.OutlookQuote',
+  '.email-quote',
+  '.quoted-text',
+  '.quote',
+  '[class*="quote"]',
+  '[class*="Quote"]',
+];
+
+// Regex patterns for quote identification
+const QUOTE_PATTERNS = [
+  /On .* wrote:/i,
+  /-----Original Message-----/i,
+  /Sent: /i,
+  /From: /i,
+];
+
+export class EmailQuoteExtractor {
+  /**
+   * Remove quotes from email HTML and return cleaned HTML
+   * @param {string} htmlContent - Full HTML content of the email
+   * @returns {string} HTML content with quotes removed
+   */
+  static extractQuotes(htmlContent) {
+    // Create a temporary DOM element to parse HTML
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+
+    // Remove elements matching class selectors
+    QUOTE_INDICATORS.forEach(selector => {
+      tempDiv.querySelectorAll(selector).forEach(el => {
+        el.remove();
+      });
+    });
+
+    // Remove text-based quotes
+    const textNodeQuotes = this.findTextNodeQuotes(tempDiv);
+    textNodeQuotes.forEach(el => {
+      el.remove();
+    });
+
+    return tempDiv.innerHTML;
+  }
+
+  /**
+   * Check if HTML content contains any quotes
+   * @param {string} htmlContent - Full HTML content of the email
+   * @returns {boolean} True if quotes are detected, false otherwise
+   */
+  static hasQuotes(htmlContent) {
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = htmlContent;
+
+    // Check for class-based quotes
+    // eslint-disable-next-line no-restricted-syntax
+    for (const selector of QUOTE_INDICATORS) {
+      if (tempDiv.querySelector(selector)) {
+        return true;
+      }
+    }
+
+    // Check for text-based quotes
+    const textNodeQuotes = this.findTextNodeQuotes(tempDiv);
+    return textNodeQuotes.length > 0;
+  }
+
+  /**
+   * Find text nodes that match quote patterns
+   * @param {Element} rootElement - Root element to search
+   * @returns {Element[]} Array of parent block elements containing quote-like text
+   */
+  static findTextNodeQuotes(rootElement) {
+    const quoteBlocks = [];
+    const treeWalker = document.createTreeWalker(
+      rootElement,
+      NodeFilter.SHOW_TEXT,
+      null,
+      false
+    );
+
+    for (
+      let currentNode = treeWalker.nextNode();
+      currentNode !== null;
+      currentNode = treeWalker.nextNode()
+    ) {
+      const isQuoteLike = QUOTE_PATTERNS.some(pattern =>
+        pattern.test(currentNode.textContent)
+      );
+
+      if (isQuoteLike) {
+        const parentBlock = this.findParentBlock(currentNode);
+        if (parentBlock && !quoteBlocks.includes(parentBlock)) {
+          quoteBlocks.push(parentBlock);
+        }
+      }
+    }
+
+    return quoteBlocks;
+  }
+
+  /**
+   * Find the closest block-level parent element by recursively traversing up the DOM tree.
+   * This method searches for common block-level elements like DIV, P, BLOCKQUOTE, and SECTION
+   * that contain the text node. It's used to identify and remove entire block-level elements
+   * that contain quote-like text, rather than just removing the text node itself. This ensures
+   * proper structural removal of quoted content while maintaining HTML integrity.
+   * @param {Node} node - Starting node to find parent
+   * @returns {Element|null} Block-level parent element
+   */
+  static findParentBlock(node) {
+    const blockElements = ['DIV', 'P', 'BLOCKQUOTE', 'SECTION'];
+    let current = node.parentElement;
+
+    while (current) {
+      if (blockElements.includes(current.tagName)) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+
+    return null;
+  }
+}
diff --git a/app/javascript/dashboard/components-next/message/bubbles/File.vue b/app/javascript/dashboard/components-next/message/bubbles/File.vue
new file mode 100644
index 000000000..c58642f0f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/File.vue
@@ -0,0 +1,73 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import BaseAttachmentBubble from './BaseAttachment.vue';
+import FileIcon from 'next/icon/FileIcon.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const url = computed(() => {
+  return props.attachments[0].dataUrl;
+});
+
+const fileName = computed(() => {
+  if (url.value) {
+    const filename = url.value.substring(url.value.lastIndexOf('/') + 1);
+    return filename || t('CONVERSATION.UNKNOWN_FILE_TYPE');
+  }
+  return t('CONVERSATION.UNKNOWN_FILE_TYPE');
+});
+
+const fileType = computed(() => {
+  return fileName.value.split('.').pop();
+});
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-teenyicons-user-circle-solid"
+    icon-bg-color="bg-n-alpha-3 dark:bg-n-alpha-white"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.FILE"
+    :content="decodeURI(fileName)"
+    :action="{
+      href: url,
+      label: $t('CONVERSATION.DOWNLOAD'),
+    }"
+  >
+    <template #icon>
+      <FileIcon :file-type="fileType" class="size-4" />
+    </template>
+  </BaseAttachmentBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Image.vue b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
new file mode 100644
index 000000000..9caa897fa
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { ref, computed } from 'vue';
+import BaseBubble from './Base.vue';
+import Button from 'next/button/Button.vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from 'next/message/provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['error']);
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const hasError = ref(false);
+const showGallery = ref(false);
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
+
+const downloadAttachment = async () => {
+  const response = await fetch(attachment.value.dataUrl);
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `attachment${attachment.value.extension || ''}`;
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(a);
+};
+</script>
+
+<template>
+  <BaseBubble
+    class="overflow-hidden relative group border-[4px] border-n-weak"
+    data-bubble-name="image"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="hasError"
+      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.MEDIA.IMAGE_UNAVAILABLE') }}
+      </p>
+    </div>
+    <template v-else>
+      <img
+        :src="attachment.dataUrl"
+        :width="attachment.width"
+        :height="attachment.height"
+        @click="onClick"
+        @error="handleError"
+      />
+      <div
+        class="inset-0 p-2 absolute bg-gradient-to-tl from-n-slate-12/30 dark:from-n-slate-1/50 via-transparent to-transparent hidden group-hover:flex items-end justify-end gap-1.5"
+      >
+        <Button xs solid slate icon="i-lucide-expand" class="opacity-60" />
+        <Button
+          xs
+          solid
+          slate
+          icon="i-lucide-download"
+          class="opacity-60"
+          @click="downloadAttachment"
+        />
+      </div>
+    </template>
+  </BaseBubble>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="handleError"
+    @close="() => (showGallery = false)"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
new file mode 100644
index 000000000..a3741d704
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+import Icon from 'next/icon/Icon.vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['error']);
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const { variant } = useMessageContext();
+const hasImgStoryError = ref(false);
+const hasVideoStoryError = ref(false);
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+
+const onImageLoadError = () => {
+  hasImgStoryError.value = true;
+  emit('error');
+};
+
+const onVideoLoadError = () => {
+  hasVideoStoryError.value = true;
+  emit('error');
+};
+</script>
+
+<template>
+  <BaseBubble class="p-3 overflow-hidden" data-bubble-name="ig-story">
+    <div v-if="content" class="mb-2" v-html="formattedContent" />
+    <img
+      v-if="!hasImgStoryError"
+      class="rounded-lg max-w-80"
+      :src="attachment.dataUrl"
+      @error="onImageLoadError"
+    />
+    <video
+      v-else-if="!hasVideoStoryError"
+      class="rounded-lg max-w-80"
+      controls
+      :src="attachment.dataUrl"
+      @error="onVideoLoadError"
+    />
+    <div
+      v-else
+      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
+      </p>
+    </div>
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Location.vue b/app/javascript/dashboard/components-next/message/bubbles/Location.vue
new file mode 100644
index 000000000..5266f3a81
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Location.vue
@@ -0,0 +1,108 @@
+<script setup>
+import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
+import BaseAttachmentBubble from './BaseAttachment.vue';
+import { useI18n } from 'vue-i18n';
+import maplibregl from 'maplibre-gl';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const lat = computed(() => {
+  return attachment.value.coordinatesLat;
+});
+const long = computed(() => {
+  return attachment.value.coordinatesLong;
+});
+
+const title = computed(() => {
+  return attachment.value.fallbackTitle;
+});
+
+const mapUrl = computed(
+  () => `https://maps.google.com/?q=${lat.value},${long.value}`
+);
+
+const mapContainer = useTemplateRef('mapContainer');
+
+const setupMap = () => {
+  const map = new maplibregl.Map({
+    style: 'https://tiles.openfreemap.org/styles/positron',
+    center: [long.value, lat.value],
+    zoom: 9.5,
+    container: mapContainer.value,
+    attributionControl: false,
+    dragPan: false,
+    dragRotate: false,
+    scrollZoom: false,
+    touchZoom: false,
+    touchRotate: false,
+    keyboard: false,
+    doubleClickZoom: false,
+  });
+
+  return map;
+};
+
+onMounted(async () => {
+  await nextTick();
+  setupMap();
+});
+</script>
+
+<template>
+  <BaseAttachmentBubble
+    icon="i-ph-navigation-arrow-fill"
+    icon-bg-color="bg-[#0D9B8A]"
+    :sender="sender"
+    sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.LOCATION"
+    :content="title"
+    :action="{
+      label: t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP'),
+      href: mapUrl,
+    }"
+  >
+    <template #before>
+      <div
+        ref="mapContainer"
+        class="z-10 w-full max-w-md -mb-12 min-w-64 h-28"
+      />
+    </template>
+  </BaseAttachmentBubble>
+</template>
+
+<style>
+@import 'maplibre-gl/dist/maplibre-gl.css';
+</style>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
new file mode 100644
index 000000000..a2f247bbc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../../provider.js';
+
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
+import { MESSAGE_VARIANTS } from '../../constants';
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+});
+
+const { variant } = useMessageContext();
+
+const formattedContent = computed(() => {
+  if (variant.value === MESSAGE_VARIANTS.ACTIVITY) {
+    return props.content;
+  }
+
+  return new MessageFormatter(props.content).formattedMessage;
+});
+</script>
+
+<template>
+  <span
+    v-dompurify-html="formattedContent"
+    class="[&>p:last-child]:mb-0 [&>ul]:list-inside"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
new file mode 100644
index 000000000..dc573760e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import FormattedContent from './FormattedContent.vue';
+import AttachmentChips from 'next/message/chips/AttachmentChips.vue';
+import { MESSAGE_TYPES } from '../../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+  contentAttributes: {
+    type: Object,
+    default: () => ({}),
+  },
+  messageType: {
+    type: Number,
+    required: true,
+    validator: value => Object.values(MESSAGE_TYPES).includes(value),
+  },
+});
+
+const isTemplate = computed(() => {
+  return props.messageType === MESSAGE_TYPES.TEMPLATE;
+});
+</script>
+
+<template>
+  <BaseBubble class="flex flex-col gap-3 px-4 py-3" data-bubble-name="text">
+    <FormattedContent v-if="content" :content="content" />
+    <AttachmentChips :attachments="attachments" class="gap-2" />
+    <template v-if="isTemplate">
+      <div
+        v-if="contentAttributes.submittedEmail"
+        class="px-2 py-1 rounded-lg bg-n-alpha-3"
+      >
+        {{ contentAttributes.submittedEmail }}
+      </div>
+    </template>
+  </BaseBubble>
+</template>
+
+<style>
+p:last-child {
+  margin-bottom: 0;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
new file mode 100644
index 000000000..5268cb02c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
@@ -0,0 +1,9 @@
+<script setup>
+import BaseBubble from './Base.vue';
+</script>
+
+<template>
+  <BaseBubble class="px-4 py-3 text-sm" data-bubble-name="unsupported">
+    {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+  </BaseBubble>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Video.vue b/app/javascript/dashboard/components-next/message/bubbles/Video.vue
new file mode 100644
index 000000000..2d8586111
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Video.vue
@@ -0,0 +1,84 @@
+<script setup>
+import { ref, computed } from 'vue';
+import BaseBubble from './Base.vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from 'next/message/provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+import { ATTACHMENT_TYPES } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+
+/**
+ * @typedef {Object} Props
+ * @property {Attachment[]} [attachments=[]] - The attachments associated with the message
+ */
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    required: true,
+  },
+});
+const emit = defineEmits(['error']);
+const hasError = ref(false);
+const showGallery = ref(false);
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+  emit('error');
+};
+
+const attachment = computed(() => {
+  return props.attachments[0];
+});
+
+const isReel = computed(() => {
+  return attachment.value.fileType === ATTACHMENT_TYPES.IG_REEL;
+});
+</script>
+
+<template>
+  <BaseBubble
+    class="overflow-hidden relative group border-[4px] border-n-weak"
+    data-bubble-name="video"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="isReel"
+      class="absolute p-2 flex items-start justify-end size-12 bg-gradient-to-bl from-n-alpha-black1 to-transparent right-0"
+    >
+      <Icon icon="i-lucide-instagram" class="text-white" />
+    </div>
+    <video
+      controls
+      :src="attachment.dataUrl"
+      :class="{
+        'max-w-48': isReel,
+        'max-w-full': !isReel,
+      }"
+      @error="handleError"
+    />
+  </BaseBubble>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="onError"
+    @close="() => (showGallery = false)"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
new file mode 100644
index 000000000..4fd1d6428
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/AttachmentChips.vue
@@ -0,0 +1,106 @@
+<script setup>
+import { computed, defineOptions, useAttrs } from 'vue';
+
+import ImageChip from 'next/message/chips/Image.vue';
+import VideoChip from 'next/message/chips/Video.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
+import FileChip from 'next/message/chips/File.vue';
+import { useMessageContext } from '../provider.js';
+
+import { ATTACHMENT_TYPES } from '../constants';
+
+/**
+ * @typedef {Object} Attachment
+ * @property {number} id - Unique identifier for the attachment
+ * @property {number} messageId - ID of the associated message
+ * @property {'image'|'audio'|'video'|'file'|'location'|'fallback'|'share'|'story_mention'|'contact'|'ig_reel'} fileType - Type of the attachment (file or image)
+ * @property {number} accountId - ID of the associated account
+ * @property {string|null} extension - File extension
+ * @property {string} dataUrl - URL to access the full attachment data
+ * @property {string} thumbUrl - URL to access the thumbnail version
+ * @property {number} fileSize - Size of the file in bytes
+ * @property {number|null} width - Width of the image if applicable
+ * @property {number|null} height - Height of the image if applicable
+ */
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const attrs = useAttrs();
+const { orientation } = useMessageContext();
+
+const classToApply = computed(() => {
+  const baseClasses = [attrs.class, 'flex', 'flex-wrap'];
+
+  if (orientation.value === 'right') {
+    baseClasses.push('justify-end');
+  }
+
+  return baseClasses;
+});
+
+const allAttachments = computed(() => {
+  return Array.isArray(props.attachments) ? props.attachments : [];
+});
+
+const mediaAttachments = computed(() => {
+  const allowedTypes = [ATTACHMENT_TYPES.IMAGE, ATTACHMENT_TYPES.VIDEO];
+  const mediaTypes = allAttachments.value.filter(attachment =>
+    allowedTypes.includes(attachment.fileType)
+  );
+
+  return mediaTypes.sort(
+    (a, b) =>
+      allowedTypes.indexOf(a.fileType) - allowedTypes.indexOf(b.fileType)
+  );
+});
+
+const recordings = computed(() => {
+  return allAttachments.value.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
+  );
+});
+
+const files = computed(() => {
+  return allAttachments.value.filter(
+    attachment => attachment.fileType === ATTACHMENT_TYPES.FILE
+  );
+});
+</script>
+
+<template>
+  <div v-if="mediaAttachments.length" :class="classToApply">
+    <template v-for="attachment in mediaAttachments" :key="attachment.id">
+      <ImageChip
+        v-if="attachment.fileType === ATTACHMENT_TYPES.IMAGE"
+        :attachment="attachment"
+      />
+      <VideoChip
+        v-else-if="attachment.fileType === ATTACHMENT_TYPES.VIDEO"
+        :attachment="attachment"
+      />
+    </template>
+  </div>
+  <div v-if="recordings.length" :class="classToApply">
+    <div v-for="attachment in recordings" :key="attachment.id">
+      <AudioChip
+        class="bg-n-alpha-3 dark:bg-n-alpha-2 text-n-slate-12"
+        :attachment="attachment"
+      />
+    </div>
+  </div>
+  <div v-if="files.length" :class="classToApply">
+    <FileChip
+      v-for="attachment in files"
+      :key="attachment.id"
+      :attachment="attachment"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Audio.vue b/app/javascript/dashboard/components-next/message/chips/Audio.vue
new file mode 100644
index 000000000..2388c80be
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/Audio.vue
@@ -0,0 +1,133 @@
+<script setup>
+import { computed, useTemplateRef, ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
+
+const { attachment } = defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const timeStampURL = computed(() => {
+  return timeStampAppendedURL(attachment.dataUrl);
+});
+
+const audioPlayer = useTemplateRef('audioPlayer');
+
+const isPlaying = ref(false);
+const isMuted = ref(false);
+const currentTime = ref(0);
+const duration = ref(0);
+
+const onLoadedMetadata = () => {
+  duration.value = audioPlayer.value.duration;
+};
+
+const formatTime = time => {
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60);
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+};
+
+const toggleMute = () => {
+  audioPlayer.value.muted = !audioPlayer.value.muted;
+  isMuted.value = audioPlayer.value.muted;
+};
+
+const onTimeUpdate = () => {
+  currentTime.value = audioPlayer.value.currentTime;
+};
+
+const seek = event => {
+  const time = Number(event.target.value);
+  audioPlayer.value.currentTime = time;
+  currentTime.value = time;
+};
+
+const playOrPause = () => {
+  if (isPlaying.value) {
+    audioPlayer.value.pause();
+    isPlaying.value = false;
+  } else {
+    audioPlayer.value.play();
+    isPlaying.value = true;
+  }
+};
+
+const onEnd = () => {
+  isPlaying.value = false;
+  currentTime.value = 0;
+};
+
+const downloadAudio = async () => {
+  const response = await fetch(timeStampURL.value);
+  const blob = await response.blob();
+  const url = window.URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  const filename = timeStampURL.value.split('/').pop().split('?')[0] || 'audio';
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  window.URL.revokeObjectURL(url);
+  document.body.removeChild(anchor);
+};
+</script>
+
+<template>
+  <audio
+    ref="audioPlayer"
+    controls
+    class="hidden"
+    @loadedmetadata="onLoadedMetadata"
+    @timeupdate="onTimeUpdate"
+    @ended="onEnd"
+  >
+    <source :src="timeStampURL" />
+  </audio>
+  <div
+    v-bind="$attrs"
+    class="rounded-xl w-full gap-1 p-1.5 bg-n-alpha-white flex items-center border border-n-container shadow-[0px_2px_8px_0px_rgba(94,94,94,0.06)]"
+  >
+    <button class="p-0 border-0 size-8" @click="playOrPause">
+      <Icon
+        v-if="isPlaying"
+        class="size-8"
+        icon="i-teenyicons-pause-small-solid"
+      />
+      <Icon v-else class="size-8" icon="i-teenyicons-play-small-solid" />
+    </button>
+    <div class="tabular-nums text-xs">
+      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+    </div>
+    <div class="flex items-center px-2">
+      <input
+        type="range"
+        min="0"
+        :max="duration"
+        :value="currentTime"
+        class="w-full h-1 bg-n-slate-12/40 rounded-lg appearance-none cursor-pointer accent-current"
+        @input="seek"
+      />
+    </div>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="toggleMute"
+    >
+      <Icon v-if="isMuted" class="size-4" icon="i-lucide-volume-off" />
+      <Icon v-else class="size-4" icon="i-lucide-volume-2" />
+    </button>
+    <button
+      class="p-0 border-0 size-8 grid place-content-center"
+      @click="downloadAudio"
+    >
+      <Icon class="size-4" icon="i-lucide-download" />
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/File.vue b/app/javascript/dashboard/components-next/message/chips/File.vue
new file mode 100644
index 000000000..03d3b9c48
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/File.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FileIcon from 'next/icon/FileIcon.vue';
+import Icon from 'next/icon/Icon.vue';
+
+const { attachment } = defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const fileName = computed(() => {
+  const url = attachment.dataUrl;
+  if (url) {
+    const filename = url.substring(url.lastIndexOf('/') + 1);
+    return filename || t('CONVERSATION.UNKNOWN_FILE_TYPE');
+  }
+  return t('CONVERSATION.UNKNOWN_FILE_TYPE');
+});
+
+const fileType = computed(() => {
+  return fileName.value.split('.').pop();
+});
+
+const textColorClass = computed(() => {
+  const colorMap = {
+    '7z': 'dark:text-[#EDEEF0] text-[#2F265F]',
+    csv: 'text-amber-12',
+    doc: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    docx: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    json: 'text-n-slate-12',
+    odt: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    pdf: 'text-n-ruby-12',
+    ppt: 'dark:text-[#FFE0C2] text-[#582D1D]',
+    pptx: 'dark:text-[#FFE0C2] text-[#582D1D]',
+    rar: 'dark:text-[#EDEEF0] text-[#2F265F]',
+    rtf: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
+    tar: 'dark:text-[#EDEEF0] text-[#2F265F]',
+    txt: 'text-n-slate-12',
+    xls: 'text-n-teal-12',
+    xlsx: 'text-n-teal-12',
+    zip: 'dark:text-[#EDEEF0] text-[#2F265F]',
+  };
+
+  return colorMap[fileType.value] || 'text-n-slate-12';
+});
+</script>
+
+<template>
+  <div
+    class="h-9 bg-n-alpha-white gap-2 items-center flex px-2 rounded-lg border border-n-strong"
+  >
+    <FileIcon class="flex-shrink-0" :file-type="fileType" />
+    <span class="mr-1 max-w-32 truncate" :class="textColorClass">
+      {{ fileName }}
+    </span>
+    <a
+      v-tooltip="t('CONVERSATION.DOWNLOAD')"
+      class="flex-shrink-0 h-9 grid place-content-center cursor-pointer text-n-slate-11"
+      :href="url"
+      rel="noreferrer noopener nofollow"
+      target="_blank"
+    >
+      <Icon icon="i-lucide-download" />
+    </a>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Image.vue b/app/javascript/dashboard/components-next/message/chips/Image.vue
new file mode 100644
index 000000000..3a1ad1888
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/Image.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from '../provider.js';
+
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+const hasError = ref(false);
+const showGallery = ref(false);
+
+const { filteredCurrentChatAttachments } = useMessageContext();
+
+const handleError = () => {
+  hasError.value = true;
+};
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer"
+    @click="showGallery = true"
+  >
+    <div
+      v-if="hasError"
+      class="flex flex-col items-center justify-center gap-1 text-xs text-center rounded-lg size-full bg-n-alpha-1 text-n-slate-11"
+    >
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      {{ $t('COMPONENTS.MEDIA.LOADING_FAILED') }}
+    </div>
+    <img
+      v-else
+      class="object-cover w-full h-full"
+      :src="attachment.dataUrl"
+      @error="handleError"
+    />
+  </div>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="handleError"
+    @close="() => (showGallery = false)"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/chips/Video.vue b/app/javascript/dashboard/components-next/message/chips/Video.vue
new file mode 100644
index 000000000..c9904b998
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/chips/Video.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { useMessageContext } from '../provider.js';
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+
+defineProps({
+  attachment: {
+    type: Object,
+    required: true,
+  },
+});
+
+const showGallery = ref(false);
+
+const { filteredCurrentChatAttachments } = useMessageContext();
+</script>
+
+<template>
+  <div
+    class="size-[72px] overflow-hidden contain-content rounded-xl cursor-pointer relative group"
+    @click="showGallery = true"
+  >
+    <video
+      :src="attachment.dataUrl"
+      class="w-full h-full object-cover"
+      muted
+      playsInline
+    />
+    <div
+      class="absolute w-full h-full inset-0 p-1 flex items-center justify-center"
+    >
+      <div
+        class="size-7 bg-n-slate-1/60 backdrop-blur-sm rounded-full overflow-hidden shadow-[0_5px_15px_rgba(0,0,0,0.4)]"
+      >
+        <Icon
+          icon="i-teenyicons-play-small-solid"
+          class="size-7 text-n-slate-12/80 backdrop-blur"
+        />
+      </div>
+    </div>
+  </div>
+  <GalleryView
+    v-if="showGallery"
+    v-model:show="showGallery"
+    :attachment="useSnakeCase(attachment)"
+    :all-attachments="filteredCurrentChatAttachments"
+    @error="onError"
+    @close="() => (showGallery = false)"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/message/constants.js b/app/javascript/dashboard/components-next/message/constants.js
new file mode 100644
index 000000000..7a7cc47e0
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/constants.js
@@ -0,0 +1,72 @@
+export const MESSAGE_TYPES = {
+  INCOMING: 0,
+  OUTGOING: 1,
+  ACTIVITY: 2,
+  TEMPLATE: 3,
+};
+
+export const MESSAGE_VARIANTS = {
+  USER: 'user',
+  AGENT: 'agent',
+  ACTIVITY: 'activity',
+  PRIVATE: 'private',
+  BOT: 'bot',
+  ERROR: 'error',
+  TEMPLATE: 'template',
+  EMAIL: 'email',
+  UNSUPPORTED: 'unsupported',
+};
+
+export const SENDER_TYPES = {
+  CONTACT: 'Contact',
+  USER: 'User',
+};
+
+export const ORIENTATION = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center',
+};
+
+export const MESSAGE_STATUS = {
+  SENT: 'sent',
+  DELIVERED: 'delivered',
+  READ: 'read',
+  FAILED: 'failed',
+  PROGRESS: 'progress',
+};
+
+export const ATTACHMENT_TYPES = {
+  IMAGE: 'image',
+  AUDIO: 'audio',
+  VIDEO: 'video',
+  FILE: 'file',
+  LOCATION: 'location',
+  FALLBACK: 'fallback',
+  SHARE: 'share',
+  STORY_MENTION: 'story_mention',
+  CONTACT: 'contact',
+  IG_REEL: 'ig_reel',
+};
+
+export const CONTENT_TYPES = {
+  TEXT: 'text',
+  INPUT_TEXT: 'input_text',
+  INPUT_TEXTAREA: 'input_textarea',
+  INPUT_EMAIL: 'input_email',
+  INPUT_SELECT: 'input_select',
+  CARDS: 'cards',
+  FORM: 'form',
+  ARTICLE: 'article',
+  INCOMING_EMAIL: 'incoming_email',
+  INPUT_CSAT: 'input_csat',
+  INTEGRATIONS: 'integrations',
+  STICKER: 'sticker',
+};
+
+export const MEDIA_TYPES = [
+  ATTACHMENT_TYPES.IMAGE,
+  ATTACHMENT_TYPES.VIDEO,
+  ATTACHMENT_TYPES.AUDIO,
+  ATTACHMENT_TYPES.IG_REEL,
+];
diff --git a/app/javascript/dashboard/components-next/message/fixtures/emailConversation.js b/app/javascript/dashboard/components-next/message/fixtures/emailConversation.js
new file mode 100644
index 000000000..8d75d107e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/emailConversation.js
@@ -0,0 +1,382 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 60913,
+      content:
+        'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 0,
+      content_type: 'incoming_email',
+      status: 'sent',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/mixed; boundary=00000000000098e88e0628704c8b',
+          date: '2024-12-04T17:13:53+05:30',
+          from: ['alex@paperlayer.test'],
+          html_content: {
+            full: '<div dir="ltr"><p>Dear Sam,</p><p>We are looking for high-quality cotton fabric for our T-shirt production. Please find attached a document with our specifications and requirements. Could you provide us with a quotation and lead time?</p><p>Looking forward to your response.</p><p>Best regards,<br>Alex<br>T-Shirt Co.</p></div>\n',
+            reply:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production. Please find attached a document with our specifications and requirements. Could you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+            quoted:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production. Please find attached a document with our specifications and requirements. Could you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+          },
+          in_reply_to: null,
+          message_id:
+            'CAM_Qp+-tdJ2Muy4XZmQfYKOPzsFwrH5H=6j=snsFZEDw@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 2,
+          subject: 'Inquiry and Quotation for Cotton Fabric',
+          text_content: {
+            full: 'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.\n',
+            reply:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+            quoted:
+              'Dear Sam,\n\nWe are looking for high-quality cotton fabric for our T-shirt production.\nPlease find attached a document with our specifications and requirements.\nCould you provide us with a quotation and lead time?\n\nLooking forward to your response.\n\nBest regards,\nAlex\nT-Shirt Co.',
+          },
+          to: ['sam@cottonmart.test'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      created_at: 1733312661,
+      private: false,
+      source_id: 'CAM_Qp+-tdJ2Muy4XZmQfYKOPzsFwrH5H=6j=snsFZEDw@mail.gmail.com',
+      sender: {
+        additional_attributes: {
+          source_id: 'email:CAM_Qp+8beyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'alex@paperlayer.test',
+        id: 111256,
+        identifier: null,
+        name: 'Alex',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 826,
+          message_id: 60913,
+          file_type: 'file',
+          account_id: 51,
+          extension: null,
+          data_url:
+            'https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdFdKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--10170e22f42401a9259e17eba6e59877127353d0/requirements.pdf',
+          thumb_url:
+            'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdFdKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--10170e22f42401a9259e17eba6e59877127353d0/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--31a6ed995cc4ac2dd2fa023068ee23b23efa1efb/requirements.pdf',
+          file_size: 841909,
+          width: null,
+          height: null,
+        },
+        {
+          id: 18,
+          message_id: 5307,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/quantity-requirements.xls',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/all-files.zip',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      id: 60914,
+      content:
+        'Dear Alex,\r\n\r\nThank you for your inquiry. Please find attached our quotation based on your requirements. Let us know if you need further details or wish to discuss specific customizations.\r\n\r\nBest regards,  \r\nSam  \r\nFabricMart',
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 1,
+      created_at: 1733312726,
+      updated_at: '2024-12-04T11:45:34.451Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60914@reply.chatwoot.dev',
+      content_type: 'text',
+      content_attributes: {
+        cc_emails: [],
+        bcc_emails: [],
+        to_emails: [],
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Dear Alex,\r\n\r\nThank you for your inquiry. Please find attached our quotation based on your requirements. Let us know if you need further details or wish to discuss specific customizations.\r\n\r\nBest regards,  \r\nSam  \r\nFabricMart',
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 0,
+        last_activity_at: 1733312726,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      attachments: [
+        {
+          id: 827,
+          message_id: 60914,
+          file_type: 'file',
+          account_id: 51,
+          extension: null,
+          data_url:
+            'https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf',
+          thumb_url:
+            'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--31a6ed995cc4ac2dd2fa023068ee23b23efa1efb/quotation.pdf',
+          file_size: 841909,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 110,
+        name: 'Alex',
+        available_name: 'Alex',
+        avatar_url:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+      },
+    },
+    {
+      id: 60915,
+      content:
+        'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Thank you for your inquiry. Please find attached our quotation based on\n> your requirements. Let us know if you need further details or wish to\n> discuss specific customizations.\n>\n> Best regards,\n> Sam\n> FabricMart\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf>]\n>',
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 0,
+      created_at: 1733312835,
+      updated_at: '2024-12-04T11:47:15.876Z',
+      private: false,
+      status: 'sent',
+      source_id: 'CAM_Qp+_70EiYJ_nKMgJ6MZaD58Tq3E57QERcZgnd10g@mail.gmail.com',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=0000000000007191be06287054c4',
+          date: '2024-12-04T17:16:07+05:30',
+          from: ['alex@paperlayer.test'],
+          html_content: {
+            full: '<div dir="ltr"><p>Dear Sam,</p><p>Thank you for the quotation. Could you share images or samples of the fabric for us to review before proceeding?</p><p>Best,<br>Alex</p></div><br><div class="gmail_quote gmail_quote_container"><div dir="ltr" class="gmail_attr">On Wed, 4 Dec 2024 at 17:15, Sam from CottonMart &lt;<a href="mailto:sam@cottonmart.test">sam@cottonmart.test</a>&gt; wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">  <p>Dear Alex,</p>\n<p>Thank you for your inquiry. Please find attached our quotation based on your requirements. Let us know if you need further details or wish to discuss specific customizations.</p>\n<p>Best regards,<br>\nSam<br>\nFabricMart</p>\n\n    attachment [<a href="https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf" target="_blank">click here to view</a>]\n</blockquote></div>\n',
+            reply:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the fabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test> wrote:\n>',
+            quoted:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the fabric for us to review before proceeding?\n\nBest,\nAlex',
+          },
+          in_reply_to:
+            'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60914@reply.chatwoot.dev',
+          message_id:
+            'CAM_Qp+_70EiYJ_nKMgJ6MZaD58Tq3E57QERcZgnd10g@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: 'Re: Inquiry and Quotation for Cotton Fabric',
+          text_content: {
+            full: 'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test>\nwrote:\n\n> Dear Alex,\n>\n> Thank you for your inquiry. Please find attached our quotation based on\n> your requirements. Let us know if you need further details or wish to\n> discuss specific customizations.\n>\n> Best regards,\n> Sam\n> FabricMart\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf>]\n>\n',
+            reply:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex\n\nOn Wed, 4 Dec 2024 at 17:15, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Thank you for your inquiry. Please find attached our quotation based on\n> your requirements. Let us know if you need further details or wish to\n> discuss specific customizations.\n>\n> Best regards,\n> Sam\n> FabricMart\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGFKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--940f9c3df19ce042ef3447809c9c451cfa4e905b/quotation.pdf>]\n>',
+            quoted:
+              'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex',
+          },
+          to: ['sam@cottonmart.test'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111256,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Dear Sam,\n\nThank you for the quotation. Could you share images or samples of the\nfabric for us to review before proceeding?\n\nBest,\nAlex',
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 1,
+        last_activity_at: 1733312835,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id: 'email:CAM_Qp+8beyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'alex@paperlayer.test',
+        id: 111256,
+        identifier: null,
+        name: 'Alex',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      message_type: 1,
+      content_type: 'text',
+      source_id:
+        'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60916@reply.chatwoot.dev',
+      processed_message_content:
+        "Dear Alex,\r\n\r\nPlease find attached images of our cotton fabric samples. Let us know if you'd like physical samples sent to you. \r\n\r\nWarm regards,  \r\nSam",
+      id: 60916,
+      content:
+        "Dear Alex,\r\n\r\nPlease find attached images of our cotton fabric samples. Let us know if you'd like physical samples sent to you. \r\n\r\nWarm regards,  \r\nSam",
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      created_at: 1733312866,
+      updated_at: '2024-12-04T11:47:53.564Z',
+      private: false,
+      status: 'sent',
+      content_attributes: {
+        cc_emails: [],
+        bcc_emails: [],
+        to_emails: [],
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 0,
+        last_activity_at: 1733312866,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      attachments: [
+        {
+          id: 828,
+          message_id: 60916,
+          file_type: 'image',
+          account_id: 51,
+          extension: null,
+          data_url:
+            'https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png',
+          thumb_url:
+            'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/image.png',
+          file_size: 1617507,
+          width: 1600,
+          height: 900,
+        },
+      ],
+      sender: {
+        id: 110,
+        name: 'Alex',
+        available_name: 'Alex',
+        avatar_url:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail:
+          'https://staging.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbktJIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--25806e8b52810484d3d6cb53af9e2a1c0cf1b43d/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--988d66f5e450207265d5c21bb0edb3facb890a43/slick-deploy.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-12-04T11:47:46.879Z', '2024-12-04T11:47:53.564Z'],
+        source_id: [
+          null,
+          'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60916@reply.chatwoot.dev',
+        ],
+      },
+    },
+    {
+      id: 60917,
+      content:
+        "Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Please find attached images of our cotton fabric samples. Let us know if\n> you'd like physical samples sent to you.\n>\n> Warm regards,\n> Sam\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png>]\n>",
+      account_id: 51,
+      inbox_id: 992,
+      conversation_id: 134,
+      message_type: 0,
+      created_at: 1733312969,
+      updated_at: '2024-12-04T11:49:29.337Z',
+      private: false,
+      status: 'sent',
+      source_id: 'CAM_Qp+8LuzLTWZXkecjzJAgmb9RAQGm+qTmg@mail.gmail.com',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/related; boundary=0000000000007701030628705e31',
+          date: '2024-12-04T17:18:54+05:30',
+          from: ['alex@paperlayer.test'],
+          html_content: {
+            full: '<div dir="ltr">Great we were looking for something in a different finish see image attached<br><br><img src="https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGlKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--408309fa40f1cfea87ee3320a062a5d16ce09d4e/image.png" alt="image.png" width="472" height="305"><br><div><br></div><div>Let me know if you have different finish options?<br><br>Best Regards</div></div><br><div class="gmail_quote gmail_quote_container"><div dir="ltr" class="gmail_attr">On Wed, 4 Dec 2024 at 17:17, Sam from CottonMart &lt;<a href="mailto:sam@cottonmart.test">sam@cottonmart.test</a>&gt; wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">  <p>Dear Alex,</p>\n<p>Please find attached images of our cotton fabric samples. Let us know if you&#39;d like physical samples sent to you.</p>\n<p>Warm regards,<br>\nSam</p>\n\n    attachment [<a href="https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png" target="_blank">click here to view</a>]\n</blockquote></div>\n',
+            reply:
+              'Great we were looking for something in a different finish see image attached\n\n[image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n>',
+            quoted:
+              'Great we were looking for something in a different finish see image attached\n\n[image.png]\n\nLet me know if you have different finish options?\n\nBest Regards',
+          },
+          in_reply_to:
+            'conversation/758d1f24-dc76-4abc-9c41-255ed8974f8e/messages/60916@reply.chatwoot.dev',
+          message_id: 'CAM_Qp+8LuzLTWZXkecjzJAgmb9RAQGm+qTmg@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 1,
+          subject: 'Re: Inquiry and Quotation for Cotton Fabric',
+          text_content: {
+            full: "Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Please find attached images of our cotton fabric samples. Let us know if\n> you'd like physical samples sent to you.\n>\n> Warm regards,\n> Sam\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png>]\n>",
+            reply:
+              "Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards\n\nOn Wed, 4 Dec 2024 at 17:17, Sam from CottonMart <sam@cottonmart.test> wrote:\n\n> Dear Alex,\n>\n> Please find attached images of our cotton fabric samples. Let us know if\n> you'd like physical samples sent to you.\n>\n> Warm regards,\n> Sam\n> attachment [click here to view\n> <https://staging.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdGVKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--62ee3b99421bfe7d8db85959ae99ab03a899f351/image.png>]\n>",
+            quoted:
+              'Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards',
+          },
+          to: ['sam@cottonmart.test'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111256,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Great we were looking for something in a different finish see image attached\n\n[image: image.png]\n\nLet me know if you have different finish options?\n\nBest Regards',
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 1,
+        last_activity_at: 1733312969,
+        contact_inbox: {
+          source_id: 'alex@paperlayer.test',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id: 'email:CAM_Qp+8beyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'alex@paperlayer.test',
+        id: 111256,
+        identifier: null,
+        name: 'Alex',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js b/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
new file mode 100644
index 000000000..2fbbf11d5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/instagramConversation.js
@@ -0,0 +1,1096 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 25281804,
+      content: 'cwtestinglocal mentioned you in the story: ',
+      inbox_id: 27355,
+      conversation_id: 23731,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        story_sender: 'cwtestinglocal',
+        story_id: '17889220763812855',
+        image_type: 'story_mention',
+      },
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 53375128,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2053726,
+          message_id: 25281804,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://videos.pexels.com/video-files/7722989/7722989-uhd_1440_2560_25fps.mp4',
+          thumb_url:
+            'https://videos.pexels.com/video-files/7722989/7722989-uhd_1440_2560_25fps.mp4',
+          file_size: 376973,
+          width: 1179,
+          height: 2096,
+        },
+      ],
+    },
+    {
+      id: 25281804,
+      content: 'cwtestinglocal mentioned you in the story: ',
+      inbox_id: 27355,
+      conversation_id: 23731,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        story_sender: 'cwtestinglocal',
+        story_id: '17889220763812855',
+        image_type: 'story_mention',
+      },
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 53375128,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2053726,
+          message_id: 25281804,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+          thumb_url:
+            'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+          file_size: 376973,
+          width: 1179,
+          height: 2096,
+        },
+      ],
+    },
+    {
+      id: 25281804,
+      content: 'cwtestinglocal mentioned you in the story: ',
+      inbox_id: 27355,
+      conversation_id: 23731,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        story_sender: 'cwtestinglocal',
+        story_id: '17889220763812855',
+        image_type: 'story_mention',
+      },
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMDk0OTEyODIyODExNDI0MDczNjkxMTozMTE5MjcwODk3OTU5MTM2NDg4NTg2OTU1NTEzOTczOTY0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 53375128,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2053726,
+          message_id: 25281804,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://chatwoot.dev/definitely-broken-image',
+          thumb_url: 'https://chatwoot.dev/definitely-broken-image',
+          file_size: 376973,
+          width: 1179,
+          height: 2096,
+        },
+      ],
+    },
+    {
+      id: 26433202,
+      content: 'Hi, Jane here (testing)',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692765935,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAxOTk2NDIwNjc5NDQ5NzE1NDMxNzMzMTQ2NDE5MgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26433214,
+      content: 'Hey Jane, I am Jane',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692765959,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjAyMDQzOTQ5ODg4NzY4NTUxMTc5Mzk5MjUzMTk2OAZDZD',
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+    },
+    {
+      id: 26433277,
+      content: 'Conversation was marked resolved by Jane Doe',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692766051,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 26434177,
+      content: 'Hi, it’s me again',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767416,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzI5NjY0ODY1MDg1Nzg1MDAxMDk4MTEwNTY2NAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434185,
+      content: 'Hi',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767429,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzUxNjQ1NDAzOTYwMTYwNDk5ODcyMzUzNDg0OAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434188,
+      content: 'It',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767431,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzUyODEzODkyNjcyMDkxMTUwMzM4OTYyMjI3MgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434190,
+      content: 'Is',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767432,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzU0MzY1ODQzMDc2NDU0MDM4MTA5Nzg4NTY5NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434193,
+      content: 'Me',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767434,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzU1OTg2MjEyNDU0NTg2MzE0NjA3NTU4NjU2MAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434195,
+      content: 'Again',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692767435,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjA0NzU3Nzk3MzE1NjMyNDE3NTI1NzU2MTcyNjk3NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 26434914,
+      content: 'Conversation was marked resolved by Jane Doe',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692768629,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 26436726,
+      content: '😁',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1692770672,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTIyNjEwNzM4NDA4NTgwMzUxNzY3OTYxNTM4MDI5MTU4NAZDZD',
+      sender: {
+        id: 10,
+        name: 'Jane',
+        available_name: 'Jane',
+        avatar_url:
+          'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4a2c0c8e787a381c0a809905e7cb172d5a40f589/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/73185.jpeg',
+        type: 'user',
+        availability_status: 'offline',
+        thumbnail:
+          'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBDZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4a2c0c8e787a381c0a809905e7cb172d5a40f589/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/73185.jpeg',
+      },
+    },
+    {
+      id: 27405598,
+      content: 'Guess what? I am back!',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016247,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA4NDE2Mjk1NDQ4MTc3NzQyMDMxNjE3NjI4NTY5NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 27405678,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016327,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA4NTYwNDk1OTA2MzI4MDc4NjI2MDE5OTczNTI5NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 27405690,
+      content: 'Some pictures from Thailand',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016341,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA4NTg3MTk4NzkzMjM4NTc5Njk2Mjk4MzYwODMyMAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 27406085,
+      content: 'byeeee',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016698,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA5MjUxODA3NzE2MDgxOTE5NDkwOTM0NTk3MjIyNAZDZD',
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+    },
+    {
+      id: 27406088,
+      content: 'Conversation was marked resolved by Jane Doe',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694016701,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 27406404,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694017101,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI0OTA5OTkxNDU3Mzc0MDA2NTA4ODY0OTAzNzg3MzE1MgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2201627,
+          message_id: 27406404,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://random.imagecdn.app/500/500',
+          thumb_url: 'https://random.imagecdn.app/500/500',
+          file_size: 141072,
+          width: 1170,
+          height: 1560,
+        },
+      ],
+    },
+    {
+      id: 27408430,
+      content: 'Conversation was marked resolved by Jane Doe',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694019236,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 27788386,
+      content: 'Me again',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519468,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2Njg4MTgxMDMyNzQxODM4OTc5NjEzMDY1MjE2MAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 27788409,
+      content: "Yeah, it's you again",
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519479,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2NzE5MzQ2NTQxMjIxMjU2NjA1NjUwNzUzOTQ1NgZDZD',
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+    },
+    {
+      id: 27788443,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519516,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2NzgxMjMzMjI3NzY2MjM5NjAxMDE0NDQ2NDg5NgZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 2224875,
+          message_id: 27788443,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://random.imagecdn.app/500/500',
+          thumb_url: 'https://random.imagecdn.app/500/500',
+          file_size: 236151,
+          width: 1170,
+          height: 1560,
+        },
+      ],
+    },
+    {
+      id: 27788464,
+      content: 'Try this',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519542,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2ODQ3ODA4Mzg0OTAxODU2ODAwMjkwNzQwNjMzNgZDZD',
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: 'online',
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+      attachments: [
+        {
+          id: 2224876,
+          message_id: 27788464,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL2lvYnc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c7278d793ca8de35ea7a824cfbb82ffb630b410a/facebook.png',
+          thumb_url:
+            'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL2lvYnc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c7278d793ca8de35ea7a824cfbb82ffb630b410a/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--624b3ceb3fdf42c4b07c7818563fe60603b6095b/facebook.png',
+          file_size: 256,
+          width: 24,
+          height: 24,
+        },
+      ],
+    },
+    {
+      id: 27788479,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 1,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694519551,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTI1ODM2ODQ2ODAxNjAwMzQ4NDc2Mjg3NzUzNTk3NzQ3MgZDZD',
+      attachments: [
+        {
+          id: 2224877,
+          message_id: 27788479,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL21vYnc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1ca7bc279638b97f4eec6eb86452d5a982a84c04/image-1478688519564287',
+          thumb_url:
+            'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBL21vYnc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--1ca7bc279638b97f4eec6eb86452d5a982a84c04/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--624b3ceb3fdf42c4b07c7818563fe60603b6095b/image-1478688519564287',
+          file_size: 209,
+          width: 24,
+          height: 24,
+        },
+      ],
+    },
+    {
+      id: 27803044,
+      content: 'Assigned to Jane Doe by Pranav Raj',
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1694530879,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 28252665,
+      content: 'Conversation was marked resolved by Jane Doe',
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 2,
+      created_at: 1695109325,
+      updated_at: '2023-09-19T07:42:06.172Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {
+        slack: 'cw-origin-1695109326.110599',
+      },
+      additional_attributes: {},
+      processed_message_content: 'Conversation was marked resolved by Jane Doe',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1695109325,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+    },
+    {
+      message_type: 0,
+      content_type: 'text',
+      processed_message_content: 'Hi',
+      id: 89088319,
+      content: 'Hi',
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      created_at: 1733387681,
+      updated_at: '2024-12-05T08:34:42.693Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTk3NTM1ODkwMDgwNTE5MTc3ODA4Nzg2Njg0Mzc5MTM2MAZDZD',
+      content_attributes: {
+        in_reply_to_external_id: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 70222869,
+      external_source_ids: {
+        slack: 'cw-origin-1733387682.631519',
+      },
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1733387681,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      previous_changes: {
+        updated_at: ['2024-12-05T08:34:41.463Z', '2024-12-05T08:34:42.693Z'],
+        external_source_ids: [
+          {},
+          {
+            slack: 'cw-origin-1733387682.631519',
+          },
+        ],
+      },
+    },
+    {
+      message_type: 1,
+      content_type: 'text',
+      processed_message_content: 'Just testing here, ignore',
+      id: 89088510,
+      content: 'Just testing here, ignore',
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      created_at: 1733387731,
+      updated_at: '2024-12-05T08:35:32.207Z',
+      private: true,
+      status: 'sent',
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {
+        slack: 'cw-origin-1733387732.139069',
+      },
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1733387731,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'Jane Doe',
+        available_name: 'Jane Doe',
+        avatar_url:
+          'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+        type: 'user',
+        availability_status: null,
+        thumbnail: 'https://xsgames.co/randomusers/assets/avatars/pixel/22.jpg',
+      },
+      previous_changes: {
+        updated_at: ['2024-12-05T08:35:31.809Z', '2024-12-05T08:35:32.207Z'],
+        external_source_ids: [
+          {},
+          {
+            slack: 'cw-origin-1733387732.139069',
+          },
+        ],
+      },
+    },
+    {
+      id: 89088542,
+      content: null,
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      created_at: 1733387740,
+      updated_at: '2024-12-05T08:35:40.796Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTk3NTM2MDAyMjg0NTc1ODQ0NzY0NDcwNDU3NTA2MjAxNgZDZD',
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to_external_id: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 70222869,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: null,
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1733387740,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+      attachments: [
+        {
+          id: 7141485,
+          message_id: 89088542,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://random.imagecdn.app/500/500',
+          thumb_url: 'https://random.imagecdn.app/500/500',
+          file_size: 63957,
+          width: null,
+          height: null,
+        },
+        {
+          id: 7141486,
+          message_id: 89088542,
+          file_type: 'image',
+          account_id: 1,
+          extension: null,
+          data_url: 'https://random.imagecdn.app/500/500',
+          thumb_url: 'https://random.imagecdn.app/500/500',
+          file_size: 43486,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 89088799,
+      content: null,
+      account_id: 1,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      created_at: 1733387803,
+      updated_at: '2024-12-05T08:36:43.200Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTk3NTM2MTE2ODI4MTc0MDMzMDA3NzAwNzkxNTI1Mzc2MAZDZD',
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to_external_id: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 70222869,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: null,
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1733387803,
+        contact_inbox: {
+          source_id: '6448268745221611',
+        },
+      },
+      attachments: [
+        {
+          id: 7141507,
+          message_id: 89088799,
+          file_type: 'ig_reel',
+          account_id: 1,
+          extension: null,
+          data_url:
+            'https://videos.pexels.com/video-files/2023708/2023708-hd_720_1280_30fps.mp4',
+          thumb_url:
+            'https://videos.pexels.com/video-files/2023708/2023708-hd_720_1280_30fps.mp4',
+          file_size: 2464867,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 89129832,
+      content: null,
+      inbox_id: 27355,
+      conversation_id: 26942,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to_external_id: null,
+        is_unsupported: true,
+      },
+      created_at: 1733399171,
+      private: false,
+      source_id:
+        'aWdfZAG1faXRlbToxOklHTWVzc2FnZAUlEOjE3ODQxNDQ3NTU5OTYxMzk4OjM0MDI4MjM2Njg0MTcxMDMwMTI0NDI1OTM2Nzg4MDM2MjUyNjUwNjozMTk3NTU3MDg2NDAzNzQ0ODY5NjA0NDc2MzA5MjA5MDg4MAZDZD',
+      sender: {
+        additional_attributes: {
+          social_profiles: {
+            instagram: 'cwtestinglocal',
+          },
+        },
+        custom_attributes: {},
+        email: null,
+        id: 70222869,
+        identifier: null,
+        name: 'Jane Doe',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/newsletterEmail.js b/app/javascript/dashboard/components-next/message/fixtures/newsletterEmail.js
new file mode 100644
index 000000000..50fa36ea1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/newsletterEmail.js
@@ -0,0 +1,156 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 60703,
+      content:
+        'News, tips, and behind the scenes technical mumbo jumbo\n\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates\n---------------\n\nYou can always check out the Fresh Produce ( https://community.fly.io/c/fresh-produce/27?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\n\n* You can auto-deploy your apps ( https://community.fly.io/t/auto-deploy-on-push-to-github/22306?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on Fly.io when you push your code to GitHub, and see the checks and deployments ( https://community.fly.io/t/github-checks-and-deployments/22669?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on the Github side.\n* If you want to update machine size ( https://community.fly.io/t/update-machine-size-from-the-dashboard/22600?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), update the size of your builder ( https://community.fly.io/t/you-can-now-resize-your-depot-builders/22578?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), or clone machines ( https://community.fly.io/t/clone-machines-from-the-web-ui/22542?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), you can do it all from the dashboard!\n\nInside Flyball\n--------------\n\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some improvements to the Support portal ( https://community.fly.io/t/redesigned-support-portal/22534?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that are available to anyone with paid support. We\'ve also just shipped "impact levels ( https://community.fly.io/t/support-impact-levels/22538?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\n\nFeature story: why we got rid of plans\n--------------------------------------\n\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\n\nUsers are doing all kinds of things on Fly.io—like sorting through the US Patent system ( https://fly.io/customers/amplified?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) and helping teenagers in New Zealand learn outside of school ( https://fly.io/customers/mymahi?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\n\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\n\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\n\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\n\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\n\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made this calculator ( https://fly.io/calculator?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) so you can just plug in what you need and have it spit out an approximate total.\n\nIn this brave new world, your invoice will be:\n\n* whatever compute/product resources you use, pro-rated for the time you use them, plus\n* whichever add-ons you pick, like Support and/or Compliance\n\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\n\nOur aim in getting rid of plans here was to make pricing simpler. Some folks have pointed out ( https://community.fly.io/t/were-making-pricing-simpler/22168?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\n\nGiven that, was this the right call, on balance? We think so, since we figure:\n\n* Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\n* For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\n* With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.\n\nUnsubscribe ( http://track.customer.io/unsubscribe/= ) ・\nManage Subscriptions ( http://track.customer.io/manage_subscription_preferences/= ) ・\nView in Browser ( http://track.customer.io/deliveries/= )',
+      account_id: 51,
+      inbox_id: 991,
+      conversation_id: 33,
+      message_type: 0,
+      created_at: 1733141022,
+      updated_at: '2024-12-02T12:03:42.467Z',
+      private: false,
+      status: 'sent',
+      source_id: '20241130215847.b6abc8cb4ce389f3@cio106219.news.fly.io',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=b57cedbb0790b6a0fe63723dd18c9d5416068481beced4287232b787e1bb',
+          date: '2024-11-30T21:58:47+00:00',
+          from: ['team@news.fly.io'],
+          html_content: {
+            full: '<!DOCTYPE html><!-- Change the lang and dir attributes to match the language of your email and the direction of that language. --><html lang="und" dir="auto" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" style="color-scheme: light dark; supported-color-schemes: light dark;"><head>\r\n    <meta charset="utf-8"/>\r\n    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>\r\n    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>\r\n    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no"/>\r\n    <meta name="x-apple-disable-message-reformatting"/>\r\n    <meta name="color-scheme" content="light dark"/>\r\n    <meta name="supported-color-schemes" content="light dark"/>\r\n\r\n    <title>Fly.io November &#39;24 Newsletter</title>\r\n\r\n    <link rel="preconnect" href="https://fonts.googleapis.com" media="screen"/>\r\n    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" media="screen"/>\r\n    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;family=Ovo&amp;display=swap" rel="stylesheet" media="screen"/>\r\n\r\n    <!--[if mso]>\r\n    <noscript>\r\n      <xml>\r\n        <o:OfficeDocumentSettings>\r\n          <o:PixelsPerInch>96</o:PixelsPerInch>\r\n        </o:OfficeDocumentSettings>\r\n      </xml>\r\n    </noscript>\r\n    <![endif]-->\r\n    \r\n    <style type="text/css">\r\na:hover {\r\n  text-decoration: none;\r\n}\r\n</style>\r\n    <style type="text/css" data-name="media">\r\n@media screen and (max-width:600px) {\r\n  h1 {\r\n    font-size: 2.25em;\r\n  }\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n  body {\r\n    background-color: #262524 !important;\r\n  }\r\n\r\n  .container {\r\n    background-color: #262524 !important;\r\n    color: #EDEEEF !important;\r\n  }\r\n\r\n  a {\r\n    color: #7EABCE !important;\r\n  }\r\n\r\n  code {\r\n    background-color: #4c4a47 !important;\r\n  }\r\n}\r\n</style>\r\n    <style type="text/css" data-name="interactive">\r\ninput:checked + .tabs .tab:hover {\r\n  background-color: #1185d7;\r\n}\r\ninput:focus-visible + .tab {\r\n  outline: 2px solid #10618B;\r\n}\r\ninput:checked + .tabs .interactive-heading {\r\n  display: inline-block !important;\r\n}\r\n</style>\r\n  </head>\r\n  <body class="body" style="margin: 0; padding: 0; word-spacing: normal;"><div style="display: none; max-height: 0px; overflow: hidden; mso-hide:all;">Episode #5: why we got rid of plans ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­  </div>\r\n    \r\n    <div role="article" aria-label="Fly.io Newsletter - June 2024" lang="und" dir="auto" class="wrapper" style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: &#39;cv02&#39;, &#39;cv03&#39;, &#39;cv04&#39;, &#39;cv11&#39;; line-height: 1.5; -webkit-text-size-adjust: 100%; font-weight: 375; letter-spacing: -.005em; font-size: medium; font-size: max(16px, 1rem); font-family: &#39;Inter&#39;, ui-sans-serif, system-ui, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;, &#39;Noto Color Emoji&#39; !important;">\r\n      <!-- Change the preheader text to something you want to be seen at in the inbox -->\r\n      <div style="display: none;">News, tips, and behind the scenes technical mumbo jumbo\r\n      <!-- the below code adds spacing after the preheader text -->\r\n       ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\r\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\r\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \r\n      </div>\r\n      <!--[if true]>\r\n      <table role="presentation" width="100%" align="center" cellpadding="16" border="0" style="background:#4f4f4f;">\r\n        <tr><td></td>\r\n          <td style="width:37.5em;background:#fffffe">\r\n      <![endif]-->\r\n      <div style="max-width:37.5em; margin:0 auto;background:#fffffe; padding:2em;overflow: auto;" class="container">\r\n        <img style="display: block; margin: auto; width: 8em;" src="https://userimg-assets.customeriomail.com/images/client-env-161421/1718249384403_logo-landscape-cookies2_01J07T9TJ2YJ616YPND9M0M3P8.png"/>\r\n        \r\n        <br/>\r\n<p>Hello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you&#39;re doing well, and ask that you holler if we can help with something. Onward!</p>\r\n\r\n<h3 style="margin: 1em 0; font-size: 1.6em; font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: -0.015em; word-spacing: 0.015em; font-family: &#39;Ovo&#39;, serif !important;">Product updates</h3>\r\n\r\n<p>You can always check out the <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL2MvZnJlc2gtcHJvZHVjZS8yNz91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo2MTN9/c370aeeb5186be56bff342368bba9168095da891eddca9e3a5f4bdb9e771d03f">Fresh Produce</a> page to see what we&#39;ve been fiddling with lately. Here are some of the highlights since we last checked in:</p>\r\n\r\n<ul>\r\n  <li>You can <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvYXV0by1kZXBsb3ktb24tcHVzaC10by1naXRodWIvMjIzMDY_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMH0/164b95c7adefbeb39a47c3ec466a0721fe20b834cc9cdfd634cdeb64f5e1e3c6">auto-deploy your apps</a> on Fly.io when you push your code to GitHub, and see the <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvZ2l0aHViLWNoZWNrcy1hbmQtZGVwbG95bWVudHMvMjI2Njk_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMX0/8a09b38b182b26b413b655ff54755f73efac8f2ede1627f266acbc20e54efd39">checks and deployments</a> on the Github side.</li>\r\n  <li>If you want to <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvdXBkYXRlLW1hY2hpbmUtc2l6ZS1mcm9tLXRoZS1kYXNoYm9hcmQvMjI2MDA_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMn0/174640eda7158337140cfd76b8c45cf0ce6853b29f51a9023f2205cf5a3129cd">update machine size</a>, <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QveW91LWNhbi1ub3ctcmVzaXplLXlvdXItZGVwb3QtYnVpbGRlcnMvMjI1Nzg_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxM30/9c28dcdb486734994cc46aaeedd22db61a58514b61243600b4ae4eacba33cc6a">update the size of your builder</a>, or <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvY2xvbmUtbWFjaGluZXMtZnJvbS10aGUtd2ViLXVpLzIyNTQyP3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTR9/3462f8770e26c5e8db70a7b8b5d5e03484cf8ab4f2cff175d9eea8f875e5c0f4">clone machines</a>, you can do it all from the dashboard!</li>\r\n</ul>\r\n\r\n<h3 style="margin: 1em 0; font-size: 1.6em; font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: -0.015em; word-spacing: 0.015em; font-family: &#39;Ovo&#39;, serif !important;">Inside Flyball</h3>\r\n\r\n<p>A big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we&#39;ve made some <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvcmVkZXNpZ25lZC1zdXBwb3J0LXBvcnRhbC8yMjUzND91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE1fQ/ab18015af8390f888d015ed2727951cff23109011f9681da0f8e479570aacc98">improvements to the Support portal</a> that are available to anyone with paid support. We&#39;ve also just shipped &#34;<a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvc3VwcG9ydC1pbXBhY3QtbGV2ZWxzLzIyNTM4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTZ9/c2c82ebd2dccf18b2a760f4ef42ccb26eeaa2b5c0bc547d1de94d049dfa4df88">impact levels</a>&#34; on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we&#39;re curious to know what you think, so hit us with your feedback.</p>\r\n\r\n<h3 style="margin: 1em 0; font-size: 1.6em; font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: -0.015em; word-spacing: 0.015em; font-family: &#39;Ovo&#39;, serif !important;">Feature story: why we got rid of plans</h3>\r\n\r\n<p>When you&#39;re looking for a platform to host your app, one of the first questions you&#39;ll ask is: &#34;how much is this gonna cost me?&#34; Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a &#34;42&#34; on the pricing page and leave it at that.</p>\r\n\r\n<p>Users are doing all kinds of things on Fly.io—like <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL2FtcGxpZmllZD91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE3fQ/c2999a79411d9262699016bfdb21574eb0bacd8974a5921b398d8813436d00e7">sorting through the US Patent system</a> and <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL215bWFoaT91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE4fQ/dd55e313d1cbca385eaaf4e3510b2d79cdc383d2ba539c7df9ad525166e83852">helping teenagers in New Zealand learn outside of school</a>—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: &#34;it depends.&#34; Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you <em>think</em> different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.</p>\r\n\r\n<p>In the beginning, there was usage based pricing. Fly.io actually launched on the &#34;á la carte&#34; side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said &#34;You bet!&#34; But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.</p>\r\n\r\n<p>We ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in &#34;allowances&#34; (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.</p>\r\n\r\n<p>This worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won&#39;t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn&#39;t get a sense for how much it would cost.</p>\r\n\r\n<p>We also realized that the groupings we came up with might not actually make sense for some of Fly.io&#39;s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? &#34;There must be consistency!&#34; we said. (We were getting pretty fired up at this point.)</p>\r\n\r\n<p>So, we got rid of Plans. Instead of grouping resources together, we&#39;ve gone pure &#34;pay as you go.&#34; We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you&#39;re in for. You don&#39;t even have to do the math! We made <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY2FsY3VsYXRvcj91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE5fQ/393875c8cc124b8c05a7d3c389233b405fd2231406358e71cff2b248830fc7e0">this calculator</a> so you can just plug in what you need and have it spit out an approximate total.</p>\r\n\r\n<p>In this brave new world, your invoice will be:</p>\r\n\r\n<ul>\r\n  <li>whatever compute/product resources you use, pro-rated for the time you use them, plus</li>\r\n  <li>whichever add-ons you pick, like Support and/or Compliance</li>\r\n</ul>\r\n\r\n<p>To be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.</p>\r\n\r\n<p>Our aim in getting rid of plans here was to make pricing simpler. <a href="https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvd2VyZS1tYWtpbmctcHJpY2luZy1zaW1wbGVyLzIyMTY4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MjB9/983935cc539a8f00dd7dfdc6df9ed20fa014b352a7803f53f2739410fc90480c">Some folks have pointed out</a> that separating out Support and Compliance as &#34;add-ons&#34; means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous &#34;Launch&#34; plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.</p>\r\n\r\n<p>Given that, was this the right call, on balance? We think so, since we figure:</p>\r\n\r\n<ul>\r\n  <li>Users who are already on a plan with us probably understand our pricing well enough, so we haven&#39;t touched anything about their set-up.</li>\r\n  <li>For prospective users, being able to easily and quickly answer the &#34;how much is it gonna cost me&#34; question is crucial.</li>\r\n  <li>With this new set-up, we&#39;re able to price each element at what it <em>actually</em> costs us to provide it to you, plus the margin that allows us to make this a viable business.</li>\r\n</ul>\r\n      </div>\r\n      <div style="text-align:center; margin: 1.5em auto;">\r\n        <hr/>\r\n            <a href="https://go.news.fly.io/unsubscribe/=" class="untracked">Unsubscribe</a> ・\r\n            <a href="https://go.news.fly.io/manage_subscription_preferences/=">Manage Subscriptions</a> ・ \r\n            <a href="https://go.news.fly.io/deliveries/=">View in Browser</a>\r\n      </div>\r\n      <!--[if true]>\r\n      </td>\r\n      <td></td>\r\n      </tr>\r\n      </table>\r\n      <![endif]-->\r\n    </div>\r\n  \r\n<img src="https://go.news.fly.io/e/o/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0ifQ==" style="height: 1px !important; max-height: 1px !important; max-width: 1px !important; width: 1px !important; display: none !important;" alt=""/></body></html><!-- Change the lang and dir attributes to match the language of your email and the direction of that language. Change the aria-label to match the title of your email-->',
+            reply:
+              'Episode #5: why we got rid of plans ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n\nNews, tips, and behind the scenes technical mumbo jumbo   ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates\n\nYou can always check out the [Fresh Produce](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL2MvZnJlc2gtcHJvZHVjZS8yNz91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo2MTN9/c370aeeb5186be56bff342368bba9168095da891eddca9e3a5f4bdb9e771d03f) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\n\n- You can [auto-deploy your apps](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvYXV0by1kZXBsb3ktb24tcHVzaC10by1naXRodWIvMjIzMDY_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMH0/164b95c7adefbeb39a47c3ec466a0721fe20b834cc9cdfd634cdeb64f5e1e3c6) on Fly.io when you push your code to GitHub, and see the [checks and deployments](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvZ2l0aHViLWNoZWNrcy1hbmQtZGVwbG95bWVudHMvMjI2Njk_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMX0/8a09b38b182b26b413b655ff54755f73efac8f2ede1627f266acbc20e54efd39) on the Github side.\n- If you want to [update machine size](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvdXBkYXRlLW1hY2hpbmUtc2l6ZS1mcm9tLXRoZS1kYXNoYm9hcmQvMjI2MDA_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMn0/174640eda7158337140cfd76b8c45cf0ce6853b29f51a9023f2205cf5a3129cd), [update the size of your builder](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QveW91LWNhbi1ub3ctcmVzaXplLXlvdXItZGVwb3QtYnVpbGRlcnMvMjI1Nzg_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxM30/9c28dcdb486734994cc46aaeedd22db61a58514b61243600b4ae4eacba33cc6a), or [clone machines](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvY2xvbmUtbWFjaGluZXMtZnJvbS10aGUtd2ViLXVpLzIyNTQyP3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTR9/3462f8770e26c5e8db70a7b8b5d5e03484cf8ab4f2cff175d9eea8f875e5c0f4), you can do it all from the dashboard!\n\nInside Flyball\n\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some [improvements to the Support portal](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvcmVkZXNpZ25lZC1zdXBwb3J0LXBvcnRhbC8yMjUzND91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE1fQ/ab18015af8390f888d015ed2727951cff23109011f9681da0f8e479570aacc98) that are available to anyone with paid support. We\'ve also just shipped "[impact levels](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvc3VwcG9ydC1pbXBhY3QtbGV2ZWxzLzIyNTM4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTZ9/c2c82ebd2dccf18b2a760f4ef42ccb26eeaa2b5c0bc547d1de94d049dfa4df88)" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\n\nFeature story: why we got rid of plans\n\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\n\nUsers are doing all kinds of things on Fly.io—like [sorting through the US Patent system](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL2FtcGxpZmllZD91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE3fQ/c2999a79411d9262699016bfdb21574eb0bacd8974a5921b398d8813436d00e7) and [helping teenagers in New Zealand learn outside of school](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL215bWFoaT91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE4fQ/dd55e313d1cbca385eaaf4e3510b2d79cdc383d2ba539c7df9ad525166e83852)—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\n\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\n\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\n\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\n\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\n\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made [this calculator](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY2FsY3VsYXRvcj91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE5fQ/393875c8cc124b8c05a7d3c389233b405fd2231406358e71cff2b248830fc7e0) so you can just plug in what you need and have it spit out an approximate total.\n\nIn this brave new world, your invoice will be:\n\n- whatever compute/product resources you use, pro-rated for the time you use them, plus\n- whichever add-ons you pick, like Support and/or Compliance\n\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\n\nOur aim in getting rid of plans here was to make pricing simpler. [Some folks have pointed out](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvd2VyZS1tYWtpbmctcHJpY2luZy1zaW1wbGVyLzIyMTY4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MjB9/983935cc539a8f00dd7dfdc6df9ed20fa014b352a7803f53f2739410fc90480c) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\n\nGiven that, was this the right call, on balance? We think so, since we figure:\n\n- Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\n- For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\n- With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.\n\n---------------------------------------------------------------\n[Unsubscribe](https://go.news.fly.io/unsubscribe/=) ・ [Manage Subscriptions](https://go.news.fly.io/manage_subscription_preferences/=) ・ [View in Browser](https://go.news.fly.io/deliveries/=)\n[]',
+            quoted:
+              'Episode #5: why we got rid of plans ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n\nNews, tips, and behind the scenes technical mumbo jumbo   ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates\n\nYou can always check out the [Fresh Produce](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL2MvZnJlc2gtcHJvZHVjZS8yNz91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo2MTN9/c370aeeb5186be56bff342368bba9168095da891eddca9e3a5f4bdb9e771d03f) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\n\n- You can [auto-deploy your apps](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvYXV0by1kZXBsb3ktb24tcHVzaC10by1naXRodWIvMjIzMDY_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMH0/164b95c7adefbeb39a47c3ec466a0721fe20b834cc9cdfd634cdeb64f5e1e3c6) on Fly.io when you push your code to GitHub, and see the [checks and deployments](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvZ2l0aHViLWNoZWNrcy1hbmQtZGVwbG95bWVudHMvMjI2Njk_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMX0/8a09b38b182b26b413b655ff54755f73efac8f2ede1627f266acbc20e54efd39) on the Github side.\n- If you want to [update machine size](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvdXBkYXRlLW1hY2hpbmUtc2l6ZS1mcm9tLXRoZS1kYXNoYm9hcmQvMjI2MDA_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxMn0/174640eda7158337140cfd76b8c45cf0ce6853b29f51a9023f2205cf5a3129cd), [update the size of your builder](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QveW91LWNhbi1ub3ctcmVzaXplLXlvdXItZGVwb3QtYnVpbGRlcnMvMjI1Nzg_dXRtX2NhbXBhaWduPU5vdmVtYmVyKyUyNzI0K05ld3NsZXR0ZXJcdTAwMjZ1dG1fY29udGVudD1FbWFpbFx1MDAyNnV0bV9tZWRpdW09ZW1haWxfYWN0aW9uXHUwMDI2dXRtX3NvdXJjZT1jdXN0b21lci5pbyIsImludGVybmFsIjoiOGRlZDA5MGQ4NTY1ZjZjYjE4IiwibGlua19pZCI6NDYxM30/9c28dcdb486734994cc46aaeedd22db61a58514b61243600b4ae4eacba33cc6a), or [clone machines](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvY2xvbmUtbWFjaGluZXMtZnJvbS10aGUtd2ViLXVpLzIyNTQyP3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTR9/3462f8770e26c5e8db70a7b8b5d5e03484cf8ab4f2cff175d9eea8f875e5c0f4), you can do it all from the dashboard!\n\nInside Flyball\n\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some [improvements to the Support portal](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3QvcmVkZXNpZ25lZC1zdXBwb3J0LXBvcnRhbC8yMjUzND91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE1fQ/ab18015af8390f888d015ed2727951cff23109011f9681da0f8e479570aacc98) that are available to anyone with paid support. We\'ve also just shipped "[impact levels](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvc3VwcG9ydC1pbXBhY3QtbGV2ZWxzLzIyNTM4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MTZ9/c2c82ebd2dccf18b2a760f4ef42ccb26eeaa2b5c0bc547d1de94d049dfa4df88)" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\n\nFeature story: why we got rid of plans\n\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\n\nUsers are doing all kinds of things on Fly.io—like [sorting through the US Patent system](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL2FtcGxpZmllZD91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE3fQ/c2999a79411d9262699016bfdb21574eb0bacd8974a5921b398d8813436d00e7) and [helping teenagers in New Zealand learn outside of school](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY3VzdG9tZXJzL215bWFoaT91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE4fQ/dd55e313d1cbca385eaaf4e3510b2d79cdc383d2ba539c7df9ad525166e83852)—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\n\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\n\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\n\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\n\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\n\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made [this calculator](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9mbHkuaW8vY2FsY3VsYXRvcj91dG1fY2FtcGFpZ249Tm92ZW1iZXIrJTI3MjQrTmV3c2xldHRlclx1MDAyNnV0bV9jb250ZW50PUVtYWlsXHUwMDI2dXRtX21lZGl1bT1lbWFpbF9hY3Rpb25cdTAwMjZ1dG1fc291cmNlPWN1c3RvbWVyLmlvIiwiaW50ZXJuYWwiOiI4ZGVkMDkwZDg1NjVmNmNiMTgiLCJsaW5rX2lkIjo0NjE5fQ/393875c8cc124b8c05a7d3c389233b405fd2231406358e71cff2b248830fc7e0) so you can just plug in what you need and have it spit out an approximate total.\n\nIn this brave new world, your invoice will be:\n\n- whatever compute/product resources you use, pro-rated for the time you use them, plus\n- whichever add-ons you pick, like Support and/or Compliance\n\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\n\nOur aim in getting rid of plans here was to make pricing simpler. [Some folks have pointed out](https://go.news.fly.io/e/c/eyJlbWFpbF9pZCI6ImRnU043UWtEQVBiTEdQWExHQUdUZnhWZW45eHZGUWRwOEdDNjgyQT0iLCJocmVmIjoiaHR0cHM6Ly9jb21tdW5pdHkuZmx5LmlvL3Qvd2VyZS1tYWtpbmctcHJpY2luZy1zaW1wbGVyLzIyMTY4P3V0bV9jYW1wYWlnbj1Ob3ZlbWJlcislMjcyNCtOZXdzbGV0dGVyXHUwMDI2dXRtX2NvbnRlbnQ9RW1haWxcdTAwMjZ1dG1fbWVkaXVtPWVtYWlsX2FjdGlvblx1MDAyNnV0bV9zb3VyY2U9Y3VzdG9tZXIuaW8iLCJpbnRlcm5hbCI6IjhkZWQwOTBkODU2NWY2Y2IxOCIsImxpbmtfaWQiOjQ2MjB9/983935cc539a8f00dd7dfdc6df9ed20fa014b352a7803f53f2739410fc90480c) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\n\nGiven that, was this the right call, on balance? We think so, since we figure:\n\n- Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\n- For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\n- With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.',
+          },
+          in_reply_to: null,
+          message_id: '20241130215847.b6abc8cb4ce389f3@cio106219.news.fly.io',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: "Fly.io November '24 Newsletter",
+          text_content: {
+            full: 'News, tips, and behind the scenes technical mumbo jumbo\r\n\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\r\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\r\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\r\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \r\n\r\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\r\n\r\nProduct updates\r\n---------------\r\n\r\nYou can always check out the Fresh Produce ( https://community.fly.io/c/fresh-produce/27?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\r\n\r\n* You can auto-deploy your apps ( https://community.fly.io/t/auto-deploy-on-push-to-github/22306?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on Fly.io when you push your code to GitHub, and see the checks and deployments ( https://community.fly.io/t/github-checks-and-deployments/22669?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on the Github side.\r\n* If you want to update machine size ( https://community.fly.io/t/update-machine-size-from-the-dashboard/22600?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), update the size of your builder ( https://community.fly.io/t/you-can-now-resize-your-depot-builders/22578?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), or clone machines ( https://community.fly.io/t/clone-machines-from-the-web-ui/22542?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), you can do it all from the dashboard!\r\n\r\nInside Flyball\r\n--------------\r\n\r\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some improvements to the Support portal ( https://community.fly.io/t/redesigned-support-portal/22534?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that are available to anyone with paid support. We\'ve also just shipped "impact levels ( https://community.fly.io/t/support-impact-levels/22538?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\r\n\r\nFeature story: why we got rid of plans\r\n--------------------------------------\r\n\r\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\r\n\r\nUsers are doing all kinds of things on Fly.io—like sorting through the US Patent system ( https://fly.io/customers/amplified?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) and helping teenagers in New Zealand learn outside of school ( https://fly.io/customers/mymahi?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\r\n\r\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\r\n\r\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\r\n\r\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\r\n\r\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\r\n\r\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made this calculator ( https://fly.io/calculator?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) so you can just plug in what you need and have it spit out an approximate total.\r\n\r\nIn this brave new world, your invoice will be:\r\n\r\n* whatever compute/product resources you use, pro-rated for the time you use them, plus\r\n* whichever add-ons you pick, like Support and/or Compliance\r\n\r\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\r\n\r\nOur aim in getting rid of plans here was to make pricing simpler. Some folks have pointed out ( https://community.fly.io/t/were-making-pricing-simpler/22168?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\r\n\r\nGiven that, was this the right call, on balance? We think so, since we figure:\r\n\r\n* Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\r\n* For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\r\n* With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.\r\n\r\nUnsubscribe ( http://track.customer.io/unsubscribe/= ) ・\r\nManage Subscriptions ( http://track.customer.io/manage_subscription_preferences/= ) ・\r\nView in Browser ( http://track.customer.io/deliveries/= )',
+            reply:
+              'News, tips, and behind the scenes technical mumbo jumbo\n\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you\'re doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates\n---------------\n\nYou can always check out the Fresh Produce ( https://community.fly.io/c/fresh-produce/27?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) page to see what we\'ve been fiddling with lately. Here are some of the highlights since we last checked in:\n\n* You can auto-deploy your apps ( https://community.fly.io/t/auto-deploy-on-push-to-github/22306?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on Fly.io when you push your code to GitHub, and see the checks and deployments ( https://community.fly.io/t/github-checks-and-deployments/22669?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) on the Github side.\n* If you want to update machine size ( https://community.fly.io/t/update-machine-size-from-the-dashboard/22600?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), update the size of your builder ( https://community.fly.io/t/you-can-now-resize-your-depot-builders/22578?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), or clone machines ( https://community.fly.io/t/clone-machines-from-the-web-ui/22542?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ), you can do it all from the dashboard!\n\nInside Flyball\n--------------\n\nA big internal focus right now is making our Support as…supportive (sorry) as it can possibly be. So, we\'ve made some improvements to the Support portal ( https://community.fly.io/t/redesigned-support-portal/22534?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that are available to anyone with paid support. We\'ve also just shipped "impact levels ( https://community.fly.io/t/support-impact-levels/22538?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )" on Support tickets, so you can indicate the urgency and severity of your support request or escalate an existing ticket. As always, we\'re curious to know what you think, so hit us with your feedback.\n\nFeature story: why we got rid of plans\n--------------------------------------\n\nWhen you\'re looking for a platform to host your app, one of the first questions you\'ll ask is: "how much is this gonna cost me?" Oh, how we wish we could boil things down to one number to rule them all, but Legal refuses to let us put a "42" on the pricing page and leave it at that.\n\nUsers are doing all kinds of things on Fly.io—like sorting through the US Patent system ( https://fly.io/customers/amplified?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) and helping teenagers in New Zealand learn outside of school ( https://fly.io/customers/mymahi?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io )—and therefore using wildly varying kinds and amounts of resources. That means the (infuriating) answer to cost questions is always: "it depends." Plus, there are a few different ways to structure pricing from the company side: you can either group certain resources together based on what you think different groups of customers might want (like a prix fix menu), or you can price each individual resource and let folks order á la carte.\n\nIn the beginning, there was usage based pricing. Fly.io actually launched on the "á la carte" side of things, charging just for usage. At that point, we were just inflating Frankie the hot air balloon, and Support did not yet exist. Users told us they wanted Support, so we said "You bet!" But instead of just building paid Support options, we thought about other elements that users would want (like BAAs, SOC2 reports, etc) and packaged it all together.\n\nWe ended up with plans we called Hobby, Launch, Scale, and Enterprise. Each one had some built-in "allowances" (free resources), some had Support, and all of them were anchored to different types of users. For example, the Scale plan was for users who needed to run multi-region, high-availability workloads, had specific compliance requirements (like needing to be in line with HIPAA), and wanted priority email support.\n\nThis worked for a while. But over time, we started getting feedback from prospective users (and comments on Reddit, we won\'t lie) about how our pricing felt unclear. Folks were thinking about using us, but couldn\'t get a sense for how much it would cost.\n\nWe also realized that the groupings we came up with might not actually make sense for some of Fly.io\'s users. For example: some folks might want ultra-available Support, but not care at all about compliance. And once we started digging into it, we started asking: why build a company around primitives that are really simple and swappable, and then make a payment structure that requires picking Option A, B, or C? "There must be consistency!" we said. (We were getting pretty fired up at this point.)\n\nSo, we got rid of Plans. Instead of grouping resources together, we\'ve gone pure "pay as you go." We want you to be able to take a glance at our compute costs, do some back of the envelope math, and rest easy that you know what you\'re in for. You don\'t even have to do the math! We made this calculator ( https://fly.io/calculator?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) so you can just plug in what you need and have it spit out an approximate total.\n\nIn this brave new world, your invoice will be:\n\n* whatever compute/product resources you use, pro-rated for the time you use them, plus\n* whichever add-ons you pick, like Support and/or Compliance\n\nTo be super clear: this new á la carte set-up is just for new accounts. Anyone who was already on a plan still has it, no sweat.\n\nOur aim in getting rid of plans here was to make pricing simpler. Some folks have pointed out ( https://community.fly.io/t/were-making-pricing-simpler/22168?utm_campaign=November+%2724+Newsletter&utm_content=Email&utm_medium=email_action&utm_source=customer.io ) that separating out Support and Compliance as "add-ons" means that after this change (which went live October 7th) people who sign up for new accounts could end up paying more than their historical counterparts, depending on what they choose. For example, our previous "Launch" plan was $29/month, and it came with Standard Support and some free compute allowances. Today, Standard Support is $29/month by itself.\n\nGiven that, was this the right call, on balance? We think so, since we figure:\n\n* Users who are already on a plan with us probably understand our pricing well enough, so we haven\'t touched anything about their set-up.\n* For prospective users, being able to easily and quickly answer the "how much is it gonna cost me" question is crucial.\n* With this new set-up, we\'re able to price each element at what it actually costs us to provide it to you, plus the margin that allows us to make this a viable business.\n\nUnsubscribe ( http://track.customer.io/unsubscribe/= ) ・\nManage Subscriptions ( http://track.customer.io/manage_subscription_preferences/= ) ・\nView in Browser ( http://track.customer.io/deliveries/= )',
+            quoted:
+              "News, tips, and behind the scenes technical mumbo jumbo\n\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏\n ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­\n­ ­ ­ ­ ­ ­ ­ ­ ­ ­  \n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you're doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates",
+          },
+          to: ['shivam@chatwoot.com'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111249,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        "News, tips, and behind the scenes technical mumbo jumbo\n\n\n\nHello! Here we are again, ready to share some scintillating updates from Cloud Provider Land. All the real humans behind this newsletter hope you're doing well, and ask that you holler if we can help with something. Onward!\n\nProduct updates",
+      sentiment: {},
+      conversation: {
+        assignee_id: 110,
+        unread_count: 0,
+        last_activity_at: 1733141022,
+        contact_inbox: {
+          source_id: 'team@news.fly.io',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id:
+            'email:20241130215847.b6abc8cb4ce389f3@cio106219.news.fly.io',
+        },
+        custom_attributes: {},
+        email: 'team@news.fly.io',
+        id: 111249,
+        identifier: null,
+        name: 'Fly.io Team',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 60714,
+      content:
+        'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+      account_id: 51,
+      inbox_id: 991,
+      conversation_id: 44,
+      message_type: 0,
+      created_at: 1733141025,
+      updated_at: '2024-12-02T12:03:45.272Z',
+      private: false,
+      status: 'sent',
+      source_id: '7baNGWOeR1CfiWUWYlMXow@geopod-ismtpd-2',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=1e7683c70dae8b1a431814bc5779c7c187eb712e01a6f20c47756c722d87',
+          date: '2024-12-02T05:36:05+00:00',
+          from: ['contactwwod@myhq.in'],
+          html_content: {
+            full: `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\r\n<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">\r\n    <head>\r\n      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r\n      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">\r\n      <!--[if !mso]><!-->\r\n      <meta http-equiv="X-UA-Compatible" content="IE=Edge">\r\n      <!--<![endif]-->\r\n      <!--[if (gte mso 9)|(IE)]>\r\n      <xml>\r\n        <o:OfficeDocumentSettings>\r\n          <o:AllowPNG/>\r\n          <o:PixelsPerInch>96</o:PixelsPerInch>\r\n        </o:OfficeDocumentSettings>\r\n      </xml>\r\n      <![endif]-->\r\n      <!--[if (gte mso 9)|(IE)]>\r\n  <style type="text/css">\r\n    body {width: 600px;margin: 0 auto;}\r\n    table {border-collapse: collapse;}\r\n    table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}\r\n    img {-ms-interpolation-mode: bicubic;}\r\n  </style>\r\n<![endif]-->\r\n      <style type="text/css">\r\n    body, p, div {\r\n      font-family: arial,helvetica,sans-serif;\r\n      font-size: 14px;\r\n    }\r\n    body {\r\n      color: #000000;\r\n    }\r\n    body a {\r\n      color: #1188E6;\r\n      text-decoration: none;\r\n    }\r\n    p { margin: 0; padding: 0; }\r\n    table.wrapper {\r\n      width:100% !important;\r\n      table-layout: fixed;\r\n      -webkit-font-smoothing: antialiased;\r\n      -webkit-text-size-adjust: 100%;\r\n      -moz-text-size-adjust: 100%;\r\n      -ms-text-size-adjust: 100%;\r\n    }\r\n    img.max-width {\r\n      max-width: 100% !important;\r\n    }\r\n    .column.of-2 {\r\n      width: 50%;\r\n    }\r\n    .column.of-3 {\r\n      width: 33.333%;\r\n    }\r\n    .column.of-4 {\r\n      width: 25%;\r\n    }\r\n    ul ul ul ul  {\r\n      list-style-type: disc !important;\r\n    }\r\n    ol ol {\r\n      list-style-type: lower-roman !important;\r\n    }\r\n    ol ol ol {\r\n      list-style-type: lower-latin !important;\r\n    }\r\n    ol ol ol ol {\r\n      list-style-type: decimal !important;\r\n    }\r\n    @media screen and (max-width:480px) {\r\n      .preheader .rightColumnContent,\r\n      .footer .rightColumnContent {\r\n        text-align: left !important;\r\n      }\r\n      .preheader .rightColumnContent div,\r\n      .preheader .rightColumnContent span,\r\n      .footer .rightColumnContent div,\r\n      .footer .rightColumnContent span {\r\n        text-align: left !important;\r\n      }\r\n      .preheader .rightColumnContent,\r\n      .preheader .leftColumnContent {\r\n        font-size: 80% !important;\r\n        padding: 5px 0;\r\n      }\r\n      table.wrapper-mobile {\r\n        width: 100% !important;\r\n        table-layout: fixed;\r\n      }\r\n      img.max-width {\r\n        height: auto !important;\r\n        max-width: 100% !important;\r\n      }\r\n      a.bulletproof-button {\r\n        display: block !important;\r\n        width: auto !important;\r\n        font-size: 80%;\r\n        padding-left: 0 !important;\r\n        padding-right: 0 !important;\r\n      }\r\n      .columns {\r\n        width: 100% !important;\r\n      }\r\n      .column {\r\n        display: block !important;\r\n        width: 100% !important;\r\n        padding-left: 0 !important;\r\n        padding-right: 0 !important;\r\n        margin-left: 0 !important;\r\n        margin-right: 0 !important;\r\n      }\r\n      .social-icon-column {\r\n        display: inline-block !important;\r\n      }\r\n    }\r\n  </style>\r\n      <!--user entered Head Start--><!--End Head user entered-->\r\n    </head>\r\n    <body>\r\n      <center class="wrapper" data-link-color="#1188E6" data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;">\r\n        <div class="webkit">\r\n          <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">\r\n            <tr>\r\n              <td valign="top" bgcolor="#FFFFFF" width="100%">\r\n                <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">\r\n                  <tr>\r\n                    <td width="100%">\r\n                      <table width="100%" cellpadding="0" cellspacing="0" border="0">\r\n                        <tr>\r\n                          <td>\r\n                            <!--[if mso]>\r\n    <center>\r\n    <table><tr><td width="600">\r\n  <![endif]-->\r\n                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px;" align="center">\r\n                                      <tr>\r\n                                        <td role="modules-container" style="padding:0px 0px 0px 0px; color:#000000; text-align:left;" bgcolor="#FFFFFF" width="100%" align="left"><table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0" width="100%" style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">\r\n    <tr>\r\n      <td role="module-content">\r\n        <p></p>\r\n      </td>\r\n    </tr>\r\n  </table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="eacb393a-0436-46cd-bd8e-30e8f600abb3">\r\n    <tbody>\r\n      <tr>\r\n        <td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">\r\n          <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/04dab37225190aa7/ca1c1b30-6e2b-4a9a-abf3-1893193cc4dd/1200x99.png">\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="d9ddc2d7-5162-43df-8e6c-2215c715763e">\r\n    <tbody>\r\n      <tr>\r\n        <td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">\r\n          <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/04dab37225190aa7/e13b2ded-0ded-4789-9920-49d64f9f3f0d/1200x678.png">\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="778f29eb-eec9-4844-93ed-19f1faec3161" data-mc-module-version="2019-10-22">\r\n    <tbody>\r\n      <tr>\r\n        <td style="padding:18px 0px 18px 10px; line-height:22px; text-align:inherit; background-color:#f7f7f7;" height="100%" valign="top" bgcolor="#f7f7f7" role="module-content"><div><div style="font-family: inherit; text-align: inherit"><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 24px">Get </span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 24px"><strong>more productive days</strong></span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 24px"> at a better price</span><span style="font-family: helvetica, sans-serif; font-size: 24px">&nbsp;</span></div><div></div></div></td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="782348f7-234d-431f-851a-908af773b520" data-mc-module-version="2019-10-22">\r\n    <tbody>\r\n      <tr>\r\n        <td style="padding:18px 0px 18px 10px; line-height:22px; text-align:inherit; background-color:#f7f7f7;" height="100%" valign="top" bgcolor="#f7f7f7" role="module-content"><div><div style="font-family: inherit; text-align: inherit"><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">Hey there,</span><span style="font-family: helvetica, sans-serif; font-size: 16px"><br>\r\n<br>\r\n</span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">Your 5 day bundle is coming to an end.</span></div>\r\n<div style="font-family: inherit; text-align: inherit"><span style="font-family: helvetica, sans-serif; font-size: 16px"><br>\r\n</span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">To get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.</span><span style="font-family: helvetica, sans-serif; font-size: 16px"><br>\r\n<br>\r\n</span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">Book day pass bundles of 10 at </span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px"><strong>30% off</strong></span><span style="font-family: helvetica, sans-serif; font-size: 16px"><br>\r\n</span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px">Use code: </span><span style="white-space-collapse: preserve; text-wrap: wrap; font-family: helvetica, sans-serif; font-size: 16px"><strong>BUNDLE30</strong></span><span style="font-family: helvetica, sans-serif; font-size: 16px"><strong>&nbsp;</strong></span></div><div></div></div></td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table border="0" cellpadding="0" cellspacing="0" class="module" data-role="module-button" data-type="button" role="module" style="table-layout:fixed;" width="100%" data-muid="d5de0ef7-db7f-4eea-acc9-6a79b6e42e46">\r\n      <tbody>\r\n        <tr>\r\n          <td align="left" bgcolor="f7f7f7" class="outer-td" style="padding:0px 0px 0px 10px; background-color:f7f7f7;">\r\n            <table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile" style="text-align:center;">\r\n              <tbody>\r\n                <tr>\r\n                <td align="center" bgcolor="#1e22aa" class="inner-td" style="border-radius:6px; font-size:16px; text-align:left; background-color:inherit;">\r\n                  <a href="http://url492.myhq.in/ls/click?upn=" style="background-color:#1e22aa; border:1px solid #333333; border-color:#333333; border-radius:6px; border-width:1px; color:#ffffff; display:inline-block; font-size:16px; font-weight:normal; letter-spacing:0px; line-height:normal; padding:12px 18px 12px 18px; text-align:center; text-decoration:none; border-style:solid;" target="https://wework.co.in/workspaces/on-demand/day-pass-bundles?utm_source=sendgrid_email&utm_medium=sendgrid_email&utm_campaign=myHQ_sendgrid_bundle_upsell&utm_term=sendgrid_email_bundle_upsell&utm_content=sendgrid_email_%20bundle_upsell_CTA">Book now</a>\r\n                </td>\r\n                </tr>\r\n              </tbody>\r\n            </table>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="5c4e7155-d9cf-4262-9d03-958d03c22f1f" data-mc-module-version="2019-10-22">\r\n    <tbody>\r\n      <tr>\r\n        <td style="padding:18px 0px 18px 10px; line-height:22px; text-align:inherit; background-color:#f7f7f7;" height="100%" valign="top" bgcolor="#f7f7f7" role="module-content"><div><div style="font-family: inherit; text-align: start"><span style="box-sizing: border-box; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-weight: bold; font-stretch: inherit; line-height: inherit; font-family: helvetica, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 16px; vertical-align: baseline; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space-collapse: preserve; text-wrap: wrap; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; background-color: rgb(247, 247, 247)">Why book a day pass bundle?</span></div>\r\n<div style="font-family: inherit; text-align: start"><br></div>\r\n<div style="font-family: inherit; text-align: inherit; margin-left: 0px"><span style="box-sizing: border-box; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-weight: 700; font-stretch: inherit; line-height: inherit; font-family: helvetica, sans-serif; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 16px; vertical-align: baseline; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space-collapse: preserve; text-wrap: wrap; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline; background-color: rgb(247, 247, 247)">Explore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing &amp; on-site parking for multiple productive days in a row.</span><span style="background-color: rgb(247, 247, 247)">&nbsp;</span></div><div></div></div></td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="6e1adfd1-27a0-418a-8982-ff353d88ce13">\r\n    <tbody>\r\n      <tr>\r\n        <td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">\r\n          <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/04dab37225190aa7/46db5fd4-9558-402a-ac47-93a618a1f37a/569x358.png">\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table border="0" cellpadding="0" cellspacing="0" class="module" data-role="module-button" data-type="button" role="module" style="table-layout:fixed;" width="100%" data-muid="d5de0ef7-db7f-4eea-acc9-6a79b6e42e46.1">\r\n      <tbody>\r\n        <tr>\r\n          <td align="left" bgcolor="#F7F7F7" class="outer-td" style="padding:0px 0px 0px 10px; background-color:#F7F7F7;">\r\n            <table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile" style="text-align:center;">\r\n              <tbody>\r\n                <tr>\r\n                <td align="center" bgcolor="#1e22aa" class="inner-td" style="border-radius:6px; font-size:16px; text-align:left; background-color:inherit;">\r\n                  <a href="http://url492.myhq.in/ls/click?upn=" style="background-color:#1e22aa; border:1px solid #333333; border-color:#333333; border-radius:6px; border-width:1px; color:#ffffff; display:inline-block; font-size:16px; font-weight:normal; letter-spacing:0px; line-height:normal; padding:12px 18px 12px 18px; text-align:center; text-decoration:none; border-style:solid;" target="https://wework.co.in/workspaces/on-demand/day-pass-bundles?utm_source=sendgrid_email&utm_medium=sendgrid_email&utm_campaign=myHQ_sendgrid_bundle_upsell&utm_term=sendgrid_email_bundle_upsell&utm_content=sendgrid_email_%20bundle_upsell_CTA">Book now</a>\r\n                </td>\r\n                </tr>\r\n              </tbody>\r\n            </table>\r\n          </td>\r\n        </tr>\r\n      </tbody>\r\n    </table><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="5bdd1e34-b004-465c-b9cf-59adce68649c" data-mc-module-version="2019-10-22">\r\n    <tbody>\r\n      <tr>\r\n        <td style="padding:18px 0px 18px 10px; line-height:11px; text-align:inherit; background-color:#f7f7f7;" height="100%" valign="top" bgcolor="#f7f7f7" role="module-content"><div><div style="font-family: inherit; text-align: inherit"><span style="white-space-collapse: preserve; text-wrap: wrap; font-size: 9px">*T&amp;Cs apply </span></div>\r\n<ul>\r\n  <li style="text-align: inherit; font-size: 9px; font-size: 9px"><span style="white-space-collapse: preserve; text-wrap: wrap; font-size: 9px">Offer applicable at all locations across India</span></li>\r\n  <li style="text-align: inherit; font-size: 9px; font-size: 9px"><span style="white-space-collapse: preserve; text-wrap: wrap; font-size: 9px">Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand</span></li>\r\n  <li style="text-align: inherit; font-size: 9px; font-size: 9px"><span style="white-space-collapse: preserve; text-wrap: wrap; font-size: 9px">Offer valid for one time use only</span><span style="font-size: 9px">&nbsp;</span></li>\r\n</ul><div></div></div></td>\r\n      </tr>\r\n    </tbody>\r\n  </table><table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-muid="f01742d8-f6cd-4903-9bda-016d66baa598">\r\n    <tbody>\r\n      <tr>\r\n        <td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center">\r\n          <img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;" width="600" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/04dab37225190aa7/2d67bc44-55bc-4354-badc-044734a955d7/1200x268.png">\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table><div data-role="module-unsubscribe" class="module" role="module" data-type="unsubscribe" style="color:#1e22aa; font-size:12px; line-height:20px; padding:16px 16px 16px 16px; text-align:Center;" data-muid="4e838cf3-9892-4a6d-94d6-170e474d21e5"><p style="font-family:helvetica,sans-serif; font-size:12px; line-height:20px;"><a class="Unsubscribe--unsubscribeLink" href="<%asm_group_unsubscribe_raw_url%>" target="_blank" style="">Unsubscribe</a></p></div></td>\r\n                                      </tr>\r\n                                    </table>\r\n                                    <!--[if mso]>\r\n                                  </td>\r\n                                </tr>\r\n                              </table>\r\n                            </center>\r\n                            <![endif]-->\r\n                          </td>\r\n                        </tr>\r\n                      </table>\r\n                    </td>\r\n                  </tr>\r\n                </table>\r\n              </td>\r\n            </tr>\r\n          </table>\r\n        </div>\r\n      </center>\r\n    <p>If you&nbsp;unsubscribe, you will not receive any email communication on your WeWork transactions and benefits from the myHQ team&nbsp;<a href="http://url492.myhq.in/wf/unsubscribe?upn="> click here </a>.</p>\r\n<img src="http://url492.myhq.in/wf/open?upn=" alt="" width="1" height="1" border="0" style="height:1px !important;width:1px !important;border-width:0 !important;margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;"/></body>\r\n  </html>`,
+            reply: `[]\n[]\n\nGet more productive days at a better price\n\nHey there,\nYour 5 day bundle is coming to an end.\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\nBook day pass bundles of 10 at 30% off Use code: BUNDLE30\n\n[Book now](http://url492.myhq.in/ls/click?upn=)\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\n[]\n\n[Book now](http://url492.myhq.in/ls/click?upn=)\n\n*T&Cs apply \n\n- Offer applicable at all locations across India\n- Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n-  Offer valid for one time use only\n\n[]\n\n[Unsubscribe](<%asm_group_unsubscribe_raw_url%>)\n\nIf you unsubscribe, you will not receive any email communication on your WeWork transactions and benefits from the myHQ team [click here](http://url492.myhq.in/wf/unsubscribe?upn=).\n\n[]`,
+            quoted: `[]\n[]\n\nGet more productive days at a better price\n\nHey there,\nYour 5 day bundle is coming to an end.\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\nBook day pass bundles of 10 at 30% off Use code: BUNDLE30\n\n[Book now](http://url492.myhq.in/ls/click?upn=)\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\n[]\n\n[Book now](http://url492.myhq.in/ls/click?upn=)\n\n*T&Cs apply \n\n- Offer applicable at all locations across India\n- Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n-  Offer valid for one time use only\n\n[]\n\n[Unsubscribe](<%asm_group_unsubscribe_raw_url%>)\n\nIf you unsubscribe, you will not receive any email communication on your WeWork transactions and benefits from the myHQ team [click here](http://url492.myhq.in/wf/unsubscribe?upn=).\n\n[]`,
+          },
+          in_reply_to: null,
+          message_id: '7baNGWOeR1CfiWUWYlMXow@geopod-ismtpd-2',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: 'Book your favourite workspaces at discounted prices',
+          text_content: {
+            full: 'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+            reply:
+              'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+            quoted:
+              'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+          },
+          to: ['shivam@chatwoot.com'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111254,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Get *more productive days* at a better price\n\nHey there,\n\nYour 5 day bundle is coming to an end.\n\nTo get access to more productive days at WeWork, upgrade to 10 day pass bundles and save flat 30%.\n\nBook day pass bundles of 10 at *30% off*\nUse code: *BUNDLE30* **\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\nWhy book a day pass bundle?\n\nExplore deep focus zones, fresh micro-brewed coffee, uninterrupted Wi-Fi and paid printing & on-site parking for multiple productive days in a row.\n\nBook now ( http://url492.myhq.in/ls/click?upn= bundle_upsell_CTA )\n\n*T&Cs apply\n\n* Offer applicable at all locations across India\n* Offer only applicable on 5 and 10 day pass bundles of WeWork on-demand\n* Offer valid for one time use only\n\nUnsubscribe ( <%asm_group_unsubscribe_raw_url%> )',
+      sentiment: {},
+      conversation: {
+        assignee_id: null,
+        unread_count: 0,
+        last_activity_at: 1733141025,
+        contact_inbox: {
+          source_id: 'contactwwod@myhq.in',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id: 'email:7baNGWOeR1CfiWUWYlMXow@geopod-ismtpd-2',
+        },
+        custom_attributes: {},
+        email: 'contactwwod@myhq.in',
+        id: 111254,
+        identifier: null,
+        name: 'WeWork India',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/simpleEmail.js b/app/javascript/dashboard/components-next/message/fixtures/simpleEmail.js
new file mode 100644
index 000000000..c6aaf7694
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/simpleEmail.js
@@ -0,0 +1,85 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 60716,
+      content:
+        "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.\n------------------------------\nKey Updates\n\n   1.\n\n   *Integration Status*:\n   The initial integration with Chatwoot has been successful. We've tested:\n   - API connectivity\n      - Multi-channel messaging\n      - Real-time chat updates\n   2.\n\n   *Upcoming Tasks*:\n   - Streamlining notification workflows\n      - Enhancing webhook reliability\n      - Testing team collaboration features\n\n*Note:*\nDon’t forget to check out the automation capabilities in Chatwoot for\nhandling repetitive queries. It can save a ton of time!\n\n------------------------------\nFeatures We Love\n\nHere’s what stood out so far:\n\n   - *Unified Inbox*: All customer conversations in one place.\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\n   - *Integrations*: Works seamlessly with CRM and Slack.\n\n------------------------------\nAction Items For Next Week:\n\n   1. Implement the webhook for *ticket prioritization*.\n   2. Test *CSAT surveys* post-chat sessions.\n   3. Review *analytics dashboard* insights.\n\n------------------------------\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\nMetric Value Change (%)\nTotal Conversations 350 +25%\nAverage Response Time 3 minutes -15%\nCSAT Score 92% +10%\n------------------------------\nFeedback\n\n*Do let me know if you have additional feedback or ideas to improve our\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\nchanges:*\n\n[image: Chatwoot Dashboard Screenshot]\n------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+      account_id: 51,
+      inbox_id: 991,
+      conversation_id: 46,
+      message_type: 0,
+      created_at: 1733141025,
+      updated_at: '2024-12-02T12:03:45.663Z',
+      private: false,
+      status: 'sent',
+      source_id:
+        'CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+      content_type: 'incoming_email',
+      content_attributes: {
+        email: {
+          bcc: null,
+          cc: null,
+          content_type:
+            'multipart/alternative; boundary=0000000000009d889e0628477235',
+          date: '2024-12-02T16:29:39+05:30',
+          from: ['hey@shivam.dev'],
+          html_content: {
+            full: '<div dir="ltr"><h3><span style="font-size:small;font-weight:normal">Hi Team,</span></h3>\r\n<p>I hope this email finds you well! I wanted to share some updates regarding our integration with <strong>Chatwoot</strong> and outline some key features we’ve explored.</p>\r\n<hr>\r\n<h3>Key Updates</h3>\r\n<ol>\r\n<li>\r\n<p><strong>Integration Status</strong>:<br>\r\nThe initial integration with Chatwoot has been successful. We&#39;ve tested:</p>\r\n<ul>\r\n<li>API connectivity</li>\r\n<li>Multi-channel messaging</li>\r\n<li>Real-time chat updates</li>\r\n</ul>\r\n</li>\r\n<li>\r\n<p><strong>Upcoming Tasks</strong>:</p>\r\n<ul>\r\n<li>Streamlining notification workflows</li>\r\n<li>Enhancing webhook reliability</li>\r\n<li>Testing team collaboration features</li>\r\n</ul>\r\n</li>\r\n</ol>\r\n<blockquote>\r\n<p><strong>Note:</strong><br>\r\nDon’t forget to check out the automation capabilities in Chatwoot for handling repetitive queries. It can save a ton of time!</p>\r\n</blockquote>\r\n<hr>\r\n<h3>Features We Love</h3>\r\n<p>Here’s what stood out so far:</p>\r\n<ul>\r\n<li><strong>Unified Inbox</strong>: All customer conversations in one place.</li>\r\n<li><strong>Customizable Workflows</strong>: Tailored to our team’s unique needs.</li>\r\n<li><strong>Integrations</strong>: Works seamlessly with CRM and Slack.</li>\r\n</ul>\r\n<hr>\r\n<h3>Action Items</h3>\r\n<h4>For Next Week:</h4>\r\n<ol>\r\n<li>Implement the webhook for <strong>ticket prioritization</strong>.</li>\r\n<li>Test <strong>CSAT surveys</strong> post-chat sessions.</li>\r\n<li>Review <strong>analytics dashboard</strong> insights.</li>\r\n</ol>\r\n<hr>\r\n<h3>Data Snapshot</h3>\r\n<p>Here’s a quick overview of our conversation stats this week:</p>\r\n<table>\r\n<thead>\r\n<tr>\r\n<th>Metric</th>\r\n<th>Value</th>\r\n<th>Change (%)</th>\r\n</tr>\r\n</thead>\r\n<tbody>\r\n<tr>\r\n<td>Total Conversations</td>\r\n<td>350</td>\r\n<td>+25%</td>\r\n</tr>\r\n<tr>\r\n<td>Average Response Time</td>\r\n<td>3 minutes</td>\r\n<td>-15%</td>\r\n</tr>\r\n<tr>\r\n<td>CSAT Score</td>\r\n<td>92%</td>\r\n<td>+10%</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n<hr>\r\n<h3>Feedback</h3>\r\n<p><i>Do let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:</i></p>\r\n<p><img src="https://via.placeholder.com/600x300" alt="Chatwoot Dashboard Screenshot" title="Chatwoot Dashboard"></p>\r\n<hr>\r\n<p>Looking forward to hearing your thoughts!</p>\r\n<p>Best regards,<br>~ Shivam Mishra<br></p></div>\r\n',
+            reply:
+              "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.\n\n---------------------------------------------------------------\n\nKey Updates\n\n-\n\nIntegration Status:\nThe initial integration with Chatwoot has been successful. We've tested:\n\n- API connectivity\n- Multi-channel messaging\n- Real-time chat updates\n\n-\n\nUpcoming Tasks:\n\n- Streamlining notification workflows\n- Enhancing webhook reliability\n- Testing team collaboration features\n\n>\n---------------------------------------------------------------\n\nFeatures We Love\n\nHere’s what stood out so far:\n\n-  Unified Inbox: All customer conversations in one place.\n-  Customizable Workflows: Tailored to our team’s unique needs.\n-  Integrations: Works seamlessly with CRM and Slack.\n\n---------------------------------------------------------------\n\nAction Items\n\nFor Next Week:\n\n- Implement the webhook for ticket prioritization.\n- Test CSAT surveys post-chat sessions.\n- Review analytics dashboard insights.\n\n---------------------------------------------------------------\n\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\n\nMetric\tValue\tChange (%)\nTotal Conversations\t350\t+25%\nAverage Response Time\t3 minutes\t-15%\nCSAT Score\t92%\t+10%\n---------------------------------------------------------------\n\nFeedback\n\nDo let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:\n\n[Chatwoot Dashboard]\n\n---------------------------------------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+            quoted:
+              'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.',
+          },
+          in_reply_to: null,
+          message_id:
+            'CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+          multipart: true,
+          number_of_attachments: 0,
+          subject: 'Update on Chatwoot Integration and Features',
+          text_content: {
+            full: "Hi Team,\r\n\r\nI hope this email finds you well! I wanted to share some updates regarding\r\nour integration with *Chatwoot* and outline some key features we’ve\r\nexplored.\r\n------------------------------\r\nKey Updates\r\n\r\n   1.\r\n\r\n   *Integration Status*:\r\n   The initial integration with Chatwoot has been successful. We've tested:\r\n   - API connectivity\r\n      - Multi-channel messaging\r\n      - Real-time chat updates\r\n   2.\r\n\r\n   *Upcoming Tasks*:\r\n   - Streamlining notification workflows\r\n      - Enhancing webhook reliability\r\n      - Testing team collaboration features\r\n\r\n*Note:*\r\nDon’t forget to check out the automation capabilities in Chatwoot for\r\nhandling repetitive queries. It can save a ton of time!\r\n\r\n------------------------------\r\nFeatures We Love\r\n\r\nHere’s what stood out so far:\r\n\r\n   - *Unified Inbox*: All customer conversations in one place.\r\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\r\n   - *Integrations*: Works seamlessly with CRM and Slack.\r\n\r\n------------------------------\r\nAction Items For Next Week:\r\n\r\n   1. Implement the webhook for *ticket prioritization*.\r\n   2. Test *CSAT surveys* post-chat sessions.\r\n   3. Review *analytics dashboard* insights.\r\n\r\n------------------------------\r\nData Snapshot\r\n\r\nHere’s a quick overview of our conversation stats this week:\r\nMetric Value Change (%)\r\nTotal Conversations 350 +25%\r\nAverage Response Time 3 minutes -15%\r\nCSAT Score 92% +10%\r\n------------------------------\r\nFeedback\r\n\r\n*Do let me know if you have additional feedback or ideas to improve our\r\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\r\nchanges:*\r\n\r\n[image: Chatwoot Dashboard Screenshot]\r\n------------------------------\r\n\r\nLooking forward to hearing your thoughts!\r\n\r\nBest regards,\r\n~ Shivam Mishra\r\n",
+            reply:
+              "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.\n------------------------------\nKey Updates\n\n   1.\n\n   *Integration Status*:\n   The initial integration with Chatwoot has been successful. We've tested:\n   - API connectivity\n      - Multi-channel messaging\n      - Real-time chat updates\n   2.\n\n   *Upcoming Tasks*:\n   - Streamlining notification workflows\n      - Enhancing webhook reliability\n      - Testing team collaboration features\n\n*Note:*\nDon’t forget to check out the automation capabilities in Chatwoot for\nhandling repetitive queries. It can save a ton of time!\n\n------------------------------\nFeatures We Love\n\nHere’s what stood out so far:\n\n   - *Unified Inbox*: All customer conversations in one place.\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\n   - *Integrations*: Works seamlessly with CRM and Slack.\n\n------------------------------\nAction Items For Next Week:\n\n   1. Implement the webhook for *ticket prioritization*.\n   2. Test *CSAT surveys* post-chat sessions.\n   3. Review *analytics dashboard* insights.\n\n------------------------------\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\nMetric Value Change (%)\nTotal Conversations 350 +25%\nAverage Response Time 3 minutes -15%\nCSAT Score 92% +10%\n------------------------------\nFeedback\n\n*Do let me know if you have additional feedback or ideas to improve our\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\nchanges:*\n\n[image: Chatwoot Dashboard Screenshot]\n------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+            quoted:
+              'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.',
+          },
+          to: ['shivam@chatwoot.com'],
+        },
+        cc_email: null,
+        bcc_email: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 111256,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.',
+      sentiment: {},
+      conversation: {
+        assignee_id: null,
+        unread_count: 1,
+        last_activity_at: 1733141025,
+        contact_inbox: {
+          source_id: 'hey@shivam.dev',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          source_id:
+            'email:CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+        },
+        custom_attributes: {},
+        email: 'hey@shivam.dev',
+        id: 111256,
+        identifier: null,
+        name: 'Shivam Mishra',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/textOnly.js b/app/javascript/dashboard/components-next/message/fixtures/textOnly.js
new file mode 100644
index 000000000..a79791e4f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/textOnly.js
@@ -0,0 +1,715 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 5272,
+      content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      created_at: 1732195656,
+      private: false,
+      source_id: null,
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5273,
+      content: 'Give the team a way to reach you.',
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 3,
+      content_type: 'text',
+      status: 'read',
+      content_attributes: {},
+      created_at: 1732195656,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 5274,
+      content: 'Get notified by email',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 3,
+      created_at: 1732195656,
+      updated_at: '2024-11-21T13:27:53.612Z',
+      private: false,
+      status: 'read',
+      source_id: null,
+      content_type: 'input_email',
+      content_attributes: {
+        submitted_email: 'hey@example.com',
+      },
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Get notified by email',
+      sentiment: {},
+      conversation: {
+        assignee_id: null,
+        unread_count: 1,
+        last_activity_at: 1732195656,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+    {
+      id: 5275,
+      content:
+        'Does the Startup plan include the two users from the Free plan, or do I have to buy those separately?',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195735,
+      updated_at: '2024-11-21T13:28:55.508Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'Does the Startup plan include the two users from the Free plan, or do I have to buy those separately?',
+      sentiment: {},
+      conversation: {
+        assignee_id: null,
+        unread_count: 1,
+        last_activity_at: 1732195735,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'John self-assigned this conversation',
+      id: 5276,
+      content: 'John self-assigned this conversation',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 2,
+      created_at: 1732195741,
+      updated_at: '2024-11-21T13:30:26.788Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195826,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:29:01.570Z', '2024-11-21T13:30:26.788Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Hey thanks for your interest in upgrading, no, the seats are not included, you will have to purchase them alongside the rest. How many seats are you planning to upgrade to?',
+      id: 5277,
+      content:
+        'Hey thanks for your interest in upgrading, no, the seats are not included, you will have to purchase them alongside the rest. How many seats are you planning to upgrade to?',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195826,
+      updated_at: '2024-11-21T13:30:26.837Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195826,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:30:26.149Z', '2024-11-21T13:30:26.837Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5278,
+      content: "Oh, that's unfortunate",
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195820,
+      updated_at: '2024-11-21T13:30:38.070Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: "Oh, that's unfortunate",
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195820,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5279,
+      content:
+        'I plan to upgrade to 4 agents for now, but will grow to 6 in the next three months. ',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195820,
+      updated_at: '2024-11-21T13:31:05.284Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'I plan to upgrade to 4 agents for now, but will grow to 6 in the next three months. ',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195885,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+
+    {
+      id: 5280,
+      content: 'Is it possible to get a discount?',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195886,
+      updated_at: '2024-11-21T13:31:12.545Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Is it possible to get a discount?',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195872,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        '[@Bruce](mention://user/30/Bruce) should we offer them a discount',
+      id: 5281,
+      content:
+        '[@Bruce](mention://user/30/Bruce) should we offer them a discount',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195887,
+      updated_at: '2024-11-21T13:32:59.863Z',
+      private: true,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195972,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:31:27.914Z', '2024-11-21T13:32:59.863Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Sure, you can use the discount code KQS3242A at the checkout to get 30% off on your yearly subscription. This coupon only applies for a year, I hope this helps',
+      id: 5282,
+      content:
+        'Sure, you can use the discount code KQS3242A at the checkout to get 30% off on your yearly subscription. This coupon only applies for a year, I hope this helps',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195972,
+      updated_at: '2024-11-21T13:32:59.902Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195972,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:32:52.722Z', '2024-11-21T13:32:59.902Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5283,
+      content: 'Great, thanks',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195982,
+      updated_at: '2024-11-21T13:33:02.142Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Great, thanks',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195982,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+
+    {
+      id: 5284,
+      content: 'Really appreciate it',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 0,
+      created_at: 1732195984,
+      updated_at: '2024-11-21T13:33:04.856Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 597,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Really appreciate it',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732195984,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        additional_attributes: {},
+        custom_attributes: {},
+        email: 'hey@example.com',
+        id: 597,
+        identifier: null,
+        name: 'hey',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'progress',
+      content_type: 'text',
+      processed_message_content: ' Happy to help :)',
+      id: 5285,
+      content: ' Happy to help :)',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195991,
+      updated_at: '2024-11-21T13:33:12.229Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195991,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:33:11.667Z', '2024-11-21T13:33:12.229Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'failed',
+      content_type: 'text',
+      processed_message_content:
+        "Let us know if you have any questions, I'll close this conversation for now",
+      id: 5286,
+      content:
+        "Let us know if you have any questions, I'll close this conversation for now",
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732196013,
+      updated_at: '2024-11-21T13:33:33.879Z',
+      private: false,
+      source_id: null,
+      content_attributes: {
+        external_error:
+          'Business account is restricted from messaging users in this country.',
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196013,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:33:33.511Z', '2024-11-21T13:33:33.879Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5287,
+      content: 'John set the priority to urgent',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 2,
+      created_at: 1732196017,
+      updated_at: '2024-11-21T13:33:37.569Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'John set the priority to urgent',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196017,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+    {
+      id: 5288,
+      content: 'John added billing',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 2,
+      created_at: 1732196020,
+      updated_at: '2024-11-21T13:33:40.207Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'John added billing',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196020,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+    {
+      id: 5289,
+      content: 'John added delivery',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 2,
+      created_at: 1732196020,
+      updated_at: '2024-11-21T13:33:40.822Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'John added delivery',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196020,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+    {
+      id: 5290,
+      content: 'Conversation was marked resolved by John',
+      account_id: 1,
+      inbox_id: 475,
+      conversation_id: 43,
+      message_type: 2,
+      created_at: 1732196029,
+      updated_at: '2024-11-21T13:33:49.059Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Conversation was marked resolved by John',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196029,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js b/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js
new file mode 100644
index 000000000..05e5faf5b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/fixtures/textWithMedia.js
@@ -0,0 +1,1526 @@
+import camelcaseKeys from 'camelcase-keys';
+
+export default camelcaseKeys(
+  [
+    {
+      id: 5296,
+      content: 'Hey, I want to get my Macbook repaird',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      created_at: 1732710571,
+      private: false,
+      source_id: null,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5296,
+      content: '',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      created_at: 1732710571,
+      private: false,
+      source_id: null,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 378,
+          message_id: 5314,
+          file_type: 'location',
+          account_id: 2,
+          coordinates_lat: 37.7937545,
+          coordinates_long: -122.3997472,
+          fallback_title: 'Chatwoot Inc',
+          extension: null,
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      id: 5296,
+      content: 'Shivam Mishra',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      created_at: 1732710571,
+      private: false,
+      source_id: null,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 378,
+          message_id: 5314,
+          file_type: 'contact',
+          account_id: 2,
+          coordinates_lat: 37.7937545,
+          coordinates_long: -122.3997472,
+          fallback_title: '+919999999999',
+          extension: null,
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      id: 5297,
+      content: 'Give the team a way to reach you.',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 3,
+      content_type: 'text',
+      status: 'read',
+      content_attributes: {},
+      created_at: 1732710572,
+      private: false,
+      source_id: null,
+    },
+    {
+      id: 5298,
+      content: 'Get notified by email',
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 3,
+      content_type: 'input_email',
+      status: 'read',
+      content_attributes: {
+        submitted_email: 'anthony@example.com',
+      },
+      created_at: 1732710572,
+      private: false,
+      source_id: null,
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'Conversation was reopened by John',
+      id: 5299,
+      content: 'Conversation was reopened by John',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 2,
+      created_at: 1732710724,
+      updated_at: '2024-11-27T12:32:43.389Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710762,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:32:04.150Z', '2024-11-27T12:32:43.389Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'John self-assigned this conversation',
+      id: 5300,
+      content: 'John self-assigned this conversation',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 2,
+      created_at: 1732710731,
+      updated_at: '2024-11-27T12:32:43.419Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710762,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:32:11.416Z', '2024-11-27T12:32:43.419Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for? I see you own a Macbook Pro 2022 Model. Is that correct?",
+      id: 5301,
+      content:
+        "Hey, I am Shivam, I'll be helping you today. What kind of repair are you looking for? I see you own a Macbook Pro 2022 Model. Is that correct?",
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732710762,
+      updated_at: '2024-11-27T12:32:43.458Z',
+      private: false,
+      source_id: null,
+      content_attributes: {
+        in_reply_to: 5296,
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710762,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:32:42.481Z', '2024-11-27T12:32:43.458Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5302,
+      content:
+        'I dropped my laptop and the screen is not cracked, can you fix it?',
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710776,
+      updated_at: '2024-11-27T12:32:56.684Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: 5301,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'I dropped my laptop and the screen is not cracked, can you fix it?',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710776,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'John added repair',
+      id: 5303,
+      content: 'John added repair',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 2,
+      created_at: 1732710805,
+      updated_at: '2024-11-27T12:33:30.138Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710809,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:33:25.620Z', '2024-11-27T12:33:30.138Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Sure, will it be possible to share an image of the same?',
+      id: 5304,
+      content: 'Sure, will it be possible to share an image of the same?',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732710809,
+      updated_at: '2024-11-27T12:33:30.167Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732710809,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:33:29.116Z', '2024-11-27T12:33:30.167Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5305,
+      content: null,
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710822,
+      updated_at: '2024-11-27T12:33:42.634Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: null,
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710822,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 17,
+          message_id: 5305,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 983912,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5306,
+      content: 'There you go',
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710827,
+      updated_at: '2024-11-27T12:33:47.262Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'There you go',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710827,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5307,
+      content: null,
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710841,
+      updated_at: '2024-11-27T12:34:01.991Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: null,
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710841,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 18,
+          message_id: 5307,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/registrations.xls',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4f7e671db635b73d12ee004e87608bc098ef6b3b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/all-files.zip',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      id: 5308,
+      content: "Here's the invoice too",
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732710847,
+      updated_at: '2024-11-27T12:34:07.380Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: "Here's the invoice too",
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732710847,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        '[@Bruce](mention://user/30/Bruce) do you think this is covered? Seems like they are out of damage insurance by a week',
+      id: 5309,
+      content:
+        '[@Bruce](mention://user/30/Bruce) do you think this is covered? Seems like they are out of damage insurance by a week',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732710890,
+      updated_at: '2024-11-27T12:36:46.586Z',
+      private: true,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711005,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:34:50.013Z', '2024-11-27T12:36:46.586Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        '[@John](mention://user/1/John) They have been a customer for a while, we can offer a 30% discount on the repair',
+      id: 5310,
+      content:
+        '[@John](mention://user/1/John) They have been a customer for a while, we can offer a 30% discount on the repair',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732710942,
+      updated_at: '2024-11-27T12:36:46.631Z',
+      private: true,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 30,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711005,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 30,
+        name: 'Bruce',
+        available_name: 'Bruce',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc3dKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--76f2acbf7e24fe4c4aa7b053051df9c74ea9d8aa/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/67.jpg',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc3dKIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--76f2acbf7e24fe4c4aa7b053051df9c74ea9d8aa/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/67.jpg',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:35:42.614Z', '2024-11-27T12:36:46.631Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        "This document suggests you are out of the damage coverage period. But we can repair this for sure, and since you've been a customer for a while and the coverage is off just by a week, we can offer a 30% discount on the repair. Does that work?",
+      id: 5311,
+      content:
+        "This document suggests you are out of the damage coverage period. But we can repair this for sure, and since you've been a customer for a while and the coverage is off just by a week, we can offer a 30% discount on the repair. Does that work?",
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732711005,
+      updated_at: '2024-11-27T12:36:46.715Z',
+      private: false,
+      source_id: null,
+      content_attributes: {
+        in_reply_to: 5307,
+        in_reply_to_external_id: null,
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711005,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:36:45.557Z', '2024-11-27T12:36:46.715Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: 'John set the priority to medium',
+      id: 5312,
+      content: 'John set the priority to medium',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 2,
+      created_at: 1732711008,
+      updated_at: '2024-11-27T12:37:05.985Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711025,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:36:48.047Z', '2024-11-27T12:37:05.985Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5313,
+      content: 'This is perfect, thanks a lot. Let me know the next steps',
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732711025,
+      updated_at: '2024-11-27T12:37:05.439Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content:
+        'This is perfect, thanks a lot. Let me know the next steps',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732711025,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        "Sure, you can fill this form and mail the item to us. And we will replace the screen within 5 business days and dispatch it for you. I've also attached and estimate for the repair and the shipping charges",
+      id: 5314,
+      content:
+        "Sure, you can fill this form and mail the item to us. And we will replace the screen within 5 business days and dispatch it for you. I've also attached and estimate for the repair and the shipping charges",
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732711103,
+      updated_at: '2024-11-27T12:38:24.668Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711103,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 19,
+          message_id: 5314,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+        {
+          id: 25,
+          message_id: 5314,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+        {
+          id: 26,
+          message_id: 5314,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+        {
+          id: 20,
+          message_id: 5314,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/agreement.doc',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+        {
+          id: 20,
+          message_id: 5314,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/all-files.zip',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+        {
+          id: 20,
+          message_id: 5314,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/business-card.pdf',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1LIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9f15e48e101a6b85f454aacd5f9584039ba0a6b9/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCam9UY21WemFYcGxYM1J2WDJacGJHeGJCMmtCK2pBPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--5c454d5f03daf1f9f4068cb242cf9885cc1815b6/letterhead.pdf',
+          file_size: 99844,
+          width: null,
+          height: null,
+        },
+        {
+          id: 22,
+          message_id: 5314,
+          file_type: 'video',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4',
+          thumb_url:
+            'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4',
+          file_size: 287949,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:38:23.382Z', '2024-11-27T12:38:24.668Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'This is a video demo of how to safely pack your device for mail',
+      id: 5318,
+      content:
+        'This is a video demo of how to safely pack your device for mail',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732788718,
+      updated_at: '2024-11-28T10:11:59.587Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732788718,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 21,
+          message_id: 5318,
+          file_type: 'video',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaVVLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--2b713098fcdb9fde921f7575ac7d7539d0ffd5df/CleanShot%202024-11-26%20at%2018.07.56.mp4',
+          thumb_url: '',
+          file_size: 1176246,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-28T10:11:58.967Z', '2024-11-28T10:11:59.587Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: null,
+      id: 5319,
+      content: "Here's a recording of the call",
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732788745,
+      updated_at: '2024-11-28T10:12:25.906Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732788745,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 22,
+          message_id: 5319,
+          file_type: 'audio',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3',
+          thumb_url: '',
+          file_size: 345644,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-28T10:12:25.364Z', '2024-11-28T10:12:25.906Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content: null,
+      id: 5319,
+      content: null,
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732788745,
+      updated_at: '2024-11-28T10:12:25.906Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732788745,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      attachments: [
+        {
+          id: 22,
+          message_id: 5319,
+          file_type: 'audio',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3',
+          thumb_url: '',
+          file_size: 345644,
+          width: null,
+          height: null,
+        },
+      ],
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-28T10:12:25.364Z', '2024-11-28T10:12:25.906Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Hope this helps\n\n--\n\n~ John Acme  \n![](http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHNGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--49eeccbbf9eea2ce5c72c6ed6a7eb0cf0be024b1/picologo.png?cw_image_height=24px)Picoletter',
+      id: 5320,
+      content:
+        'Hope this helps\n\n--\n\n~ John Acme  \n![](http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdHNGIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--49eeccbbf9eea2ce5c72c6ed6a7eb0cf0be024b1/picologo.png?cw_image_height=24px)Picoletter',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732788759,
+      updated_at: '2024-11-28T10:12:40.464Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732788759,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-28T10:12:39.665Z', '2024-11-28T10:12:40.464Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5315,
+      content: "Great. I'll send it across. Thanks",
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 0,
+      created_at: 1732711121,
+      updated_at: '2024-11-27T12:38:41.127Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {
+        in_reply_to: null,
+      },
+      sender_type: 'Contact',
+      sender_id: 599,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: "Great. I'll send it across. Thanks",
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 1,
+        last_activity_at: 1732711121,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+    },
+    {
+      conversation_id: 1016,
+      status: 'read',
+      content_type: 'text',
+      processed_message_content:
+        'Glad I could help. Let me know if you need some other help',
+      id: 5316,
+      content: 'Glad I could help. Let me know if you need some other help',
+      account_id: 2,
+      inbox_id: 486,
+      message_type: 1,
+      created_at: 1732711141,
+      updated_at: '2024-11-27T12:39:02.247Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711141,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: 'busy',
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-27T12:39:01.126Z', '2024-11-27T12:39:02.247Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      id: 5317,
+      content: 'Conversation was marked resolved by John',
+      account_id: 2,
+      inbox_id: 486,
+      conversation_id: 1016,
+      message_type: 2,
+      created_at: 1732711142,
+      updated_at: '2024-11-27T12:39:02.911Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      content_type: 'text',
+      content_attributes: {},
+      sender_type: null,
+      sender_id: null,
+      external_source_ids: {},
+      additional_attributes: {},
+      processed_message_content: 'Conversation was marked resolved by John',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732711142,
+        contact_inbox: {
+          source_id: 'f42d4630-7c41-4af3-bbc7-7c43e2aa2fc7',
+        },
+      },
+    },
+    {
+      id: 5323,
+      content: 'These are all the files you requested',
+      inbox_id: 486,
+      echo_id: '9f7432284767',
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1732795624,
+      private: false,
+      source_id: null,
+      sender_type: 'Contact',
+      sender_id: 599,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 27,
+          message_id: 5323,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 26126,
+          width: null,
+          height: null,
+        },
+        {
+          id: 28,
+          message_id: 5323,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 58696,
+          width: null,
+          height: null,
+        },
+        {
+          id: 28,
+          message_id: 5323,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3aa5f4c3a2a034b6e68800d4787d369254ab1eb4/multi.zip',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3aa5f4c3a2a034b6e68800d4787d369254ab1eb4/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkUzSmxjMmw2WlY5MGIxOW1hV3hzV3dkcEFmb3ciLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--328463286cffa0d7d9a36a3a30bfa1daed3a5ee6/multi.webp',
+          file_size: 58696,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      id: 5323,
+      content: null,
+      inbox_id: 486,
+      echo_id: '9f7432284767',
+      conversation_id: 1016,
+      message_type: 0,
+      content_type: 'text',
+      status: 'sent',
+      content_attributes: {},
+      created_at: 1732795624,
+      private: false,
+      source_id: null,
+      sender_type: 'Contact',
+      sender_id: 599,
+      sender: {
+        additional_attributes: {
+          created_at_ip: '::1',
+        },
+        custom_attributes: {},
+        email: 'anthony@example.com',
+        id: 599,
+        identifier: null,
+        name: 'anthony',
+        phone_number: null,
+        thumbnail: '',
+        type: 'contact',
+      },
+      attachments: [
+        {
+          id: 27,
+          message_id: 5323,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 26126,
+          width: null,
+          height: null,
+        },
+        {
+          id: 28,
+          message_id: 5323,
+          file_type: 'image',
+          account_id: 2,
+          extension: null,
+          data_url: 'https://picsum.photos/500',
+          thumb_url: 'https://picsum.photos/500',
+          file_size: 58696,
+          width: null,
+          height: null,
+        },
+        {
+          id: 28,
+          message_id: 5323,
+          file_type: 'file',
+          account_id: 2,
+          extension: null,
+          data_url:
+            'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3aa5f4c3a2a034b6e68800d4787d369254ab1eb4/list-with-all-data.csv',
+          thumb_url:
+            'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaXdLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3aa5f4c3a2a034b6e68800d4787d369254ab1eb4/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkUzSmxjMmw2WlY5MGIxOW1hV3hzV3dkcEFmb3ciLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--328463286cffa0d7d9a36a3a30bfa1daed3a5ee6/multi.webp',
+          file_size: 58696,
+          width: null,
+          height: null,
+        },
+      ],
+    },
+    {
+      conversation_id: 43,
+      status: 'progress',
+      content_type: 'text',
+      processed_message_content: ' Happy to help :)',
+      id: 5285,
+      content: ' Happy to help :)',
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732195991,
+      updated_at: '2024-11-21T13:33:12.229Z',
+      private: false,
+      source_id: null,
+      content_attributes: {},
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732195991,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:33:11.667Z', '2024-11-21T13:33:12.229Z'],
+        status: ['sent', 'read'],
+      },
+    },
+    {
+      conversation_id: 43,
+      status: 'failed',
+      content_type: 'text',
+      processed_message_content:
+        "Let us know if you have any questions, I'll close this conversation for now",
+      id: 5286,
+      content:
+        "Let us know if you have any questions, I'll close this conversation for now",
+      account_id: 1,
+      inbox_id: 475,
+      message_type: 1,
+      created_at: 1732196013,
+      updated_at: '2024-11-21T13:33:33.879Z',
+      private: false,
+      source_id: null,
+      content_attributes: {
+        external_error:
+          'Business account is restricted from messaging users in this country.',
+      },
+      sender_type: 'User',
+      sender_id: 1,
+      external_source_ids: {},
+      additional_attributes: {},
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1732196013,
+        contact_inbox: {
+          source_id: 'b018c554-8e17-4102-8a0b-f6d20d021017',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'John',
+        available_name: 'John',
+        avatar_url:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+        type: 'user',
+        availability_status: null,
+        thumbnail:
+          'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBLIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--4e625d80e7ef2dc41354392bc214832fbe640840/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--ebe60765d222d11ade39165eae49cc4b2de18d89/picologo.png',
+      },
+      previous_changes: {
+        updated_at: ['2024-11-21T13:33:33.511Z', '2024-11-21T13:33:33.879Z'],
+        status: ['sent', 'read'],
+      },
+    },
+  ],
+  { deep: true }
+);
diff --git a/app/javascript/dashboard/components-next/message/provider.js b/app/javascript/dashboard/components-next/message/provider.js
new file mode 100644
index 000000000..cf35c6c40
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/provider.js
@@ -0,0 +1,33 @@
+import { inject, provide, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
+import { ATTACHMENT_TYPES } from './constants';
+
+const MessageControl = Symbol('MessageControl');
+
+export function useMessageContext() {
+  const context = inject(MessageControl, null);
+  if (context === null) {
+    throw new Error(`Component is missing a parent <Message /> component.`);
+  }
+
+  const currentChatAttachments = useMapGetter('getSelectedChatAttachments');
+  const filteredCurrentChatAttachments = computed(() => {
+    const attachments = currentChatAttachments.value.filter(attachment =>
+      [
+        ATTACHMENT_TYPES.IMAGE,
+        ATTACHMENT_TYPES.VIDEO,
+        ATTACHMENT_TYPES.IG_REEL,
+        ATTACHMENT_TYPES.AUDIO,
+      ].includes(attachment.file_type)
+    );
+
+    return useSnakeCase(attachments);
+  });
+
+  return { ...context, filteredCurrentChatAttachments };
+}
+
+export function provideMessageContext(context) {
+  provide(MessageControl, context);
+}
diff --git a/app/javascript/dashboard/components-next/message/stories/EmailMessages.story.vue b/app/javascript/dashboard/components-next/message/stories/EmailMessages.story.vue
new file mode 100644
index 000000000..7988e2745
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/EmailMessages.story.vue
@@ -0,0 +1,45 @@
+<script setup>
+import Message from '../Message.vue';
+
+import simpleEmail from '../fixtures/simpleEmail.js';
+import fullConversation from '../fixtures/emailConversation.js';
+import newsletterEmail from '../fixtures/newsletterEmail.js';
+
+const failedEmail = {
+  ...simpleEmail[0],
+  status: 'failed',
+  senderId: 1,
+  senderType: 'User',
+  contentAttributes: {
+    ...simpleEmail[0].contentAttributes,
+    externalError: 'Failed to send email',
+  },
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Messages/Email"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Simple Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <template v-for="message in fullConversation" :key="message.id">
+          <Message :current-user-id="1" is-email-inbox v-bind="message" />
+        </template>
+      </div>
+    </Variant>
+    <Variant title="Newsletter">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <template v-for="message in newsletterEmail" :key="message.id">
+          <Message :current-user-id="1" is-email-inbox v-bind="message" />
+        </template>
+      </div>
+    </Variant>
+    <Variant title="Failed Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" is-email-inbox v-bind="failedEmail" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/InstagramBubbles.story.vue b/app/javascript/dashboard/components-next/message/stories/InstagramBubbles.story.vue
new file mode 100644
index 000000000..7d58d8eaf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/InstagramBubbles.story.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import Message from '../Message.vue';
+
+const currentUserId = ref(1);
+
+const state = reactive({
+  useCurrentUserId: false,
+});
+
+const getMessage = overrides => {
+  const contentAttributes = {
+    inReplyTo: null,
+    ...(overrides.contentAttributes ?? {}),
+  };
+
+  const sender = {
+    additionalAttributes: {},
+    customAttributes: {},
+    email: 'hey@example.com',
+    id: 597,
+    identifier: null,
+    name: 'John Doe',
+    phoneNumber: null,
+    thumbnail: '',
+    type: 'contact',
+    ...(overrides.sender ?? {}),
+  };
+
+  return {
+    id: 5272,
+    content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+    inboxId: 475,
+    conversationId: 43,
+    messageType: 0,
+    contentType: 'text',
+    status: 'sent',
+    createdAt: 1732195656,
+    private: false,
+    sourceId: null,
+    ...overrides,
+    sender,
+    contentAttributes,
+  };
+};
+
+const getAttachment = (type, url, overrides) => {
+  return {
+    id: 22,
+    messageId: 5319,
+    fileType: type,
+    accountId: 2,
+    extension: null,
+    dataUrl: url,
+    thumbUrl: '',
+    fileSize: 345644,
+    width: null,
+    height: null,
+    ...overrides,
+  };
+};
+
+const baseSenderData = computed(() => {
+  return {
+    messageType: state.useCurrentUserId ? 1 : 0,
+    senderId: state.useCurrentUserId ? currentUserId.value : 597,
+    sender: {
+      id: state.useCurrentUserId ? currentUserId.value : 597,
+      type: state.useCurrentUserId ? 'User' : 'Contact',
+    },
+  };
+});
+
+const instagramStory = computed(() =>
+  getMessage({
+    content: 'cwtestinglocal mentioned you in the story: ',
+    contentAttributes: {
+      imageType: 'story_mention',
+    },
+    attachments: [
+      getAttachment(
+        'image',
+        'https://images.pexels.com/photos/2587370/pexels-photo-2587370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const unsupported = computed(() =>
+  getMessage({
+    content: null,
+    contentAttributes: {
+      isUnsupported: true,
+    },
+    ...baseSenderData.value,
+  })
+);
+
+const igReel = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment(
+        'ig_reel',
+        'https://videos.pexels.com/video-files/2023708/2023708-hd_720_1280_30fps.mp4'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Instagram"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Instagram Reel">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="igReel" />
+      </div>
+    </Variant>
+
+    <Variant title="Instagram Story">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="instagramStory" />
+      </div>
+    </Variant>
+
+    <Variant title="Unsupported">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="unsupported" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/InstagramMessages.story.vue b/app/javascript/dashboard/components-next/message/stories/InstagramMessages.story.vue
new file mode 100644
index 000000000..6bc97c981
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/InstagramMessages.story.vue
@@ -0,0 +1,44 @@
+<script setup>
+import Message from '../Message.vue';
+import instagramConversation from '../fixtures/instagramConversation.js';
+
+const messages = instagramConversation;
+
+const shouldGroupWithNext = index => {
+  if (index === messages.length - 1) return false;
+
+  const current = messages[index];
+  const next = messages[index + 1];
+
+  if (next.status === 'failed') return false;
+
+  const nextSenderId = next.senderId ?? next.sender?.id;
+  const currentSenderId = current.senderId ?? current.sender?.id;
+  if (currentSenderId !== nextSenderId) return false;
+
+  // Check if messages are in the same minute by rounding down to nearest minute
+  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
+};
+
+const getReplyToMessage = message => {
+  const idToCheck = message.contentAttributes.inReplyTo;
+  if (!idToCheck) return null;
+
+  return messages.find(candidate => idToCheck === candidate.id);
+};
+</script>
+
+<template>
+  <Story title="Components/Messages/Instagram" :layout="{ type: 'single' }">
+    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+      <template v-for="(message, index) in messages" :key="message.id">
+        <Message
+          :current-user-id="1"
+          :group-with-next="shouldGroupWithNext(index)"
+          :in-reply-to="getReplyToMessage(message)"
+          v-bind="message"
+        />
+      </template>
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/MediaBubbles.story.vue b/app/javascript/dashboard/components-next/message/stories/MediaBubbles.story.vue
new file mode 100644
index 000000000..2b4152f47
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/MediaBubbles.story.vue
@@ -0,0 +1,260 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import Message from '../Message.vue';
+
+const currentUserId = ref(1);
+
+const state = reactive({
+  useCurrentUserId: false,
+});
+
+const getMessage = overrides => {
+  const contentAttributes = {
+    inReplyTo: null,
+    ...(overrides.contentAttributes ?? {}),
+  };
+
+  const sender = {
+    additionalAttributes: {},
+    customAttributes: {},
+    email: 'hey@example.com',
+    id: 597,
+    identifier: null,
+    name: 'John Doe',
+    phoneNumber: null,
+    thumbnail: '',
+    type: 'contact',
+    ...(overrides.sender ?? {}),
+  };
+
+  return {
+    id: 5272,
+    content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+    inboxId: 475,
+    conversationId: 43,
+    messageType: 0,
+    contentType: 'text',
+    status: 'sent',
+    createdAt: 1732195656,
+    private: false,
+    sourceId: null,
+    ...overrides,
+    sender,
+    contentAttributes,
+  };
+};
+
+const getAttachment = (type, url, overrides) => {
+  return {
+    id: 22,
+    messageId: 5319,
+    fileType: type,
+    accountId: 2,
+    extension: null,
+    dataUrl: url,
+    thumbUrl: '',
+    fileSize: 345644,
+    width: null,
+    height: null,
+    ...overrides,
+  };
+};
+
+const baseSenderData = computed(() => {
+  return {
+    messageType: state.useCurrentUserId ? 1 : 0,
+    senderId: state.useCurrentUserId ? currentUserId.value : 597,
+    sender: {
+      id: state.useCurrentUserId ? currentUserId.value : 597,
+      type: state.useCurrentUserId ? 'User' : 'Contact',
+    },
+  };
+});
+
+const audioMessage = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment(
+        'audio',
+        'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const brokenImageMessage = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [getAttachment('image', 'https://chatwoot.dev/broken.png')],
+    ...baseSenderData.value,
+  })
+);
+
+const imageMessage = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment(
+        'image',
+        'https://images.pexels.com/photos/28506417/pexels-photo-28506417/free-photo-of-motorbike-on-scenic-road-in-surat-thani-thailand.jpeg'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const videoMessage = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment(
+        'video',
+        'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const attachmentsOnly = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment('image', 'https://chatwoot.dev/broken.png'),
+      getAttachment(
+        'video',
+        'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4'
+      ),
+      getAttachment(
+        'image',
+        'https://images.pexels.com/photos/28506417/pexels-photo-28506417/free-photo-of-motorbike-on-scenic-road-in-surat-thani-thailand.jpeg'
+      ),
+      getAttachment('file', 'https://chatwoot.dev/invoice.pdf'),
+      getAttachment('file', 'https://chatwoot.dev/logs.txt'),
+      getAttachment('file', 'https://chatwoot.dev/contacts.xls'),
+      getAttachment('file', 'https://chatwoot.dev/customers.csv'),
+      getAttachment('file', 'https://chatwoot.dev/warehousing-policy.docx'),
+      getAttachment('file', 'https://chatwoot.dev/pitch-deck.ppt'),
+      getAttachment('file', 'https://chatwoot.dev/all-files.tar'),
+      getAttachment(
+        'audio',
+        'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const singleFile = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [getAttachment('file', 'https://chatwoot.dev/all-files.tar')],
+    ...baseSenderData.value,
+  })
+);
+
+const contact = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment('contact', null, {
+        fallbackTitle: '+919999999999',
+      }),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const location = computed(() =>
+  getMessage({
+    content: null,
+    attachments: [
+      getAttachment('location', null, {
+        coordinatesLat: 37.7937545,
+        coordinatesLong: -122.3997472,
+        fallbackTitle: 'Chatwoot Inc',
+      }),
+    ],
+    ...baseSenderData.value,
+  })
+);
+
+const dyte = computed(() => {
+  return getMessage({
+    messageType: 1,
+    contentType: 'integrations',
+    contentAttributes: {
+      type: 'dyte',
+      data: {
+        meetingId: 'f16bebe6-08b9-4593-899a-849f59c47397',
+        roomName: 'zcufnc-adbjcg',
+      },
+    },
+    senderId: 1,
+    sender: {
+      id: 1,
+      name: 'Shivam Mishra',
+      availableName: 'Shivam Mishra',
+      type: 'user',
+    },
+  });
+});
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Media"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <!-- Media Types -->
+    <Variant title="Audio">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="audioMessage" />
+      </div>
+    </Variant>
+    <Variant title="Image">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="imageMessage" />
+      </div>
+    </Variant>
+    <Variant title="Broken Image">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="brokenImageMessage" />
+      </div>
+    </Variant>
+    <Variant title="Video">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="videoMessage" />
+      </div>
+    </Variant>
+
+    <!-- Files and Attachments -->
+    <Variant title="Multiple Attachments">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="attachmentsOnly" />
+      </div>
+    </Variant>
+    <Variant title="File">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="singleFile" />
+      </div>
+    </Variant>
+    <Variant title="Contact">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="contact" />
+      </div>
+    </Variant>
+    <Variant title="Location">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="location" />
+      </div>
+    </Variant>
+    <Variant title="Dyte Video">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="dyte" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/MessageBubbles.story.vue b/app/javascript/dashboard/components-next/message/stories/MessageBubbles.story.vue
new file mode 100644
index 000000000..1fd027d25
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/MessageBubbles.story.vue
@@ -0,0 +1,181 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import Message from '../Message.vue';
+
+const currentUserId = ref(1);
+
+const state = reactive({
+  useCurrentUserId: false,
+});
+
+const getMessage = overrides => {
+  const contentAttributes = {
+    inReplyTo: null,
+    ...(overrides.contentAttributes ?? {}),
+  };
+
+  const sender = {
+    additionalAttributes: {},
+    customAttributes: {},
+    email: 'hey@example.com',
+    id: 597,
+    identifier: null,
+    name: 'John Doe',
+    phoneNumber: null,
+    thumbnail: '',
+    type: 'contact',
+    ...(overrides.sender ?? {}),
+  };
+
+  return {
+    id: 5272,
+    content: 'Hey, how are ya, I had a few questions about Chatwoot?',
+    inboxId: 475,
+    conversationId: 43,
+    messageType: 0,
+    contentType: 'text',
+    status: 'sent',
+    createdAt: 1732195656,
+    private: false,
+    sourceId: null,
+    ...overrides,
+    sender,
+    contentAttributes,
+  };
+};
+
+const getAttachment = (type, url, overrides) => {
+  return {
+    id: 22,
+    messageId: 5319,
+    fileType: type,
+    accountId: 2,
+    extension: null,
+    dataUrl: url,
+    thumbUrl: '',
+    fileSize: 345644,
+    width: null,
+    height: null,
+    ...overrides,
+  };
+};
+
+const baseSenderData = computed(() => {
+  return {
+    messageType: state.useCurrentUserId ? 1 : 0,
+    senderId: state.useCurrentUserId ? currentUserId.value : 597,
+    sender: {
+      id: state.useCurrentUserId ? currentUserId.value : 597,
+      type: state.useCurrentUserId ? 'User' : 'Contact',
+    },
+  };
+});
+
+const simpleText = computed(() =>
+  getMessage({
+    ...baseSenderData.value,
+  })
+);
+const privateText = computed(() =>
+  getMessage({ private: true, ...baseSenderData.value })
+);
+
+const activityMessage = computed(() =>
+  getMessage({
+    content: 'John self-assigned this conversation',
+    messageType: 2,
+  })
+);
+
+const email = computed(() =>
+  getMessage({
+    content: null,
+    contentType: 'incoming_email',
+    contentAttributes: {
+      email: {
+        bcc: null,
+        cc: null,
+        contentType:
+          'multipart/alternative; boundary=0000000000009d889e0628477235',
+        date: '2024-12-02T16:29:39+05:30',
+        from: ['hey@shivam.dev'],
+        htmlContent: {
+          full: '<div dir="ltr"><h3><span style="font-size:small;font-weight:normal">Hi Team,</span></h3>\r\n<p>I hope this email finds you well! I wanted to share some updates regarding our integration with <strong>Chatwoot</strong> and outline some key features we’ve explored.</p>\r\n<hr>\r\n<h3>Key Updates</h3>\r\n<ol>\r\n<li>\r\n<p><strong>Integration Status</strong>:<br>\r\nThe initial integration with Chatwoot has been successful. We&#39;ve tested:</p>\r\n<ul>\r\n<li>API connectivity</li>\r\n<li>Multi-channel messaging</li>\r\n<li>Real-time chat updates</li>\r\n</ul>\r\n</li>\r\n<li>\r\n<p><strong>Upcoming Tasks</strong>:</p>\r\n<ul>\r\n<li>Streamlining notification workflows</li>\r\n<li>Enhancing webhook reliability</li>\r\n<li>Testing team collaboration features</li>\r\n</ul>\r\n</li>\r\n</ol>\r\n<blockquote>\r\n<p><strong>Note:</strong><br>\r\nDon’t forget to check out the automation capabilities in Chatwoot for handling repetitive queries. It can save a ton of time!</p>\r\n</blockquote>\r\n<hr>\r\n<h3>Features We Love</h3>\r\n<p>Here’s what stood out so far:</p>\r\n<ul>\r\n<li><strong>Unified Inbox</strong>: All customer conversations in one place.</li>\r\n<li><strong>Customizable Workflows</strong>: Tailored to our team’s unique needs.</li>\r\n<li><strong>Integrations</strong>: Works seamlessly with CRM and Slack.</li>\r\n</ul>\r\n<hr>\r\n<h3>Action Items</h3>\r\n<h4>For Next Week:</h4>\r\n<ol>\r\n<li>Implement the webhook for <strong>ticket prioritization</strong>.</li>\r\n<li>Test <strong>CSAT surveys</strong> post-chat sessions.</li>\r\n<li>Review <strong>analytics dashboard</strong> insights.</li>\r\n</ol>\r\n<hr>\r\n<h3>Data Snapshot</h3>\r\n<p>Here’s a quick overview of our conversation stats this week:</p>\r\n<table>\r\n<thead>\r\n<tr>\r\n<th>Metric</th>\r\n<th>Value</th>\r\n<th>Change (%)</th>\r\n</tr>\r\n</thead>\r\n<tbody>\r\n<tr>\r\n<td>Total Conversations</td>\r\n<td>350</td>\r\n<td>+25%</td>\r\n</tr>\r\n<tr>\r\n<td>Average Response Time</td>\r\n<td>3 minutes</td>\r\n<td>-15%</td>\r\n</tr>\r\n<tr>\r\n<td>CSAT Score</td>\r\n<td>92%</td>\r\n<td>+10%</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n<hr>\r\n<h3>Feedback</h3>\r\n<p><i>Do let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:</i></p>\r\n<p><img src="https://via.placeholder.com/600x300" alt="Chatwoot Dashboard Screenshot" title="Chatwoot Dashboard"></p>\r\n<hr>\r\n<p>Looking forward to hearing your thoughts!</p>\r\n<p>Best regards,<br>~ Shivam Mishra<br></p></div>\r\n',
+          reply:
+            "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.\n\n---------------------------------------------------------------\n\nKey Updates\n\n-\n\nIntegration Status:\nThe initial integration with Chatwoot has been successful. We've tested:\n\n- API connectivity\n- Multi-channel messaging\n- Real-time chat updates\n\n-\n\nUpcoming Tasks:\n\n- Streamlining notification workflows\n- Enhancing webhook reliability\n- Testing team collaboration features\n\n>\n---------------------------------------------------------------\n\nFeatures We Love\n\nHere’s what stood out so far:\n\n-  Unified Inbox: All customer conversations in one place.\n-  Customizable Workflows: Tailored to our team’s unique needs.\n-  Integrations: Works seamlessly with CRM and Slack.\n\n---------------------------------------------------------------\n\nAction Items\n\nFor Next Week:\n\n- Implement the webhook for ticket prioritization.\n- Test CSAT surveys post-chat sessions.\n- Review analytics dashboard insights.\n\n---------------------------------------------------------------\n\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\n\nMetric\tValue\tChange (%)\nTotal Conversations\t350\t+25%\nAverage Response Time\t3 minutes\t-15%\nCSAT Score\t92%\t+10%\n---------------------------------------------------------------\n\nFeedback\n\nDo let me know if you have additional feedback or ideas to improve our workflows. Here’s an image of how our Chatwoot dashboard looks with recent changes:\n\n[Chatwoot Dashboard]\n\n---------------------------------------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+          quoted:
+            'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding our integration with Chatwoot and outline some key features we’ve explored.',
+        },
+        inReplyTo: null,
+        messageId:
+          'CAM_Qp+8bpiT5xFL7HmVL4a9RD0TmdYw7Lu6ZV02yu=eyon41DA@mail.gmail.com',
+        multipart: true,
+        numberOfAttachments: 0,
+        subject: 'Update on Chatwoot Integration and Features',
+        textContent: {
+          full: "Hi Team,\r\n\r\nI hope this email finds you well! I wanted to share some updates regarding\r\nour integration with *Chatwoot* and outline some key features we’ve\r\nexplored.\r\n------------------------------\r\nKey Updates\r\n\r\n   1.\r\n\r\n   *Integration Status*:\r\n   The initial integration with Chatwoot has been successful. We've tested:\r\n   - API connectivity\r\n      - Multi-channel messaging\r\n      - Real-time chat updates\r\n   2.\r\n\r\n   *Upcoming Tasks*:\r\n   - Streamlining notification workflows\r\n      - Enhancing webhook reliability\r\n      - Testing team collaboration features\r\n\r\n*Note:*\r\nDon’t forget to check out the automation capabilities in Chatwoot for\r\nhandling repetitive queries. It can save a ton of time!\r\n\r\n------------------------------\r\nFeatures We Love\r\n\r\nHere’s what stood out so far:\r\n\r\n   - *Unified Inbox*: All customer conversations in one place.\r\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\r\n   - *Integrations*: Works seamlessly with CRM and Slack.\r\n\r\n------------------------------\r\nAction Items For Next Week:\r\n\r\n   1. Implement the webhook for *ticket prioritization*.\r\n   2. Test *CSAT surveys* post-chat sessions.\r\n   3. Review *analytics dashboard* insights.\r\n\r\n------------------------------\r\nData Snapshot\r\n\r\nHere’s a quick overview of our conversation stats this week:\r\nMetric Value Change (%)\r\nTotal Conversations 350 +25%\r\nAverage Response Time 3 minutes -15%\r\nCSAT Score 92% +10%\r\n------------------------------\r\nFeedback\r\n\r\n*Do let me know if you have additional feedback or ideas to improve our\r\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\r\nchanges:*\r\n\r\n[image: Chatwoot Dashboard Screenshot]\r\n------------------------------\r\n\r\nLooking forward to hearing your thoughts!\r\n\r\nBest regards,\r\n~ Shivam Mishra\r\n",
+          reply:
+            "Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.\n------------------------------\nKey Updates\n\n   1.\n\n   *Integration Status*:\n   The initial integration with Chatwoot has been successful. We've tested:\n   - API connectivity\n      - Multi-channel messaging\n      - Real-time chat updates\n   2.\n\n   *Upcoming Tasks*:\n   - Streamlining notification workflows\n      - Enhancing webhook reliability\n      - Testing team collaboration features\n\n*Note:*\nDon’t forget to check out the automation capabilities in Chatwoot for\nhandling repetitive queries. It can save a ton of time!\n\n------------------------------\nFeatures We Love\n\nHere’s what stood out so far:\n\n   - *Unified Inbox*: All customer conversations in one place.\n   - *Customizable Workflows*: Tailored to our team’s unique needs.\n   - *Integrations*: Works seamlessly with CRM and Slack.\n\n------------------------------\nAction Items For Next Week:\n\n   1. Implement the webhook for *ticket prioritization*.\n   2. Test *CSAT surveys* post-chat sessions.\n   3. Review *analytics dashboard* insights.\n\n------------------------------\nData Snapshot\n\nHere’s a quick overview of our conversation stats this week:\nMetric Value Change (%)\nTotal Conversations 350 +25%\nAverage Response Time 3 minutes -15%\nCSAT Score 92% +10%\n------------------------------\nFeedback\n\n*Do let me know if you have additional feedback or ideas to improve our\nworkflows. Here’s an image of how our Chatwoot dashboard looks with recent\nchanges:*\n\n[image: Chatwoot Dashboard Screenshot]\n------------------------------\n\nLooking forward to hearing your thoughts!\n\nBest regards,\n~ Shivam Mishra",
+          quoted:
+            'Hi Team,\n\nI hope this email finds you well! I wanted to share some updates regarding\nour integration with *Chatwoot* and outline some key features we’ve\nexplored.',
+        },
+        to: ['shivam@chatwoot.com'],
+      },
+      ccEmail: null,
+      bccEmail: null,
+    },
+    attachments: [
+      getAttachment(
+        'video',
+        'https://videos.pexels.com/video-files/1739010/1739010-hd_1920_1080_30fps.mp4'
+      ),
+      getAttachment(
+        'image',
+        'https://images.pexels.com/photos/28506417/pexels-photo-28506417/free-photo-of-motorbike-on-scenic-road-in-surat-thani-thailand.jpeg'
+      ),
+      getAttachment('file', 'https://chatwoot.dev/invoice.pdf'),
+      getAttachment('file', 'https://chatwoot.dev/logs.txt'),
+      getAttachment('file', 'https://chatwoot.dev/contacts.xls'),
+      getAttachment('file', 'https://chatwoot.dev/customers.csv'),
+      getAttachment('file', 'https://chatwoot.dev/warehousing-policy.docx'),
+      getAttachment('file', 'https://chatwoot.dev/pitch-deck.ppt'),
+      getAttachment('file', 'https://chatwoot.dev/all-files.tar'),
+      getAttachment(
+        'audio',
+        'https://cdn.freesound.org/previews/769/769025_16085454-lq.mp3'
+      ),
+    ],
+    ...baseSenderData.value,
+  })
+);
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Bubbles"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Text">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="simpleText" />
+      </div>
+    </Variant>
+    <Variant title="Activity">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="activityMessage" />
+      </div>
+    </Variant>
+    <Variant title="Private Message">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" v-bind="privateText" />
+      </div>
+    </Variant>
+
+    <!-- Platform Specific -->
+    <Variant title="Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <Message :current-user-id="1" is-email-inbox v-bind="email" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/TextMessages.story.vue b/app/javascript/dashboard/components-next/message/stories/TextMessages.story.vue
new file mode 100644
index 000000000..b06b2195c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/stories/TextMessages.story.vue
@@ -0,0 +1,45 @@
+<script setup>
+import Message from '../Message.vue';
+
+import textWithMedia from '../fixtures/textWithMedia.js';
+
+const messages = textWithMedia;
+
+const shouldGroupWithNext = index => {
+  if (index === messages.length - 1) return false;
+
+  const current = messages[index];
+  const next = messages[index + 1];
+
+  if (next.status === 'failed') return false;
+
+  const nextSenderId = next.senderId ?? next.sender?.id;
+  const currentSenderId = current.senderId ?? current.sender?.id;
+  if (currentSenderId !== nextSenderId) return false;
+
+  // Check if messages are in the same minute by rounding down to nearest minute
+  return Math.floor(next.createdAt / 60) === Math.floor(current.createdAt / 60);
+};
+
+const getReplyToMessage = message => {
+  const idToCheck = message.contentAttributes.inReplyTo;
+  if (!idToCheck) return null;
+
+  return messages.find(candidate => idToCheck === candidate.id);
+};
+</script>
+
+<template>
+  <Story title="Components/Messages/Text" :layout="{ type: 'single' }">
+    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+      <template v-for="(message, index) in messages" :key="message.id">
+        <Message
+          :current-user-id="1"
+          :group-with-next="shouldGroupWithNext(index)"
+          :in-reply-to="getReplyToMessage(message)"
+          v-bind="message"
+        />
+      </template>
+    </div>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index 95a30c902..4f6f47c85 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -17,6 +17,10 @@ const props = defineProps({
     type: Number,
     default: 16,
   },
+  currentPageInfo: {
+    type: String,
+    default: '',
+  },
 });
 const emit = defineEmits(['update:currentPage']);
 const { t } = useI18n();
@@ -39,11 +43,14 @@ const changePage = newPage => {
 };
 
 const currentPageInformation = computed(() => {
-  return t('PAGINATION_FOOTER.SHOWING', {
-    startItem: startItem.value,
-    endItem: endItem.value,
-    totalItems: props.totalItems,
-  });
+  return t(
+    props.currentPageInfo ? props.currentPageInfo : 'PAGINATION_FOOTER.SHOWING',
+    {
+      startItem: startItem.value,
+      endItem: endItem.value,
+      totalItems: props.totalItems,
+    }
+  );
 });
 
 const pageInfo = computed(() => {
@@ -68,6 +75,7 @@ const pageInfo = computed(() => {
         icon="i-lucide-chevrons-left"
         variant="ghost"
         size="sm"
+        color="slate"
         class="!w-8 !h-6"
         :disabled="isFirstPage"
         @click="changePage(1)"
@@ -75,6 +83,7 @@ const pageInfo = computed(() => {
       <Button
         icon="i-lucide-chevron-left"
         variant="ghost"
+        color="slate"
         size="sm"
         class="!w-8 !h-6"
         :disabled="isFirstPage"
@@ -84,11 +93,12 @@ const pageInfo = computed(() => {
         <span class="px-3 tabular-nums py-0.5 bg-n-alpha-black2 rounded-md">
           {{ currentPage }}
         </span>
-        <span>{{ pageInfo }}</span>
+        <span class="truncate">{{ pageInfo }}</span>
       </div>
       <Button
         icon="i-lucide-chevron-right"
         variant="ghost"
+        color="slate"
         size="sm"
         class="!w-8 !h-6"
         :disabled="isLastPage"
@@ -97,6 +107,7 @@ const pageInfo = computed(() => {
       <Button
         icon="i-lucide-chevrons-right"
         variant="ghost"
+        color="slate"
         size="sm"
         class="!w-8 !h-6"
         :disabled="isLastPage"
diff --git a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
index 5168bb4b3..e523c306b 100644
--- a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
+++ b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
@@ -91,13 +91,18 @@ const activeCountry = computed(() =>
 const inputBorderClass = computed(() => {
   const errorClass =
     'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
+  const focusClass =
+    'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand';
+
   if (!props.showBorder) {
-    return hasError.value ? errorClass : 'border-transparent';
+    if (hasError.value) return errorClass;
+    return `border-transparent ${focusClass}`;
   }
+
   if (hasError.value) {
     return errorClass;
   }
-  return 'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak';
+  return `${focusClass} border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak`;
 });
 
 const phoneNumberError = computed(() => {
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 2d4fdf1dd..d5e968f4a 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -7,17 +7,17 @@ import { useMapGetter } from 'dashboard/composables/store';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
-
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
+
+import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
 import SidebarProfileMenu from './SidebarProfileMenu.vue';
 import ChannelLeaf from './ChannelLeaf.vue';
-import SidebarNotificationBell from './SidebarNotificationBell.vue';
 import SidebarAccountSwitcher from './SidebarAccountSwitcher.vue';
 import Logo from 'next/icon/Logo.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 const emit = defineEmits([
-  'openNotificationPanel',
   'closeKeyShortcutModal',
   'openKeyShortcutModal',
   'showCreateAccountModal',
@@ -27,7 +27,6 @@ const { accountScopedRoute } = useAccount();
 const store = useStore();
 const searchShortcut = useKbd([`$mod`, 'k']);
 const { t } = useI18n();
-const enableNewConversation = false;
 
 const toggleShortcutModalFn = show => {
   if (show) {
@@ -45,7 +44,7 @@ useSidebarKeyboardShortcuts(toggleShortcutModalFn);
 const expandedItem = useStorage(
   'next-sidebar-expanded-item',
   null,
-  localStorage
+  sessionStorage
 );
 
 const setExpandedItem = name => {
@@ -197,7 +196,12 @@ const menuItems = computed(() => {
         {
           name: 'All Contacts',
           label: t('SIDEBAR.ALL_CONTACTS'),
-          to: accountScopedRoute('contacts_dashboard'),
+          to: accountScopedRoute(
+            'contacts_dashboard_index',
+            {},
+            { page: 1, search: undefined }
+          ),
+          activeOn: ['contacts_dashboard_index', 'contacts_edit'],
         },
         {
           name: 'Segments',
@@ -206,9 +210,15 @@ const menuItems = computed(() => {
           children: contactCustomViews.value.map(view => ({
             name: `${view.name}-${view.id}`,
             label: view.name,
-            to: accountScopedRoute('contacts_segments_dashboard', {
-              id: view.id,
-            }),
+            to: accountScopedRoute(
+              'contacts_dashboard_segments_index',
+              { segmentId: view.id },
+              { page: 1 }
+            ),
+            activeOn: [
+              'contacts_dashboard_segments_index',
+              'contacts_edit_segment',
+            ],
           })),
         },
         {
@@ -222,9 +232,15 @@ const menuItems = computed(() => {
               class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
               style: { backgroundColor: label.color },
             }),
-            to: accountScopedRoute('contacts_labels_dashboard', {
-              label: label.title,
-            }),
+            to: accountScopedRoute(
+              'contacts_dashboard_labels_index',
+              { label: label.title },
+              { page: 1, search: undefined }
+            ),
+            activeOn: [
+              'contacts_dashboard_labels_index',
+              'contacts_edit_label',
+            ],
           })),
         },
       ],
@@ -249,11 +265,6 @@ const menuItems = computed(() => {
           label: t('SIDEBAR.CSAT'),
           to: accountScopedRoute('csat_reports'),
         },
-        {
-          name: 'Reports Bot',
-          label: t('SIDEBAR.REPORTS_BOT'),
-          to: accountScopedRoute('bot_reports'),
-        },
         {
           name: 'Reports Agent',
           label: t('SIDEBAR.REPORTS_AGENT'),
@@ -279,6 +290,11 @@ const menuItems = computed(() => {
           label: t('SIDEBAR.REPORTS_SLA'),
           to: accountScopedRoute('sla_reports'),
         },
+        {
+          name: 'Reports Bot',
+          label: t('SIDEBAR.REPORTS_BOT'),
+          to: accountScopedRoute('bot_reports'),
+        },
       ],
     },
     {
@@ -344,18 +360,6 @@ const menuItems = computed(() => {
           }),
         },
       ],
-      activeOn: [
-        'portals_new',
-        'portals_index',
-        'portals_articles_index',
-        'portals_articles_new',
-        'portals_articles_edit',
-        'portals_categories_index',
-        'portals_categories_articles_index',
-        'portals_categories_articles_edit',
-        'portals_locales_index',
-        'portals_settings_index',
-      ],
     },
     {
       name: 'Settings',
@@ -476,7 +480,7 @@ const menuItems = computed(() => {
       <div class="flex gap-2 px-2">
         <RouterLink
           :to="{ name: 'search' }"
-          class="flex items-center w-full gap-2 px-2 py-1 border rounded-lg border-n-weak bg-n-solid-3 dark:bg-n-black/30"
+          class="flex items-center w-full gap-2 px-2 py-1 rounded-lg h-7 outline outline-1 outline-n-weak bg-n-solid-3 dark:bg-n-black/30"
         >
           <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-11" />
           <span class="flex-grow text-left">
@@ -488,14 +492,17 @@ const menuItems = computed(() => {
             {{ searchShortcut }}
           </span>
         </RouterLink>
-        <button
-          v-if="enableNewConversation"
-          class="flex items-center w-full gap-2 px-2 py-1 border rounded-lg border-n-weak bg-n-solid-3"
-        >
-          <span
-            class="flex-shrink-0 i-lucide-square-pen size-4 text-n-slate-11"
-          />
-        </button>
+        <ComposeConversation align-position="right">
+          <template #trigger="{ toggle }">
+            <Button
+              icon="i-lucide-pen-line"
+              color="slate"
+              size="sm"
+              class="!h-7 !bg-n-solid-3 dark:!bg-n-black/30 !outline-n-weak !text-n-slate-11"
+              @click="toggle"
+            />
+          </template>
+        </ComposeConversation>
       </div>
     </section>
     <nav class="grid flex-grow gap-2 px-2 pb-5 overflow-y-scroll no-scrollbar">
@@ -513,12 +520,6 @@ const menuItems = computed(() => {
       <SidebarProfileMenu
         @open-key-shortcut-modal="emit('openKeyShortcutModal')"
       />
-      <div v-if="false" class="flex items-center">
-        <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
-        <SidebarNotificationBell
-          @open-notification-panel="emit('openNotificationPanel')"
-        />
-      </div>
     </section>
   </aside>
 </template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
index 03e7a5e53..f232faeab 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
@@ -54,7 +54,7 @@ const emitNewAccount = () => {
         />
       </button>
     </template>
-    <DropdownBody class="min-w-80">
+    <DropdownBody class="min-w-80 z-50">
       <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_WORKSPACE')">
         <DropdownItem
           v-for="account in currentUser.accounts"
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index 43856e574..f22e003f1 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted, nextTick } from 'vue';
 import { useSidebarContext } from './provider';
 import { useRoute, useRouter } from 'vue-router';
 import Policy from 'dashboard/components/policy.vue';
@@ -66,14 +66,35 @@ const activeChild = computed(() => {
   );
   if (pathSame) return pathSame;
 
-  const pathSatrtsWith = navigableChildren.value.find(
-    child => child.to && route.path.startsWith(resolvePath(child.to))
-  );
-  if (pathSatrtsWith) return pathSatrtsWith;
-
-  return navigableChildren.value.find(child =>
+  // Rank the activeOn Prop higher than the path match
+  // There will be cases where the path name is the same but the params are different
+  // So we need to rank them based on the params
+  // For example, contacts segment list in the sidebar effectively has the same name
+  // But the params are different
+  const activeOnPages = navigableChildren.value.filter(child =>
     child.activeOn?.includes(route.name)
   );
+
+  if (activeOnPages.length > 0) {
+    const rankedPage = activeOnPages.find(child => {
+      return Object.keys(child.to.params)
+        .map(key => {
+          return String(child.to.params[key]) === String(route.params[key]);
+        })
+        .every(match => match);
+    });
+
+    // If there is no ranked page, return the first activeOn page anyway
+    // Since this takes higher precedence over the path match
+    // This is not perfect, ideally we should rank each route based on all the techniques
+    // and then return the highest ranked one
+    // But this is good enough for now
+    return rankedPage ?? activeOnPages[0];
+  }
+
+  return navigableChildren.value.find(
+    child => child.to && route.path.startsWith(resolvePath(child.to))
+  );
 });
 
 const hasActiveChild = computed(() => {
@@ -92,6 +113,13 @@ const toggleTrigger = () => {
   }
   setExpandedItem(props.name);
 };
+
+onMounted(async () => {
+  await nextTick();
+  if (hasActiveChild.value) {
+    setExpandedItem(props.name);
+  }
+});
 </script>
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
index 347e2e25d..7498ecd91 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { computed } from 'vue';
 import Auth from 'dashboard/api/auth';
-import { useRouter } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import Avatar from 'next/avatar/Avatar.vue';
@@ -21,7 +20,6 @@ defineOptions({
 });
 
 const { t } = useI18n();
-const router = useRouter();
 
 const globalConfig = useMapGetter('globalConfig/get');
 const currentUser = useMapGetter('getCurrentUser');
@@ -49,9 +47,7 @@ const menuItems = computed(() => {
       show: true,
       label: t('SIDEBAR_ITEMS.PROFILE_SETTINGS'),
       icon: 'i-lucide-user-pen',
-      click: () => {
-        router.push({ name: 'profile_settings_index' });
-      },
+      link: { name: 'profile_settings_index' },
     },
     {
       show: true,
@@ -66,15 +62,16 @@ const menuItems = computed(() => {
       show: true,
       label: t('SIDEBAR_ITEMS.DOCS'),
       icon: 'i-lucide-book',
-      click: () => {
-        window.open('https://www.chatwoot.com/hc/user-guide/en', '_blank');
-      },
+      link: 'https://www.chatwoot.com/hc/user-guide/en',
+      nativeLink: true,
+      target: '_blank',
     },
     {
       show: currentUser.value.type === 'SuperAdmin',
       label: t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE'),
       icon: 'i-lucide-castle',
       link: '/super_admin',
+      nativeLink: true,
       target: '_blank',
     },
     {
@@ -120,7 +117,7 @@ const allowedMenuItems = computed(() => {
         </div>
       </button>
     </template>
-    <DropdownBody class="left-0 bottom-12 z-50 w-80 mb-1">
+    <DropdownBody class="ltr:left-0 rtl:right-0 bottom-12 z-50 w-80 mb-2">
       <SidebarProfileMenuStatus />
       <DropdownSeparator />
       <template v-for="item in allowedMenuItems" :key="item.label">
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
index 418319cc3..0fdf96162 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
@@ -67,7 +67,7 @@ function updateAutoOffline(autoOffline) {
 <template>
   <DropdownSection>
     <div class="grid gap-0">
-      <DropdownItem>
+      <DropdownItem preserve-open>
         <div class="flex-grow flex items-center gap-1">
           {{ $t('SIDEBAR.SET_YOUR_AVAILABILITY') }}
         </div>
@@ -90,7 +90,7 @@ function updateAutoOffline(autoOffline) {
               </div>
             </Button>
           </template>
-          <DropdownBody class="min-w-32">
+          <DropdownBody class="min-w-32 z-20">
             <DropdownItem
               v-for="status in availabilityStatuses"
               :key="status.value"
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index 8e3a33b6c..63d757415 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -1,51 +1,170 @@
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
+import { vOnClickOutside } from '@vueuse/components';
+import { email } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
 const props = defineProps({
-  modelValue: {
+  placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  type: { type: String, default: 'text' },
+  isLoading: { type: Boolean, default: false },
+  menuItems: {
     type: Array,
     default: () => [],
+    validator: value =>
+      value.every(
+        ({ action, value: tagValue, label }) => action && tagValue && label
+      ),
   },
-  placeholder: {
+  showDropdown: { type: Boolean, default: false },
+  mode: {
     type: String,
-    default: '',
+    default: 'multiple',
+    validator: value => ['single', 'multiple'].includes(value),
   },
+  focusOnMount: { type: Boolean, default: false },
+  allowCreate: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits([
+  'update:modelValue',
+  'input',
+  'blur',
+  'focus',
+  'onClickOutside',
+  'add',
+  'remove',
+]);
 
+const modelValue = defineModel({
+  type: Array,
+  default: () => [],
+});
+
+const MODE = {
+  SINGLE: 'single',
+  MULTIPLE: 'multiple',
+};
+
+const tagInputRef = ref(null);
 const tags = ref(props.modelValue);
 const newTag = ref('');
-const isFocused = ref(false);
+const isFocused = ref(true);
 
-const showInput = computed(() => isFocused.value || tags.value.length === 0);
+const rules = computed(() => ({
+  newTag: props.type === 'email' ? { email } : {},
+}));
 
-const addTag = () => {
-  if (newTag.value.trim()) {
-    tags.value.push(newTag.value.trim());
-    newTag.value = '';
-    emit('update:modelValue', tags.value);
+const v$ = useVuelidate(rules, { newTag });
+const isNewTagInValidType = computed(() => v$.value.$invalid);
+
+const showInput = computed(() =>
+  props.mode === MODE.SINGLE
+    ? isFocused.value && !tags.value.length
+    : isFocused.value || !tags.value.length
+);
+
+const showDropdownMenu = computed(() =>
+  props.mode === MODE.SINGLE && tags.value.length >= 1
+    ? false
+    : props.showDropdown
+);
+
+const filteredMenuItems = computed(() => {
+  if (props.mode === MODE.SINGLE && tags.value.length >= 1) return [];
+
+  const availableMenuItems = props.menuItems.filter(
+    item => !tags.value.includes(item.label)
+  );
+
+  // Show typed value as suggestion only if:
+  // 1. There's a value being typed
+  // 2. The value isn't already in the tags
+  // 3. Email validation passes (if type is email) and There are no menu items available
+  const trimmedNewTag = newTag.value?.trim();
+  const shouldShowTypedValue =
+    trimmedNewTag &&
+    !tags.value.includes(trimmedNewTag) &&
+    !props.isLoading &&
+    !availableMenuItems.length &&
+    (props.type === 'email' ? !isNewTagInValidType.value : true);
+
+  if (shouldShowTypedValue) {
+    return [
+      {
+        label: trimmedNewTag,
+        value: trimmedNewTag,
+        email: trimmedNewTag,
+        thumbnail: { name: trimmedNewTag, src: '' },
+        action: 'create',
+      },
+    ];
   }
+
+  return availableMenuItems;
+});
+
+const emitDataOnAdd = emailValue => {
+  const matchingMenuItem = props.menuItems.find(
+    item => item.email === emailValue
+  );
+
+  return matchingMenuItem
+    ? emit('add', { email: emailValue, ...matchingMenuItem })
+    : emit('add', { value: emailValue, action: 'create' });
+};
+
+const addTag = async () => {
+  const trimmedTag = newTag.value?.trim();
+  if (!trimmedTag) return;
+
+  if (props.mode === MODE.SINGLE && tags.value.length >= 1) {
+    newTag.value = '';
+    return;
+  }
+
+  if (props.type === 'email' || props.allowCreate) {
+    if (!(await v$.value.$validate())) return;
+    emitDataOnAdd(trimmedTag);
+  }
+
+  tags.value.push(trimmedTag);
+  newTag.value = '';
+  modelValue.value = tags.value;
+  tagInputRef.value?.focus();
 };
 
 const removeTag = index => {
   tags.value.splice(index, 1);
-  emit('update:modelValue', tags.value);
+  modelValue.value = tags.value;
+  emit('remove');
+};
+
+const handleDropdownAction = async ({ email: emailAddress, ...rest }) => {
+  if (props.mode === MODE.SINGLE && tags.value.length >= 1) return;
+
+  if (props.type === 'email' && props.showDropdown) {
+    newTag.value = emailAddress;
+    if (!(await v$.value.$validate())) return;
+    emit('add', { email: emailAddress, ...rest });
+  }
+
+  tags.value.push(emailAddress);
+  newTag.value = '';
+  modelValue.value = tags.value;
+  tagInputRef.value?.focus();
 };
 
 const handleFocus = () => {
+  emit('focus');
+  tagInputRef.value?.focus();
   isFocused.value = true;
 };
 
-const handleClickOutside = () => {
-  if (tags.value.length > 0) {
-    isFocused.value = false;
-  }
-};
-
 const handleKeydown = event => {
   if (event.key === ',') {
     event.preventDefault();
@@ -53,43 +172,78 @@ const handleKeydown = event => {
   }
 };
 
+const handleClickOutside = () => {
+  if (tags.value.length) isFocused.value = false;
+  emit('onClickOutside');
+};
+
 watch(
   () => props.modelValue,
   newValue => {
     tags.value = newValue;
   }
 );
+
+watch(
+  () => newTag.value,
+  async newValue => {
+    if (props.type === 'email' && newValue?.trim()?.length > 2) {
+      await v$.value.$validate();
+    }
+  }
+);
+
+const handleInput = e => emit('input', e);
+const handleBlur = e => emit('blur', e);
 </script>
 
 <template>
-  <OnClickOutside @trigger="handleClickOutside">
+  <div
+    v-on-click-outside="() => handleClickOutside()"
+    class="flex flex-wrap w-full gap-2 border border-transparent focus:outline-none"
+    tabindex="0"
+    @focus="handleFocus"
+    @click="handleFocus"
+  >
     <div
-      class="flex flex-wrap w-full gap-2 border border-transparent focus:outline-none"
-      tabindex="0"
-      @focus="handleFocus"
-      @click="handleFocus"
+      v-for="(tag, index) in tags"
+      :key="index"
+      class="flex items-center justify-center max-w-full gap-1 px-3 py-1 rounded-lg h-7 bg-n-alpha-2"
     >
-      <div
-        v-for="(tag, index) in tags"
-        :key="index"
-        class="flex items-center justify-center max-w-full gap-1 px-3 py-1 rounded-lg h-7 bg-n-alpha-2"
-      >
-        <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">
-          {{ tag }}
-        </span>
-        <span
-          class="flex-shrink-0 cursor-pointer i-lucide-x size-3.5 text-n-slate-11"
-          @click.stop="removeTag(index)"
-        />
-      </div>
-      <InlineInput
-        v-if="showInput"
-        v-model="newTag"
-        :placeholder="placeholder"
-        custom-input-class="flex-grow"
-        @enter-press="addTag"
-        @keydown="handleKeydown"
+      <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">{{
+        tag
+      }}</span>
+      <span
+        class="flex-shrink-0 cursor-pointer i-lucide-x size-3.5 text-n-slate-11"
+        @click.stop="removeTag(index)"
       />
     </div>
-  </OnClickOutside>
+    <div
+      v-if="showInput || showDropdownMenu"
+      class="relative flex items-center gap-2 flex-1 min-w-[200px] w-full"
+    >
+      <InlineInput
+        ref="tagInputRef"
+        v-model="newTag"
+        :placeholder="placeholder"
+        :type="type"
+        :disabled="disabled"
+        class="w-full"
+        :focus-on-mount="focusOnMount"
+        :custom-input-class="`w-full ${isNewTagInValidType ? '!text-n-ruby-9 dark:!text-n-ruby-9' : ''}`"
+        @enter-press="addTag"
+        @focus="handleFocus"
+        @input="handleInput"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
+      />
+      <DropdownMenu
+        v-if="showDropdownMenu"
+        :menu-items="filteredMenuItems"
+        :is-searching="isLoading"
+        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        @action="handleDropdownAction"
+      />
+    </div>
+  </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/textarea/TextArea.vue b/app/javascript/dashboard/components-next/textarea/TextArea.vue
index 5e5860fad..16e0fe052 100644
--- a/app/javascript/dashboard/components-next/textarea/TextArea.vue
+++ b/app/javascript/dashboard/components-next/textarea/TextArea.vue
@@ -179,7 +179,7 @@ onMounted(() => {
         }"
         :disabled="disabled"
         rows="1"
-        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index c4c81cbfb..0438d24af 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -22,10 +22,10 @@ import {
 // https://tanstack.com/virtual/latest/docs/framework/vue/examples/variable
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import ChatListHeader from './ChatListHeader.vue';
-import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
+import ConversationFilter from 'next/filter/ConversationFilter.vue';
+import SaveCustomView from 'next/filter/SaveCustomView.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
-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 IntersectionObserver from './IntersectionObserver.vue';
@@ -37,9 +37,15 @@ import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions';
 import { useFilter } from 'shared/composables/useFilter';
 import { useTrack } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+import {
+  useCamelCase,
+  useSnakeCase,
+} from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
 import { useEventListener } from '@vueuse/core';
 
+import { emitter } from 'shared/helpers/mitt';
+
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterOptions from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
@@ -51,12 +57,11 @@ import {
   isOnMentionsView,
   isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
-import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
-import { emitter } from 'shared/helpers/mitt';
 import {
   getUserPermissions,
   filterItemsByPermission,
 } from 'dashboard/helper/permissionsHelper.js';
+import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
 import { ASSIGNEE_TYPE_TAB_PERMISSIONS } from 'dashboard/constants/permissions.js';
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
@@ -107,7 +112,7 @@ const unAssignedChatsList = useMapGetter('getUnAssignedChats');
 const chatListLoading = useMapGetter('getChatListLoadingStatus');
 const activeInbox = useMapGetter('getSelectedInbox');
 const conversationStats = useMapGetter('conversationStats/getStats');
-const appliedFilters = useMapGetter('getAppliedConversationFilters');
+const appliedFilters = useMapGetter('getAppliedConversationFiltersV2');
 const folders = useMapGetter('customViews/getConversationCustomViews');
 const agentList = useMapGetter('agents/getAgents');
 const teamsList = useMapGetter('teams/getTeams');
@@ -371,6 +376,7 @@ function emitConversationLoaded() {
 }
 
 function fetchFilteredConversations(payload) {
+  payload = useSnakeCase(payload);
   let page = currentFiltersPage.value + 1;
   store
     .dispatch('fetchFilteredConversations', {
@@ -383,6 +389,7 @@ function fetchFilteredConversations(payload) {
 }
 
 function fetchSavedFilteredConversations(payload) {
+  payload = useSnakeCase(payload);
   let page = currentFiltersPage.value + 1;
   store
     .dispatch('fetchFilteredConversations', {
@@ -393,6 +400,7 @@ function fetchSavedFilteredConversations(payload) {
 }
 
 function onApplyFilter(payload) {
+  payload = useSnakeCase(payload);
   resetBulkActions();
   foldersQuery.value = filterQueryGenerator(payload);
   store.dispatch('conversationPage/reset');
@@ -406,10 +414,11 @@ function closeAdvanceFiltersModal() {
 }
 
 function onUpdateSavedFilter(payload, folderName) {
+  const transformedPayload = useSnakeCase(payload);
   const payloadData = {
     ...unref(activeFolder),
     name: unref(folderName),
-    query: filterQueryGenerator(payload),
+    query: filterQueryGenerator(transformedPayload),
   };
   store.dispatch('customViews/update', payloadData);
   closeAdvanceFiltersModal();
@@ -461,17 +470,19 @@ function initializeExistingFilterToModal() {
     currentUserDetails.value,
     activeAssigneeTab.value
   );
+  // TODO: Remove the usage of useCamelCase after migrating useFilter to camelcase
   if (statusFilter) {
-    appliedFilter.value = [...appliedFilter.value, statusFilter];
+    appliedFilter.value = [...appliedFilter.value, useCamelCase(statusFilter)];
   }
 
+  // TODO: Remove the usage of useCamelCase after migrating useFilter to camelcase
   const otherFilters = initializeInboxTeamAndLabelFilterToModal(
     props.conversationInbox,
     inbox.value,
     props.teamId,
     activeTeam.value,
     props.label
-  );
+  ).map(useCamelCase);
 
   appliedFilter.value = [...appliedFilter.value, ...otherFilters];
 }
@@ -486,27 +497,47 @@ function initializeFolderToFilterModal(newActiveFolder) {
   const query = unref(newActiveFolder)?.query?.payload;
   if (!Array.isArray(query)) return;
 
-  const newFilters = query.map(filter => ({
-    attribute_key: filter.attribute_key,
-    attribute_model: filter.attribute_model,
-    filter_operator: filter.filter_operator,
-    values: Array.isArray(filter.values)
-      ? generateValuesForEditCustomViews(filter, setParamsForEditFolderModal())
-      : [],
-    query_operator: filter.query_operator,
-    custom_attribute_type: filter.custom_attribute_type,
-  }));
+  const newFilters = query.map(filter => {
+    const transformed = useCamelCase(filter);
+    const values = Array.isArray(transformed.values)
+      ? generateValuesForEditCustomViews(
+          useSnakeCase(filter),
+          setParamsForEditFolderModal()
+        )
+      : [];
+
+    return {
+      attributeKey: transformed.attributeKey,
+      attributeModel: transformed.attributeModel,
+      customAttributeType: transformed.customAttributeType,
+      filterOperator: transformed.filterOperator,
+      queryOperator: transformed.queryOperator ?? 'and',
+      values,
+    };
+  });
 
   appliedFilter.value = [...appliedFilter.value, ...newFilters];
 }
 
+function initalizeAppliedFiltersToModal() {
+  appliedFilter.value = [...appliedFilters.value];
+}
+
 function onToggleAdvanceFiltersModal() {
+  if (showAdvancedFilters.value === true) {
+    closeAdvanceFiltersModal();
+    return;
+  }
+
   if (!hasAppliedFilters.value && !hasActiveFolders.value) {
     initializeExistingFilterToModal();
   }
   if (hasActiveFolders.value) {
     initializeFolderToFilterModal(activeFolder.value);
   }
+  if (hasAppliedFilters.value) {
+    initalizeAppliedFiltersToModal();
+  }
 
   showAdvancedFilters.value = true;
 }
@@ -751,10 +782,10 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap"
     :class="[
       { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
+      isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
     ]"
   >
     <slot />
@@ -763,6 +794,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
+      :is-on-expanded-layout="isOnExpandedLayout"
       @add-folders="onClickOpenAddFoldersModal"
       @delete-folders="onClickOpenDeleteFoldersModal"
       @filters-modal="onToggleAdvanceFiltersModal"
@@ -770,12 +802,14 @@ watch(conversationFilters, (newVal, oldVal) => {
       @basic-filter-change="onBasicFilterChange"
     />
 
-    <AddCustomViews
-      v-if="showAddFoldersModal"
-      :custom-views-query="foldersQuery"
-      :open-last-saved-item="openLastSavedItemInFolder"
-      @close="onCloseAddFoldersModal"
-    />
+    <Teleport v-if="showAddFoldersModal" to="#saveFilterTeleportTarget">
+      <SaveCustomView
+        v-model="appliedFilter"
+        :custom-views-query="foldersQuery"
+        :open-last-saved-item="openLastSavedItemInFolder"
+        @close="onCloseAddFoldersModal"
+      />
+    </Teleport>
 
     <DeleteCustomViews
       v-if="showDeleteFoldersModal"
@@ -790,6 +824,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       v-if="!hasAppliedFiltersOrActiveFolders"
       :items="assigneeTabItems"
       :active-tab="activeAssigneeTab"
+      is-compact
       @chat-tab-change="updateAssigneeTab"
     />
 
@@ -871,30 +906,15 @@ watch(conversationFilters, (newVal, oldVal) => {
         </template>
       </DynamicScroller>
     </div>
-    <woot-modal
-      v-model:show="showAdvancedFilters"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <ConversationAdvancedFilter
-        v-if="showAdvancedFilters"
-        :initial-filter-types="advancedFilterTypes"
-        :initial-applied-filters="appliedFilter"
-        :active-folder-name="activeFolderName"
-        :on-close="closeAdvanceFiltersModal"
+    <Teleport v-if="showAdvancedFilters" to="#conversationFilterTeleportTarget">
+      <ConversationFilter
+        v-model="appliedFilter"
+        :folder-name="activeFolderName"
         :is-folder-view="hasActiveFolders"
         @apply-filter="onApplyFilter"
         @update-folder="onUpdateSavedFilter"
+        @close="closeAdvanceFiltersModal"
       />
-    </woot-modal>
+    </Teleport>
   </div>
 </template>
-
-<style scoped>
-@tailwind components;
-@layer components {
-  .flex-basis-clamp {
-    flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index 86157515e..441693a72 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -1,6 +1,13 @@
 <script setup>
 import { computed } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import wootConstants from 'dashboard/constants/globals';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
 import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
+import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchLayout.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   pageTitle: {
@@ -19,6 +26,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  isOnExpandedLayout: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const emit = defineEmits([
@@ -29,6 +40,13 @@ const emit = defineEmits([
   'filtersModal',
 ]);
 
+const { uiSettings, updateUISettings } = useUISettings();
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
 const onBasicFilterChange = (value, type) => {
   emit('basicFilterChange', value, type);
 };
@@ -36,80 +54,131 @@ const onBasicFilterChange = (value, type) => {
 const hasAppliedFiltersOrActiveFolders = computed(() => {
   return props.hasAppliedFilters || props.hasActiveFolders;
 });
+
+const showV4View = computed(() => {
+  return isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.CHATWOOT_V4
+  );
+});
+
+const toggleConversationLayout = () => {
+  const { LAYOUT_TYPES } = wootConstants;
+  const {
+    conversation_display_type: conversationDisplayType = LAYOUT_TYPES.CONDENSED,
+  } = uiSettings.value;
+  const newViewType =
+    conversationDisplayType === LAYOUT_TYPES.CONDENSED
+      ? LAYOUT_TYPES.EXPANDED
+      : LAYOUT_TYPES.CONDENSED;
+  updateUISettings({
+    conversation_display_type: newViewType,
+    previously_used_conversation_display_type: newViewType,
+  });
+};
 </script>
 
 <template>
   <div
-    class="flex items-center justify-between px-4 py-0"
+    class="flex items-center justify-between gap-2 px-4 pb-0"
     :class="{
-      'pb-3 border-b border-slate-75 dark:border-slate-700':
-        hasAppliedFiltersOrActiveFolders,
+      'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
+      'pt-2.5': showV4View,
     }"
   >
-    <div class="flex max-w-[85%] justify-center items-center">
+    <div class="flex items-center justify-center min-w-0">
       <h1
-        class="text-xl font-medium break-words truncate text-black-900 dark:text-slate-100"
+        class="text-lg font-medium truncate text-n-slate-12"
         :title="pageTitle"
       >
         {{ pageTitle }}
       </h1>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>
     </div>
     <div class="flex items-center gap-1">
       <template v-if="hasAppliedFilters && !hasActiveFolders">
-        <woot-button
-          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="save"
-          @click="emit('addFolders')"
-        />
-        <woot-button
+        <div class="relative">
+          <NextButton
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
+            icon="i-lucide-save"
+            slate
+            xs
+            faded
+            @click="emit('addFolders')"
+          />
+          <div
+            id="saveFilterTeleportTarget"
+            class="absolute z-40 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
+        </div>
+        <NextButton
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="alert"
-          icon="dismiss-circle"
+          icon="i-lucide-circle-x"
+          ruby
+          faded
+          xs
           @click="emit('resetFilters')"
         />
       </template>
       <template v-if="hasActiveFolders">
-        <woot-button
-          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="edit"
-          @click="emit('filtersModal')"
-        />
-        <woot-button
+        <div class="relative">
+          <NextButton
+            id="toggleConversationFilterButton"
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
+            icon="i-lucide-pen-line"
+            slate
+            xs
+            faded
+            @click="emit('filtersModal')"
+          />
+          <div
+            id="conversationFilterTeleportTarget"
+            class="absolute z-40 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
+        </div>
+        <NextButton
+          id="toggleConversationFilterButton"
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="alert"
-          icon="delete"
+          icon="i-lucide-trash-2"
+          ruby
+          xs
+          faded
           @click="emit('deleteFolders')"
         />
       </template>
-      <woot-button
-        v-else
-        v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
-        variant="smooth"
-        color-scheme="secondary"
-        icon="filter"
-        size="tiny"
-        @click="emit('filtersModal')"
-      />
+      <div v-else class="relative">
+        <NextButton
+          id="toggleConversationFilterButton"
+          v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
+          icon="i-lucide-list-filter"
+          slate
+          xs
+          faded
+          @click="emit('filtersModal')"
+        />
+        <div
+          id="conversationFilterTeleportTarget"
+          class="absolute z-40 mt-2"
+          :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+        />
+      </div>
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
+        :is-on-expanded-layout="isOnExpandedLayout"
         @change-filter="onBasicFilterChange"
       />
+      <SwitchLayout
+        v-if="showV4View"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @toggle="toggleConversationLayout"
+      />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 549678ebc..b55d3865c 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -26,7 +26,13 @@ export default {
     emitter.off('newToastMessage', this.onNewToastMessage);
   },
   methods: {
-    onNewToastMessage({ message, action }) {
+    onNewToastMessage({ message: originalMessage, action }) {
+      // FIX ME: This is a temporary workaround to pass string from functions
+      // that doesn't have the context of the VueApp.
+      const usei18n = action?.usei18n;
+      const duration = action?.duration || this.duration;
+      const message = usei18n ? this.$t(originalMessage) : originalMessage;
+
       this.snackMessages.push({
         key: new Date().getTime(),
         message,
@@ -34,7 +40,7 @@ export default {
       });
       window.setTimeout(() => {
         this.snackMessages.splice(0, 1);
-      }, this.duration);
+      }, duration);
     },
   },
 };
diff --git a/app/javascript/dashboard/components/copilot/CopilotContainer.vue b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
new file mode 100644
index 000000000..443a79ebf
--- /dev/null
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -0,0 +1,63 @@
+<script setup>
+import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
+import IntegrationsAPI from 'dashboard/api/integrations';
+import { useMapGetter } from 'dashboard/composables/store';
+import { ref } from 'vue';
+const props = defineProps({
+  conversationId: {
+    type: [Number, String],
+    required: true,
+  },
+  conversationInboxType: {
+    type: String,
+    required: true,
+  },
+});
+const currentUser = useMapGetter('getCurrentUser');
+const messages = ref([]);
+
+const isCaptainTyping = ref(false);
+
+const sendMessage = async message => {
+  // Add user message
+  messages.value.push({
+    id: messages.value.length + 1,
+    role: 'user',
+    content: message,
+  });
+  isCaptainTyping.value = true;
+
+  try {
+    const { data } = await IntegrationsAPI.requestCaptainCopilot({
+      previous_history: messages.value
+        .map(m => ({
+          role: m.role,
+          content: m.content,
+        }))
+        .slice(0, -1),
+      message,
+      conversation_id: props.conversationId,
+    });
+    messages.value.push({
+      id: new Date().getTime(),
+      role: 'assistant',
+      content: data.message,
+    });
+  } catch (error) {
+    // eslint-disable-next-line
+    console.log(error);
+  } finally {
+    isCaptainTyping.value = false;
+  }
+};
+</script>
+
+<template>
+  <Copilot
+    :messages="messages"
+    :support-agent="currentUser"
+    :is-captain-typing="isCaptainTyping"
+    :conversation-inbox-type="conversationInboxType"
+    @send-message="sendMessage"
+  />
+</template>
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
index d615bd15c..e4150d47d 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
@@ -3,18 +3,20 @@ import { frontendURL } from '../../../../helper/URLHelper';
 const contacts = accountId => ({
   parentNav: 'contacts',
   routes: [
-    'contacts_dashboard',
-    'contact_profile_dashboard',
-    'contacts_segments_dashboard',
-    'contacts_labels_dashboard',
+    'contacts_dashboard_index',
+    'contacts_dashboard_segments_index',
+    'contacts_dashboard_labels_index',
+    'contacts_edit',
+    'contacts_edit_segment',
+    'contacts_edit_label',
   ],
   menuItems: [
     {
       icon: 'contact-card-group',
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/contacts`),
-      toStateName: 'contacts_dashboard',
+      toState: frontendURL(`accounts/${accountId}/contacts?page=1`),
+      toStateName: 'contacts_dashboard_index',
     },
   ],
 });
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index 5a50bd440..59de35564 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -31,7 +31,7 @@ const primaryMenuItems = accountId => [
     label: 'CONTACTS',
     featureFlag: FEATURE_FLAGS.CRM,
     toState: frontendURL(`accounts/${accountId}/contacts`),
-    toStateName: 'contacts_dashboard',
+    toStateName: 'contacts_dashboard_index',
   },
   {
     icon: 'arrow-trending-lines',
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index efe89d4c6..c36b6f611 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -134,7 +134,7 @@ export default {
         icon: 'number-symbol',
         label: 'TAGGED_WITH',
         hasSubMenu: true,
-        key: 'label',
+        key: 'labels',
         newLink: this.showNewLink(FEATURE_FLAGS.TEAM_MANAGEMENT),
         newLinkTag: 'NEW_LABEL',
         toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
@@ -147,7 +147,7 @@ export default {
           color: label.color,
           truncateLabel: true,
           toState: frontendURL(
-            `accounts/${this.accountId}/labels/${label.title}/contacts`
+            `accounts/${this.accountId}/contacts/labels/${label.title}`
           ),
         })),
       };
@@ -194,7 +194,7 @@ export default {
         icon: 'folder',
         label: 'CUSTOM_VIEWS_SEGMENTS',
         hasSubMenu: true,
-        key: 'custom_view',
+        key: 'segments',
         children: this.customViews
           .filter(view => view.filter_type === 'contact')
           .map(view => ({
@@ -202,7 +202,7 @@ export default {
             label: view.name,
             truncateLabel: true,
             toState: frontendURL(
-              `accounts/${this.accountId}/contacts/custom_view/${view.id}`
+              `accounts/${this.accountId}/contacts/segments/${view.id}`
             ),
           })),
       };
@@ -247,7 +247,7 @@ export default {
     <transition-group
       name="menu-list"
       tag="ul"
-      class="pt-2 reset-base list-none"
+      class="pt-2 list-none reset-base"
     >
       <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 952f212ee..a38bbd20b 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -119,6 +119,13 @@ export default {
         this.menuItem.toStateName === 'settings_applications'
       );
     },
+    isContactsDefaultRoute() {
+      return (
+        this.menuItem.toStateName === 'contacts_dashboard_index' &&
+        (this.$store.state.route.name === 'contacts_dashboard_index' ||
+          this.$store.state.route.name === 'contacts_edit')
+      );
+    },
     isCurrentRoute() {
       return this.$store.state.route.name.includes(this.menuItem.toStateName);
     },
@@ -130,6 +137,7 @@ export default {
         this.isAllConversations ||
         this.isMentions ||
         this.isUnattended ||
+        this.isContactsDefaultRoute ||
         this.isCurrentRoute
       ) {
         return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
@@ -242,7 +250,7 @@ export default {
       </span>
     </router-link>
 
-    <ul v-if="hasSubMenu" class="reset-base list-none">
+    <ul v-if="hasSubMenu" class="list-none reset-base">
       <SecondaryChildNavItem
         v-for="child in menuItem.children"
         :key="child.id"
diff --git a/app/javascript/dashboard/components/table/Pagination.vue b/app/javascript/dashboard/components/table/Pagination.vue
index 42fd99339..6de3d851c 100644
--- a/app/javascript/dashboard/components/table/Pagination.vue
+++ b/app/javascript/dashboard/components/table/Pagination.vue
@@ -54,7 +54,7 @@ const end = computed(() => {
   <div class="flex items-center justify-between">
     <div class="flex flex-1 items-center justify-between">
       <div>
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-n-slate-11 mb-0">
           {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
         </p>
       </div>
@@ -62,7 +62,7 @@ const end = computed(() => {
         <woot-button
           :disabled="!table.getCanPreviousPage()"
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           @click="table.setPageIndex(0)"
         >
@@ -70,7 +70,7 @@ const end = computed(() => {
         </woot-button>
         <woot-button
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           :disabled="!table.getCanPreviousPage()"
           @click="table.previousPage()"
@@ -81,22 +81,22 @@ const end = computed(() => {
           v-for="page in visiblePages"
           :key="page"
           variant="clear"
-          class="size-8 flex items-center justify-center border text-xs leading-none text-center"
-          :class="page == currentPage ? 'border-woot-500' : 'border-slate-50'"
+          class="h-8 flex items-center justify-center text-xs leading-none text-center"
+          :class="page == currentPage ? 'border-n-brand' : 'border-slate-50'"
           color-scheme="secondary"
           @click="table.setPageIndex(page - 1)"
         >
-          <div
+          <span
             class="text-center"
-            :class="{ 'text-woot-500': page == currentPage }"
+            :class="{ 'text-n-brand': page == currentPage }"
           >
             {{ page }}
-          </div>
+          </span>
         </woot-button>
         <woot-button
           :disabled="!table.getCanNextPage()"
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           @click="table.nextPage()"
         >
@@ -105,7 +105,7 @@ const end = computed(() => {
         <woot-button
           :disabled="!table.getCanNextPage()"
           variant="clear"
-          class="size-8 flex items-center border border-slate-50"
+          class="h-8 border-0 flex items-center"
           color-scheme="secondary"
           @click="table.setPageIndex(table.getPageCount() - 1)"
         >
diff --git a/app/javascript/dashboard/components/table/Table.vue b/app/javascript/dashboard/components/table/Table.vue
index 3b84735d1..5936fa314 100644
--- a/app/javascript/dashboard/components/table/Table.vue
+++ b/app/javascript/dashboard/components/table/Table.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { FlexRender } from '@tanstack/vue-table';
 import SortButton from './SortButton.vue';
+import { computed } from 'vue';
 
-defineProps({
+const props = defineProps({
   table: {
     type: Object,
     required: true,
@@ -11,22 +12,36 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  type: {
+    type: String,
+    default: 'relaxed',
+  },
 });
+
+const isRelaxed = computed(() => props.type === 'relaxed');
+const headerClass = computed(() =>
+  isRelaxed.value
+    ? 'first:rounded-bl-lg first:rounded-tl-lg last:rounded-br-lg last:rounded-tr-lg'
+    : ''
+);
 </script>
 
 <template>
   <table :class="{ 'table-fixed': fixed }">
-    <thead
-      class="sticky top-0 z-10 border-b border-slate-50 dark:border-slate-800 bg-slate-25 dark:bg-slate-800"
-    >
-      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+    <thead class="sticky top-0 z-10 bg-n-slate-1">
+      <tr
+        v-for="headerGroup in table.getHeaderGroups()"
+        :key="headerGroup.id"
+        class="rounded-xl"
+      >
         <th
           v-for="header in headerGroup.headers"
           :key="header.id"
           :style="{
             width: `${header.getSize()}px`,
           }"
-          class="text-left py-3 px-5 dark:bg-slate-800 text-slate-800 dark:text-slate-200 font-normal text-xs"
+          class="text-left py-3 px-5 font-normal text-sm"
+          :class="headerClass"
           @click="header.column.getCanSort() && header.column.toggleSorting()"
         >
           <div
@@ -43,16 +58,12 @@ defineProps({
       </tr>
     </thead>
 
-    <tbody class="divide-y divide-slate-25 dark:divide-slate-900">
-      <tr
-        v-for="row in table.getRowModel().rows"
-        :key="row.id"
-        class="hover:bg-slate-25 dark:hover:bg-slate-800"
-      >
+    <tbody class="divide-y divide-n-slate-2">
+      <tr v-for="row in table.getRowModel().rows" :key="row.id">
         <td
           v-for="cell in row.getVisibleCells()"
           :key="cell.id"
-          class="py-2 px-5"
+          :class="isRelaxed ? 'py-4 px-5' : 'py-2 px-5'"
         >
           <FlexRender
             :render="cell.column.columnDef.cell"
diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
index 3a7344fb4..83653d8a6 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
@@ -11,6 +11,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  isCompact: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['change']);
@@ -59,7 +63,10 @@ onMounted(() => {
 
 <template>
   <div
-    :class="{ 'tabs--container--with-border': border }"
+    :class="{
+      'tabs--container--with-border': border,
+      'tabs--container--compact': isCompact,
+    }"
     class="tabs--container"
   >
     <button
diff --git a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
index ce3cb21ac..e838b477d 100644
--- a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
+++ b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
@@ -29,7 +29,7 @@ const spanClass = computed(() => {
 
 <template>
   <div
-    class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
+    class="flex items-center px-0 py-2 text-xs font-medium text-right uppercase text-n-slate-11 rtl:text-left"
     :class="spanClass"
   >
     <slot>
diff --git a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
index 23553f4c2..1e78c334d 100644
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -4,7 +4,7 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 defineProps({
   user: {
     type: Object,
-    default: () => {},
+    default: () => ({}),
   },
   size: {
     type: String,
@@ -12,7 +12,7 @@ defineProps({
   },
   textClass: {
     type: String,
-    default: 'text-xs text-slate-600',
+    default: 'text-sm text-n-slate-12',
   },
 });
 </script>
@@ -25,11 +25,11 @@ defineProps({
       :username="user.name"
       :status="user.availability_status"
     />
-    <h6
-      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+    <span
+      class="my-0 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
       :class="textClass"
     >
       {{ user.name }}
-    </h6>
+    </span>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
deleted file mode 100644
index b9d81ec4e..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ /dev/null
@@ -1,407 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import FilterInputBox from '../FilterInput/Index.vue';
-import languages from './advancedFilterItems/languages';
-import countries from 'shared/constants/countries.js';
-import { mapGetters } from 'vuex';
-import { filterAttributeGroups } from './advancedFilterItems';
-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';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    FilterInputBox,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    initialFilterTypes: {
-      type: Array,
-      default: () => [],
-    },
-    initialAppliedFilters: {
-      type: Array,
-      default: () => [],
-    },
-    activeFolderName: {
-      type: String,
-      default: '',
-    },
-    isFolderView: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['applyFilter', 'updateFolder'],
-  setup() {
-    const { setFilterAttributes } = useFilter({
-      filteri18nKey: 'FILTER',
-      attributeModel: 'conversation_attribute',
-    });
-    return {
-      setFilterAttributes,
-    };
-  },
-  data() {
-    return {
-      show: true,
-      appliedFilters: this.initialAppliedFilters,
-      activeFolderNewName: this.activeFolderName,
-      filterTypes: this.initialFilterTypes,
-      filterAttributeGroups,
-      filterGroups: [],
-      allCustomAttributes: [],
-      attributeModel: 'conversation_attribute',
-      filtersFori18n: 'FILTER',
-      validationErrors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      getAppliedConversationFilters: 'getAppliedConversationFilters',
-    }),
-    filterModalHeaderTitle() {
-      return !this.isFolderView
-        ? this.$t('FILTER.TITLE')
-        : this.$t('FILTER.EDIT_CUSTOM_FILTER');
-    },
-    filterModalSubTitle() {
-      return !this.isFolderView
-        ? this.$t('FILTER.SUBTITLE')
-        : this.$t('FILTER.CUSTOM_VIEWS_SUBTITLE');
-    },
-  },
-  mounted() {
-    const { filterGroups, filterTypes } = this.setFilterAttributes();
-
-    this.filterTypes = [...this.filterTypes, ...filterTypes];
-    this.filterGroups = filterGroups;
-
-    this.$store.dispatch('campaigns/get');
-    if (this.getAppliedConversationFilters.length) {
-      this.appliedFilters = [];
-      this.appliedFilters = [...this.getAppliedConversationFilters];
-    } else if (!this.isFolderView) {
-      this.appliedFilters.push({
-        attribute_key: 'status',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        attribute_model: 'standard',
-      });
-    }
-  },
-  methods: {
-    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;
-      }
-    },
-    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';
-      }
-    },
-    getAttributeModel(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.attributeModel;
-    },
-    getInputType(key, operator) {
-      if (key === 'created_at' || key === 'last_activity_at')
-        if (operator === 'days_before') return 'plain_text';
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.inputType;
-    },
-    getOperators(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.filterOperators;
-    },
-    statusFilterItems() {
-      return {
-        open: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
-        },
-        resolved: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.resolved.TEXT'),
-        },
-        pending: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.pending.TEXT'),
-        },
-        snoozed: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.snoozed.TEXT'),
-        },
-        all: {
-          TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
-        },
-      };
-    },
-    getDropdownValues(type) {
-      const statusFilters = this.statusFilterItems();
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ](this.attributeModel);
-
-      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type &&
-          attr.attribute_display_type === 'checkbox'
-        );
-      });
-
-      if (isCustomAttributeCheckbox) {
-        return [
-          {
-            id: true,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-          },
-          {
-            id: false,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-          },
-        ];
-      }
-
-      const isCustomAttributeList = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type && attr.attribute_display_type === 'list'
-        );
-      });
-
-      if (isCustomAttributeList) {
-        return allCustomAttributes
-          .find(attr => attr.attribute_key === type)
-          .attribute_values.map(item => {
-            return {
-              id: item,
-              name: item,
-            };
-          });
-      }
-
-      switch (type) {
-        case 'status':
-          return [
-            ...Object.keys(statusFilters).map(status => {
-              return {
-                id: status,
-                name: statusFilters[status].TEXT,
-              };
-            }),
-          ];
-        case 'assignee_id':
-          return this.$store.getters['agents/getAgents'];
-        case 'contact':
-          return this.$store.getters['contacts/getContacts'];
-        case 'inbox_id':
-          return this.$store.getters['inboxes/getInboxes'];
-        case 'team_id':
-          return this.$store.getters['teams/getTeams'];
-        case 'campaign_id':
-          return this.$store.getters['campaigns/getAllCampaigns'].map(i => {
-            return {
-              id: i.id,
-              name: i.title,
-            };
-          });
-        case 'labels':
-          return this.$store.getters['labels/getLabels'].map(i => {
-            return {
-              id: i.title,
-              name: i.title,
-            };
-          });
-        case 'browser_language':
-          return languages;
-        case 'country_code':
-          return countries;
-        default:
-          return undefined;
-      }
-    },
-    appendNewFilter() {
-      if (this.isFolderView) {
-        this.setQueryOperatorOnLastQuery();
-      } else {
-        this.appliedFilters.push({
-          attribute_key: 'status',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      }
-    },
-    setQueryOperatorOnLastQuery() {
-      const lastItemIndex = this.appliedFilters.length - 1;
-      this.appliedFilters[lastItemIndex] = {
-        ...this.appliedFilters[lastItemIndex],
-        query_operator: 'and',
-      };
-      this.$nextTick(() => {
-        this.appliedFilters.push({
-          attribute_key: 'status',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      });
-    },
-    removeFilter(index) {
-      if (this.appliedFilters.length <= 1) {
-        useAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
-      } else {
-        this.appliedFilters.splice(index, 1);
-      }
-    },
-    submitFilterQuery() {
-      this.validationErrors = validateConversationOrContactFilters(
-        this.appliedFilters
-      );
-      if (Object.keys(this.validationErrors).length === 0) {
-        this.$store.dispatch(
-          'setConversationFilters',
-          JSON.parse(JSON.stringify(this.appliedFilters))
-        );
-        this.$emit('applyFilter', this.appliedFilters);
-        useTrack(CONVERSATION_EVENTS.APPLY_FILTER, {
-          applied_filters: this.appliedFilters.map(filter => ({
-            key: filter.attribute_key,
-            operator: filter.filter_operator,
-            query_operator: filter.query_operator,
-          })),
-        });
-      }
-    },
-    updateSavedCustomViews() {
-      this.$emit('updateFolder', this.appliedFilters, this.activeFolderNewName);
-    },
-    resetFilter(index, currentFilter) {
-      this.appliedFilters[index].filter_operator = this.filterTypes.find(
-        filter => filter.attributeKey === currentFilter.attribute_key
-      ).filterOperators[0].value;
-      this.appliedFilters[index].values = '';
-    },
-    showUserInput(operatorType) {
-      if (operatorType === 'is_present' || operatorType === 'is_not_present')
-        return false;
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isFolderView">
-        <label class="input-label" :class="{ error: !activeFolderNewName }">
-          {{ $t('FILTER.FOLDER_LABEL') }}
-          <input
-            v-model="activeFolderNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeFolderNewName" class="message">
-            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="mb-1">
-          {{ $t('FILTER.FOLDER_QUERY_LABEL') }}
-        </label>
-      </div>
-      <div
-        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
-      >
-        <FilterInputBox
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          grouped-filters
-          :error-message="
-            validationErrors[`filter_${i}`]
-              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
-              : ''
-          "
-          @reset-filter="resetFilter(i, appliedFilters[i])"
-          @remove-filter="removeFilter(i)"
-        />
-        <div class="mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isFolderView"
-            :disabled="!activeFolderNewName"
-            @click="updateSavedCustomViews"
-          >
-            {{ $t('FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.folder-input {
-  @apply w-[50%];
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index 39971b4a6..e328f86b4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -3,6 +3,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
 import FilterItem from './FilterItem.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const CHAT_STATUS_FILTER_ITEMS = Object.freeze([
   'open',
@@ -26,6 +27,13 @@ const SORT_ORDER_ITEMS = Object.freeze([
 export default {
   components: {
     FilterItem,
+    NextButton,
+  },
+  props: {
+    isOnExpandedLayout: {
+      type: Boolean,
+      required: true,
+    },
   },
   emits: ['changeFilter'],
   setup() {
@@ -85,22 +93,25 @@ export default {
 
 <template>
   <div class="relative flex">
-    <woot-button
+    <NextButton
       v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
-      variant="smooth"
-      size="tiny"
-      color-scheme="secondary"
-      class="selector-button"
-      icon="sort-icon"
+      icon="i-lucide-arrow-up-down"
+      slate
+      faded
+      xs
       @click="toggleDropdown"
     />
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
+      class="mt-1 dropdown-pane dropdown-pane--open !w-52 !p-4 top-6 border !border-n-weak dark:!border-n-weak !bg-n-alpha-3 dark:!bg-n-alpha-3 backdrop-blur-[100px]"
+      :class="{
+        'ltr:left-0 rtl:right-0': !isOnExpandedLayout,
+        'ltr:right-0 rtl:left-0': isOnExpandedLayout,
+      }"
     >
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
         <FilterItem
@@ -112,7 +123,7 @@ export default {
         />
       </div>
       <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+        <span class="text-xs font-medium text-n-slate-12">{{
           $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
         <FilterItem
@@ -126,9 +137,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.basic-filter {
-  @apply w-52 p-4 top-6;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index a1cb09c82..46cdaf221 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -1,14 +1,14 @@
 <script>
 import { mapGetters } from 'vuex';
-import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
 import ConversationHeader from './ConversationHeader.vue';
 import DashboardAppFrame from '../DashboardApp/Frame.vue';
 import EmptyState from './EmptyState/EmptyState.vue';
 import MessagesView from './MessagesView.vue';
+import ConversationSidebar from './ConversationSidebar.vue';
 
 export default {
   components: {
-    ContactPanel,
+    ConversationSidebar,
     ConversationHeader,
     DashboardAppFrame,
     EmptyState,
@@ -62,10 +62,13 @@ export default {
     },
   },
   watch: {
-    'currentChat.inbox_id'(inboxId) {
-      if (inboxId) {
-        this.$store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
-      }
+    'currentChat.inbox_id': {
+      immediate: true,
+      handler(inboxId) {
+        if (inboxId) {
+          this.$store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
+        }
+      },
     },
     'currentChat.id'() {
       this.fetchLabels();
@@ -95,8 +98,10 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
-    :class="{ 'with-border-right': !isOnExpandedLayout }"
+    class="conversation-details-wrap bg-n-background"
+    :class="{
+      'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
+    }"
   >
     <ConversationHeader
       v-if="currentChat.id"
@@ -135,17 +140,11 @@ export default {
         v-if="!currentChat.id && !isInboxView"
         :is-on-expanded-layout="isOnExpandedLayout"
       />
-      <div
-        v-show="showContactPanel"
-        class="conversation-sidebar-wrap basis-full sm:basis-[17.5rem] md:basis-[18.75rem] lg:basis-[19.375rem] xl:basis-[20.625rem] 2xl:basis-[25rem] rtl:border-r border-slate-50 dark:border-slate-700 h-auto overflow-auto z-10 flex-shrink-0 flex-grow-0"
-      >
-        <ContactPanel
-          v-if="showContactPanel"
-          :conversation-id="currentChat.id"
-          :inbox-id="currentChat.inbox_id"
-          :on-toggle="onToggleContactPanel"
-        />
-      </div>
+      <ConversationSidebar
+        v-if="showContactPanel"
+        :current-chat="currentChat"
+        @toggle-contact-panel="onToggleContactPanel"
+      />
     </div>
     <DashboardAppFrame
       v-for="(dashboardApp, index) in dashboardApps"
@@ -162,10 +161,6 @@ export default {
 <style lang="scss" scoped>
 .conversation-details-wrap {
   @apply flex flex-col min-w-0 w-full;
-
-  &.with-border-right {
-    @apply border-r border-slate-50 dark:border-slate-700;
-  }
 }
 
 .dashboard-app--tabs {
@@ -177,10 +172,4 @@ export default {
     }
   }
 }
-
-.conversation-sidebar-wrap {
-  &::v-deep .contact--panel {
-    @apply w-full h-full max-w-full;
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
new file mode 100644
index 000000000..a0b07d44b
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed, ref } from 'vue';
+import CopilotContainer from '../../copilot/CopilotContainer.vue';
+import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  currentChat: {
+    required: true,
+    type: Object,
+  },
+});
+
+const emit = defineEmits(['toggleContactPanel']);
+
+const getters = useStoreGetters();
+const { t } = useI18n();
+
+const captainIntegration = computed(() =>
+  getters['integrations/getIntegration'].value('captain', null)
+);
+
+const channelType = computed(() => props.currentChat?.meta?.channel || '');
+
+const CONTACT_TABS_OPTIONS = [
+  { key: 'CONTACT', value: 'contact' },
+  { key: 'COPILOT', value: 'copilot' },
+];
+
+const tabs = computed(() => {
+  return CONTACT_TABS_OPTIONS.map(tab => ({
+    label: t(`CONVERSATION.SIDEBAR.${tab.key}`),
+    value: tab.value,
+  }));
+});
+const activeTab = ref(0);
+const toggleContactPanel = () => {
+  emit('toggleContactPanel');
+};
+
+const handleTabChange = selectedTab => {
+  activeTab.value = tabs.value.findIndex(
+    tabItem => tabItem.value === selectedTab.value
+  );
+};
+
+const showCopilotTab = computed(() => {
+  return captainIntegration.value && captainIntegration.value.enabled;
+});
+</script>
+
+<template>
+  <div
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[300px] w-[300px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
+  >
+    <div v-if="showCopilotTab" class="p-2">
+      <TabBar
+        :tabs="tabs"
+        :initial-active-tab="activeTab"
+        class="w-full [&>button]:w-full"
+        @tab-changed="handleTabChange"
+      />
+    </div>
+    <div class="flex flex-1 overflow-auto">
+      <ContactPanel
+        v-if="!activeTab"
+        :conversation-id="currentChat.id"
+        :inbox-id="currentChat.inbox_id"
+        :on-toggle="toggleContactPanel"
+      />
+      <CopilotContainer
+        v-else-if="activeTab === 1 && showCopilotTab"
+        :key="currentChat.id"
+        :conversation-inbox-type="channelType"
+        :conversation-id="currentChat.id"
+        class="flex-1"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
index 87a1f73b6..9b5e7f9a6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
@@ -40,7 +40,7 @@ export default {
 <template>
   <select
     v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    class="w-32 h-6 py-0 pl-2 pr-6 mx-1 my-0 text-xs border border-solid bg-n-slate-3 dark:bg-n-solid-3 border-n-weak dark:border-n-weak text-n-slate-12"
     @change="onTabChange()"
   >
     <option v-for="value in items" :key="value" :value="value">
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index ba4d9393f..acfc9b69b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -468,9 +468,7 @@ export default {
         size="tiny"
         color-scheme="secondary"
         class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc dark:bg-slate-700 border-slate-50 dark:border-slate-600"
-        :class="
-          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
-        "
+        :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
@@ -558,6 +556,7 @@ export default {
 
 <style scoped>
 @tailwind components;
+
 @layer components {
   .rounded-bl-calc {
     border-bottom-left-radius: calc(1.5rem + 1px);
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 3d490894a..235dfdae3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -459,11 +459,13 @@ export default {
       BUS_EVENTS.NEW_CONVERSATION_MODAL,
       this.onNewConversationModalActive
     );
+    emitter.on(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, this.addIntoEditor);
   },
   unmounted() {
     document.removeEventListener('paste', this.onPaste);
     document.removeEventListener('keydown', this.handleKeyEvents);
     emitter.off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
+    emitter.off(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, this.addIntoEditor);
     emitter.off(
       BUS_EVENTS.NEW_CONVERSATION_MODAL,
       this.onNewConversationModalActive
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
index 82774cbe0..1f513d78b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAEventItem.vue
@@ -18,7 +18,7 @@ const formatDate = timestamp =>
 <template>
   <div class="flex justify-between w-full">
     <span
-      class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+      class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-n-slate-11"
     >
       {{ label }}
     </span>
@@ -26,7 +26,7 @@ const formatDate = timestamp =>
       <span
         v-for="item in items"
         :key="item.id"
-        class="text-sm font-normal text-slate-900 dark:text-slate-25 text-right tabular-nums"
+        class="text-sm font-normal text-n-slate-12 text-right tabular-nums"
       >
         {{ formatDate(item.created_at) }}
       </span>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
index 6b1c66d02..3355905c6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLAPopoverCard.vue
@@ -40,9 +40,9 @@ const toggleShowAllNRT = () => {
 
 <template>
   <div
-    class="absolute flex flex-col items-start bg-white dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+    class="absolute flex flex-col items-start border-n-strong bg-n-solid-3 w-96 backdrop-blur-[100px] px-6 py-5 z-50 shadow rounded-xl gap-4 max-h-96 overflow-auto"
   >
-    <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
+    <span class="text-sm font-medium text-n-slate-12">
       {{ $t('SLA.EVENTS.TITLE') }}
     </span>
     <SLAEventItem
diff --git a/app/javascript/dashboard/composables/spec/useAccount.spec.js b/app/javascript/dashboard/composables/spec/useAccount.spec.js
index bb4bfdee3..b61d5d6a0 100644
--- a/app/javascript/dashboard/composables/spec/useAccount.spec.js
+++ b/app/javascript/dashboard/composables/spec/useAccount.spec.js
@@ -91,10 +91,11 @@ describe('useAccount', () => {
   it('returns an account-scoped route', () => {
     const wrapper = mount(createComponent(), mountParams);
     const { accountScopedRoute } = wrapper.vm;
-    const result = accountScopedRoute('accountDetail', { userId: 456 });
+    const result = accountScopedRoute('accountDetail', { userId: 456 }, {});
     expect(result).toEqual({
       name: 'accountDetail',
       params: { accountId: 123, userId: 456 },
+      query: {},
     });
   });
 
diff --git a/app/javascript/dashboard/composables/spec/useFileUpload.spec.js b/app/javascript/dashboard/composables/spec/useFileUpload.spec.js
new file mode 100644
index 000000000..27e17dc43
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useFileUpload.spec.js
@@ -0,0 +1,146 @@
+import { useFileUpload } from '../useFileUpload';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { DirectUpload } from 'activestorage';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL } from 'shared/constants/messages';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables', () => ({
+  useAlert: vi.fn(message => message),
+}));
+vi.mock('vue-i18n');
+vi.mock('activestorage');
+vi.mock('shared/helpers/FileHelper');
+
+describe('useFileUpload', () => {
+  const mockAttachFile = vi.fn();
+  const mockTranslate = vi.fn();
+
+  const mockFile = {
+    file: new File(['test'], 'test.jpg', { type: 'image/jpeg' }),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    useMapGetter.mockImplementation(getter => {
+      const getterMap = {
+        getCurrentAccountId: { value: '123' },
+        getCurrentUser: { value: { access_token: 'test-token' } },
+        getSelectedChat: { value: { id: '456' } },
+        'globalConfig/get': { value: { directUploadsEnabled: true } },
+      };
+      return getterMap[getter];
+    });
+
+    useI18n.mockReturnValue({ t: mockTranslate });
+    checkFileSizeLimit.mockReturnValue(true);
+  });
+
+  it('should handle direct file upload when enabled', () => {
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    const mockBlob = { signed_id: 'test-blob' };
+    DirectUpload.mockImplementation(() => ({
+      create: callback => callback(null, mockBlob),
+    }));
+
+    onFileUpload(mockFile);
+
+    expect(DirectUpload).toHaveBeenCalledWith(
+      mockFile.file,
+      '/api/v1/accounts/123/conversations/456/direct_uploads',
+      expect.any(Object)
+    );
+    expect(mockAttachFile).toHaveBeenCalledWith({
+      file: mockFile,
+      blob: mockBlob,
+    });
+  });
+
+  it('should handle indirect file upload when direct upload is disabled', () => {
+    useMapGetter.mockImplementation(getter => {
+      const getterMap = {
+        getCurrentAccountId: { value: '123' },
+        getCurrentUser: { value: { access_token: 'test-token' } },
+        getSelectedChat: { value: { id: '456' } },
+        'globalConfig/get': { value: { directUploadsEnabled: false } },
+      };
+      return getterMap[getter];
+    });
+
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(mockFile);
+
+    expect(DirectUpload).not.toHaveBeenCalled();
+    expect(mockAttachFile).toHaveBeenCalledWith({ file: mockFile });
+  });
+
+  it('should show alert when file size exceeds limit', () => {
+    checkFileSizeLimit.mockReturnValue(false);
+    mockTranslate.mockReturnValue('File size exceeds limit');
+
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(mockFile);
+
+    expect(useAlert).toHaveBeenCalledWith('File size exceeds limit');
+    expect(mockAttachFile).not.toHaveBeenCalled();
+  });
+
+  it('should use different max file size for Twilio SMS channel', () => {
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: true,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(mockFile);
+
+    expect(checkFileSizeLimit).toHaveBeenCalledWith(
+      mockFile,
+      MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+    );
+  });
+
+  it('should handle direct upload errors', () => {
+    const mockError = 'Upload failed';
+    DirectUpload.mockImplementation(() => ({
+      create: callback => callback(mockError, null),
+    }));
+
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(mockFile);
+
+    expect(useAlert).toHaveBeenCalledWith(mockError);
+    expect(mockAttachFile).not.toHaveBeenCalled();
+  });
+
+  it('should do nothing when file is null', () => {
+    const { onFileUpload } = useFileUpload({
+      isATwilioSMSChannel: false,
+      attachFile: mockAttachFile,
+    });
+
+    onFileUpload(null);
+
+    expect(checkFileSizeLimit).not.toHaveBeenCalled();
+    expect(mockAttachFile).not.toHaveBeenCalled();
+    expect(useAlert).not.toHaveBeenCalled();
+  });
+});
diff --git a/app/javascript/dashboard/composables/useAccount.js b/app/javascript/dashboard/composables/useAccount.js
index 08e291e39..c8c245adb 100644
--- a/app/javascript/dashboard/composables/useAccount.js
+++ b/app/javascript/dashboard/composables/useAccount.js
@@ -28,10 +28,11 @@ export function useAccount() {
     return `/app/accounts/${accountId.value}/${url}`;
   };
 
-  const accountScopedRoute = (name, params) => {
+  const accountScopedRoute = (name, params, query) => {
     return {
       name,
       params: { accountId: accountId.value, ...params },
+      query: { ...query },
     };
   };
 
diff --git a/app/javascript/dashboard/composables/useFileUpload.js b/app/javascript/dashboard/composables/useFileUpload.js
new file mode 100644
index 000000000..dd6779250
--- /dev/null
+++ b/app/javascript/dashboard/composables/useFileUpload.js
@@ -0,0 +1,91 @@
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { DirectUpload } from 'activestorage';
+import {
+  MAXIMUM_FILE_UPLOAD_SIZE,
+  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+} from 'shared/constants/messages';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+
+/**
+ * Composable for handling file uploads in conversations
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.isATwilioSMSChannel - Whether the current channel is Twilio SMS
+ * @param {Function} options.attachFile - Callback function to handle file attachment
+ * @returns {Object} File upload methods and utilities
+ */
+export const useFileUpload = ({ isATwilioSMSChannel, attachFile }) => {
+  const { t } = useI18n();
+
+  const accountId = useMapGetter('getCurrentAccountId');
+  const currentUser = useMapGetter('getCurrentUser');
+  const currentChat = useMapGetter('getSelectedChat');
+  const globalConfig = useMapGetter('globalConfig/get');
+
+  const maxFileSize = computed(() =>
+    isATwilioSMSChannel
+      ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+      : MAXIMUM_FILE_UPLOAD_SIZE
+  );
+
+  const handleDirectFileUpload = file => {
+    if (!file) return;
+
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      const upload = new DirectUpload(
+        file.file,
+        `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
+        {
+          directUploadWillCreateBlobWithXHR: xhr => {
+            xhr.setRequestHeader(
+              'api_access_token',
+              currentUser.value.access_token
+            );
+          },
+        }
+      );
+
+      upload.create((error, blob) => {
+        if (error) {
+          useAlert(error);
+        } else {
+          attachFile({ file, blob });
+        }
+      });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
+    }
+  };
+
+  const handleIndirectFileUpload = file => {
+    if (!file) return;
+
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      attachFile({ file });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
+    }
+  };
+
+  const onFileUpload = file => {
+    if (globalConfig.value.directUploadsEnabled) {
+      handleDirectFileUpload(file);
+    } else {
+      handleIndirectFileUpload(file);
+    }
+  };
+
+  return {
+    onFileUpload,
+  };
+};
diff --git a/app/javascript/dashboard/composables/useTransformKeys.js b/app/javascript/dashboard/composables/useTransformKeys.js
new file mode 100644
index 000000000..4f4767a87
--- /dev/null
+++ b/app/javascript/dashboard/composables/useTransformKeys.js
@@ -0,0 +1,29 @@
+// NOTE: In the future if performance becomes an issue, we can memoize the functions
+
+import { unref } from 'vue';
+import camelcaseKeys from 'camelcase-keys';
+import snakecaseKeys from 'snakecase-keys';
+
+/**
+ * Vue composable that converts object keys to camelCase
+ * @param {Object|Array|import('vue').Ref<Object|Array>} payload - Object or array to convert
+ * @param {Object} [options] - Options object
+ * @param {boolean} [options.deep=false] - Should convert keys of nested objects
+ * @returns {Object|Array} Converted payload with camelCase keys
+ */
+export function useCamelCase(payload, options) {
+  const unrefPayload = unref(payload);
+  return camelcaseKeys(unrefPayload, options);
+}
+
+/**
+ * Vue composable that converts object keys to snake_case
+ * @param {Object|Array|import('vue').Ref<Object|Array>} payload - Object or array to convert
+ * @param {Object} [options] - Options object
+ * @param {boolean} [options.deep=false] - Should convert keys of nested objects
+ * @returns {Object|Array} Converted payload with snake_case keys
+ */
+export function useSnakeCase(payload, options) {
+  const unrefPayload = unref(payload);
+  return snakecaseKeys(unrefPayload, options);
+}
diff --git a/app/javascript/dashboard/constants/appEvents.js b/app/javascript/dashboard/constants/appEvents.js
new file mode 100644
index 000000000..71f044232
--- /dev/null
+++ b/app/javascript/dashboard/constants/appEvents.js
@@ -0,0 +1,5 @@
+export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
+export const CHATWOOT_RESET = 'CHATWOOT_RESET';
+
+export const ANALYTICS_IDENTITY = 'ANALYTICS_IDENTITY';
+export const ANALYTICS_RESET = 'ANALYTICS_RESET';
diff --git a/app/javascript/dashboard/constants/globals.js b/app/javascript/dashboard/constants/globals.js
index 864e2a6e6..4c731e9d8 100644
--- a/app/javascript/dashboard/constants/globals.js
+++ b/app/javascript/dashboard/constants/globals.js
@@ -35,7 +35,7 @@ export default {
   HELP_CENTER_DOCS_URL:
     'https://www.chatwoot.com/docs/product/others/help-center',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
-  SMALL_SCREEN_BREAKPOINT: 1024,
+  SMALL_SCREEN_BREAKPOINT: 1200,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
   SNOOZE_OPTIONS: {
     UNTIL_NEXT_REPLY: 'until_next_reply',
diff --git a/app/javascript/dashboard/helper/AudioAlerts/AudioMessageHelper.js b/app/javascript/dashboard/helper/AudioAlerts/AudioMessageHelper.js
new file mode 100644
index 000000000..0590b1a58
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/AudioMessageHelper.js
@@ -0,0 +1,6 @@
+export const getAssignee = message => message?.conversation?.assignee_id;
+export const isConversationUnassigned = message => !getAssignee(message);
+export const isConversationAssignedToMe = (message, currentUserId) =>
+  getAssignee(message) === currentUserId;
+export const isMessageFromCurrentUser = (message, currentUserId) =>
+  message?.sender?.id === currentUserId;
diff --git a/app/javascript/dashboard/helper/AudioAlerts/AudioNotificationStore.js b/app/javascript/dashboard/helper/AudioAlerts/AudioNotificationStore.js
new file mode 100644
index 000000000..233516b99
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/AudioNotificationStore.js
@@ -0,0 +1,37 @@
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions';
+import { getUserPermissions } from 'dashboard/helper/permissionsHelper';
+
+class AudioNotificationStore {
+  constructor(store) {
+    this.store = store;
+  }
+
+  hasUnreadConversation = () => {
+    const mineConversation = this.store.getters.getMineChats({
+      assigneeType: 'me',
+      status: 'open',
+    });
+
+    return mineConversation.some(conv => conv.unread_count > 0);
+  };
+
+  isMessageFromCurrentConversation = message => {
+    return this.store.getters.getSelectedChat?.id === message.conversation_id;
+  };
+
+  hasConversationPermission = user => {
+    const currentAccountId = this.store.getters.getCurrentAccountId;
+    // Get the user permissions for the current account
+    const userPermissions = getUserPermissions(user, currentAccountId);
+    // Check if the user has the required permissions
+    const hasRequiredPermission = [...ROLES, ...CONVERSATION_PERMISSIONS].some(
+      permission => userPermissions.includes(permission)
+    );
+    return hasRequiredPermission;
+  };
+}
+
+export default AudioNotificationStore;
diff --git a/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js b/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
index 26417bcad..ca823fc31 100644
--- a/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
+++ b/app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js
@@ -1,92 +1,125 @@
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { showBadgeOnFavicon } from './faviconHelper';
 import { initFaviconSwitcher } from './faviconHelper';
+
+import { EVENT_TYPES } from 'dashboard/routes/dashboard/settings/profile/constants.js';
+import GlobalStore from 'dashboard/store';
+import AudioNotificationStore from './AudioNotificationStore';
 import {
-  getAlertAudio,
-  initOnEvents,
-} from 'shared/helpers/AudioNotificationHelper';
-import {
-  ROLES,
-  CONVERSATION_PERMISSIONS,
-} from 'dashboard/constants/permissions.js';
-import { getUserPermissions } from 'dashboard/helper/permissionsHelper.js';
+  isConversationAssignedToMe,
+  isConversationUnassigned,
+  isMessageFromCurrentUser,
+} from './AudioMessageHelper';
+import WindowVisibilityHelper from './WindowVisibilityHelper';
+import { useAlert } from 'dashboard/composables';
 
 const NOTIFICATION_TIME = 30000;
+const ALERT_DURATION = 10000;
+const ALERT_PATH_PREFIX = '/audio/dashboard/';
+const DEFAULT_TONE = 'ding';
+const DEFAULT_ALERT_TYPE = ['none'];
 
-class DashboardAudioNotificationHelper {
-  constructor() {
-    this.recurringNotificationTimer = null;
-    this.audioAlertType = 'none';
-    this.playAlertOnlyWhenHidden = true;
-    this.alertIfUnreadConversationExist = false;
-    this.currentUser = null;
-    this.currentUserId = null;
-    this.audioAlertTone = 'ding';
+export class DashboardAudioNotificationHelper {
+  constructor(store) {
+    if (!store) {
+      throw new Error('store is required');
+    }
+    this.store = new AudioNotificationStore(store);
 
-    this.onAudioListenEvent = async () => {
-      try {
-        await getAlertAudio('', {
-          type: 'dashboard',
-          alertTone: this.audioAlertTone,
-        });
-        initOnEvents.forEach(event => {
-          document.removeEventListener(event, this.onAudioListenEvent, false);
-        });
-        this.playAudioEvery30Seconds();
-      } catch (error) {
-        // Ignore audio fetch errors
-      }
+    this.notificationConfig = {
+      audioAlertType: DEFAULT_ALERT_TYPE,
+      playAlertOnlyWhenHidden: true,
+      alertIfUnreadConversationExist: false,
     };
+
+    this.recurringNotificationTimer = null;
+
+    this.audioConfig = {
+      audio: null,
+      tone: DEFAULT_TONE,
+      hasSentSoundPermissionsRequest: false,
+    };
+
+    this.currentUser = null;
   }
 
-  setInstanceValues = ({
+  intializeAudio = () => {
+    const resourceUrl = `${ALERT_PATH_PREFIX}${this.audioConfig.tone}.mp3`;
+    this.audioConfig.audio = new Audio(resourceUrl);
+    return this.audioConfig.audio.load();
+  };
+
+  playAudioAlert = async () => {
+    try {
+      await this.audioConfig.audio.play();
+    } catch (error) {
+      if (
+        error.name === 'NotAllowedError' &&
+        !this.hasSentSoundPermissionsRequest
+      ) {
+        this.hasSentSoundPermissionsRequest = true;
+        useAlert(
+          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.SOUND_PERMISSION_ERROR',
+          { usei18n: true, duration: ALERT_DURATION }
+        );
+      }
+    }
+  };
+
+  set = ({
     currentUser,
     alwaysPlayAudioAlert,
     alertIfUnreadConversationExist,
-    audioAlertType,
-    audioAlertTone,
+    audioAlertType = DEFAULT_ALERT_TYPE,
+    audioAlertTone = DEFAULT_TONE,
   }) => {
-    this.audioAlertType = audioAlertType;
-    this.playAlertOnlyWhenHidden = !alwaysPlayAudioAlert;
-    this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
+    this.notificationConfig = {
+      ...this.notificationConfig,
+      audioAlertType: audioAlertType.split('+').filter(Boolean),
+      playAlertOnlyWhenHidden: !alwaysPlayAudioAlert,
+      alertIfUnreadConversationExist: alertIfUnreadConversationExist,
+    };
+
     this.currentUser = currentUser;
-    this.currentUserId = currentUser.id;
-    this.audioAlertTone = audioAlertTone;
-    initOnEvents.forEach(e => {
-      document.addEventListener(e, this.onAudioListenEvent, {
-        once: true,
-      });
-    });
+
+    const previousAudioTone = this.audioConfig.tone;
+    this.audioConfig = {
+      ...this.audioConfig,
+      tone: audioAlertTone,
+    };
+
+    if (previousAudioTone !== audioAlertTone) {
+      this.intializeAudio();
+    }
+
     initFaviconSwitcher();
+    this.clearRecurringTimer();
+    this.playAudioEvery30Seconds();
+  };
+
+  shouldPlayAlert = () => {
+    if (this.notificationConfig.playAlertOnlyWhenHidden) {
+      return !WindowVisibilityHelper.isWindowVisible();
+    }
+    return true;
   };
 
   executeRecurringNotification = () => {
-    if (!window.WOOT_STORE) {
-      this.clearSetTimeout();
-      return;
-    }
-
-    const mineConversation = window.WOOT_STORE.getters.getMineChats({
-      assigneeType: 'me',
-      status: 'open',
-    });
-    const hasUnreadConversation = mineConversation.some(conv => {
-      return conv.unread_count > 0;
-    });
-
-    const shouldPlayAlert = !this.playAlertOnlyWhenHidden || document.hidden;
-
-    if (hasUnreadConversation && shouldPlayAlert) {
-      window.playAudioAlert();
+    if (this.store.hasUnreadConversation() && this.shouldPlayAlert()) {
+      this.playAudioAlert();
       showBadgeOnFavicon();
     }
-    this.clearSetTimeout();
+    this.resetRecurringTimer();
   };
 
-  clearSetTimeout = () => {
+  clearRecurringTimer = () => {
     if (this.recurringNotificationTimer) {
       clearTimeout(this.recurringNotificationTimer);
     }
+  };
+
+  resetRecurringTimer = () => {
+    this.clearRecurringTimer();
     this.recurringNotificationTimer = setTimeout(
       this.executeRecurringNotification,
       NOTIFICATION_TIME
@@ -94,67 +127,57 @@ class DashboardAudioNotificationHelper {
   };
 
   playAudioEvery30Seconds = () => {
+    const { audioAlertType, alertIfUnreadConversationExist } =
+      this.notificationConfig;
+
     //  Audio alert is disabled dismiss the timer
-    if (this.audioAlertType === 'none') {
-      return;
-    }
-    // If assigned conversation flag is disabled dismiss the timer
-    if (!this.alertIfUnreadConversationExist) {
-      return;
-    }
+    if (audioAlertType.includes('none')) return;
 
-    this.clearSetTimeout();
-  };
+    // If unread conversation flag is disabled, dismiss the timer
+    if (!alertIfUnreadConversationExist) return;
 
-  isConversationAssignedToCurrentUser = message => {
-    const conversationAssigneeId = message?.conversation?.assignee_id;
-    return conversationAssigneeId === this.currentUserId;
-  };
-
-  // eslint-disable-next-line class-methods-use-this
-  isMessageFromCurrentConversation = message => {
-    return (
-      window.WOOT_STORE.getters.getSelectedChat?.id === message.conversation_id
-    );
-  };
-
-  isMessageFromCurrentUser = message => {
-    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;
+    this.resetRecurringTimer();
   };
 
   shouldNotifyOnMessage = message => {
-    if (this.audioAlertType === 'mine') {
-      return this.isConversationAssignedToCurrentUser(message);
+    const { audioAlertType } = this.notificationConfig;
+    if (audioAlertType.includes('none')) return false;
+    if (audioAlertType.includes('all')) return true;
+
+    const assignedToMe = isConversationAssignedToMe(
+      message,
+      this.currentUser.id
+    );
+    const isUnassigned = isConversationUnassigned(message);
+
+    const shouldPlayAudio = [];
+
+    if (audioAlertType.includes(EVENT_TYPES.ASSIGNED)) {
+      shouldPlayAudio.push(assignedToMe);
     }
-    return this.audioAlertType === 'all';
+    if (audioAlertType.includes(EVENT_TYPES.UNASSIGNED)) {
+      shouldPlayAudio.push(isUnassigned);
+    }
+    if (audioAlertType.includes(EVENT_TYPES.NOTME)) {
+      shouldPlayAudio.push(!isUnassigned && !assignedToMe);
+    }
+
+    return shouldPlayAudio.some(Boolean);
   };
 
   onNewMessage = message => {
     // If the user does not have the permission to view the conversation, then dismiss the alert
-    if (!this.isUserHasConversationPermission()) {
+    // FIX ME: There shouldn't be a new message if the user has no access to the conversation.
+    if (!this.store.hasConversationPermission(this.currentUser)) {
       return;
     }
 
-    // If the message is sent by the current user or the
-    // correct notification is not enabled, then dismiss the alert
-    if (
-      this.isMessageFromCurrentUser(message) ||
-      !this.shouldNotifyOnMessage(message)
-    ) {
+    // If the message is sent by the current user then dismiss the alert
+    if (isMessageFromCurrentUser(message, this.currentUser.id)) {
+      return;
+    }
+
+    if (!this.shouldNotifyOnMessage(message)) {
       return;
     }
 
@@ -164,21 +187,22 @@ class DashboardAudioNotificationHelper {
       return;
     }
 
-    // If the user looking at the conversation, then dismiss the alert
-    if (this.isMessageFromCurrentConversation(message) && !document.hidden) {
-      return;
-    }
-    // If the user has disabled alerts when active on the dashboard, the dismiss the alert
-    if (this.playAlertOnlyWhenHidden && !document.hidden) {
-      return;
+    if (WindowVisibilityHelper.isWindowVisible()) {
+      // If the user looking at the conversation, then dismiss the alert
+      if (this.store.isMessageFromCurrentConversation(message)) {
+        return;
+      }
+
+      // If the user has disabled alerts when active on the dashboard, the dismiss the alert
+      if (this.notificationConfig.playAlertOnlyWhenHidden) {
+        return;
+      }
     }
 
-    window.playAudioAlert();
+    this.playAudioAlert();
     showBadgeOnFavicon();
     this.playAudioEvery30Seconds();
   };
 }
 
-const notifHelper = new DashboardAudioNotificationHelper();
-window.notifHelper = notifHelper;
-export default notifHelper;
+export default new DashboardAudioNotificationHelper(GlobalStore);
diff --git a/app/javascript/dashboard/helper/AudioAlerts/WindowVisibilityHelper.js b/app/javascript/dashboard/helper/AudioAlerts/WindowVisibilityHelper.js
new file mode 100644
index 000000000..23772c9bd
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/WindowVisibilityHelper.js
@@ -0,0 +1,21 @@
+export class WindowVisibilityHelper {
+  constructor() {
+    this.isVisible = true;
+    this.initializeEvent();
+  }
+
+  initializeEvent = () => {
+    window.addEventListener('blur', () => {
+      this.isVisible = false;
+    });
+    window.addEventListener('focus', () => {
+      this.isVisible = true;
+    });
+  };
+
+  isWindowVisible() {
+    return !document.hidden && this.isVisible;
+  }
+}
+
+export default new WindowVisibilityHelper();
diff --git a/app/javascript/dashboard/helper/AudioAlerts/specs/AudioMessageHelper.spec.js b/app/javascript/dashboard/helper/AudioAlerts/specs/AudioMessageHelper.spec.js
new file mode 100644
index 000000000..9751cf729
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/specs/AudioMessageHelper.spec.js
@@ -0,0 +1,79 @@
+import {
+  getAssignee,
+  isConversationUnassigned,
+  isConversationAssignedToMe,
+  isMessageFromCurrentUser,
+} from '../AudioMessageHelper';
+
+describe('getAssignee', () => {
+  it('should return assignee_id when present', () => {
+    const message = { conversation: { assignee_id: 1 } };
+    expect(getAssignee(message)).toBe(1);
+  });
+
+  it('should return undefined when no assignee_id', () => {
+    const message = { conversation: null };
+    expect(getAssignee(message)).toBeUndefined();
+  });
+
+  it('should handle null message', () => {
+    expect(getAssignee(null)).toBeUndefined();
+  });
+});
+
+describe('isConversationUnassigned', () => {
+  it('should return true when no assignee', () => {
+    const message = { conversation: { assignee_id: null } };
+    expect(isConversationUnassigned(message)).toBe(true);
+  });
+
+  it('should return false when has assignee', () => {
+    const message = { conversation: { assignee_id: 1 } };
+    expect(isConversationUnassigned(message)).toBe(false);
+  });
+
+  it('should handle null message', () => {
+    expect(isConversationUnassigned(null)).toBe(true);
+  });
+});
+
+describe('isConversationAssignedToMe', () => {
+  const currentUserId = 1;
+
+  it('should return true when assigned to current user', () => {
+    const message = { conversation: { assignee_id: 1 } };
+    expect(isConversationAssignedToMe(message, currentUserId)).toBe(true);
+  });
+
+  it('should return false when assigned to different user', () => {
+    const message = { conversation: { assignee_id: 2 } };
+    expect(isConversationAssignedToMe(message, currentUserId)).toBe(false);
+  });
+
+  it('should return false when unassigned', () => {
+    const message = { conversation: { assignee_id: null } };
+    expect(isConversationAssignedToMe(message, currentUserId)).toBe(false);
+  });
+
+  it('should handle null message', () => {
+    expect(isConversationAssignedToMe(null, currentUserId)).toBe(false);
+  });
+});
+
+describe('isMessageFromCurrentUser', () => {
+  const currentUserId = 1;
+
+  it('should return true when message is from current user', () => {
+    const message = { sender: { id: 1 } };
+    expect(isMessageFromCurrentUser(message, currentUserId)).toBe(true);
+  });
+
+  it('should return false when message is from different user', () => {
+    const message = { sender: { id: 2 } };
+    expect(isMessageFromCurrentUser(message, currentUserId)).toBe(false);
+  });
+
+  it('should handle null message', () => {
+    expect(isMessageFromCurrentUser(null, currentUserId)).toBe(false);
+  });
+});
diff --git a/app/javascript/dashboard/helper/AudioAlerts/specs/AudioNotificationStore.spec.js b/app/javascript/dashboard/helper/AudioAlerts/specs/AudioNotificationStore.spec.js
new file mode 100644
index 000000000..5e8971c2d
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/specs/AudioNotificationStore.spec.js
@@ -0,0 +1,131 @@
+import AudioNotificationStore from '../AudioNotificationStore';
+import {
+  ROLES,
+  CONVERSATION_PERMISSIONS,
+} from 'dashboard/constants/permissions';
+import { getUserPermissions } from 'dashboard/helper/permissionsHelper';
+vi.mock('dashboard/helper/permissionsHelper', () => ({
+  getUserPermissions: vi.fn(),
+}));
+
+describe('AudioNotificationStore', () => {
+  let store;
+  let audioNotificationStore;
+
+  beforeEach(() => {
+    store = {
+      getters: {
+        getMineChats: vi.fn(),
+        getSelectedChat: null,
+        getCurrentAccountId: 1,
+      },
+    };
+    audioNotificationStore = new AudioNotificationStore(store);
+  });
+
+  describe('hasUnreadConversation', () => {
+    it('should return true when there are unread conversations', () => {
+      store.getters.getMineChats.mockReturnValue([
+        { id: 1, unread_count: 2 },
+        { id: 2, unread_count: 0 },
+      ]);
+
+      expect(audioNotificationStore.hasUnreadConversation()).toBe(true);
+    });
+
+    it('should return false when there are no unread conversations', () => {
+      store.getters.getMineChats.mockReturnValue([
+        { id: 1, unread_count: 0 },
+        { id: 2, unread_count: 0 },
+      ]);
+
+      expect(audioNotificationStore.hasUnreadConversation()).toBe(false);
+    });
+
+    it('should return false when there are no conversations', () => {
+      store.getters.getMineChats.mockReturnValue([]);
+
+      expect(audioNotificationStore.hasUnreadConversation()).toBe(false);
+    });
+
+    it('should call getMineChats with correct parameters', () => {
+      store.getters.getMineChats.mockReturnValue([]);
+      audioNotificationStore.hasUnreadConversation();
+
+      expect(store.getters.getMineChats).toHaveBeenCalledWith({
+        assigneeType: 'me',
+        status: 'open',
+      });
+    });
+  });
+
+  describe('isMessageFromCurrentConversation', () => {
+    it('should return true when message is from selected chat', () => {
+      store.getters.getSelectedChat = { id: 6179 };
+      const message = { conversation_id: 6179 };
+
+      expect(
+        audioNotificationStore.isMessageFromCurrentConversation(message)
+      ).toBe(true);
+    });
+
+    it('should return false when message is from different chat', () => {
+      store.getters.getSelectedChat = { id: 6179 };
+      const message = { conversation_id: 1337 };
+
+      expect(
+        audioNotificationStore.isMessageFromCurrentConversation(message)
+      ).toBe(false);
+    });
+
+    it('should return false when no chat is selected', () => {
+      store.getters.getSelectedChat = null;
+      const message = { conversation_id: 6179 };
+
+      expect(
+        audioNotificationStore.isMessageFromCurrentConversation(message)
+      ).toBe(false);
+    });
+  });
+
+  describe('hasConversationPermission', () => {
+    const mockUser = { id: 'user123' };
+
+    beforeEach(() => {
+      getUserPermissions.mockReset();
+    });
+
+    it('should return true when user has a required role', () => {
+      getUserPermissions.mockReturnValue([ROLES[0]]);
+
+      expect(audioNotificationStore.hasConversationPermission(mockUser)).toBe(
+        true
+      );
+      expect(getUserPermissions).toHaveBeenCalledWith(mockUser, 1);
+    });
+
+    it('should return true when user has a conversation permission', () => {
+      getUserPermissions.mockReturnValue([CONVERSATION_PERMISSIONS[0]]);
+
+      expect(audioNotificationStore.hasConversationPermission(mockUser)).toBe(
+        true
+      );
+    });
+
+    it('should return false when user has no required permissions', () => {
+      getUserPermissions.mockReturnValue(['some-other-permission']);
+
+      expect(audioNotificationStore.hasConversationPermission(mockUser)).toBe(
+        false
+      );
+    });
+
+    it('should return false when user has no permissions', () => {
+      getUserPermissions.mockReturnValue([]);
+
+      expect(audioNotificationStore.hasConversationPermission(mockUser)).toBe(
+        false
+      );
+    });
+  });
+});
diff --git a/app/javascript/dashboard/helper/AudioAlerts/specs/WindowVisibilityHelper.spec.js b/app/javascript/dashboard/helper/AudioAlerts/specs/WindowVisibilityHelper.spec.js
new file mode 100644
index 000000000..6440cc0e0
--- /dev/null
+++ b/app/javascript/dashboard/helper/AudioAlerts/specs/WindowVisibilityHelper.spec.js
@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { WindowVisibilityHelper } from '../WindowVisibilityHelper';
+
+describe('WindowVisibilityHelper', () => {
+  let blurCallback;
+  let focusCallback;
+  let windowEventListeners;
+  let documentHiddenValue = false;
+
+  beforeEach(() => {
+    vi.resetModules();
+    vi.resetAllMocks();
+
+    // Reset event listeners before each test
+    windowEventListeners = {};
+
+    // Mock window.addEventListener
+    window.addEventListener = vi.fn((event, callback) => {
+      windowEventListeners[event] = callback;
+      if (event === 'blur') blurCallback = callback;
+      if (event === 'focus') focusCallback = callback;
+    });
+
+    // Mock document.hidden with a getter that returns our controlled value
+    Object.defineProperty(document, 'hidden', {
+      configurable: true,
+      get: () => documentHiddenValue,
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    documentHiddenValue = false;
+  });
+
+  describe('initialization', () => {
+    it('should add blur and focus event listeners', () => {
+      const helper = new WindowVisibilityHelper();
+      expect(helper.isVisible).toBe(true);
+
+      expect(window.addEventListener).toHaveBeenCalledTimes(2);
+      expect(window.addEventListener).toHaveBeenCalledWith(
+        'blur',
+        expect.any(Function)
+      );
+      expect(window.addEventListener).toHaveBeenCalledWith(
+        'focus',
+        expect.any(Function)
+      );
+    });
+  });
+
+  describe('window events', () => {
+    it('should set isVisible to false on blur', () => {
+      const helper = new WindowVisibilityHelper();
+      blurCallback();
+      expect(helper.isVisible).toBe(false);
+    });
+
+    it('should set isVisible to true on focus', () => {
+      const helper = new WindowVisibilityHelper();
+      blurCallback(); // First blur the window
+      focusCallback(); // Then focus it
+      expect(helper.isVisible).toBe(true);
+    });
+
+    it('should handle multiple blur/focus events', () => {
+      const helper = new WindowVisibilityHelper();
+
+      blurCallback();
+      expect(helper.isVisible).toBe(false);
+
+      focusCallback();
+      expect(helper.isVisible).toBe(true);
+
+      blurCallback();
+      expect(helper.isVisible).toBe(false);
+    });
+  });
+
+  describe('isWindowVisible', () => {
+    it('should return true when document is visible and window is focused', () => {
+      const helper = new WindowVisibilityHelper();
+      documentHiddenValue = false;
+      helper.isVisible = true;
+
+      expect(helper.isWindowVisible()).toBe(true);
+    });
+
+    it('should return false when document is hidden', () => {
+      const helper = new WindowVisibilityHelper();
+      documentHiddenValue = true;
+      helper.isVisible = true;
+
+      expect(helper.isWindowVisible()).toBe(false);
+    });
+
+    it('should return false when window is not focused', () => {
+      const helper = new WindowVisibilityHelper();
+      documentHiddenValue = false;
+      helper.isVisible = false;
+
+      expect(helper.isWindowVisible()).toBe(false);
+    });
+
+    it('should return false when both document is hidden and window is not focused', () => {
+      const helper = new WindowVisibilityHelper();
+      documentHiddenValue = true;
+      helper.isVisible = false;
+
+      expect(helper.isWindowVisible()).toBe(false);
+    });
+  });
+});
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 6f318218b..b608f4110 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -11,7 +11,7 @@ export const INBOX_TYPES = {
   SMS: 'Channel::Sms',
 };
 
-const INBOX_ICON_MAP = {
+const INBOX_ICON_MAP_FILL = {
   [INBOX_TYPES.WEB]: 'i-ri-global-fill',
   [INBOX_TYPES.FB]: 'i-ri-messenger-fill',
   [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-fill',
@@ -22,7 +22,20 @@ const INBOX_ICON_MAP = {
   [INBOX_TYPES.LINE]: 'i-ri-line-fill',
 };
 
-const DEFAULT_ICON = 'i-ri-chat-1-fill';
+const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
+
+const INBOX_ICON_MAP_LINE = {
+  [INBOX_TYPES.WEB]: 'i-ri-global-line',
+  [INBOX_TYPES.FB]: 'i-ri-messenger-line',
+  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-line',
+  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-line',
+  [INBOX_TYPES.API]: 'i-ri-cloudy-line',
+  [INBOX_TYPES.EMAIL]: 'i-ri-mail-line',
+  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-line',
+  [INBOX_TYPES.LINE]: 'i-ri-line-line',
+};
+
+const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
 
 export const getInboxSource = (type, phoneNumber, inbox) => {
   switch (type) {
@@ -110,15 +123,18 @@ export const getInboxClassByType = (type, phoneNumber) => {
   }
 };
 
-export const getInboxIconByType = (type, phoneNumber) => {
+export const getInboxIconByType = (type, phoneNumber, variant = 'fill') => {
+  const iconMap =
+    variant === 'fill' ? INBOX_ICON_MAP_FILL : INBOX_ICON_MAP_LINE;
+  const defaultIcon =
+    variant === 'fill' ? DEFAULT_ICON_FILL : DEFAULT_ICON_LINE;
+
   // Special case for Twilio (whatsapp and sms)
-  if (type === INBOX_TYPES.TWILIO) {
-    return phoneNumber?.startsWith('whatsapp')
-      ? 'i-ri-whatsapp-fill'
-      : 'i-ri-chat-1-fill';
+  if (type === INBOX_TYPES.TWILIO && phoneNumber?.startsWith('whatsapp')) {
+    return iconMap[INBOX_TYPES.WHATSAPP];
   }
 
-  return INBOX_ICON_MAP[type] ?? DEFAULT_ICON;
+  return iconMap[type] ?? defaultIcon;
 };
 
 export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
diff --git a/app/javascript/dashboard/helper/scriptHelpers.js b/app/javascript/dashboard/helper/scriptHelpers.js
index dd007d0db..55ad6eb13 100644
--- a/app/javascript/dashboard/helper/scriptHelpers.js
+++ b/app/javascript/dashboard/helper/scriptHelpers.js
@@ -1,20 +1,19 @@
+import {
+  ANALYTICS_IDENTITY,
+  CHATWOOT_RESET,
+  CHATWOOT_SET_USER,
+} from '../constants/appEvents';
 import AnalyticsHelper from './AnalyticsHelper';
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
 import { emitter } from 'shared/helpers/mitt';
 
-export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
-export const CHATWOOT_RESET = 'CHATWOOT_RESET';
-
-export const ANALYTICS_IDENTITY = 'ANALYTICS_IDENTITY';
-export const ANALYTICS_RESET = 'ANALYTICS_RESET';
-
 export const initializeAnalyticsEvents = () => {
   emitter.on(ANALYTICS_IDENTITY, ({ user }) => {
     AnalyticsHelper.identify(user);
   });
 };
 
-const initializeAudioAlerts = user => {
+export const initializeAudioAlerts = user => {
   const { ui_settings: uiSettings } = user || {};
   const {
     always_play_audio_alert: alwaysPlayAudioAlert,
@@ -25,7 +24,7 @@ const initializeAudioAlerts = user => {
     // entire payload for the user during the signup process.
   } = uiSettings || {};
 
-  DashboardAudioNotificationHelper.setInstanceValues({
+  DashboardAudioNotificationHelper.set({
     currentUser: user,
     audioAlertType: audioAlertType || 'none',
     audioAlertTone: audioAlertTone || 'ding',
diff --git a/app/javascript/dashboard/helper/specs/inbox.spec.js b/app/javascript/dashboard/helper/specs/inbox.spec.js
index 621c131f2..0d5625603 100644
--- a/app/javascript/dashboard/helper/specs/inbox.spec.js
+++ b/app/javascript/dashboard/helper/specs/inbox.spec.js
@@ -41,70 +41,112 @@ describe('#Inbox Helpers', () => {
   });
 
   describe('getInboxIconByType', () => {
-    it('returns correct icon for web widget', () => {
-      expect(getInboxIconByType(INBOX_TYPES.WEB)).toBe('i-ri-global-fill');
+    describe('fill variant (default)', () => {
+      it('returns correct icon for web widget', () => {
+        expect(getInboxIconByType(INBOX_TYPES.WEB)).toBe('i-ri-global-fill');
+      });
+
+      it('returns correct icon for Facebook', () => {
+        expect(getInboxIconByType(INBOX_TYPES.FB)).toBe('i-ri-messenger-fill');
+      });
+
+      it('returns correct icon for Twitter', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TWITTER)).toBe(
+          'i-ri-twitter-x-fill'
+        );
+      });
+
+      it('returns correct icon for WhatsApp', () => {
+        expect(getInboxIconByType(INBOX_TYPES.WHATSAPP)).toBe(
+          'i-ri-whatsapp-fill'
+        );
+      });
+
+      it('returns correct icon for API', () => {
+        expect(getInboxIconByType(INBOX_TYPES.API)).toBe('i-ri-cloudy-fill');
+      });
+
+      it('returns correct icon for Email', () => {
+        expect(getInboxIconByType(INBOX_TYPES.EMAIL)).toBe('i-ri-mail-fill');
+      });
+
+      it('returns correct icon for Telegram', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TELEGRAM)).toBe(
+          'i-ri-telegram-fill'
+        );
+      });
+
+      it('returns correct icon for Line', () => {
+        expect(getInboxIconByType(INBOX_TYPES.LINE)).toBe('i-ri-line-fill');
+      });
+
+      it('returns default icon for unknown type', () => {
+        expect(getInboxIconByType('UNKNOWN_TYPE')).toBe('i-ri-chat-1-fill');
+      });
+
+      it('returns default icon for undefined type', () => {
+        expect(getInboxIconByType(undefined)).toBe('i-ri-chat-1-fill');
+      });
     });
 
-    it('returns correct icon for Facebook', () => {
-      expect(getInboxIconByType(INBOX_TYPES.FB)).toBe('i-ri-messenger-fill');
-    });
+    describe('line variant', () => {
+      it('returns correct line icon for web widget', () => {
+        expect(getInboxIconByType(INBOX_TYPES.WEB, null, 'line')).toBe(
+          'i-ri-global-line'
+        );
+      });
 
-    it('returns correct icon for Twitter', () => {
-      expect(getInboxIconByType(INBOX_TYPES.TWITTER)).toBe(
-        'i-ri-twitter-x-fill'
-      );
+      it('returns correct line icon for Facebook', () => {
+        expect(getInboxIconByType(INBOX_TYPES.FB, null, 'line')).toBe(
+          'i-ri-messenger-line'
+        );
+      });
+
+      it('returns correct line icon for unknown type', () => {
+        expect(getInboxIconByType('UNKNOWN_TYPE', null, 'line')).toBe(
+          'i-ri-chat-1-line'
+        );
+      });
     });
 
     describe('Twilio cases', () => {
-      it('returns WhatsApp icon for Twilio WhatsApp number', () => {
-        expect(
-          getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
-        ).toBe('i-ri-whatsapp-fill');
+      describe('fill variant', () => {
+        it('returns WhatsApp icon for Twilio WhatsApp number', () => {
+          expect(
+            getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
+          ).toBe('i-ri-whatsapp-fill');
+        });
+
+        it('returns SMS icon for regular Twilio number', () => {
+          expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
+            'i-ri-chat-1-fill'
+          );
+        });
+
+        it('returns SMS icon when phone number is undefined', () => {
+          expect(getInboxIconByType(INBOX_TYPES.TWILIO, undefined)).toBe(
+            'i-ri-chat-1-fill'
+          );
+        });
       });
 
-      it('returns SMS icon for regular Twilio number', () => {
-        expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
-          'i-ri-chat-1-fill'
-        );
+      describe('line variant', () => {
+        it('returns WhatsApp line icon for Twilio WhatsApp number', () => {
+          expect(
+            getInboxIconByType(
+              INBOX_TYPES.TWILIO,
+              'whatsapp:+1234567890',
+              'line'
+            )
+          ).toBe('i-ri-whatsapp-line');
+        });
+
+        it('returns SMS line icon for regular Twilio number', () => {
+          expect(
+            getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890', 'line')
+          ).toBe('i-ri-chat-1-line');
+        });
       });
-
-      it('returns SMS icon when phone number is undefined', () => {
-        expect(getInboxIconByType(INBOX_TYPES.TWILIO, undefined)).toBe(
-          'i-ri-chat-1-fill'
-        );
-      });
-    });
-
-    it('returns correct icon for WhatsApp', () => {
-      expect(getInboxIconByType(INBOX_TYPES.WHATSAPP)).toBe(
-        'i-ri-whatsapp-fill'
-      );
-    });
-
-    it('returns correct icon for API', () => {
-      expect(getInboxIconByType(INBOX_TYPES.API)).toBe('i-ri-cloudy-fill');
-    });
-
-    it('returns correct icon for Email', () => {
-      expect(getInboxIconByType(INBOX_TYPES.EMAIL)).toBe('i-ri-mail-fill');
-    });
-
-    it('returns correct icon for Telegram', () => {
-      expect(getInboxIconByType(INBOX_TYPES.TELEGRAM)).toBe(
-        'i-ri-telegram-fill'
-      );
-    });
-
-    it('returns correct icon for Line', () => {
-      expect(getInboxIconByType(INBOX_TYPES.LINE)).toBe('i-ri-line-fill');
-    });
-
-    it('returns default icon for unknown type', () => {
-      expect(getInboxIconByType('UNKNOWN_TYPE')).toBe('i-ri-chat-1-fill');
-    });
-
-    it('returns default icon for undefined type', () => {
-      expect(getInboxIconByType(undefined)).toBe('i-ri-chat-1-fill');
     });
   });
 
diff --git a/app/javascript/dashboard/helper/specs/validations.spec.js b/app/javascript/dashboard/helper/specs/validations.spec.js
index 57016cfdc..e697fbffd 100644
--- a/app/javascript/dashboard/helper/specs/validations.spec.js
+++ b/app/javascript/dashboard/helper/specs/validations.spec.js
@@ -1,46 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import {
-  validateConversationOrContactFilters,
-  validateAutomation,
-} from '../validations';
-
-describe('validateConversationOrContactFilters', () => {
-  it('should return no errors for valid filters', () => {
-    const validFilters = [
-      { attribute_key: 'name', filter_operator: 'contains', values: 'John' },
-      { attribute_key: 'email', filter_operator: 'is_present' },
-    ];
-    const errors = validateConversationOrContactFilters(validFilters);
-    expect(errors).toEqual({});
-  });
-
-  it('should return errors for invalid filters', () => {
-    const invalidFilters = [
-      { attribute_key: '', filter_operator: 'contains', values: 'John' },
-      { attribute_key: 'email', filter_operator: '' },
-      { attribute_key: 'age', filter_operator: 'equals' },
-    ];
-    const errors = validateConversationOrContactFilters(invalidFilters);
-    expect(errors).toEqual({
-      filter_0: 'ATTRIBUTE_KEY_REQUIRED',
-      filter_1: 'FILTER_OPERATOR_REQUIRED',
-      filter_2: 'VALUE_REQUIRED',
-    });
-  });
-
-  it('should validate days_before operator correctly', () => {
-    const filters = [
-      { attribute_key: 'date', filter_operator: 'days_before', values: '0' },
-      { attribute_key: 'date', filter_operator: 'days_before', values: '999' },
-      { attribute_key: 'date', filter_operator: 'days_before', values: '500' },
-    ];
-    const errors = validateConversationOrContactFilters(filters);
-    expect(errors).toEqual({
-      filter_0: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
-      filter_1: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
-    });
-  });
-});
+import { validateAutomation } from '../validations';
 
 describe('validateAutomation', () => {
   it('should return no errors for a valid automation', () => {
diff --git a/app/javascript/dashboard/helper/validations.js b/app/javascript/dashboard/helper/validations.js
index 352e5397e..58f3faa1a 100644
--- a/app/javascript/dashboard/helper/validations.js
+++ b/app/javascript/dashboard/helper/validations.js
@@ -6,6 +6,24 @@ export const VALUE_MUST_BE_BETWEEN_1_AND_998 =
 export const ACTION_PARAMETERS_REQUIRED = 'ACTION_PARAMETERS_REQUIRED';
 export const ATLEAST_ONE_CONDITION_REQUIRED = 'ATLEAST_ONE_CONDITION_REQUIRED';
 export const ATLEAST_ONE_ACTION_REQUIRED = 'ATLEAST_ONE_ACTION_REQUIRED';
+
+const isEmptyValue = value => {
+  if (!value) {
+    return true;
+  }
+
+  if (Array.isArray(value)) {
+    return !value.length;
+  }
+
+  // We can safely check the type here as both the null value
+  // and the array is ruled out earlier.
+  if (typeof value === 'object') {
+    return !Object.keys(value).length;
+  }
+
+  return false;
+};
 // ------------------------------------------------------------------
 // ------------------------ Filter Validation -----------------------
 // ------------------------------------------------------------------
@@ -20,7 +38,7 @@ export const ATLEAST_ONE_ACTION_REQUIRED = 'ATLEAST_ONE_ACTION_REQUIRED';
  *
  * @returns {string|null} An error message if validation fails, or null if validation passes.
  */
-const validateSingleFilter = filter => {
+export const validateSingleFilter = filter => {
   if (!filter.attribute_key) {
     return ATTRIBUTE_KEY_REQUIRED;
   }
@@ -29,12 +47,11 @@ const validateSingleFilter = filter => {
     return FILTER_OPERATOR_REQUIRED;
   }
 
-  if (
-    filter.filter_operator !== 'is_present' &&
-    filter.filter_operator !== 'is_not_present' &&
-    (!filter.values ||
-      (Array.isArray(filter.values) && filter.values.length === 0))
-  ) {
+  const operatorRequiresValue = !['is_present', 'is_not_present'].includes(
+    filter.filter_operator
+  );
+
+  if (operatorRequiresValue && isEmptyValue(filter.values)) {
     return VALUE_REQUIRED;
   }
 
@@ -48,29 +65,6 @@ const validateSingleFilter = filter => {
   return null;
 };
 
-/**
- * Validates filters for conversations or contacts.
- *
- * @param {Array} filters - An array of filter objects to validate.
- * @param {string} filters[].attribute_key - The key of the attribute to filter on.
- * @param {string} filters[].filter_operator - The operator to use for filtering.
- * @param {string|number} [filters[].values] - The value(s) to filter by (required for most operators).
- *
- * @returns {Object} An object containing any validation errors, keyed by filter index.
- */
-export const validateConversationOrContactFilters = filters => {
-  const errors = {};
-
-  filters.forEach((filter, index) => {
-    const error = validateSingleFilter(filter);
-    if (error) {
-      errors[`filter_${index}`] = error;
-    }
-  });
-
-  return errors;
-};
-
 // ------------------------------------------------------------------
 // ---------------------- Automation Validation ---------------------
 // ------------------------------------------------------------------
diff --git a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
index a382aec2e..a991cb25b 100644
--- a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
@@ -22,14 +22,23 @@
     "OPERATOR_LABELS": {
       "equal_to": "Equal to",
       "not_equal_to": "Not equal to",
-      "contains": "Contains",
       "does_not_contain": "Does not contain",
       "is_present": "Is present",
       "is_not_present": "Is not present",
       "is_greater_than": "Is greater than",
       "is_less_than": "Is lesser than",
       "days_before": "Is x days before",
-      "starts_with": "Starts with"
+      "starts_with": "Starts with",
+      "equalTo": "Equal to",
+      "notEqualTo": "Not equal to",
+      "contains": "Contains",
+      "doesNotContain": "Does not contain",
+      "isPresent": "Is present",
+      "isNotPresent": "Is not present",
+      "isGreaterThan": "Is greater than",
+      "isLessThan": "Is lesser than",
+      "daysBefore": "Is x days before",
+      "startsWith": "Starts with"
     },
     "ATTRIBUTE_LABELS": {
       "TRUE": "True",
@@ -56,7 +65,10 @@
       "LAST_ACTIVITY": "Last activity"
     },
     "ERRORS": {
-      "VALUE_REQUIRED": "Value is required"
+      "VALUE_REQUIRED": "Value is required",
+      "ATTRIBUTE_KEY_REQUIRED": "Attribute key is required",
+      "FILTER_OPERATOR_REQUIRED": "Filter operator is required",
+      "VALUE_MUST_BE_BETWEEN_1_AND_998": "Value must be between 1 and 998"
     },
     "GROUPS": {
       "STANDARD_FILTERS": "Standard filters",
diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json
index 1458bf58a..dd5e1416c 100644
--- a/app/javascript/dashboard/i18n/locale/en/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json
@@ -6,6 +6,7 @@
     "LIST": {
       "404": "There are no active conversations in this group."
     },
+    "FAILED_TO_SEND": "Failed to send",
     "TAB_HEADING": "Conversations",
     "MENTION_HEADING": "Mentions",
     "UNATTENDED_HEADING": "Unattended",
@@ -93,6 +94,9 @@
       "location": {
         "CONTENT": "Location"
       },
+      "ig_reel": {
+        "CONTENT": "Instagram Reel"
+      },
       "fallback": {
         "CONTENT": "has shared a url"
       }
@@ -126,6 +130,7 @@
     "NO_CONTENT": "No content available",
     "HIDE_QUOTED_TEXT": "Hide Quoted Text",
     "SHOW_QUOTED_TEXT": "Show Quoted Text",
-    "MESSAGE_READ": "Read"
+    "MESSAGE_READ": "Read",
+    "SENDING": "Sending"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 69cd57fee..0bbc0c65a 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -5,12 +5,15 @@
   },
   "COMBOBOX": {
     "PLACEHOLDER": "Select an option...",
+    "EMPTY_SEARCH_RESULTS": "No items found for the search term `{searchTerm}`",
     "EMPTY_STATE": "No results found.",
-    "SEARCH_PLACEHOLDER": "Search..."
+    "SEARCH_PLACEHOLDER": "Search...",
+    "MORE": "+{count} more"
   },
   "DROPDOWN_MENU": {
     "SEARCH_PLACEHOLDER": "Search...",
-    "EMPTY_STATE": "No results found."
+    "EMPTY_STATE": "No results found.",
+    "SEARCHING": "Searching..."
   },
   "DIALOG": {
     "BUTTONS": {
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index defc28e67..f26c6ed46 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -57,46 +57,6 @@
     "TITLE": "Edit contact",
     "DESC": "Edit contact details"
   },
-  "CREATE_CONTACT": {
-    "BUTTON_LABEL": "New Contact",
-    "TITLE": "Create new contact",
-    "DESC": "Add basic information details about the contact."
-  },
-  "IMPORT_CONTACTS": {
-    "BUTTON_LABEL": "Import",
-    "TITLE": "Import Contacts",
-    "DESC": "Import contacts through a CSV file.",
-    "DOWNLOAD_LABEL": "Download a sample csv.",
-    "FORM": {
-      "LABEL": "CSV File",
-      "SUBMIT": "Import",
-      "CANCEL": "Cancel"
-    },
-    "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
-    "ERROR_MESSAGE": "There was an error, please try again"
-  },
-  "EXPORT_CONTACTS": {
-    "BUTTON_LABEL": "Export",
-    "TITLE": "Export Contacts",
-    "DESC": "Export contacts to a CSV file.",
-    "SUCCESS_MESSAGE": "Export is in progress. You will be notified on email when the export file is ready to download.",
-    "ERROR_MESSAGE": "There was an error, please try again",
-    "CONFIRM": {
-      "TITLE": "Export Contacts",
-      "MESSAGE": "Are you sure you want to export all contacts?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
-      "YES": "Yes, Export",
-      "NO": "No, Cancel"
-    }
-  },
-  "DELETE_NOTE": {
-    "CONFIRM": {
-      "TITLE": "Confirm Deletion",
-      "MESSAGE": "Are you want sure to delete this note?",
-      "YES": "Yes, Delete it",
-      "NO": "No, Keep it"
-    }
-  },
   "DELETE_CONTACT": {
     "BUTTON_LABEL": "Delete Contact",
     "TITLE": "Delete contact",
@@ -224,79 +184,14 @@
     }
   },
   "CONTACTS_PAGE": {
-    "HEADER": "Contacts",
-    "FIELDS": "Contact fields",
-    "SEARCH_BUTTON": "Search",
-    "SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
-    "FILTER_CONTACTS": "Filter",
-    "FILTER_CONTACTS_SAVE": "Save filter",
-    "FILTER_CONTACTS_DELETE": "Delete filter",
-    "FILTER_CONTACTS_EDIT": "Edit segment",
     "LIST": {
-      "LOADING_MESSAGE": "Loading contacts...",
-      "404": "No contacts matches your search 🔍",
-      "NO_CONTACTS": "There are no available contacts",
       "TABLE_HEADER": {
-        "NAME": "Name",
-        "PHONE_NUMBER": "Phone Number",
-        "CONVERSATIONS": "Conversations",
-        "LAST_ACTIVITY": "Last Activity",
-        "CREATED_AT": "Created At",
-        "COUNTRY": "Country",
-        "CITY": "City",
-        "SOCIAL_PROFILES": "Social Profiles",
-        "COMPANY": "Company",
-        "EMAIL_ADDRESS": "Email Address"
-      },
-      "VIEW_DETAILS": "View details"
-    }
-  },
-  "CONTACT_PROFILE": {
-    "BACK_BUTTON": "Contacts",
-    "LOADING": "Loading contact profile..."
-  },
-  "REMINDER": {
-    "ADD_BUTTON": {
-      "BUTTON": "Add",
-      "TITLE": "Shift + Enter to create a task"
-    },
-    "FOOTER": {
-      "DUE_DATE": "Due date",
-      "LABEL_TITLE": "Set type"
-    }
-  },
-  "NOTES": {
-    "FETCHING_NOTES": "Fetching notes...",
-    "NOT_AVAILABLE": "There are no notes created for this contact",
-    "HEADER": {
-      "TITLE": "Notes"
-    },
-    "LIST": {
-      "LABEL": "added a note"
-    },
-    "ADD": {
-      "BUTTON": "Add",
-      "PLACEHOLDER": "Add a note",
-      "TITLE": "Shift + Enter to create a note"
-    },
-    "CONTENT_HEADER": {
-      "DELETE": "Delete note"
-    }
-  },
-  "EVENTS": {
-    "HEADER": {
-      "TITLE": "Activities"
-    },
-    "BUTTON": {
-      "PILL_BUTTON_NOTES": "notes",
-      "PILL_BUTTON_EVENTS": "events",
-      "PILL_BUTTON_CONVO": "conversations"
+        "SOCIAL_PROFILES": "Social Profiles"
+      }
     }
   },
   "CUSTOM_ATTRIBUTES": {
-    "ADD_BUTTON_TEXT": "Add attributes",
     "BUTTON": "Add custom attribute",
-    "NOT_AVAILABLE": "There are no custom attributes available for this contact.",
     "COPY_SUCCESSFUL": "Copied to clipboard successfully",
     "SHOW_MORE": "Show all attributes",
     "SHOW_LESS": "Show less attributes",
@@ -388,6 +283,119 @@
   },
 
   "CONTACTS_LAYOUT": {
+    "HEADER": {
+      "TITLE": "Contacts",
+      "SEARCH_TITLE": "Search contacts",
+      "SEARCH_PLACEHOLDER": "Search...",
+      "MESSAGE_BUTTON": "Message",
+      "SEND_MESSAGE": "Send message",
+      "BREADCRUMB": {
+        "CONTACTS": "Contacts"
+      },
+      "ACTIONS": {
+        "CONTACT_CREATION": {
+          "ADD_CONTACT": "Add contact",
+          "EXPORT_CONTACT": "Export contacts",
+          "IMPORT_CONTACT": "Import contacts",
+          "SAVE_CONTACT": "Save contact",
+          "EMAIL_ADDRESS_DUPLICATE": "This email address is in use for another contact.",
+          "PHONE_NUMBER_DUPLICATE": "This phone number is in use for another contact.",
+          "SUCCESS_MESSAGE": "Contact saved successfully",
+          "ERROR_MESSAGE": "Unable to save contact. Please try again later."
+        },
+        "IMPORT_CONTACT": {
+          "TITLE": "Import contacts",
+          "DESCRIPTION": "Import contacts through a CSV file.",
+          "DOWNLOAD_LABEL": "Download a sample csv.",
+          "LABEL": "CSV File:",
+          "CHOOSE_FILE": "Choose file",
+          "CHANGE": "Change",
+          "CANCEL": "Cancel",
+          "IMPORT": "Import",
+          "SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
+          "ERROR_MESSAGE": "There was an error, please try again"
+        },
+        "EXPORT_CONTACT": {
+          "TITLE": "Export contacts",
+          "DESCRIPTION": "Quickly export a csv file with comprehensive details of your contacts",
+          "CONFIRM": "Export",
+          "SUCCESS_MESSAGE": "Export is in progress. You will be notified on email when the export file is ready to download.",
+          "ERROR_MESSAGE": "There was an error, please try again"
+        },
+        "SORT_BY": {
+          "LABEL": "Sort by",
+          "OPTIONS": {
+            "NAME": "Name",
+            "EMAIL": "Email",
+            "PHONE_NUMBER": "Phone number",
+            "COMPANY": "Company",
+            "COUNTRY": "Country",
+            "CITY": "City",
+            "LAST_ACTIVITY": "Last activity",
+            "CREATED_AT": "Created at"
+          }
+        },
+        "ORDER": {
+          "LABEL": "Ordering",
+          "OPTIONS": {
+            "ASCENDING": "Ascending",
+            "DESCENDING": "Descending"
+          }
+        },
+        "FILTERS": {
+          "CREATE_SEGMENT": {
+            "TITLE": "Do you want to save this filter?",
+            "CONFIRM": "Save filter",
+            "LABEL": "Name",
+            "PLACEHOLDER": "Enter the name of the filter",
+            "ERROR": "Enter a valid name",
+            "SUCCESS_MESSAGE": "Filter saved successfully",
+            "ERROR_MESSAGE": "Unable to save filter. Please try again later."
+          },
+          "DELETE_SEGMENT": {
+            "TITLE": "Confirm Deletion",
+            "DESCRIPTION": "Are you sure you want to delete this filter?",
+            "CONFIRM": "Yes, Delete",
+            "CANCEL": "No, Cancel",
+            "SUCCESS_MESSAGE": "Filter deleted successfully",
+            "ERROR_MESSAGE": "Unable to delete filter. Please try again later."
+          }
+        }
+      }
+    },
+    "PAGINATION_FOOTER": {
+      "SHOWING": "Showing {startItem} - {endItem} of {totalItems} contacts"
+    },
+    "FILTER": {
+      "NAME": "Name",
+      "EMAIL": "Email",
+      "PHONE_NUMBER": "Phone number",
+      "IDENTIFIER": "Identifier",
+      "COUNTRY": "Country",
+      "CITY": "City",
+      "CREATED_AT": "Created at",
+      "LAST_ACTIVITY": "Last activity",
+      "REFERER_LINK": "Referer link",
+      "BLOCKED": "Blocked",
+      "BLOCKED_TRUE": "True",
+      "BLOCKED_FALSE": "False",
+      "BUTTONS": {
+        "CLEAR_FILTERS": "Clear filters",
+        "UPDATE_SEGMENT": "Update segment",
+        "APPLY_FILTERS": "Apply filters",
+        "ADD_FILTER": "Add filter"
+      },
+      "TITLE": "Filter contacts",
+      "EDIT_SEGMENT": "Edit segment",
+      "SEGMENT": {
+        "LABEL": "Segment name",
+        "INPUT_PLACEHOLDER": "Enter the name of the segment"
+      },
+      "ACTIVE_FILTERS": {
+        "MORE_FILTERS": "+ {count} more filters",
+        "CLEAR_FILTERS": "Clear filters"
+      }
+    },
     "CARD": {
       "OF": "of",
       "VIEW_DETAILS": "View details",
@@ -401,10 +409,12 @@
             "PLACEHOLDER": "Enter the last name"
           },
           "EMAIL_ADDRESS": {
-            "PLACEHOLDER": "Enter the email address"
+            "PLACEHOLDER": "Enter the email address",
+            "DUPLICATE": "This email address is in use for another contact."
           },
           "PHONE_NUMBER": {
-            "PLACEHOLDER": "Enter the phone number"
+            "PLACEHOLDER": "Enter the phone number",
+            "DUPLICATE": "This phone number is in use for another contact."
           },
           "CITY": {
             "PLACEHOLDER": "Enter the city name"
@@ -418,7 +428,10 @@
           "COMPANY_NAME": {
             "PLACEHOLDER": "Enter the company name"
           }
-        }
+        },
+        "UPDATE_BUTTON": "Update contact",
+        "SUCCESS_MESSAGE": "Contact updated successfully",
+        "ERROR_MESSAGE": "Unable to update contact. Please try again later."
       },
       "SOCIAL_MEDIA": {
         "TITLE": "Edit social links",
@@ -441,7 +454,41 @@
         }
       }
     },
+    "DETAILS": {
+      "CREATED_AT": "Created {date}",
+      "LAST_ACTIVITY": "Last active {date}",
+      "DELETE_CONTACT_DESCRIPTION": "Permanently delete this contact. This action is irreversible",
+      "DELETE_CONTACT": "Delete contact",
+      "DELETE_DIALOG": {
+        "TITLE": "Confirm Deletion",
+        "DESCRIPTION": "Are you sure you want to delete this {contactName} contact?",
+        "CONFIRM": "Yes, Delete",
+        "API": {
+          "SUCCESS_MESSAGE": "Contact deleted successfully",
+          "ERROR_MESSAGE": "Could not delete contact. Please try again later."
+        }
+      },
+      "AVATAR": {
+        "UPLOAD": {
+          "ERROR_MESSAGE": "Could not upload avatar. Please try again later.",
+          "SUCCESS_MESSAGE": "Avatar uploaded successfully"
+        },
+        "DELETE": {
+          "SUCCESS_MESSAGE": "Avatar deleted successfully",
+          "ERROR_MESSAGE": "Could not delete avatar. Please try again later."
+        }
+      }
+    },
     "SIDEBAR": {
+      "TABS": {
+        "ATTRIBUTES": "Attributes",
+        "HISTORY": "History",
+        "NOTES": "Notes",
+        "MERGE": "Merge"
+      },
+      "HISTORY": {
+        "EMPTY_STATE": "There are no previous conversations associated to this contact"
+      },
       "ATTRIBUTES": {
         "SEARCH_PLACEHOLDER": "Search for attributes",
         "UNUSED_ATTRIBUTES": "{count} Used attribute | {count} Unused attributes",
@@ -494,6 +541,61 @@
         "SAVE": "Save note",
         "EMPTY_STATE": "There are no notes associated to this contact. You can add a note by typing in the box above."
       }
+    },
+    "EMPTY_STATE": {
+      "TITLE": "No contacts found in this account",
+      "SUBTITLE": "Start adding new contacts by clicking on the button below",
+      "BUTTON_LABEL": "Add contact",
+      "SEARCH_EMPTY_STATE_TITLE": "No contacts matches your search 🔍",
+      "LIST_EMPTY_STATE_TITLE": "No contacts available in this view 📋"
+    }
+  },
+
+  "COMPOSE_NEW_CONVERSATION": {
+    "CONTACT_SEARCH": {
+      "ERROR_MESSAGE": "We couldn’t complete the search. Please try again."
+    },
+    "FORM": {
+      "GO_TO_CONVERSATION": "View",
+      "SUCCESS_MESSAGE": "The message was sent successfully!",
+      "ERROR_MESSAGE": "An error occurred while creating the conversation. Please try again later.",
+      "NO_INBOX_ALERT": "There are no available inboxes to start a conversation with this contact.",
+      "CONTACT_SELECTOR": {
+        "LABEL": "To:",
+        "TAG_INPUT_PLACEHOLDER": "Search for a contact with name, email or phone number",
+        "CONTACT_CREATING": "Creating contact..."
+      },
+      "INBOX_SELECTOR": {
+        "LABEL": "Via:",
+        "BUTTON": "Show inboxes"
+      },
+      "EMAIL_OPTIONS": {
+        "SUBJECT_LABEL": "Subject :",
+        "SUBJECT_PLACEHOLDER": "Enter your email subject here",
+        "CC_LABEL": "Cc:",
+        "CC_PLACEHOLDER": "Search for a contact with their email address",
+        "BCC_LABEL": "Bcc:",
+        "BCC_PLACEHOLDER": "Search for a contact with their email address",
+        "BCC_BUTTON": "Bcc"
+      },
+      "MESSAGE_EDITOR": {
+        "PLACEHOLDER": "Write your message here..."
+      },
+      "WHATSAPP_OPTIONS": {
+        "LABEL": "Select template",
+        "SEARCH_PLACEHOLDER": "Search templates",
+        "EMPTY_STATE": "No templates found",
+        "TEMPLATE_PARSER": {
+          "TEMPLATE_NAME": "WhatsApp template: {templateName}",
+          "VARIABLES": "Variables",
+          "BACK": "Go back",
+          "SEND_MESSAGE": "Send message"
+        }
+      },
+      "ACTION_BUTTONS": {
+        "DISCARD": "Discard",
+        "SEND": "Send ({keyCode})"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 9a6a64d6d..d6dc025e0 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -38,10 +38,16 @@
     "REMOVE_SELECTION": "Remove Selection",
     "DOWNLOAD": "Download",
     "UNKNOWN_FILE_TYPE": "Unknown File",
-    "SAVE_CONTACT": "Save",
+    "SAVE_CONTACT": "Save Contact",
+    "SHARED_ATTACHMENT": {
+      "CONTACT": "{sender} has shared a contact",
+      "LOCATION": "{sender} has shared a location",
+      "FILE": "{sender} has shared a file",
+      "MEETING": "{sender} has started a meeting"
+    },
     "UPLOADING_ATTACHMENTS": "Uploading attachments...",
     "REPLIED_TO_STORY": "Replied to your story",
-    "UNSUPPORTED_MESSAGE": "This message is unsupported.",
+    "UNSUPPORTED_MESSAGE": "This message is unsupported. You can view this message on the Facebook / Instagram app.",
     "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
     "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
     "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
@@ -219,6 +225,10 @@
         "DELETE": "Delete",
         "CANCEL": "Cancel"
       }
+    },
+    "SIDEBAR": {
+      "CONTACT": "Contact",
+      "COPILOT": "Copilot"
     }
   },
   "EMAIL_TRANSCRIPT": {
@@ -310,7 +320,8 @@
     "TO": "To",
     "BCC": "Bcc",
     "CC": "Cc",
-    "SUBJECT": "Subject"
+    "SUBJECT": "Subject",
+    "EXPAND": "Expand email"
   },
   "CONVERSATION_PARTICIPANTS": {
     "SIDEBAR_MENU_TITLE": "Participating",
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index f6e8cbc3a..c96735ab8 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -299,5 +299,14 @@
         "ERROR": "There was an error unlinking the issue, please try again"
       }
     }
+  },
+  "CAPTAIN": {
+    "NAME": "Captain",
+    "COPILOT": {
+      "SEND_MESSAGE": "Send message...",
+      "LOADER": "Captain is thinking",
+      "YOU": "You",
+      "USE": "Use this"
+    }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 9b2c5fde6..5da12cec8 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -61,15 +61,29 @@
         "COPY": "Copy"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
-        "TITLE": "Audio Notifications",
-        "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
+        "TITLE": "Audio Alerts",
+        "NOTE": "Enable audio alerts in dashboard for new messages and conversations.",
+        "PLAY": "Play sound",
         "ALERT_TYPES": {
           "NONE": "None",
           "MINE": "Assigned",
-          "ALL": "All"
+          "ALL": "All",
+          "ASSIGNED": "My assigned conversations",
+          "UNASSIGNED": "Unassigned conversations",
+          "NOTME": "Open conversations assigned to others"
+        },
+        "ALERT_COMBINATIONS": {
+          "NONE": "You haven't selected any options, you won't receive any audio alerts.",
+          "ASSIGNED": "You'll receive alerts for conversations assigned to you.",
+          "UNASSIGNED": "You'll receive alerts for any unassigned conversations.",
+          "NOTME": "You'll receive alerts for conversations assigned to others.",
+          "ASSIGNED+UNASSIGNED": "You'll receive alerts for your assigned conversations and any unattended ones.",
+          "ASSIGNED+NOTME": "You'll receive alerts for conversations assigned to you and to others, but not for unassigned ones.",
+          "NOTME+UNASSIGNED": "You'll receive alerts for unattended conversations and those assigned to others.",
+          "ASSIGNED+NOTME+UNASSIGNED": "You'll receive alerts for all conversations."
         },
         "ALERT_TYPE": {
-          "TITLE": "Alert events for conversations:",
+          "TITLE": "Alert events for conversations",
           "NONE": "None",
           "ASSIGNED": "Assigned Conversations",
           "ALL_CONVERSATIONS": "All Conversations"
@@ -81,7 +95,9 @@
           "TITLE": "Alert conditions:",
           "CONDITION_ONE": "Send audio alerts only if the browser window is not active",
           "CONDITION_TWO": "Send alerts every 30s until all the assigned conversations are read"
-        }
+        },
+        "SOUND_PERMISSION_ERROR": "Autoplay is disabled in your browser. To hear alerts automatically, enable sound permission in your browser settings or interact with the page.",
+        "READ_MORE": "Read more"
       },
       "EMAIL_NOTIFICATIONS_SECTION": {
         "TITLE": "Email Notifications",
@@ -220,6 +236,10 @@
     },
     "FORM_BUBBLE": {
       "SUBMIT": "Submit"
+    },
+    "MEDIA": {
+      "IMAGE_UNAVAILABLE": "This image is no longer available.",
+      "LOADING_FAILED": "Loading failed"
     }
   },
   "CONFIRM_EMAIL": "Verifying...",
diff --git a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue b/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
deleted file mode 100644
index ec32c5381..000000000
--- a/app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script>
-import Modal from 'dashboard/components/Modal.vue';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    isCreating: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['create', 'cancel', 'update:show'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      attributeValue: '',
-      attributeName: '',
-    };
-  },
-  validations: {
-    attributeName: {
-      required,
-      minLength: minLength(2),
-    },
-  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-    attributeNameError() {
-      if (this.v$.attributeName.$error) {
-        return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
-      }
-      return '';
-    },
-  },
-  methods: {
-    addCustomAttribute() {
-      this.$emit('create', {
-        attributeValue: this.attributeValue,
-        attributeName: this.attributeName || '',
-      });
-      this.reset();
-      this.$emit('cancel');
-    },
-    onClose() {
-      this.reset();
-      this.$emit('cancel');
-    },
-    reset() {
-      this.attributeValue = '';
-      this.attributeName = '';
-    },
-  },
-};
-</script>
-
-<template>
-  <Modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
-      :header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
-    />
-    <form class="w-full" @submit.prevent="addCustomAttribute">
-      <woot-input
-        v-model="attributeName"
-        :class="{ error: v$.attributeName.$error }"
-        class="w-full"
-        :error="attributeNameError"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
-        @blur="v$.attributeName.$touch"
-        @input="v$.attributeName.$touch"
-      />
-      <woot-input
-        v-model="attributeValue"
-        class="w-full"
-        :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
-        :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
-      />
-      <div class="flex items-center justify-end gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.attributeName.$invalid || isCreating"
-          :is-loading="isCreating"
-        >
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
-        </woot-button>
-      </div>
-    </form>
-  </Modal>
-</template>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
deleted file mode 100644
index ee8b3074b..000000000
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-
-export default {
-  components: {
-    EmojiOrIcon,
-  },
-  props: {
-    label: { type: String, required: true },
-    icon: { type: String, default: '' },
-    emoji: { type: String, default: '' },
-    value: { type: [String, Number], default: '' },
-    showEdit: { type: Boolean, default: false },
-  },
-  emits: ['update'],
-  data() {
-    return {
-      isEditing: false,
-      editedValue: this.value,
-    };
-  },
-  methods: {
-    focusInput() {
-      this.$refs.inputfield.focus();
-    },
-    onEdit() {
-      this.isEditing = true;
-      this.$nextTick(() => {
-        this.focusInput();
-      });
-    },
-    onUpdate() {
-      this.isEditing = false;
-      this.$emit('update', this.editedValue);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="contact-attribute">
-    <div class="title-wrap">
-      <h4 class="text-sm title">
-        <div class="title--icon">
-          <EmojiOrIcon :icon="icon" :emoji="emoji" />
-        </div>
-        {{ label }}
-      </h4>
-    </div>
-    <div v-show="isEditing">
-      <div class="mb-2 w-full flex items-center">
-        <input
-          ref="inputfield"
-          v-model="editedValue"
-          type="text"
-          class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
-          autofocus="true"
-          @keyup.enter="onUpdate"
-        />
-        <div>
-          <woot-button
-            size="small"
-            icon="ion-checkmark"
-            class="rounded-l-none rtl:rounded-r-none"
-            @click="onUpdate"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      v-show="!isEditing"
-      class="value--view"
-      :class="{ 'is-editable': showEdit }"
-    >
-      <p class="value">
-        {{ value || '---' }}
-      </p>
-      <woot-button
-        v-if="showEdit"
-        variant="clear link"
-        size="small"
-        color-scheme="secondary"
-        icon="edit"
-        class-names="edit-button"
-        @click="onEdit"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.contact-attribute {
-  margin-bottom: var(--space-small);
-}
-.title-wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-mini);
-}
-.title {
-  display: flex;
-  align-items: center;
-  margin: 0;
-}
-.title--icon {
-  width: var(--space-two);
-}
-.edit-button {
-  display: none;
-}
-.value--view {
-  display: flex;
-
-  &.is-editable:hover {
-    .value {
-      background: var(--color-background);
-    }
-    .edit-button {
-      display: block;
-    }
-  }
-}
-.value {
-  display: inline-block;
-  min-width: var(--space-mega);
-  border-radius: var(--border-radius-small);
-  word-break: break-all;
-  margin: 0 var(--space-smaller) 0 var(--space-normal);
-  padding: var(--space-micro) var(--space-smaller);
-}
-</style>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
deleted file mode 100644
index 71f92c969..000000000
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script>
-import Attribute from './ContactAttribute.vue';
-
-export default {
-  components: { Attribute },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['update', 'createAttribute'],
-
-  computed: {
-    additionalAttributes() {
-      return this.contact.additional_attributes || {};
-    },
-    company() {
-      const { company = {} } = this.contact;
-      return company;
-    },
-    customAttributes() {
-      const { custom_attributes: customAttributes = {} } = this.contact;
-      return customAttributes;
-    },
-    customAttributekeys() {
-      return Object.keys(this.customAttributes).filter(key => {
-        const value = this.customAttributes[key];
-        return value !== null && value !== undefined;
-      });
-    },
-  },
-  methods: {
-    onEmailUpdate(value) {
-      this.$emit('update', { email: value });
-    },
-    onPhoneUpdate(value) {
-      this.$emit('update', { phone_number: value });
-    },
-    onLocationUpdate(value) {
-      this.$emit('update', { location: value });
-    },
-    handleCustomCreate() {
-      this.$emit('createAttribute');
-    },
-    onCustomAttributeUpdate(key, value) {
-      this.$emit('update', { custom_attributes: { [key]: value } });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="contact-fields">
-    <h3 class="text-lg title">
-      {{ $t('CONTACTS_PAGE.FIELDS') }}
-    </h3>
-    <Attribute
-      :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-      icon="mail"
-      emoji=""
-      :value="contact.email"
-      show-edit
-      @update="onEmailUpdate"
-    />
-    <Attribute
-      :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
-      icon="call"
-      emoji=""
-      :value="contact.phone_number"
-      show-edit
-      @update="onPhoneUpdate"
-    />
-    <Attribute
-      v-if="additionalAttributes.location"
-      :label="$t('CONTACT_PANEL.LOCATION')"
-      icon="map"
-      emoji="🌍"
-      :value="additionalAttributes.location"
-      show-edit
-      @update="onLocationUpdate"
-    />
-    <div
-      v-for="attribute in customAttributekeys"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <Attribute
-        :label="attribute"
-        icon="chevron-right"
-        :value="customAttributes[attribute]"
-        show-edit
-        @update="value => onCustomAttributeUpdate(attribute, value)"
-      />
-    </div>
-    <woot-button
-      size="small"
-      variant="link"
-      icon="add"
-      @click="handleCustomCreate"
-    >
-      {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
-    </woot-button>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.contact-fields {
-  margin-top: var(--space-medium);
-}
-
-.title {
-  margin-bottom: var(--space-normal);
-}
-</style>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
deleted file mode 100644
index 568a8bf69..000000000
--- a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script>
-import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact.vue';
-import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation.vue';
-import AddCustomAttribute from 'dashboard/modules/contact/components/AddCustomAttribute.vue';
-import ContactIntro from './ContactIntro.vue';
-import ContactFields from './ContactFields.vue';
-
-export default {
-  components: {
-    AddCustomAttribute,
-    ContactFields,
-    ContactIntro,
-    EditContact,
-    NewConversation,
-  },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      showCustomAttributeModal: false,
-      showEditModal: false,
-      showConversationModal: false,
-    };
-  },
-  computed: {
-    enableNewConversation() {
-      return this.contact && this.contact.id;
-    },
-  },
-  methods: {
-    toggleCustomAttributeModal() {
-      this.showCustomAttributeModal = !this.showCustomAttributeModal;
-    },
-    toggleEditModal() {
-      this.showEditModal = !this.showEditModal;
-    },
-    toggleConversationModal() {
-      this.showConversationModal = !this.showConversationModal;
-    },
-    createCustomAttribute(data) {
-      const { id } = this.contact;
-      const { attributeValue, attributeName } = data;
-      const updatedFields = {
-        id,
-        custom_attributes: {
-          [attributeName]: attributeValue,
-        },
-      };
-      this.updateContact(updatedFields);
-    },
-    updateField(data) {
-      const { id } = this.contact;
-      const updatedFields = {
-        id,
-        ...data,
-      };
-      this.updateContact(updatedFields);
-    },
-    updateContact(contactItem) {
-      this.$store.dispatch('contacts/update', contactItem);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="panel">
-    <ContactIntro
-      :contact="contact"
-      @message="toggleConversationModal"
-      @edit="toggleEditModal"
-    />
-    <ContactFields
-      :contact="contact"
-      @update="updateField"
-      @create-attribute="toggleCustomAttributeModal"
-    />
-    <EditContact
-      v-if="showEditModal"
-      :show="showEditModal"
-      :contact="contact"
-      @cancel="toggleEditModal"
-    />
-    <NewConversation
-      v-if="enableNewConversation"
-      :show="showConversationModal"
-      :contact="contact"
-      @cancel="toggleConversationModal"
-    />
-    <AddCustomAttribute
-      :show="showCustomAttributeModal"
-      @cancel="toggleCustomAttributeModal"
-      @create="createCustomAttribute"
-    />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.panel {
-  padding: var(--space-normal) var(--space-normal);
-}
-</style>
diff --git a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue b/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
deleted file mode 100644
index caaa9285d..000000000
--- a/app/javascript/dashboard/modules/notes/NotesOnContactPage.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import NoteList from './components/NoteList.vue';
-
-export default {
-  components: {
-    NoteList,
-  },
-  props: {
-    contactId: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapGetters({ uiFlags: 'contactNotes/getUIFlags' }),
-    notes() {
-      return this.$store.getters['contactNotes/getAllNotesByContact'](
-        this.contactId
-      );
-    },
-  },
-  mounted() {
-    this.fetchContactNotes();
-  },
-  methods: {
-    fetchContactNotes() {
-      const { contactId } = this;
-      if (contactId) this.$store.dispatch('contactNotes/get', { contactId });
-    },
-    onAdd(content) {
-      const { contactId } = this;
-      this.$store.dispatch('contactNotes/create', { content, contactId });
-    },
-    onDelete(noteId) {
-      const { contactId } = this;
-      this.$store.dispatch('contactNotes/delete', { noteId, contactId });
-    },
-  },
-};
-</script>
-
-<template>
-  <NoteList
-    :is-fetching="uiFlags.isFetching"
-    :notes="notes"
-    @add="onAdd"
-    @delete="onDelete"
-  />
-</template>
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
deleted file mode 100644
index 55c825695..000000000
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-
-const emit = defineEmits(['add']);
-
-const noteContent = ref('');
-
-const buttonDisabled = computed(() => noteContent.value === '');
-
-const onAdd = () => {
-  if (noteContent.value !== '') {
-    emit('add', noteContent.value);
-  }
-  noteContent.value = '';
-};
-
-const keyboardEvents = {
-  '$mod+Enter': {
-    action: () => onAdd(),
-    allowOnFocusedInput: true,
-  },
-};
-useKeyboardEvents(keyboardEvents);
-</script>
-
-<template>
-  <div
-    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100"
-  >
-    <WootMessageEditor
-      v-model="noteContent"
-      class="input--note"
-      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
-      :enable-suggestions="false"
-    />
-    <div class="flex justify-end w-full">
-      <woot-button
-        color-scheme="warning"
-        :title="$t('NOTES.ADD.TITLE')"
-        :is-disabled="buttonDisabled"
-        @click="onAdd"
-      >
-        {{ $t('NOTES.ADD.BUTTON') }} {{ '(⌘⏎)' }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.input--note {
-  &::v-deep .ProseMirror-menubar {
-    padding: 0;
-    margin-top: var(--space-minus-small);
-  }
-
-  &::v-deep .ProseMirror-woot-style {
-    max-height: 22.5rem;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
deleted file mode 100644
index 206154136..000000000
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    note: {
-      type: String,
-      default: '',
-    },
-    user: {
-      type: Object,
-      default: () => {},
-    },
-    createdAt: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ['delete'],
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
-  data() {
-    return {
-      showDeleteModal: false,
-    };
-  },
-  computed: {
-    readableTime() {
-      return dynamicTime(this.createdAt);
-    },
-    noteAuthor() {
-      return this.user || {};
-    },
-    noteAuthorName() {
-      return this.noteAuthor.name || this.$t('APP_GLOBAL.DELETED_USER');
-    },
-  },
-
-  methods: {
-    toggleDeleteModal() {
-      this.showDeleteModal = !this.showDeleteModal;
-    },
-    onDelete() {
-      this.$emit('delete', this.id);
-    },
-    confirmDeletion() {
-      this.onDelete();
-      this.closeDelete();
-    },
-    closeDelete() {
-      this.showDeleteModal = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
-  >
-    <div class="flex items-end justify-between gap-1 text-xs">
-      <div class="flex items-center">
-        <Thumbnail
-          :title="noteAuthorName"
-          :src="noteAuthor.thumbnail"
-          :username="noteAuthorName"
-          size="20px"
-        />
-        <div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
-          <span class="font-medium text-slate-800 dark:text-slate-100">
-            {{ noteAuthorName }}
-          </span>
-          <span class="text-slate-700 dark:text-slate-100">
-            {{ $t('NOTES.LIST.LABEL') }}
-          </span>
-          <span class="font-medium text-slate-700 dark:text-slate-100">
-            {{ readableTime }}
-          </span>
-        </div>
-      </div>
-      <div class="flex invisible actions">
-        <woot-button
-          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
-          variant="smooth"
-          size="tiny"
-          icon="delete"
-          color-scheme="secondary"
-          @click="toggleDeleteModal"
-        />
-      </div>
-      <woot-delete-modal
-        v-if="showDeleteModal"
-        v-model:show="showDeleteModal"
-        :on-close="closeDelete"
-        :on-confirm="confirmDeletion"
-        :title="$t('DELETE_NOTE.CONFIRM.TITLE')"
-        :message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
-        :confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
-        :reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
-      />
-    </div>
-    <p
-      v-dompurify-html="formatMessage(note || '')"
-      class="mt-4 note__content"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-// For RTL direction view
-.app-rtl--wrapper {
-  .note__content {
-    ::v-deep {
-      p {
-        unicode-bidi: plaintext;
-      }
-    }
-  }
-}
-
-.note-wrap:hover {
-  .actions {
-    @apply visible;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/modules/notes/components/NoteList.vue b/app/javascript/dashboard/modules/notes/components/NoteList.vue
deleted file mode 100644
index ffbc1da83..000000000
--- a/app/javascript/dashboard/modules/notes/components/NoteList.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-import AddNote from './AddNote.vue';
-import ContactNote from './ContactNote.vue';
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    AddNote,
-    ContactNote,
-    Spinner,
-  },
-
-  props: {
-    notes: {
-      type: Array,
-      default: () => [],
-    },
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['add', 'edit', 'delete'],
-
-  methods: {
-    onAddNote(value) {
-      this.$emit('add', value);
-    },
-    onEditNote(value) {
-      this.$emit('edit', value);
-    },
-    onDeleteNote(value) {
-      this.$emit('delete', value);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <AddNote @add="onAddNote" />
-    <ContactNote
-      v-for="note in notes"
-      :id="note.id"
-      :key="note.id"
-      :note="note.content"
-      :user="note.user"
-      :created-at="note.created_at"
-      @edit="onEditNote"
-      @delete="onDeleteNote"
-    />
-
-    <div v-if="isFetching" class="text-center p-4 text-base">
-      <Spinner size="" />
-      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
-    </div>
-    <div v-else-if="!notes.length" class="text-center p-4 text-base">
-      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 3b3199afe..97f24741f 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -178,7 +178,6 @@ export default {
     <NextSidebar
       v-if="showNextSidebar"
       @toggle-account-modal="toggleAccountModal"
-      @open-notification-panel="openNotificationPanel"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-create-account-modal="openCreateAccountModal"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
deleted file mode 100644
index 9cf017f9c..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<script>
-export default {
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['add'],
-  data() {
-    return {
-      content: '',
-      date: '',
-      label: '',
-    };
-  },
-  computed: {
-    buttonDisabled() {
-      return this.content && this.date === '';
-    },
-  },
-  methods: {
-    resetValue() {
-      this.content = '';
-      this.date = '';
-    },
-
-    optionSelected(event) {
-      this.label = event.target.value;
-    },
-
-    onAdd() {
-      const task = {
-        content: this.content,
-        date: this.date,
-        label: this.label,
-      };
-      this.$emit('add', task);
-      this.resetValue();
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="wrap">
-    <div class="input-select-wrap">
-      <textarea
-        v-model="content"
-        class="input--reminder"
-        @keydown.enter.shift.exact="onAdd"
-      />
-      <div class="select-wrap">
-        <div class="select">
-          <div class="input-group">
-            <i class="ion-android-calendar input-group-label" />
-            <input
-              v-model="date"
-              type="text"
-              :placeholder="$t('REMINDER.FOOTER.DUE_DATE')"
-              class="input-group-field"
-            />
-          </div>
-          <div class="task-wrap">
-            <select class="task__type" @change="optionSelected($event)">
-              <option value="" disabled selected>
-                {{ $t('REMINDER.FOOTER.LABEL_TITLE') }}
-              </option>
-              <option
-                v-for="option in options"
-                :key="option.id"
-                :value="option.id"
-              >
-                {{ option.name }}
-              </option>
-            </select>
-          </div>
-        </div>
-        <woot-button
-          size="tiny"
-          color-scheme="primary"
-          class-names="add-button"
-          :title="$t('REMINDER.ADD_BUTTON.TITLE')"
-          :is-disabled="buttonDisabled"
-          @click="onAdd"
-        >
-          {{ $t('REMINDER.ADD_BUTTON.BUTTON') }}
-        </woot-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.wrap {
-  display: flex;
-  margin-bottom: var(--space-smaller);
-  width: 100%;
-
-  .input-select-wrap {
-    padding: var(--space-small) var(--space-small);
-    width: 100%;
-
-    .input--reminder {
-      font-size: var(--font-size-mini);
-      margin-bottom: var(--space-small);
-      resize: none;
-    }
-
-    .select-wrap {
-      display: flex;
-      justify-content: space-between;
-
-      .select {
-        display: flex;
-      }
-    }
-
-    .input-group {
-      margin-bottom: 0;
-      font-size: var(--font-size-mini);
-
-      .input-group-field {
-        height: var(--space-medium);
-        font-size: var(--font-size-micro);
-      }
-    }
-
-    .task-wrap {
-      .task__type {
-        margin: 0 0 0 var(--space-smaller);
-        height: var(--space-medium);
-        width: fit-content;
-        padding: 0 var(--space-two) 0 var(--space-smaller);
-        font-size: var(--font-size-micro);
-      }
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
deleted file mode 100644
index 5455a1a26..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
-import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
-import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
-import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
-import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
-import Draggable from 'vuedraggable';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-export default {
-  components: {
-    AccordionItem,
-    ContactConversations,
-    ContactInfo,
-    ContactLabel,
-    CustomAttributes,
-    Draggable,
-  },
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    showAvatar: {
-      type: Boolean,
-      default: true,
-    },
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  setup() {
-    const {
-      updateUISettings,
-      isContactSidebarItemOpen,
-      contactSidebarItemsOrder,
-      toggleSidebarUIState,
-    } = useUISettings();
-
-    return {
-      updateUISettings,
-      isContactSidebarItemOpen,
-      contactSidebarItemsOrder,
-      toggleSidebarUIState,
-    };
-  },
-  data() {
-    return {
-      dragEnabled: true,
-      contactSidebarItems: [],
-      dragging: false,
-    };
-  },
-  computed: {
-    hasContactAttributes() {
-      const { custom_attributes: customAttributes } = this.contact;
-      return customAttributes && Object.keys(customAttributes).length;
-    },
-  },
-  mounted() {
-    this.contactSidebarItems = this.contactSidebarItemsOrder;
-  },
-  methods: {
-    onDragEnd() {
-      this.dragging = false;
-      this.updateUISettings({
-        contact_sidebar_items_order: this.contactSidebarItems,
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="relative w-1/4 h-full min-h-screen overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
-    :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
-  >
-    <ContactInfo
-      :show-close-button="showCloseButton"
-      :show-avatar="showAvatar"
-      :contact="contact"
-      close-icon-name="dismiss"
-      @panel-close="onClose"
-      @toggle-panel="onClose"
-    />
-    <div class="list-group">
-      <Draggable
-        :list="contactSidebarItems"
-        :disabled="!dragEnabled"
-        ghost-class="ghost"
-        item-key="name"
-        @start="dragging = true"
-        @end="onDragEnd"
-      >
-        <template #item="{ element }">
-          <div :key="element.name" class="list-group-item">
-            <div v-if="element.name === 'contact_attributes'">
-              <AccordionItem
-                :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
-                :is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_ct_custom_attr_open', value)
-                "
-              >
-                <CustomAttributes
-                  :contact-id="contact.id"
-                  attribute-type="contact_attribute"
-                  attribute-from="contact_panel"
-                  :custom-attributes="contact.custom_attributes"
-                  :empty-state-message="
-                    $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
-                  "
-                />
-              </AccordionItem>
-            </div>
-            <div v-if="element.name === 'contact_labels'">
-              <AccordionItem
-                :title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
-                :is-open="isContactSidebarItemOpen('is_ct_labels_open')"
-                @toggle="
-                  value => toggleSidebarUIState('is_ct_labels_open', value)
-                "
-              >
-                <ContactLabel :contact-id="contact.id" class="contact-labels" />
-              </AccordionItem>
-            </div>
-            <div v-if="element.name === 'previous_conversation'">
-              <AccordionItem
-                :title="
-                  $t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
-                "
-                :is-open="isContactSidebarItemOpen('is_ct_prev_conv_open')"
-                compact
-                @toggle="
-                  value => toggleSidebarUIState('is_ct_prev_conv_open', value)
-                "
-              >
-                <ContactConversations
-                  v-if="contact.id"
-                  :contact-id="contact.id"
-                  conversation-id=""
-                />
-              </AccordionItem>
-            </div>
-          </div>
-        </template>
-      </Draggable>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .contact--profile {
-    @apply pb-3 mb-4;
-  }
-}
-
-.list-group {
-  .list-group-item {
-    @apply bg-white dark:bg-slate-900;
-  }
-}
-
-.conversation--details {
-  @apply py-0 px-4;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
deleted file mode 100644
index 921c86a85..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import LabelSelector from 'dashboard/components/widgets/LabelSelector.vue';
-
-export default {
-  components: { LabelSelector },
-  props: {
-    contactId: {
-      type: [String, Number],
-      required: true,
-    },
-  },
-
-  computed: {
-    savedLabels() {
-      const availableContactLabels = this.$store.getters[
-        'contactLabels/getContactLabels'
-      ](this.contactId);
-      return this.allLabels.filter(({ title }) =>
-        availableContactLabels.includes(title)
-      );
-    },
-
-    ...mapGetters({
-      allLabels: 'labels/getLabels',
-    }),
-  },
-
-  watch: {
-    contactId(newContactId, prevContactId) {
-      if (newContactId && newContactId !== prevContactId) {
-        this.fetchLabels(newContactId);
-      }
-    },
-  },
-
-  mounted() {
-    const { contactId } = this;
-    this.fetchLabels(contactId);
-  },
-
-  methods: {
-    async onUpdateLabels(selectedLabels) {
-      try {
-        await this.$store.dispatch('contactLabels/update', {
-          contactId: this.contactId,
-          labels: selectedLabels,
-        });
-      } catch (error) {
-        useAlert(this.$t('CONTACT_PANEL.LABELS.CONTACT.ERROR'));
-      }
-    },
-
-    addItem(value) {
-      const result = this.savedLabels.map(item => item.title);
-      result.push(value.title);
-      this.onUpdateLabels(result);
-    },
-
-    removeItem(value) {
-      const result = this.savedLabels
-        .map(label => label.title)
-        .filter(label => label !== value);
-      this.onUpdateLabels(result);
-    },
-
-    async fetchLabels(contactId) {
-      if (!contactId) {
-        return;
-      }
-      this.$store.dispatch('contactLabels/get', contactId);
-    },
-  },
-};
-</script>
-
-<template>
-  <LabelSelector
-    :all-labels="allLabels"
-    :saved-labels="savedLabels"
-    @add="addItem"
-    @remove="removeItem"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
deleted file mode 100644
index bc74353c2..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ /dev/null
@@ -1,368 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
-import countries from 'shared/constants/countries.js';
-import { mapGetters } from 'vuex';
-import { filterAttributeGroups } from '../contactFilterItems';
-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';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    FilterInputBox,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    initialFilterTypes: {
-      type: Array,
-      default: () => [],
-    },
-    initialAppliedFilters: {
-      type: Array,
-      default: () => [],
-    },
-    isSegmentsView: {
-      type: Boolean,
-      default: false,
-    },
-    activeSegmentName: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['applyFilter', 'clearFilters', 'updateSegment'],
-  setup() {
-    const { setFilterAttributes } = useFilter({
-      filteri18nKey: 'CONTACTS_FILTER',
-      attributeModel: 'contact_attribute',
-    });
-    return {
-      setFilterAttributes,
-    };
-  },
-  data() {
-    return {
-      show: true,
-      appliedFilters: this.initialAppliedFilters,
-      activeSegmentNewName: this.activeSegmentName,
-      filterTypes: this.initialFilterTypes,
-      filterGroups: [],
-      allCustomAttributes: [],
-      filterAttributeGroups,
-      attributeModel: 'contact_attribute',
-      filtersFori18n: 'CONTACTS_FILTER',
-      validationErrors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    filterModalHeaderTitle() {
-      return !this.isSegmentsView
-        ? this.$t('CONTACTS_FILTER.TITLE')
-        : this.$t('CONTACTS_FILTER.EDIT_CUSTOM_SEGMENT');
-    },
-    filterModalSubTitle() {
-      return !this.isSegmentsView
-        ? this.$t('CONTACTS_FILTER.SUBTITLE')
-        : this.$t('CONTACTS_FILTER.CUSTOM_VIEWS_SUBTITLE');
-    },
-  },
-  mounted() {
-    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) {
-      this.appliedFilters.push({
-        attribute_key: 'name',
-        filter_operator: 'equal_to',
-        values: '',
-        query_operator: 'and',
-        attribute_model: 'standard',
-      });
-    }
-  },
-  methods: {
-    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;
-      }
-    },
-    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';
-      }
-    },
-    getAttributeModel(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type.attributeModel;
-    },
-    getInputType(key, operator) {
-      if (key === 'created_at' || key === 'last_activity_at')
-        if (operator === 'days_before') return 'plain_text';
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.inputType;
-    },
-    getOperators(key) {
-      const type = this.filterTypes.find(filter => filter.attributeKey === key);
-      return type?.filterOperators;
-    },
-    getDropdownValues(type) {
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributesByModel'
-      ](this.attributeModel);
-      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type &&
-          attr.attribute_display_type === 'checkbox'
-        );
-      });
-      if (isCustomAttributeCheckbox || type === 'blocked') {
-        return [
-          {
-            id: true,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-          },
-          {
-            id: false,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-          },
-        ];
-      }
-
-      const isCustomAttributeList = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type && attr.attribute_display_type === 'list'
-        );
-      });
-
-      if (isCustomAttributeList) {
-        return allCustomAttributes
-          .find(attr => attr.attribute_key === type)
-          .attribute_values.map(item => {
-            return {
-              id: item,
-              name: item,
-            };
-          });
-      }
-      switch (type) {
-        case 'country_code':
-          return countries;
-        default:
-          return undefined;
-      }
-    },
-    appendNewFilter() {
-      if (this.isSegmentsView) {
-        this.setQueryOperatorOnLastQuery();
-      } else {
-        this.appliedFilters.push({
-          attribute_key: 'name',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      }
-    },
-    setQueryOperatorOnLastQuery() {
-      const lastItemIndex = this.appliedFilters.length - 1;
-      this.appliedFilters[lastItemIndex] = {
-        ...this.appliedFilters[lastItemIndex],
-        query_operator: 'and',
-      };
-      this.$nextTick(() => {
-        this.appliedFilters.push({
-          attribute_key: 'name',
-          filter_operator: 'equal_to',
-          values: '',
-          query_operator: 'and',
-        });
-      });
-    },
-    removeFilter(index) {
-      if (this.appliedFilters.length <= 1) {
-        useAlert(this.$t('CONTACTS_FILTER.FILTER_DELETE_ERROR'));
-      } else {
-        this.appliedFilters.splice(index, 1);
-      }
-    },
-    submitFilterQuery() {
-      this.validationErrors = validateConversationOrContactFilters(
-        this.appliedFilters
-      );
-      if (Object.keys(this.validationErrors).length === 0) {
-        this.$store.dispatch(
-          'contacts/setContactFilters',
-          JSON.parse(JSON.stringify(this.appliedFilters))
-        );
-        this.$emit('applyFilter', this.appliedFilters);
-        useTrack(CONTACTS_EVENTS.APPLY_FILTER, {
-          applied_filters: this.appliedFilters.map(filter => ({
-            key: filter.attribute_key,
-            operator: filter.filter_operator,
-            query_operator: filter.query_operator,
-          })),
-        });
-      }
-    },
-    updateSegment() {
-      this.$emit(
-        'updateSegment',
-        this.appliedFilters,
-        this.activeSegmentNewName
-      );
-    },
-    resetFilter(index, currentFilter) {
-      this.appliedFilters[index].filter_operator = this.filterTypes.find(
-        filter => filter.attributeKey === currentFilter.attribute_key
-      ).filterOperators[0].value;
-      this.appliedFilters[index].values = '';
-    },
-    showUserInput(operatorType) {
-      if (operatorType === 'is_present' || operatorType === 'is_not_present')
-        return false;
-      return true;
-    },
-    clearFilters() {
-      this.$emit('clearFilters');
-      this.onClose();
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <woot-modal-header :header-title="filterModalHeaderTitle">
-      <p class="text-slate-600 dark:text-slate-200">
-        {{ filterModalSubTitle }}
-      </p>
-    </woot-modal-header>
-    <div class="p-8">
-      <div v-if="isSegmentsView">
-        <label class="input-label" :class="{ error: !activeSegmentNewName }">
-          {{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
-          <input
-            v-model="activeSegmentNewName"
-            type="text"
-            class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
-          />
-          <span v-if="!activeSegmentNewName" class="message">
-            {{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
-          </span>
-        </label>
-        <label class="input-label">
-          {{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
-        </label>
-      </div>
-      <div
-        class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
-      >
-        <FilterInputBox
-          v-for="(filter, i) in appliedFilters"
-          :key="i"
-          v-model="appliedFilters[i]"
-          :filter-groups="filterGroups"
-          grouped-filters
-          :input-type="
-            getInputType(
-              appliedFilters[i].attribute_key,
-              appliedFilters[i].filter_operator
-            )
-          "
-          :operators="getOperators(appliedFilters[i].attribute_key)"
-          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
-          :show-query-operator="i !== appliedFilters.length - 1"
-          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :error-message="
-            validationErrors[`filter_${i}`]
-              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
-              : ''
-          "
-          @reset-filter="resetFilter(i, appliedFilters[i])"
-          @remove-filter="removeFilter(i)"
-        />
-        <div class="mt-4">
-          <woot-button
-            icon="add"
-            color-scheme="success"
-            variant="smooth"
-            size="small"
-            @click="appendNewFilter"
-          >
-            {{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
-          </woot-button>
-          <woot-button
-            v-if="hasAppliedFilters && !isSegmentsView"
-            icon="subtract"
-            color-scheme="alert"
-            variant="smooth"
-            size="small"
-            @click="clearFilters"
-          >
-            {{ $t('CONTACTS_FILTER.CLEAR_ALL_FILTERS') }}
-          </woot-button>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-button class="button clear" @click.prevent="onClose">
-            {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button
-            v-if="isSegmentsView"
-            :disabled="!activeSegmentNewName"
-            @click="updateSegment"
-          >
-            {{ $t('CONTACTS_FILTER.UPDATE_BUTTON_LABEL') }}
-          </woot-button>
-          <woot-button v-else @click="submitFilterQuery">
-            {{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.folder-input {
-  @apply w-[50%];
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
deleted file mode 100644
index d27c2763b..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<script setup>
-import { h, ref, computed, defineEmits } from 'vue';
-import {
-  useVueTable,
-  createColumnHelper,
-  getCoreRowModel,
-} from '@tanstack/vue-table';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import { useI18n } from 'vue-i18n';
-
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-
-// Table components
-import Table from 'dashboard/components/table/Table.vue';
-import NameCell from './ContactsTable/NameCell.vue';
-import EmailCell from './ContactsTable/EmailCell.vue';
-import TelCell from './ContactsTable/TelCell.vue';
-import CountryCell from './ContactsTable/CountryCell.vue';
-import ProfilesCell from './ContactsTable/ProfilesCell.vue';
-
-const props = defineProps({
-  contacts: {
-    type: Array,
-    default: () => [],
-  },
-  showSearchEmptyState: {
-    type: Boolean,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['onSortChange']);
-const { t } = useI18n();
-
-const tableData = computed(() => {
-  if (props.isLoading) {
-    return [];
-  }
-
-  return props.contacts.map(item => {
-    // Note: The attributes used here is in snake case
-    // as it simplier the sort attribute calculation
-    const additional = item.additional_attributes || {};
-    const { last_activity_at: lastActivityAt } = item;
-    const { created_at: createdAt } = item;
-    return {
-      ...item,
-      profiles: additional.social_profiles || {},
-      last_activity_at: lastActivityAt ? dynamicTime(lastActivityAt) : null,
-      created_at: createdAt ? dynamicTime(createdAt) : null,
-    };
-  });
-});
-
-const defaulSpanRender = cellProps =>
-  h(
-    'span',
-    {
-      class: cellProps.getValue() ? '' : 'text-slate-300 dark:text-slate-700',
-    },
-    cellProps.getValue() ? cellProps.getValue() : '---'
-  );
-
-const columnHelper = createColumnHelper();
-const columns = [
-  columnHelper.accessor('name', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
-    cell: cellProps => h(NameCell, cellProps),
-    size: 250,
-  }),
-  columnHelper.accessor('email', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
-    cell: cellProps => h(EmailCell, { email: cellProps.getValue() }),
-    size: 250,
-  }),
-  columnHelper.accessor('phone_number', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
-    size: 200,
-    cell: cellProps =>
-      h(TelCell, {
-        phoneNumber: cellProps.getValue(),
-        defaultCountry: cellProps.row.original.country_code,
-      }),
-  }),
-  columnHelper.accessor('company_name', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
-    size: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('city', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
-    cell: defaulSpanRender,
-    size: 200,
-  }),
-  columnHelper.accessor('country', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
-    size: 200,
-    cell: cellProps =>
-      h(CountryCell, {
-        countryCode: cellProps.row.original.country_code,
-        country: cellProps.getValue(),
-      }),
-  }),
-  columnHelper.accessor('profiles', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'),
-    size: 200,
-    enableSorting: false,
-    cell: cellProps =>
-      h(ProfilesCell, {
-        profiles: cellProps.getValue(),
-      }),
-  }),
-  columnHelper.accessor('last_activity_at', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
-    size: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('created_at', {
-    header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
-    size: 200,
-    cell: defaulSpanRender,
-  }),
-];
-
-// type ColumnSort = {
-//   id: string
-//   desc: boolean
-// }
-// type SortingState = ColumnSort[]
-const sortingState = ref([{ last_activity_at: 'desc' }]);
-
-const table = useVueTable({
-  get data() {
-    return tableData.value;
-  },
-  columns,
-  enableMultiSort: false,
-  getCoreRowModel: getCoreRowModel(),
-  state: {
-    get sorting() {
-      return sortingState.value;
-    },
-  },
-  onSortingChange: updater => {
-    // onSortingChange returns a callback that allows us to trigger the sort when we need
-    // See more docs here: https://tanstack.com/table/latest/docs/api/features/sorting#onsortingchange
-    // IMO, I don't like this API, but it's what we have for now. Would be great if we could just listen the the changes
-    // to the sorting state and emit the event when it changes
-    // But we can easily wrap this later as a separate composable
-    const updatedSortState = updater(sortingState.value);
-    // we pick the first item from the array, as we are not using multi-sorting
-    const [sort] = updatedSortState;
-
-    if (sort) {
-      sortingState.value = updatedSortState;
-      emit('onSortChange', { [sort.id]: sort.desc ? 'desc' : 'asc' });
-    } else {
-      // If the sorting is empty, we reset to the default sorting
-      sortingState.value = [{ last_activity_at: 'desc' }];
-      emit('onSortChange', {});
-    }
-  },
-});
-</script>
-
-<template>
-  <section class="flex-1 h-full overflow-auto bg-white dark:bg-slate-900">
-    <section class="overflow-x-auto">
-      <Table fixed :table="table" />
-    </section>
-
-    <EmptyState
-      v-if="showSearchEmptyState"
-      :title="$t('CONTACTS_PAGE.LIST.404')"
-    />
-    <EmptyState
-      v-else-if="!isLoading && !contacts.length"
-      :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
-    />
-    <div v-if="isLoading" class="flex items-center justify-center text-base">
-      <Spinner />
-      <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-  </section>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/CountryCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/CountryCell.vue
deleted file mode 100644
index 4d3d591f6..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/CountryCell.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import { computed } from 'vue';
-import { getCountryFlag } from 'dashboard/helper/flag';
-
-const props = defineProps({
-  countryCode: {
-    type: String,
-    default: '',
-  },
-  country: {
-    type: String,
-    default: '',
-  },
-});
-
-const countryFlag = computed(() => {
-  if (!props.countryCode) {
-    return '';
-  }
-
-  return getCountryFlag(props.countryCode);
-});
-
-const formattedCountryName = computed(() => {
-  if (!props.country) {
-    return '';
-  }
-
-  return `${countryFlag.value} ${props.country}`;
-});
-</script>
-
-<template>
-  <BaseCell :content="formattedCountryName" />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/EmailCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/EmailCell.vue
deleted file mode 100644
index e2a023351..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/EmailCell.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-defineProps({
-  email: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <BaseCell>
-    <a
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      class="text-woot-500 dark:text-woot-500"
-      :href="`mailto:${email}`"
-    >
-      {{ email }}
-    </a>
-  </BaseCell>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/NameCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/NameCell.vue
deleted file mode 100644
index 68c0e6f01..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/NameCell.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { inject } from 'vue';
-
-defineProps({
-  row: {
-    type: Object,
-    required: true,
-  },
-});
-
-const route = useRoute();
-const openContactInfoPanel = inject('openContactInfoPanel');
-const isRTL = useMapGetter('accounts/isRTL');
-</script>
-
-<template>
-  <BaseCell>
-    <woot-button
-      variant="clear"
-      class="!px-0"
-      @click="() => openContactInfoPanel(row.original.id)"
-    >
-      <div class="items-center flex" :class="{ 'flex-row-reverse': isRTL }">
-        <Thumbnail
-          size="32px"
-          :src="row.original.thumbnail"
-          :username="row.original.name"
-          :status="row.original.availability_status"
-        />
-        <div class="items-start flex flex-col my-0 mx-2">
-          <h6 class="overflow-hidden text-base whitespace-nowrap text-ellipsis">
-            <router-link
-              :to="`/app/accounts/${route.params.accountId}/contacts/${row.original.id}`"
-              class="text-sm font-medium m-0 capitalize"
-            >
-              {{ row.original.name }}
-            </router-link>
-          </h6>
-          <button
-            class="button clear small link text-slate-600 dark:text-slate-200"
-          >
-            {{ $t('CONTACTS_PAGE.LIST.VIEW_DETAILS') }}
-          </button>
-        </div>
-      </div>
-    </woot-button>
-  </BaseCell>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/ProfilesCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/ProfilesCell.vue
deleted file mode 100644
index 5252a2066..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/ProfilesCell.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import { computed } from 'vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
-const props = defineProps({
-  profiles: {
-    type: Object,
-    required: true,
-  },
-});
-
-const filteredProfiles = computed(() =>
-  Object.keys(props.profiles).filter(profile => props.profiles[profile])
-);
-</script>
-
-<template>
-  <BaseCell class="flex gap-2 items-center text-slate-300 dark:text-slate-400">
-    <template v-if="filteredProfiles.length">
-      <a
-        v-for="profile in filteredProfiles"
-        :key="profile"
-        :href="`https://${profile}.com/${profiles[profile]}`"
-        target="_blank"
-        class="hover:text-slate-500"
-        rel="noopener noreferrer nofollow"
-      >
-        <FluentIcon class="size-4" :icon="`brand-${profile}`" />
-      </a>
-    </template>
-  </BaseCell>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/TelCell.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/TelCell.vue
deleted file mode 100644
index 17beb1ec5..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable/TelCell.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup>
-import BaseCell from 'dashboard/components/table/BaseCell.vue';
-import { computed } from 'vue';
-import { parsePhoneNumber } from 'libphonenumber-js';
-
-const props = defineProps({
-  phoneNumber: {
-    type: String,
-    default: '',
-  },
-  defaultCountry: {
-    type: String,
-    default: '',
-  },
-});
-
-const formattedNumber = computed(() => {
-  if (!props.phoneNumber) {
-    return '';
-  }
-
-  try {
-    const parsedNumber = parsePhoneNumber(
-      props.phoneNumber,
-      props.defaultCountry
-    );
-
-    if (parsedNumber) {
-      return parsedNumber.formatInternational();
-    }
-    return props.phoneNumber;
-  } catch (error) {
-    return props.phoneNumber;
-  }
-});
-</script>
-
-<template>
-  <BaseCell :content="formattedNumber" />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
deleted file mode 100644
index 8fb292414..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ /dev/null
@@ -1,475 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-
-import ContactsHeader from './Header.vue';
-import ContactsTable from './ContactsTable.vue';
-import ContactInfoPanel from './ContactInfoPanel.vue';
-import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact.vue';
-import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
-import ImportContacts from './ImportContacts.vue';
-import ContactsAdvancedFilters from './ContactsAdvancedFilters.vue';
-import contactFilterItems from '../contactFilterItems';
-import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
-import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
-import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
-import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import countries from 'shared/constants/countries.js';
-import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
-import { useTrack } from 'dashboard/composables';
-
-const DEFAULT_PAGE = 1;
-const FILTER_TYPE_CONTACT = 1;
-
-export default {
-  components: {
-    ContactsHeader,
-    ContactsTable,
-    TableFooter,
-    ContactInfoPanel,
-    CreateContact,
-    ImportContacts,
-    ContactsAdvancedFilters,
-    AddCustomViews,
-    DeleteCustomViews,
-  },
-  provide() {
-    return {
-      openContactInfoPanel: this.openContactInfoPanel,
-    };
-  },
-  props: {
-    label: { type: String, default: '' },
-    segmentsId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      searchQuery: '',
-      showCreateModal: false,
-      showImportModal: false,
-      selectedContactId: '',
-      sortConfig: { last_activity_at: 'desc' },
-      showFiltersModal: false,
-      contactFilterItems: contactFilterItems.map(filter => ({
-        ...filter,
-        attributeName: this.$t(
-          `CONTACTS_FILTER.ATTRIBUTES.${filter.attributeI18nKey}`
-        ),
-      })),
-      segmentsQuery: {},
-      filterType: FILTER_TYPE_CONTACT,
-      showAddSegmentsModal: false,
-      showDeleteSegmentsModal: false,
-      appliedFilter: [],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      records: 'contacts/getContacts',
-      uiFlags: 'contacts/getUIFlags',
-      meta: 'contacts/getMeta',
-      segments: 'customViews/getContactCustomViews',
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    showEmptySearchResult() {
-      const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
-      return hasEmptyResults;
-    },
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    hasActiveSegments() {
-      return this.activeSegment && this.segmentsId !== 0;
-    },
-    isContactAndLabelDashboard() {
-      return (
-        this.$route.name === 'contacts_dashboard' ||
-        this.$route.name === 'contacts_labels_dashboard'
-      );
-    },
-    pageTitle() {
-      if (this.hasActiveSegments) {
-        return this.activeSegment.name;
-      }
-      if (this.label) {
-        return `#${this.label}`;
-      }
-      return this.$t('CONTACTS_PAGE.HEADER');
-    },
-    selectedContact() {
-      if (this.selectedContactId) {
-        const contact = this.records.find(
-          item => this.selectedContactId === item.id
-        );
-        return contact;
-      }
-      return undefined;
-    },
-    showContactViewPane() {
-      return this.selectedContactId !== '';
-    },
-    wrapClass() {
-      return this.showContactViewPane ? 'w-[75%]' : 'w-full';
-    },
-    pageParameter() {
-      const selectedPageNumber = Number(this.$route.query?.page);
-      return !Number.isNaN(selectedPageNumber) &&
-        selectedPageNumber >= DEFAULT_PAGE
-        ? selectedPageNumber
-        : DEFAULT_PAGE;
-    },
-    activeSegment() {
-      if (this.segmentsId) {
-        const [firstValue] = this.segments.filter(
-          view => view.id === Number(this.segmentsId)
-        );
-        return firstValue;
-      }
-      return undefined;
-    },
-    activeSegmentName() {
-      return this.activeSegment?.name;
-    },
-  },
-  watch: {
-    label() {
-      this.fetchContacts(DEFAULT_PAGE);
-      if (this.hasAppliedFilters) {
-        this.clearFilters();
-      }
-    },
-    activeSegment() {
-      if (this.hasActiveSegments) {
-        const payload = this.activeSegment.query;
-        this.fetchSavedFilteredContact(payload, DEFAULT_PAGE);
-      }
-      if (this.hasAppliedFilters && this.$route.name === 'contacts_dashboard') {
-        this.fetchFilteredContacts(DEFAULT_PAGE);
-      } else {
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-  },
-  mounted() {
-    this.fetchContacts(this.pageParameter);
-  },
-  methods: {
-    updatePageParam(page) {
-      window.history.pushState({}, null, `${this.$route.path}?page=${page}`);
-    },
-    getSortAttribute() {
-      let sortAttr = Object.keys(this.sortConfig).reduce((acc, sortKey) => {
-        const sortOrder = this.sortConfig[sortKey];
-        if (sortOrder) {
-          const sortOrderSign = sortOrder === 'asc' ? '' : '-';
-          return `${sortOrderSign}${sortKey}`;
-        }
-        return acc;
-      }, '');
-      if (!sortAttr) {
-        this.sortConfig = { last_activity_at: 'desc' };
-        sortAttr = '-last_activity_at';
-      }
-      return sortAttr;
-    },
-    fetchContacts(page) {
-      if (this.isContactAndLabelDashboard) {
-        this.updatePageParam(page);
-        let value = '';
-        if (this.searchQuery.charAt(0) === '+') {
-          value = this.searchQuery.substring(1);
-        } else {
-          value = this.searchQuery;
-        }
-        const requestParams = {
-          page,
-          sortAttr: this.getSortAttribute(),
-          label: this.label,
-        };
-        if (!value) {
-          this.$store.dispatch('contacts/get', requestParams);
-        } else {
-          this.$store.dispatch('contacts/search', {
-            search: encodeURIComponent(value),
-            ...requestParams,
-          });
-        }
-      }
-    },
-    fetchSavedFilteredContact(payload, page) {
-      if (this.hasActiveSegments) {
-        this.updatePageParam(page);
-        this.$store.dispatch('contacts/filter', {
-          queryPayload: payload,
-          page,
-        });
-      }
-    },
-    fetchFilteredContacts(page) {
-      if (this.hasAppliedFilters) {
-        const payload = this.segmentsQuery;
-        this.updatePageParam(page);
-        this.$store.dispatch('contacts/filter', {
-          queryPayload: payload,
-          page,
-        });
-      }
-    },
-
-    onInputSearch(event) {
-      const newQuery = event.target.value;
-      const refetchAllContacts = !!this.searchQuery && newQuery === '';
-      this.searchQuery = newQuery;
-      if (refetchAllContacts) {
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-    onSearchSubmit() {
-      this.selectedContactId = '';
-      if (this.searchQuery) {
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-    onPageChange(page) {
-      this.selectedContactId = '';
-      if (this.segmentsId !== 0) {
-        const payload = this.activeSegment.query;
-        this.fetchSavedFilteredContact(payload, page);
-      }
-      if (this.hasAppliedFilters) {
-        this.fetchFilteredContacts(page);
-      } else {
-        this.fetchContacts(page);
-      }
-    },
-    openContactInfoPanel(contactId) {
-      this.selectedContactId = contactId;
-      this.showContactInfoPanelPane = true;
-    },
-    closeContactInfoPanel() {
-      this.selectedContactId = '';
-      this.showContactInfoPanelPane = false;
-    },
-    onToggleCreate() {
-      this.showCreateModal = !this.showCreateModal;
-    },
-    onToggleSaveFilters() {
-      this.showAddSegmentsModal = true;
-    },
-    onCloseAddSegmentsModal() {
-      this.showAddSegmentsModal = false;
-    },
-    onToggleDeleteFilters() {
-      this.showDeleteSegmentsModal = true;
-    },
-    onCloseDeleteSegmentsModal() {
-      this.showDeleteSegmentsModal = false;
-    },
-    onToggleImport() {
-      this.showImportModal = !this.showImportModal;
-    },
-    onSortChange(params) {
-      this.sortConfig = params;
-      this.fetchContacts(this.meta.currentPage);
-
-      const sortBy =
-        Object.entries(params).find(pair => Boolean(pair[1])) || [];
-
-      useTrack(CONTACTS_EVENTS.APPLY_SORT, {
-        appliedOn: sortBy[0],
-        order: sortBy[1],
-      });
-    },
-    onToggleFilters() {
-      if (this.hasActiveSegments) {
-        this.initializeSegmentToFilterModal(this.activeSegment);
-      }
-      this.showFiltersModal = true;
-    },
-    closeAdvanceFiltersModal() {
-      this.showFiltersModal = false;
-      this.appliedFilter = [];
-    },
-    onApplyFilter(payload) {
-      this.closeContactInfoPanel();
-      this.segmentsQuery = filterQueryGenerator(payload);
-      this.$store.dispatch('contacts/filter', {
-        queryPayload: filterQueryGenerator(payload),
-      });
-      this.showFiltersModal = false;
-    },
-    onUpdateSegment(payload, segmentName) {
-      const payloadData = {
-        ...this.activeSegment,
-        name: segmentName,
-        query: filterQueryGenerator(payload),
-      };
-      this.$store.dispatch('customViews/update', payloadData);
-      this.closeAdvanceFiltersModal();
-    },
-    clearFilters() {
-      this.$store.dispatch('contacts/clearContactFilters');
-      this.fetchContacts(this.pageParameter);
-    },
-    onExportSubmit() {
-      let query = { payload: [] };
-
-      if (this.hasActiveSegments) {
-        query = this.activeSegment.query;
-      } else if (this.hasAppliedFilters) {
-        query = filterQueryGenerator(this.getAppliedContactFilters);
-      }
-
-      try {
-        this.$store.dispatch('contacts/export', {
-          ...query,
-          label: this.label,
-        });
-        useAlert(this.$t('EXPORT_CONTACTS.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(error.message || this.$t('EXPORT_CONTACTS.ERROR_MESSAGE'));
-      }
-    },
-    setParamsForEditSegmentModal() {
-      // Here we are setting the params for edit segment modal to show the existing values.
-
-      // For custom attributes we get only attribute key.
-      // So we are mapping it to find the input type of the attribute to show in the edit segment modal.
-      const params = {
-        countries: countries,
-        filterTypes: contactFilterItems,
-        allCustomAttributes:
-          this.$store.getters['attributes/getAttributesByModel'](
-            'contact_attribute'
-          ),
-      };
-      return params;
-    },
-    initializeSegmentToFilterModal(activeSegment) {
-      // Here we are setting the params for edit segment modal.
-      //  To show the existing values. when we click on edit segment button.
-
-      // Here we get the query from the active segment.
-      // And we are mapping the query to the actual values.
-      // To show in the edit segment modal by the help of generateValuesForEditCustomViews helper.
-      const query = activeSegment?.query?.payload;
-      if (!Array.isArray(query)) return;
-
-      this.appliedFilter.push(
-        ...query.map(filter => ({
-          attribute_key: filter.attribute_key,
-          attribute_model: filter.attribute_model,
-          filter_operator: filter.filter_operator,
-          values: Array.isArray(filter.values)
-            ? generateValuesForEditCustomViews(
-                filter,
-                this.setParamsForEditSegmentModal()
-              )
-            : [],
-          query_operator: filter.query_operator,
-          custom_attribute_type: filter.custom_attribute_type,
-        }))
-      );
-    },
-    openSavedItemInSegment() {
-      const lastItemInSegments = this.segments[this.segments.length - 1];
-      const lastItemId = lastItemInSegments.id;
-      this.$router.push({
-        name: 'contacts_segments_dashboard',
-        params: { id: lastItemId },
-      });
-    },
-    openLastItemAfterDeleteInSegment() {
-      if (this.segments.length > 0) {
-        this.openSavedItemInSegment();
-      } else {
-        this.$router.push({ name: 'contacts_dashboard' });
-        this.fetchContacts(DEFAULT_PAGE);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-row w-full">
-    <div class="flex flex-col h-full" :class="wrapClass">
-      <ContactsHeader
-        :search-query="searchQuery"
-        :header-title="pageTitle"
-        :segments-id="segmentsId"
-        this-selected-contact-id=""
-        @on-input-search="onInputSearch"
-        @on-toggle-create="onToggleCreate"
-        @on-toggle-filter="onToggleFilters"
-        @on-search-submit="onSearchSubmit"
-        @on-toggle-import="onToggleImport"
-        @on-export-submit="onExportSubmit"
-        @on-toggle-save-filter="onToggleSaveFilters"
-        @on-toggle-delete-filter="onToggleDeleteFilters"
-        @on-toggle-edit-filter="onToggleFilters"
-      />
-      <ContactsTable
-        :contacts="records"
-        :show-search-empty-state="showEmptySearchResult"
-        :is-loading="uiFlags.isFetching"
-        :active-contact-id="selectedContactId"
-        @on-sort-change="onSortChange"
-      />
-      <TableFooter
-        class="border-t border-slate-75 dark:border-slate-700/50"
-        :current-page="Number(meta.currentPage)"
-        :total-count="meta.count"
-        :page-size="15"
-        @page-change="onPageChange"
-      />
-    </div>
-
-    <AddCustomViews
-      v-if="showAddSegmentsModal"
-      :custom-views-query="segmentsQuery"
-      :filter-type="filterType"
-      :open-last-saved-item="openSavedItemInSegment"
-      @close="onCloseAddSegmentsModal"
-    />
-    <DeleteCustomViews
-      v-if="showDeleteSegmentsModal"
-      v-model:show="showDeleteSegmentsModal"
-      :active-custom-view="activeSegment"
-      :custom-views-id="segmentsId"
-      :active-filter-type="filterType"
-      :open-last-item-after-delete="openLastItemAfterDeleteInSegment"
-      @close="onCloseDeleteSegmentsModal"
-    />
-
-    <ContactInfoPanel
-      v-if="showContactViewPane"
-      :contact="selectedContact"
-      :on-close="closeContactInfoPanel"
-    />
-    <CreateContact :show="showCreateModal" @cancel="onToggleCreate" />
-    <woot-modal v-model:show="showImportModal" :on-close="onToggleImport">
-      <ImportContacts v-if="showImportModal" :on-close="onToggleImport" />
-    </woot-modal>
-    <woot-modal
-      v-model:show="showFiltersModal"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <ContactsAdvancedFilters
-        v-if="showFiltersModal"
-        :on-close="closeAdvanceFiltersModal"
-        :initial-filter-types="contactFilterItems"
-        :initial-applied-filters="appliedFilter"
-        :active-segment-name="activeSegmentName"
-        :is-segments-view="hasActiveSegments"
-        @apply-filter="onApplyFilter"
-        @update-segment="onUpdateSegment"
-        @clear-filters="clearFilters"
-      />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
deleted file mode 100644
index f942536cd..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    searchQuery: {
-      type: String,
-      default: '',
-    },
-    segmentsId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  emits: [
-    'onToggleSaveFilter',
-    'onToggleEditFilter',
-    'onToggleDeleteFilter',
-    'onToggleCreate',
-    'onToggleFilter',
-    'onToggleImport',
-    'onExportSubmit',
-    'onSearchSubmit',
-    'onInputSearch',
-  ],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  data() {
-    return {
-      showCreateModal: false,
-      showImportModal: false,
-    };
-  },
-  computed: {
-    searchButtonClass() {
-      return this.searchQuery !== ''
-        ? 'opacity-100 translate-x-0 visible'
-        : '-translate-x-px opacity-0 invisible';
-    },
-    ...mapGetters({
-      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
-    }),
-    hasAppliedFilters() {
-      return this.getAppliedContactFilters.length;
-    },
-    hasActiveSegments() {
-      return this.segmentsId !== 0;
-    },
-    exportDescription() {
-      return this.hasAppliedFilters
-        ? this.$t('EXPORT_CONTACTS.CONFIRM.FILTERED_MESSAGE')
-        : this.$t('EXPORT_CONTACTS.CONFIRM.MESSAGE');
-    },
-  },
-  methods: {
-    onToggleSegmentsModal() {
-      this.$emit('onToggleSaveFilter');
-    },
-    onToggleEditSegmentsModal() {
-      this.$emit('onToggleEditFilter');
-    },
-    onToggleDeleteSegmentsModal() {
-      this.$emit('onToggleDeleteFilter');
-    },
-    toggleCreate() {
-      this.$emit('onToggleCreate');
-    },
-    toggleFilter() {
-      this.$emit('onToggleFilter');
-    },
-    toggleImport() {
-      this.$emit('onToggleImport');
-    },
-    async submitExport() {
-      const ok =
-        await this.$refs.confirmExportContactsDialog.showConfirmation();
-
-      if (ok) {
-        this.$emit('onExportSubmit');
-      }
-    },
-    submitSearch() {
-      this.$emit('onSearchSubmit');
-    },
-    inputSearch(event) {
-      this.$emit('onInputSearch', event);
-    },
-  },
-};
-</script>
-
-<template>
-  <header
-    class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
-  >
-    <div class="flex justify-between w-full px-4 py-2">
-      <div class="flex flex-col items-center w-full gap-2 md:flex-row">
-        <div class="flex justify-between w-full gap-2">
-          <div
-            class="flex items-center justify-center max-w-full min-w-[6.25rem]"
-          >
-            <woot-sidemenu-icon />
-            <h1
-              class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-            >
-              {{ headerTitle }}
-            </h1>
-          </div>
-          <div
-            class="max-w-[400px] min-w-[100px] flex items-center relative mx-2"
-          >
-            <div class="flex items-center absolute h-full left-2.5">
-              <fluent-icon
-                icon="search"
-                class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
-              />
-            </div>
-            <input
-              type="text"
-              :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
-              class="!pl-9 !pr-[3.75rem] !text-sm !w-full !h-[2.375rem] !m-0 border-slate-100 dark:border-slate-600"
-              :value="searchQuery"
-              @keyup.enter="submitSearch"
-              @input="inputSearch"
-            />
-            <woot-button
-              :is-loading="false"
-              class="absolute h-8 px-2 py-0 ml-2 transition-transform duration-100 ease-linear clear right-1"
-              :class-names="searchButtonClass"
-              @click="submitSearch"
-            >
-              {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
-            </woot-button>
-          </div>
-        </div>
-        <div class="flex gap-1">
-          <div v-if="hasActiveSegments" class="flex gap-2">
-            <woot-button
-              class="clear [&>span]:hidden xs:[&>span]:block"
-              color-scheme="secondary"
-              icon="edit"
-              @click="onToggleEditSegmentsModal"
-            >
-              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
-            </woot-button>
-            <woot-button
-              class="clear [&>span]:hidden xs:[&>span]:block"
-              color-scheme="alert"
-              icon="delete"
-              @click="onToggleDeleteSegmentsModal"
-            >
-              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
-            </woot-button>
-          </div>
-          <div v-if="!hasActiveSegments" class="relative">
-            <div
-              v-if="hasAppliedFilters"
-              class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
-            />
-            <woot-button
-              class="clear [&>span]:hidden xs:[&>span]:block"
-              color-scheme="secondary"
-              data-testid="create-new-contact"
-              icon="filter"
-              @click="toggleFilter"
-            >
-              {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
-            </woot-button>
-          </div>
-
-          <woot-button
-            v-if="hasAppliedFilters && !hasActiveSegments"
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            color-scheme="alert"
-            variant="clear"
-            icon="save"
-            @click="onToggleSegmentsModal"
-          >
-            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
-          </woot-button>
-          <woot-button
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            color-scheme="success"
-            icon="person-add"
-            data-testid="create-new-contact"
-            @click="toggleCreate"
-          >
-            {{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
-          </woot-button>
-
-          <woot-button
-            v-if="isAdmin"
-            color-scheme="info"
-            icon="upload"
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            @click="toggleImport"
-          >
-            {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
-          </woot-button>
-
-          <woot-button
-            v-if="isAdmin"
-            color-scheme="info"
-            icon="download"
-            class="clear [&>span]:hidden xs:[&>span]:block"
-            @click="submitExport"
-          >
-            {{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
-          </woot-button>
-        </div>
-      </div>
-    </div>
-    <woot-confirm-modal
-      ref="confirmExportContactsDialog"
-      :title="$t('EXPORT_CONTACTS.CONFIRM.TITLE')"
-      :description="exportDescription"
-      :confirm-label="$t('EXPORT_CONTACTS.CONFIRM.YES')"
-      :cancel-label="$t('EXPORT_CONTACTS.CONFIRM.NO')"
-    />
-  </header>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
deleted file mode 100644
index a6954b501..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ImportContacts.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import Modal from '../../../../components/Modal.vue';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      show: true,
-      file: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    csvUrl() {
-      return '/downloads/import-contacts-sample.csv';
-    },
-  },
-  mounted() {
-    useTrack(CONTACTS_EVENTS.IMPORT_MODAL_OPEN);
-  },
-  methods: {
-    async uploadFile() {
-      try {
-        if (!this.file) return;
-        await this.$store.dispatch('contacts/import', this.file);
-        this.onClose();
-        useAlert(this.$t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
-        useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
-      } catch (error) {
-        useAlert(error.message || this.$t('IMPORT_CONTACTS.ERROR_MESSAGE'));
-        useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
-      }
-    },
-    handleFileUpload() {
-      this.file = this.$refs.file.files[0];
-    },
-  },
-};
-</script>
-
-<template>
-  <Modal v-model:show="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
-        <p>
-          {{ $t('IMPORT_CONTACTS.DESC') }}
-          <a :href="csvUrl" download="import-contacts-sample">{{
-            $t('IMPORT_CONTACTS.DOWNLOAD_LABEL')
-          }}</a>
-        </p>
-      </woot-modal-header>
-      <div class="flex flex-col p-8">
-        <div class="w-full">
-          <label>
-            <span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
-            <input
-              id="file"
-              ref="file"
-              type="file"
-              accept="text/csv"
-              @change="handleFileUpload"
-            />
-          </label>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <div class="w-full">
-            <woot-button
-              :disabled="uiFlags.isCreating || !file"
-              :loading="uiFlags.isCreating"
-              @click="uploadFile"
-            >
-              {{ $t('IMPORT_CONTACTS.FORM.SUBMIT') }}
-            </woot-button>
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('IMPORT_CONTACTS.FORM.CANCEL') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Modal>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
deleted file mode 100644
index 412024de9..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script>
-export default {
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    isCompleted: {
-      type: Boolean,
-      default: false,
-    },
-    date: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['completed', 'edit', 'delete'],
-
-  methods: {
-    onClick() {
-      this.$emit('completed', this.isCompleted);
-    },
-    onEdit() {
-      this.$emit('edit', this.id);
-    },
-    onDelete() {
-      this.$emit('delete', this.id);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="reminder-wrap">
-    <div class="status-wrap">
-      <input :checked="isCompleted" type="radio" @click="onClick" />
-    </div>
-    <div class="wrap">
-      <p class="content">
-        {{ text }}
-      </p>
-      <div class="footer">
-        <div class="meta">
-          <woot-label
-            :title="date"
-            description="date"
-            icon="ion-android-calendar"
-            color-scheme="secondary"
-          />
-          <woot-label
-            :title="label"
-            description="label"
-            color-scheme="secondary"
-          />
-        </div>
-        <div class="actions">
-          <woot-button
-            variant="smooth"
-            size="small"
-            icon="edit"
-            color-scheme="secondary"
-            class="action-button"
-            @click="onEdit"
-          />
-          <woot-button
-            variant="smooth"
-            size="small"
-            icon="ion-trash-b"
-            color-scheme="secondary"
-            class="action-button"
-            @click="onDelete"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.reminder-wrap {
-  display: flex;
-  margin-bottom: var(--space-smaller);
-
-  .status-wrap {
-    padding: var(--space-small) var(--space-smaller);
-    margin-top: var(--space-smaller);
-  }
-
-  .wrap {
-    padding: var(--space-small);
-
-    .footer {
-      display: flex;
-      justify-content: space-between;
-
-      .meta {
-        display: flex;
-      }
-    }
-  }
-}
-
-.actions {
-  display: none;
-
-  .action-button {
-    margin-right: var(--space-small);
-    height: var(--space-medium);
-    width: var(--space-medium);
-  }
-}
-
-.reminder-wrap:hover {
-  .actions {
-    display: flex;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
deleted file mode 100644
index a9c4e1982..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script>
-export default {
-  emits: ['notes', 'events', 'conversation'],
-
-  methods: {
-    onClickNotes() {
-      this.$emit('notes');
-    },
-
-    onClickEvents() {
-      this.$emit('events');
-    },
-
-    onClickConversation() {
-      this.$emit('conversation');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="wrap">
-    <div class="header">
-      <h5 class="text-lg text-black-900 dark:text-slate-200">
-        {{ $t('EVENTS.HEADER.TITLE') }}
-      </h5>
-    </div>
-    <div class="button-wrap">
-      <woot-button
-        variant="hollow"
-        size="tiny"
-        color-scheme="secondary"
-        class-names="pill-button"
-        @click="onClickNotes"
-      >
-        {{ $t('EVENTS.BUTTON.PILL_BUTTON_NOTES') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="tiny"
-        color-scheme="secondary"
-        class-names="pill-button"
-        @click="onClickEvents"
-      >
-        {{ $t('EVENTS.BUTTON.PILL_BUTTON_EVENTS') }}
-      </woot-button>
-      <woot-button
-        variant="hollow"
-        size="tiny"
-        color-scheme="secondary"
-        class-names="pill-button"
-        @click="onClickConversation"
-      >
-        {{ $t('EVENTS.BUTTON.PILL_BUTTON_CONVO') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.wrap {
-  width: 100%;
-  padding: var(--space-normal);
-
-  .button-wrap {
-    display: flex;
-
-    .pill-button {
-      margin-right: var(--space-small);
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
deleted file mode 100644
index 48547f690..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<!-- Unused file deprecated -->
-<script>
-import { dynamicTime } from 'shared/helpers/timeHelper';
-export default {
-  props: {
-    eventType: {
-      type: String,
-      default: '',
-    },
-    eventPath: {
-      type: String,
-      default: '',
-    },
-    eventBody: {
-      type: String,
-      default: '',
-    },
-    timeStamp: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ['more'],
-
-  computed: {
-    readableTime() {
-      return dynamicTime(this.timeStamp);
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('more');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="timeline-card-wrap">
-    <div class="icon-chatbox">
-      <i class="ion-chatboxes" />
-    </div>
-    <div class="card-wrap">
-      <div class="header">
-        <div class="text-wrap">
-          <h6 class="text-sm">
-            {{ eventType }}
-          </h6>
-          <span class="event-path">{{ 'on' }} {{ eventPath }}</span>
-        </div>
-        <div class="date-wrap">
-          <span>{{ readableTime }}</span>
-        </div>
-      </div>
-      <div class="comment-wrap">
-        <p class="comment">
-          {{ eventBody }}
-        </p>
-      </div>
-    </div>
-    <div class="icon-more" @click="onClick">
-      <i class="ion-android-more-vertical" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.timeline-card-wrap {
-  display: flex;
-  width: 100%;
-  color: var(--color-body);
-  padding: var(--space-small);
-
-  .icon-chatbox {
-    width: var(--space-large);
-    height: var(--space-large);
-    border-radius: 50%;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    border: 1px solid var(--color-border);
-    background-color: var(--color-background);
-
-    .ion-chatboxes {
-      font-size: var(--font-size-default);
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .card-wrap {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: var(--space-smaller) var(--space-normal) 0;
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-
-      .text-wrap {
-        display: flex;
-      }
-
-      .event-path {
-        font-size: var(--font-size-mini);
-        margin-left: var(--space-smaller);
-      }
-
-      .date-wrap {
-        font-size: var(--font-size-micro);
-      }
-    }
-
-    .comment-wrap {
-      border: 1px solid var(--color-border-light);
-
-      .comment {
-        padding: var(--space-small);
-        font-size: var(--font-size-mini);
-        margin: 0;
-      }
-    }
-  }
-
-  .icon-more {
-    .ion-android-more-vertical {
-      font-size: var(--font-size-medium);
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js b/app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js
deleted file mode 100644
index 549910263..000000000
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import AddReminder from '../AddReminder.vue';
-
-let wrapper;
-
-describe('AddReminder', () => {
-  beforeEach(() => {
-    wrapper = shallowMount(AddReminder, {
-      mocks: {
-        $t: x => x,
-        $store: { getters: {}, state: {} },
-      },
-      stubs: { WootButton: { template: '<button />' } },
-    });
-  });
-
-  it('tests resetValue', () => {
-    const resetValue = vi.spyOn(wrapper.vm, 'resetValue');
-    wrapper.vm.content = 'test';
-    wrapper.vm.date = '08/11/2022';
-    wrapper.vm.resetValue();
-    expect(wrapper.vm.content).toEqual('');
-    expect(wrapper.vm.date).toEqual('');
-    expect(resetValue).toHaveBeenCalled();
-  });
-
-  it('tests optionSelected', () => {
-    const optionSelected = vi.spyOn(wrapper.vm, 'optionSelected');
-    wrapper.vm.label = '';
-    wrapper.vm.optionSelected({ target: { value: 'test' } });
-    expect(wrapper.vm.label).toEqual('test');
-    expect(optionSelected).toHaveBeenCalled();
-  });
-
-  it('tests onAdd', () => {
-    const onAdd = vi.spyOn(wrapper.vm, 'onAdd');
-    wrapper.vm.label = 'label';
-    wrapper.vm.content = 'content';
-    wrapper.vm.date = '08/11/2022';
-    wrapper.vm.onAdd();
-    expect(onAdd).toHaveBeenCalled();
-    expect(wrapper.emitted().add[0]).toEqual([
-      { content: 'content', date: '08/11/2022', label: 'label' },
-    ]);
-  });
-});
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index 68bfb288f..9f99157e6 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -1,120 +1,154 @@
-<script>
-import { mapGetters } from 'vuex';
-import ContactInfoPanel from '../components/ContactInfoPanel.vue';
-import ContactNotes from 'dashboard/modules/notes/NotesOnContactPage.vue';
-import SettingsHeader from '../../settings/SettingsHeader.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+<script setup>
+import { onMounted, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute, useRouter } from 'vue-router';
 
-export default {
-  components: {
-    ContactInfoPanel,
-    ContactNotes,
-    SettingsHeader,
-    Spinner,
-    Thumbnail,
-  },
-  props: {
-    contactId: {
-      type: [String, Number],
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedTabIndex: 0,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    tabs() {
-      return [
-        {
-          key: 0,
-          name: this.$t('NOTES.HEADER.TITLE'),
-        },
-      ];
-    },
-    showEmptySearchResult() {
-      const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
-      return hasEmptyResults;
-    },
-    contact() {
-      return this.$store.getters['contacts/getContact'](this.contactId);
-    },
-    backUrl() {
-      return `/app/accounts/${this.$route.params.accountId}/contacts`;
-    },
-  },
-  mounted() {
-    this.fetchContactDetails();
-  },
-  methods: {
-    onClickTabChange(index) {
-      this.selectedTabIndex = index;
-    },
-    fetchContactDetails() {
-      const { contactId: id } = this;
-      this.$store.dispatch('contacts/show', { id });
-    },
-  },
+import ContactsDetailsLayout from 'dashboard/components-next/Contacts/ContactsDetailsLayout.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ContactDetails from 'dashboard/components-next/Contacts/Pages/ContactDetails.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import ContactNotes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue';
+import ContactHistory from 'dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue';
+import ContactMerge from 'dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue';
+import ContactCustomAttributes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue';
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+const contact = useMapGetter('contacts/getContactById');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const activeTab = ref('attributes');
+const contactMergeRef = ref(null);
+
+const isFetchingItem = computed(() => uiFlags.value.isFetchingItem);
+const isMergingContact = computed(() => uiFlags.value.isMerging);
+
+const selectedContact = computed(() => contact.value(route.params.contactId));
+
+const showSpinner = computed(
+  () => isFetchingItem.value || isMergingContact.value
+);
+
+const { t } = useI18n();
+
+const CONTACT_TABS_OPTIONS = [
+  { key: 'ATTRIBUTES', value: 'attributes' },
+  { key: 'HISTORY', value: 'history' },
+  { key: 'NOTES', value: 'notes' },
+  { key: 'MERGE', value: 'merge' },
+];
+
+const tabs = computed(() => {
+  return CONTACT_TABS_OPTIONS.map(tab => ({
+    label: t(`CONTACTS_LAYOUT.SIDEBAR.TABS.${tab.key}`),
+    value: tab.value,
+  }));
+});
+
+const activeTabIndex = computed(() => {
+  return CONTACT_TABS_OPTIONS.findIndex(v => v.value === activeTab.value);
+});
+
+const goToContactsList = () => {
+  if (window.history.state?.back || window.history.length > 1) {
+    router.back();
+  } else {
+    router.push(`/app/accounts/${route.params.accountId}/contacts?page=1`);
+  }
 };
+
+const fetchActiveContact = async () => {
+  if (route.params.contactId) {
+    await store.dispatch('contacts/show', { id: route.params.contactId });
+    await store.dispatch(
+      'contacts/fetchContactableInbox',
+      route.params.contactId
+    );
+  }
+};
+
+const handleTabChange = tab => {
+  activeTab.value = tab.value;
+};
+
+const fetchContactNotes = () => {
+  const { contactId } = route.params;
+  if (contactId) store.dispatch('contactNotes/get', { contactId });
+};
+
+const fetchContactConversations = () => {
+  const { contactId } = route.params;
+  if (contactId) store.dispatch('contactConversations/get', contactId);
+};
+
+const fetchAttributes = () => {
+  store.dispatch('attributes/get');
+};
+
+onMounted(() => {
+  fetchActiveContact();
+  fetchContactNotes();
+  fetchContactConversations();
+  fetchAttributes();
+});
 </script>
 
 <template>
   <div
-    class="flex justify-between flex-col h-full m-0 flex-1 bg-white dark:bg-slate-900"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
   >
-    <SettingsHeader
-      button-route="new"
-      :header-title="contact.name"
-      show-back-button
-      :back-button-label="$t('CONTACT_PROFILE.BACK_BUTTON')"
-      :back-url="backUrl"
-      :show-new-button="false"
+    <ContactsDetailsLayout
+      :button-label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
+      :selected-contact="selectedContact"
+      is-detail-view
+      :show-pagination-footer="false"
+      @go-to-contacts-list="goToContactsList"
     >
-      <Thumbnail
-        v-if="contact.thumbnail"
-        :src="contact.thumbnail"
-        :username="contact.name"
-        size="32px"
-        class="mr-2 rtl:mr-0 rtl:ml-2"
-      />
-    </SettingsHeader>
-
-    <div v-if="uiFlags.isFetchingItem" class="text-center p-4 text-base h-full">
-      <Spinner size="" />
-      <span>{{ $t('CONTACT_PROFILE.LOADING') }}</span>
-    </div>
-    <div v-else-if="contact.id" class="overflow-hidden flex-1 min-w-0">
-      <div class="flex flex-wrap ml-auto mr-auto max-w-full h-full">
-        <ContactInfoPanel
-          :show-close-button="false"
-          :show-avatar="false"
-          :contact="contact"
-        />
-        <div class="w-3/4 h-full">
-          <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
-            <woot-tabs-item
-              v-for="(tab, index) in tabs"
-              :key="tab.key"
-              :index="index"
-              :name="tab.name"
-              :show-badge="false"
-            />
-          </woot-tabs>
-          <div
-            class="bg-slate-25 dark:bg-slate-800 h-[calc(100%-40px)] p-4 overflow-auto"
-          >
-            <ContactNotes
-              v-if="selectedTabIndex === 0"
-              :contact-id="Number(contactId)"
-            />
-          </div>
-        </div>
+      <div
+        v-if="showSpinner"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
       </div>
-    </div>
+      <ContactDetails
+        v-else-if="selectedContact"
+        :selected-contact="selectedContact"
+        @go-to-contacts-list="goToContactsList"
+      />
+      <template #sidebar>
+        <div class="px-6">
+          <TabBar
+            :tabs="tabs"
+            :initial-active-tab="activeTabIndex"
+            class="w-full [&>button]:w-full bg-n-alpha-black2"
+            @tab-changed="handleTabChange"
+          />
+        </div>
+        <div
+          v-if="isFetchingItem"
+          class="flex items-center justify-center py-10 text-n-slate-11"
+        >
+          <Spinner />
+        </div>
+        <template v-else>
+          <ContactCustomAttributes
+            v-if="activeTab === 'attributes'"
+            :selected-contact="selectedContact"
+          />
+          <ContactNotes v-if="activeTab === 'notes'" />
+          <ContactHistory v-if="activeTab === 'history'" />
+          <ContactMerge
+            v-if="activeTab === 'merge'"
+            ref="contactMergeRef"
+            :selected-contact="selectedContact"
+            @go-to-contacts-list="goToContactsList"
+            @reset-tab="handleTabChange(CONTACT_TABS_OPTIONS[0])"
+          />
+        </template>
+      </template>
+    </ContactsDetailsLayout>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
new file mode 100644
index 000000000..76ae7eb4e
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -0,0 +1,301 @@
+<script setup>
+import { onMounted, computed, ref, reactive, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { debounce } from '@chatwoot/utils';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+
+import ContactsListLayout from 'dashboard/components-next/Contacts/ContactsListLayout.vue';
+import ContactsList from 'dashboard/components-next/Contacts/Pages/ContactsList.vue';
+import ContactEmptyState from 'dashboard/components-next/Contacts/EmptyState/ContactEmptyState.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const DEFAULT_SORT_FIELD = 'last_activity_at';
+const DEBOUNCE_DELAY = 300;
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const { updateUISettings, uiSettings } = useUISettings();
+
+const contacts = useMapGetter('contacts/getContactsList');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+const customViewsUiFlags = useMapGetter('customViews/getUIFlags');
+const segments = useMapGetter('customViews/getContactCustomViews');
+const appliedFilters = useMapGetter('contacts/getAppliedContactFilters');
+const meta = useMapGetter('contacts/getMeta');
+
+const searchQuery = computed(() => route.query?.search);
+const searchValue = ref(searchQuery.value || '');
+const pageNumber = computed(() => Number(route.query?.page) || 1);
+
+const parseSortSettings = (sortString = '') => {
+  const hasDescending = sortString.startsWith('-');
+  const sortField = hasDescending ? sortString.slice(1) : sortString;
+  return {
+    sort: sortField || DEFAULT_SORT_FIELD,
+    order: hasDescending ? '-' : '',
+  };
+};
+
+const { contacts_sort_by: contactSortBy = '' } = uiSettings.value ?? {};
+const { sort: initialSort, order: initialOrder } =
+  parseSortSettings(contactSortBy);
+
+const sortState = reactive({
+  activeSort: initialSort,
+  activeOrdering: initialOrder,
+});
+
+const activeLabel = computed(() => route.params.label);
+const activeSegmentId = computed(() => route.params.segmentId);
+const isFetchingList = computed(
+  () => uiFlags.value.isFetching || customViewsUiFlags.value.isFetching
+);
+const currentPage = computed(() => Number(meta.value?.currentPage));
+const totalItems = computed(() => meta.value?.count);
+const activeSegment = computed(() => {
+  if (!activeSegmentId.value) return undefined;
+  return segments.value.find(view => view.id === Number(activeSegmentId.value));
+});
+
+const hasContacts = computed(() => contacts.value.length > 0);
+const isContactIndexView = computed(
+  () => route.name === 'contacts_dashboard_index' && pageNumber.value === 1
+);
+const hasAppliedFilters = computed(() => {
+  return appliedFilters.value.length > 0;
+});
+const showEmptyStateLayout = computed(() => {
+  return (
+    !searchQuery.value &&
+    !hasContacts.value &&
+    isContactIndexView.value &&
+    !hasAppliedFilters.value
+  );
+});
+const showEmptyText = computed(() => {
+  return (
+    (searchQuery.value ||
+      hasAppliedFilters.value ||
+      !isContactIndexView.value) &&
+    !hasContacts.value
+  );
+});
+
+const headerTitle = computed(() => {
+  if (searchQuery.value) return t('CONTACTS_LAYOUT.HEADER.SEARCH_TITLE');
+  if (activeSegmentId.value) return activeSegment.value?.name;
+  if (activeLabel.value) return `#${activeLabel.value}`;
+  return t('CONTACTS_LAYOUT.HEADER.TITLE');
+});
+
+const updatePageParam = (page, search = '') => {
+  const query = {
+    ...route.query,
+    page: page.toString(),
+    ...(search ? { search } : {}),
+  };
+
+  if (!search) {
+    delete query.search;
+  }
+
+  router.replace({ query });
+};
+
+const buildSortAttr = () =>
+  `${sortState.activeOrdering}${sortState.activeSort}`;
+
+const getCommonFetchParams = (page = 1) => ({
+  page,
+  sortAttr: buildSortAttr(),
+  label: activeLabel.value,
+});
+
+const fetchContacts = async (page = 1) => {
+  await store.dispatch('contacts/clearContactFilters');
+  await store.dispatch('contacts/get', getCommonFetchParams(page));
+  updatePageParam(page);
+};
+
+const fetchSavedOrAppliedFilteredContact = async (payload, page = 1) => {
+  if (!activeSegmentId.value && !hasAppliedFilters.value) return;
+  await store.dispatch('contacts/filter', {
+    ...getCommonFetchParams(page),
+    queryPayload: payload,
+  });
+  updatePageParam(page);
+};
+
+const searchContacts = debounce(async (value, page = 1) => {
+  await store.dispatch('contacts/clearContactFilters');
+  searchValue.value = value;
+
+  if (!value) {
+    updatePageParam(page);
+    await fetchContacts(page);
+    return;
+  }
+
+  updatePageParam(page, value);
+  await store.dispatch('contacts/search', {
+    ...getCommonFetchParams(page),
+    search: encodeURIComponent(value),
+  });
+}, DEBOUNCE_DELAY);
+
+const fetchContactsBasedOnContext = async page => {
+  updatePageParam(page, searchValue.value);
+  if (isFetchingList.value) return;
+  if (searchQuery.value) {
+    await searchContacts(searchQuery.value, page);
+    return;
+  }
+  // Reset the search value when we change the view
+  searchValue.value = '';
+  // If there are applied filters or active segment with query
+  if (
+    (hasAppliedFilters.value || activeSegment.value?.query) &&
+    !activeLabel.value
+  ) {
+    const queryPayload =
+      activeSegment.value?.query || filterQueryGenerator(appliedFilters.value);
+    await fetchSavedOrAppliedFilteredContact(queryPayload, page);
+    return;
+  }
+  // Default case: fetch regular contacts + label
+  await fetchContacts(page);
+};
+
+const handleSort = async ({ sort, order }) => {
+  Object.assign(sortState, { activeSort: sort, activeOrdering: order });
+
+  await updateUISettings({
+    contacts_sort_by: buildSortAttr(),
+  });
+
+  if (searchQuery.value) {
+    await searchContacts(searchValue.value);
+    return;
+  }
+
+  await (activeSegmentId.value || hasAppliedFilters.value
+    ? fetchSavedOrAppliedFilteredContact(
+        activeSegmentId.value
+          ? activeSegment.value?.query
+          : filterQueryGenerator(appliedFilters.value)
+      )
+    : fetchContacts());
+};
+
+const createContact = async contact => {
+  await store.dispatch('contacts/create', contact);
+};
+
+watch(
+  () => uiSettings.value?.contacts_sort_by,
+  newSortBy => {
+    if (newSortBy) {
+      const { sort, order } = parseSortSettings(newSortBy);
+      sortState.activeSort = sort;
+      sortState.activeOrdering = order;
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  [activeLabel, activeSegment],
+  () => {
+    fetchContactsBasedOnContext(pageNumber.value);
+  },
+  { deep: true }
+);
+
+watch(searchQuery, value => {
+  if (isFetchingList.value) return;
+  searchValue.value = value || '';
+  // Reset the view if there is search query when we click on the sidebar group
+  if (value === undefined) {
+    fetchContacts();
+  }
+});
+
+onMounted(async () => {
+  if (!activeSegmentId.value) {
+    if (searchQuery.value) {
+      await searchContacts(searchQuery.value, pageNumber.value);
+      return;
+    }
+    await fetchContacts(pageNumber.value);
+  } else if (activeSegment.value && activeSegmentId.value) {
+    await fetchSavedOrAppliedFilteredContact(
+      activeSegment.value.query,
+      pageNumber.value
+    );
+  }
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
+  >
+    <ContactsListLayout
+      :search-value="searchValue"
+      :header-title="headerTitle"
+      :current-page="currentPage"
+      :total-items="totalItems"
+      :show-pagination-footer="!isFetchingList && hasContacts"
+      :active-sort="sortState.activeSort"
+      :active-ordering="sortState.activeOrdering"
+      :active-segment="activeSegment"
+      :segments-id="activeSegmentId"
+      :is-fetching-list="isFetchingList"
+      :has-applied-filters="hasAppliedFilters"
+      @update:current-page="fetchContactsBasedOnContext"
+      @search="searchContacts"
+      @update:sort="handleSort"
+      @apply-filter="fetchSavedOrAppliedFilteredContact"
+      @clear-filters="fetchContacts"
+    >
+      <div
+        v-if="isFetchingList"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+
+      <template v-else>
+        <ContactEmptyState
+          v-if="showEmptyStateLayout"
+          class="pt-14"
+          :title="t('CONTACTS_LAYOUT.EMPTY_STATE.TITLE')"
+          :subtitle="t('CONTACTS_LAYOUT.EMPTY_STATE.SUBTITLE')"
+          :button-label="t('CONTACTS_LAYOUT.EMPTY_STATE.BUTTON_LABEL')"
+          @create="createContact"
+        />
+
+        <div
+          v-else-if="showEmptyText"
+          class="flex items-center justify-center py-10"
+        >
+          <span class="text-base text-n-slate-11">
+            {{
+              searchQuery || !hasAppliedFilters
+                ? t('CONTACTS_LAYOUT.EMPTY_STATE.SEARCH_EMPTY_STATE_TITLE')
+                : t('CONTACTS_LAYOUT.EMPTY_STATE.LIST_EMPTY_STATE_TITLE')
+            }}
+          </span>
+        </div>
+
+        <ContactsList v-else :contacts="contacts" />
+      </template>
+    </ContactsListLayout>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/routes.js b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
index d9abe796e..ea5238a3b 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
@@ -1,48 +1,60 @@
-/* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-import ContactsView from './components/ContactsView.vue';
+import ContactsIndex from './pages/ContactsIndex.vue';
 import ContactManageView from './pages/ContactManageView.vue';
 
+const commonMeta = {
+  permissions: ['administrator', 'agent', 'contact_manage'],
+};
+
 export const routes = [
   {
     path: frontendURL('accounts/:accountId/contacts'),
-    name: 'contacts_dashboard',
-    meta: {
-      permissions: ['administrator', 'agent', 'contact_manage'],
-    },
-    component: ContactsView,
-  },
-  {
-    path: frontendURL('accounts/:accountId/contacts/custom_view/:id'),
-    name: 'contacts_segments_dashboard',
-    meta: {
-      permissions: ['administrator', 'agent', 'contact_manage'],
-    },
-    component: ContactsView,
-    props: route => {
-      return { segmentsId: route.params.id };
-    },
-  },
-  {
-    path: frontendURL('accounts/:accountId/labels/:label/contacts'),
-    name: 'contacts_labels_dashboard',
-    meta: {
-      permissions: ['administrator', 'agent', 'contact_manage'],
-    },
-    component: ContactsView,
-    props: route => {
-      return { label: route.params.label };
-    },
+    component: ContactsIndex,
+    meta: commonMeta,
+    children: [
+      {
+        path: '',
+        name: 'contacts_dashboard_index',
+        component: ContactsIndex,
+        meta: commonMeta,
+      },
+      {
+        path: 'segments/:segmentId',
+        name: 'contacts_dashboard_segments_index',
+        component: ContactsIndex,
+        meta: commonMeta,
+      },
+      {
+        path: 'labels/:label',
+        name: 'contacts_dashboard_labels_index',
+        component: ContactsIndex,
+        meta: commonMeta,
+      },
+    ],
   },
   {
     path: frontendURL('accounts/:accountId/contacts/:contactId'),
-    name: 'contact_profile_dashboard',
-    meta: {
-      permissions: ['administrator', 'agent', 'contact_manage'],
-    },
     component: ContactManageView,
-    props: route => {
-      return { contactId: route.params.contactId };
-    },
+    meta: commonMeta,
+    children: [
+      {
+        path: '',
+        name: 'contacts_edit',
+        component: ContactManageView,
+        meta: commonMeta,
+      },
+      {
+        path: 'segments/:segmentId',
+        name: 'contacts_edit_segment',
+        component: ContactManageView,
+        meta: commonMeta,
+      },
+      {
+        path: 'labels/:label',
+        name: 'contacts_edit_label',
+        component: ContactManageView,
+        meta: commonMeta,
+      },
+    ],
   },
 ];
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
deleted file mode 100644
index 0a409e65d..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-import MessageFormatter from 'shared/helpers/MessageFormatter.js';
-
-export default {
-  props: {
-    customAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    listOfAttributes() {
-      return Object.keys(this.customAttributes).filter(key => {
-        const value = this.customAttributes[key];
-        return value !== null && value !== undefined && value !== '';
-      });
-    },
-  },
-  methods: {
-    valueWithLink(attribute) {
-      const parsedAttribute = this.parseAttributeToString(attribute);
-      const messageFormatter = new MessageFormatter(parsedAttribute);
-      return messageFormatter.formattedMessage;
-    },
-    parseAttributeToString(attribute) {
-      switch (typeof attribute) {
-        case 'string':
-          return attribute;
-        case 'object':
-          return JSON.stringify(attribute);
-        default:
-          return `${attribute}`;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="custom-attributes--panel">
-    <div
-      v-for="attribute in listOfAttributes"
-      :key="attribute"
-      class="custom-attribute--row"
-    >
-      <div class="custom-attribute--row__attribute">
-        {{ attribute }}
-      </div>
-      <div>
-        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
-      </div>
-    </div>
-    <p v-if="!listOfAttributes.length">
-      {{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
-    </p>
-  </div>
-</template>
-
-<style scoped>
-.custom-attributes--panel {
-  margin-bottom: var(--space-normal);
-}
-
-.custom-attribute--row__attribute {
-  font-weight: 500;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index e998a85a1..8739b4f26 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -92,9 +92,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
-  >
+  <div class="w-full">
     <ContactInfo
       :contact="contact"
       :channel-type="channelType"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index f91861096..d0e1610e9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAccount } from 'dashboard/composables/useAccount';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
 import PopOverSearch from './search/PopOverSearch.vue';
@@ -8,6 +9,7 @@ import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 export default {
   components: {
@@ -52,10 +54,12 @@ export default {
   },
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
+    const { accountId } = useAccount();
 
     return {
       uiSettings,
       updateUISettings,
+      accountId,
     };
   },
   data() {
@@ -67,6 +71,7 @@ export default {
     ...mapGetters({
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     showConversationList() {
       return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -90,6 +95,12 @@ export default {
       }
       return false;
     },
+    showPopOverSearch() {
+      return !this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
   },
   watch: {
     conversationId() {
@@ -193,7 +204,7 @@ export default {
 </script>
 
 <template>
-  <section class="bg-white conversation-page dark:bg-slate-900">
+  <section class="flex w-full h-full">
     <ChatList
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"
@@ -205,6 +216,7 @@ export default {
       @conversation-load="onConversationLoad"
     >
       <PopOverSearch
+        v-if="showPopOverSearch"
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle-conversation-layout="toggleConversationLayout"
       />
@@ -219,11 +231,3 @@ export default {
     <CmdBarConversationSnooze />
   </section>
 </template>
-
-<style lang="scss" scoped>
-.conversation-page {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index ffc7155f5..f42672ddd 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -9,7 +9,6 @@ import SocialIcons from './SocialIcons.vue';
 import EditContact from './EditContact.vue';
 import NewConversation from './NewConversation.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
-import { getCountryFlag } from 'dashboard/helper/flag';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   isAConversationRoute,
@@ -127,8 +126,12 @@ export default {
     },
     findCountryFlag(countryCode, cityAndCountry) {
       try {
-        const countryFlag = countryCode ? getCountryFlag(countryCode) : '🌎';
-        return `${cityAndCountry} ${countryFlag}`;
+        if (!countryCode) {
+          return `${cityAndCountry} 🌎`;
+        }
+
+        const code = countryCode?.toLowerCase();
+        return `${cityAndCountry} <span class="fi fi-${code} size-3.5"></span>`;
       } catch (error) {
         return '';
       }
@@ -171,7 +174,7 @@ export default {
 </script>
 
 <template>
-  <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
+  <div class="relative items-center w-full p-4">
     <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
       <div class="flex flex-row justify-between">
         <Thumbnail
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 3924ec22d..80383b840 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -87,10 +87,9 @@ export default {
       />
       <span
         v-if="value"
+        v-dompurify-html="value"
         class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
-      >
-        {{ value }}
-      </span>
+      />
       <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
       }}</span>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index c6d60eb53..47517798b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -138,7 +138,7 @@ export default {
     },
     selectedInbox: {
       get() {
-        const inboxList = this.contact.contactableInboxes || [];
+        const inboxList = this.contact.contact_inboxes || [];
         return (
           inboxList.find(inbox => {
             return inbox.inbox?.id && inbox.inbox?.id === this.targetInbox?.id;
@@ -152,7 +152,7 @@ export default {
       },
     },
     showNoInboxAlert() {
-      if (!this.contact.contactableInboxes) {
+      if (!this.contact.contact_inboxes) {
         return false;
       }
       return this.inboxes.length === 0 && !this.uiFlags.isFetchingInboxes;
@@ -166,7 +166,7 @@ export default {
         : this.$t('CONVERSATION.FOOTER.ENABLE_SIGN_TOOLTIP');
     },
     inboxes() {
-      const inboxList = this.contact.contactableInboxes || [];
+      const inboxList = this.contact.contact_inboxes || [];
       return inboxList.map(inbox => ({
         ...inbox.inbox,
         sourceId: inbox.source_id,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
deleted file mode 100644
index 6df8db0bb..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/CreateContact.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import ContactForm from './ContactForm.vue';
-
-export default {
-  components: {
-    ContactForm,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['cancel', 'update:show'],
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-  },
-  methods: {
-    onCancel() {
-      this.$emit('cancel');
-    },
-    onSuccess() {
-      this.$emit('cancel');
-    },
-    async onSubmit(contactItem) {
-      await this.$store.dispatch('contacts/create', contactItem);
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal
-    v-model:show="localShow"
-    :on-close="onCancel"
-    modal-type="right-aligned"
-  >
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('CREATE_CONTACT.TITLE')"
-        :header-content="$t('CREATE_CONTACT.DESC')"
-      />
-      <ContactForm
-        :in-progress="uiFlags.isCreating"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 09c4e11ba..3adb9910e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -34,25 +34,25 @@ export default {
 <template>
   <div class="relative">
     <div
-      class="flex px-4 pb-1 flex-row gap-1 pt-2.5 border-b border-transparent"
+      class="flex px-4 pb-1 justify-between items-center flex-row gap-1 pt-2.5 border-b border-transparent"
     >
       <woot-sidemenu-icon
         size="tiny"
-        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5"
+        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5 flex-shrink-0 focus:!bg-n-solid-3 dark:!hover:bg-n-solid-2 hover:!bg-n-alpha-2"
       />
       <router-link
         :to="searchUrl"
-        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
+        class="inline-flex items-center flex-1 h-6 min-w-0 gap-1 px-2 py-0 text-left rounded-md rtl:mr-2.5 search-link rtl:text-right bg-n-slate-9/10 hover:bg-n-slate-3"
       >
-        <div class="flex">
+        <div class="flex flex-shrink-0">
           <fluent-icon
             icon="search"
-            class="search--icon text-slate-800 dark:text-slate-200"
+            class="search--icon text-n-slate-11"
             size="16"
           />
         </div>
         <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
+          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-n-slate-11"
         >
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </p>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
index 4ebe1ac8f..faf0a124f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     isOnExpandedLayout: {
       type: Boolean,
@@ -16,22 +21,17 @@ export default {
 </script>
 
 <template>
-  <woot-button
+  <NextButton
     v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
-    icon="arrow-right-import"
-    size="tiny"
-    variant="smooth"
-    color-scheme="secondary"
-    class="layout-switch__container"
-    :class="{ expanded: isOnExpandedLayout }"
+    :icon="
+      isOnExpandedLayout
+        ? 'i-lucide-arrow-left-to-line'
+        : 'i-lucide-arrow-right-to-line'
+    "
+    slate
+    xs
+    faded
+    class="flex-shrink-0 rtl:rotate-180 ltr:rotate-0"
     @click="toggle"
   />
 </template>
-
-<style lang="scss" soped>
-.layout-switch__container {
-  &.expanded .icon {
-    transform: rotate(180deg);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 530106f0a..b91fc2414 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -175,7 +175,10 @@ export default {
     },
     canLocktoSingleConversation() {
       return (
-        this.isASmsInbox || this.isAWhatsAppChannel || this.isAFacebookInbox
+        this.isASmsInbox ||
+        this.isAWhatsAppChannel ||
+        this.isAFacebookInbox ||
+        this.isAPIInbox
       );
     },
     inboxNameLabel() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
index 18ae1c07e..898d9afb6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
@@ -10,6 +10,7 @@ defineProps({
     required: true,
   },
 });
+
 const emit = defineEmits(['change']);
 const onChange = (id, value) => {
   emit('change', id, value);
@@ -23,18 +24,22 @@ const onChange = (id, value) => {
     >
       {{ label }}
     </label>
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-3 mt-2">
       <div
         v-for="item in items"
         :key="item.id"
         class="flex flex-row items-start gap-2"
       >
         <CheckBox
+          :id="`checkbox-condition-${item.value}`"
           :is-checked="item.model"
           :value="item.value"
           @update="onChange"
         />
-        <label class="text-sm font-normal text-ash-900">
+        <label
+          class="text-sm font-normal text-ash-900"
+          :for="`checkbox-condition-${item.value}`"
+        >
           {{ item.label }}
         </label>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
index ddc6545f6..890956f7e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
-import { ALERT_EVENTS } from './constants';
+import CheckBox from 'v3/components/Form/CheckBox.vue';
+import { ALERT_EVENTS, EVENT_TYPES } from './constants';
 
 const props = defineProps({
   label: {
@@ -9,50 +10,83 @@ const props = defineProps({
   },
   value: {
     type: String,
-    default: 'all',
+    default: '',
   },
 });
 
 const emit = defineEmits(['update']);
 
 const alertEvents = ALERT_EVENTS;
+const alertEventValues = Object.values(EVENT_TYPES);
 
 const selectedValue = computed({
-  get: () => props.value,
-  set: value => {
-    emit('update', value);
+  get: () => {
+    // maintain backward compatibility
+    if (props.value === 'none') return [];
+    if (props.value === 'mine') return [EVENT_TYPES.ASSIGNED];
+    if (props.value === 'all') return [...alertEventValues];
+
+    const validValues = props.value
+      .split('+')
+      .filter(value => alertEventValues.includes(value));
+
+    return [...new Set(validValues)];
   },
+  set: value => {
+    const sortedValues = value.filter(Boolean).sort();
+    const uniqueValues = [...new Set(sortedValues)];
+
+    if (uniqueValues.length === 0) {
+      emit('update', 'none');
+      return;
+    }
+
+    emit('update', uniqueValues.join('+'));
+  },
+});
+
+const setValue = (isChecked, value) => {
+  let updatedValue = selectedValue.value;
+  if (isChecked) {
+    updatedValue.push(value);
+  } else {
+    updatedValue = updatedValue.filter(item => item !== value);
+  }
+
+  selectedValue.value = updatedValue;
+};
+
+const alertDescription = computed(() => {
+  const base =
+    'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_COMBINATIONS.';
+
+  if (props.value === '' || props.value === 'none') {
+    return base + 'NONE';
+  }
+
+  return base + selectedValue.value.join('+').toUpperCase();
 });
 </script>
 
 <template>
   <div>
-    <label
-      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
-    >
+    <label class="pb-1 text-sm font-medium leading-6 text-ash-900">
       {{ label }}
     </label>
-    <div
-      class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-xl border-ash-200"
-    >
+    <div class="grid gap-3 mt-2">
       <div
         v-for="option in alertEvents"
         :key="option.value"
-        class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow last:border-r-0"
+        class="flex items-center gap-2"
       >
-        <input
-          :id="`radio-${option.value}`"
-          v-model="selectedValue"
-          class="shadow-sm cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-4 h-4 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[14px] checked:before:h-[14px] checked:border checked:border-primary-600"
-          type="radio"
-          :value="option.value"
+        <CheckBox
+          :id="`checkbox-${option.value}`"
+          :is-checked="selectedValue.includes(option.value)"
+          @update="(_val, isChecked) => setValue(isChecked, option.value)"
         />
         <label
-          :for="`radio-${option.value}`"
-          class="text-sm font-medium"
-          :class="
-            selectedValue === option.value ? 'text-ash-900' : 'text-ash-800'
-          "
+          :for="`checkbox-${option.value}`"
+          class="text-sm text-ash-900 font-normal"
         >
           {{
             $t(
@@ -61,6 +95,9 @@ const selectedValue = computed({
           }}
         </label>
       </div>
+      <div class="text-n-slate-11 text-sm font-medium mt-2">
+        {{ $t(alertDescription) }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
index 232a7a74a..06d6932d4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
@@ -1,12 +1,15 @@
 <script setup>
 import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import * as Sentry from '@sentry/vue';
 import FormSelect from 'v3/components/Form/Select.vue';
 
 const props = defineProps({
   value: {
     type: String,
     required: true,
-    validator: value => ['ding', 'bell'].includes(value),
+    validator: value =>
+      ['ding', 'bell', 'chime', 'magic', 'ping'].includes(value),
   },
   label: {
     type: String,
@@ -25,6 +28,18 @@ const alertTones = computed(() => [
     value: 'bell',
     label: 'Bell',
   },
+  {
+    value: 'chime',
+    label: 'Chime',
+  },
+  {
+    value: 'magic',
+    label: 'Magic',
+  },
+  {
+    value: 'ping',
+    label: 'Ping',
+  },
 ]);
 
 const selectedValue = computed({
@@ -33,25 +48,48 @@ const selectedValue = computed({
     emit('change', value);
   },
 });
+
+const audio = new Audio();
+
+const playAudio = async () => {
+  try {
+    // Has great support https://caniuse.com/mdn-api_htmlaudioelement
+    audio.src = `/audio/dashboard/${selectedValue.value}.mp3`;
+    await audio.play();
+  } catch (error) {
+    Sentry.captureException(error);
+  }
+};
 </script>
 
 <template>
-  <FormSelect
-    v-model="selectedValue"
-    name="alertTone"
-    spacing="compact"
-    :value="selectedValue"
-    :options="alertTones"
-    :label="label"
-    class="max-w-xl"
-  >
-    <option
-      v-for="tone in alertTones"
-      :key="tone.label"
-      :value="tone.value"
-      :selected="tone.value === selectedValue"
+  <div class="flex items-center gap-2">
+    <FormSelect
+      v-model="selectedValue"
+      name="alertTone"
+      spacing="compact"
+      class="flex-grow"
+      :value="selectedValue"
+      :options="alertTones"
+      :label="label"
     >
-      {{ tone.label }}
-    </option>
-  </FormSelect>
+      <option
+        v-for="tone in alertTones"
+        :key="tone.label"
+        :value="tone.value"
+        :selected="tone.value === selectedValue"
+      >
+        {{ tone.label }}
+      </option>
+    </FormSelect>
+    <button
+      v-tooltip.top="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.PLAY')
+      "
+      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-ash-200 ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-primary-500 flex-shrink-0 mt-[28px]"
+      @click="playAudio"
+    >
+      <Icon icon="i-lucide-volume-2" />
+    </button>
+  </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
index f09432f83..bd96f3721 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioNotifications.vue
@@ -1,98 +1,91 @@
-<script>
+<script setup>
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import AudioAlertTone from './AudioAlertTone.vue';
 import AudioAlertEvent from './AudioAlertEvent.vue';
 import AudioAlertCondition from './AudioAlertCondition.vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+const store = useStore();
+import { useI18n } from 'vue-i18n';
+import camelcaseKeys from 'camelcase-keys';
+import { initializeAudioAlerts } from 'dashboard/helper/scriptHelpers';
+import { useStoreGetters } from 'dashboard/composables/store';
 
-export default {
-  components: {
-    AudioAlertEvent,
-    AudioAlertTone,
-    AudioAlertCondition,
-  },
-  setup() {
-    const { uiSettings, updateUISettings } = useUISettings();
+const getters = useStoreGetters();
+const currentUser = computed(() => getters.getCurrentUser.value);
 
-    return {
-      uiSettings,
-      updateUISettings,
-    };
-  },
-  data() {
-    return {
-      audioAlert: '',
-      playAudioWhenTabIsInactive: false,
-      alertIfUnreadConversationExist: false,
-      alertTone: 'ding',
-      audioAlertConditions: [],
-    };
-  },
-  watch: {
-    uiSettings(value) {
-      this.notificationUISettings(value);
-    },
-  },
-  mounted() {
-    this.notificationUISettings(this.uiSettings);
-    this.$store.dispatch('userNotificationSettings/get');
-  },
-  methods: {
-    notificationUISettings(uiSettings) {
-      const {
-        enable_audio_alerts: audioAlert = '',
-        always_play_audio_alert: alwaysPlayAudioAlert,
-        alert_if_unread_assigned_conversation_exist:
-          alertIfUnreadConversationExist,
-        notification_tone: alertTone,
-      } = uiSettings;
-      this.audioAlert = audioAlert;
-      this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
-      this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
-      this.audioAlertConditions = [
-        {
-          id: 'audio1',
-          label: this.$t(
-            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_ONE'
-          ),
-          model: this.playAudioWhenTabIsInactive,
-          value: 'tab_is_inactive',
-        },
-        {
-          id: 'audio2',
-          label: this.$t(
-            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
-          ),
-          model: this.alertIfUnreadConversationExist,
-          value: 'conversations_are_read',
-        },
-      ];
-      this.alertTone = alertTone || 'ding';
-    },
-    handAudioAlertChange(value) {
-      this.audioAlert = value;
-      this.updateUISettings({
-        enable_audio_alerts: this.audioAlert,
-      });
-      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioAlertConditions(id, value) {
-      if (id === 'tab_is_inactive') {
-        this.updateUISettings({
-          always_play_audio_alert: !value,
-        });
-      } else if (id === 'conversations_are_read') {
-        this.updateUISettings({
-          alert_if_unread_assigned_conversation_exist: value,
-        });
-      }
-      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
-    },
-    handleAudioToneChange(value) {
-      this.updateUISettings({ notification_tone: value });
-      useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+const { uiSettings, updateUISettings } = useUISettings();
+
+const { t } = useI18n();
+const audioAlert = ref('');
+const playAudioWhenTabIsInactive = ref(false);
+const alertIfUnreadConversationExist = ref(false);
+const alertTone = ref('ding');
+const audioAlertConditions = ref([]);
+const i18nKeyPrefix = 'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION';
+
+const initializeNotificationUISettings = newUISettings => {
+  const updatedUISettings = camelcaseKeys(newUISettings);
+
+  audioAlert.value = updatedUISettings.enableAudioAlerts;
+  playAudioWhenTabIsInactive.value = !updatedUISettings.alwaysPlayAudioAlert;
+  alertIfUnreadConversationExist.value =
+    updatedUISettings.alertIfUnreadAssignedConversationExist;
+  audioAlertConditions.value = [
+    {
+      id: 'audio1',
+      label: t(`${i18nKeyPrefix}.CONDITIONS.CONDITION_ONE`),
+      model: playAudioWhenTabIsInactive.value,
+      value: 'tab_is_inactive',
     },
+    {
+      id: 'audio2',
+      label: t(`${i18nKeyPrefix}.CONDITIONS.CONDITION_TWO`),
+      model: alertIfUnreadConversationExist.value,
+      value: 'conversations_are_read',
+    },
+  ];
+  alertTone.value = updatedUISettings.notificationTone || 'ding';
+};
+
+watch(
+  uiSettings,
+  value => {
+    initializeNotificationUISettings(value);
   },
+  { immediate: true }
+);
+
+const handleAudioConfigChange = value => {
+  updateUISettings(value);
+  initializeAudioAlerts(currentUser.value);
+  useAlert(t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+};
+
+onMounted(() => {
+  store.dispatch('userNotificationSettings/get');
+});
+
+const handAudioAlertChange = value => {
+  audioAlert.value = value;
+  handleAudioConfigChange({
+    enable_audio_alerts: value,
+  });
+};
+const handleAudioAlertConditions = (id, value) => {
+  if (id === 'tab_is_inactive') {
+    handleAudioConfigChange({
+      always_play_audio_alert: !value,
+    });
+  } else if (id === 'conversations_are_read') {
+    handleAudioConfigChange({
+      alert_if_unread_assigned_conversation_exist: value,
+    });
+  }
+};
+const handleAudioToneChange = value => {
+  handleAudioConfigChange({ notification_tone: value });
 };
 </script>
 
@@ -100,27 +93,19 @@ export default {
   <div id="profile-settings-notifications" class="flex flex-col gap-6">
     <AudioAlertTone
       :value="alertTone"
-      :label="
-        $t(
-          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
-        )
-      "
+      :label="$t(`${i18nKeyPrefix}.DEFAULT_TONE.TITLE`)"
       @change="handleAudioToneChange"
     />
 
     <AudioAlertEvent
-      :label="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
-      "
+      :label="$t(`${i18nKeyPrefix}.ALERT_TYPE.TITLE`)"
       :value="audioAlert"
       @update="handAudioAlertChange"
     />
 
     <AudioAlertCondition
       :items="audioAlertConditions"
-      :label="
-        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
-      "
+      :label="$t(`${i18nKeyPrefix}.CONDITIONS.TITLE`)"
       @change="handleAudioAlertConditions"
     />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index be1d166ab..a38046580 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -190,7 +190,6 @@ export default {
       <UserProfilePicture
         :src="avatarUrl"
         :name="name"
-        size="72px"
         @change="updateProfilePicture"
         @delete="deleteProfilePicture"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
index 87ac25efa..d86329b76 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
@@ -1,8 +1,6 @@
 <script setup>
-import { computed } from 'vue';
-import ProfileAvatar from 'v3/components/Form/ProfileAvatar.vue';
-import { removeEmoji } from 'shared/helpers/emoji';
-const props = defineProps({
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+defineProps({
   src: {
     type: String,
     default: '',
@@ -15,8 +13,6 @@ const props = defineProps({
 
 const emit = defineEmits(['change', 'delete']);
 
-const userNameWithoutEmoji = computed(() => removeEmoji(props.name));
-
 const updateProfilePicture = e => {
   emit('change', e);
 };
@@ -31,10 +27,12 @@ const deleteProfilePicture = () => {
     <span class="text-sm font-medium text-ash-900">
       {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
     </span>
-    <ProfileAvatar
-      :src="src"
-      :name="userNameWithoutEmoji"
-      @change="updateProfilePicture"
+    <Avatar
+      :src="src || ''"
+      :name="name || ''"
+      :size="72"
+      allow-upload
+      @upload="updateProfilePicture"
       @delete="deleteProfilePicture"
     />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/constants.js b/app/javascript/dashboard/routes/dashboard/settings/profile/constants.js
index e25d5b52a..a6c621c2b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/constants.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/constants.js
@@ -36,17 +36,23 @@ export const NOTIFICATION_TYPES = [
   },
 ];
 
+export const EVENT_TYPES = {
+  ASSIGNED: 'assigned',
+  NOTME: 'notme',
+  UNASSIGNED: 'unassigned',
+};
+
 export const ALERT_EVENTS = [
   {
-    value: 'none',
-    label: 'none',
+    value: EVENT_TYPES.ASSIGNED,
+    label: 'assigned',
   },
   {
-    value: 'mine',
-    label: 'mine',
+    value: EVENT_TYPES.UNASSIGNED,
+    label: 'unassigned',
   },
   {
-    value: 'all',
-    label: 'all',
+    value: EVENT_TYPES.NOTME,
+    label: 'notme',
   },
 ];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
index 7a7374994..b7b4f6845 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/AgentReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="agents/getAgents"
     action-key="agents/get"
     :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+    :report-title="$t('AGENT_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index e35f68f29..772a6810a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -5,11 +5,13 @@ import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import ReportContainer from './ReportContainer.vue';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import ReportHeader from './components/ReportHeader.vue';
 
 export default {
   name: 'BotReports',
   components: {
     BotMetrics,
+    ReportHeader,
     ReportFilterSelector,
     ReportContainer,
   },
@@ -84,7 +86,8 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
+  <ReportHeader :header-title="$t('BOT_REPORTS.HEADER')" />
+  <div class="flex flex-col gap-4">
     <ReportFilterSelector
       :show-agents-filter="false"
       show-group-by-filter
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index 202e22fc9..58a014165 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -7,6 +7,8 @@ import ReportFilterSelector from './components/FilterSelector.vue';
 import { generateFileName } from '../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
+import V4Button from 'dashboard/components-next/button/Button.vue';
+import ReportHeader from './components/ReportHeader.vue';
 
 export default {
   name: 'CsatResponses',
@@ -14,6 +16,8 @@ export default {
     CsatMetrics,
     CsatTable,
     ReportFilterSelector,
+    ReportHeader,
+    V4Button,
   },
   data() {
     return {
@@ -108,7 +112,16 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
+  <ReportHeader :header-title="$t('CSAT_REPORTS.HEADER')">
+    <V4Button
+      :label="$t('CSAT_REPORTS.DOWNLOAD')"
+      icon="i-ph-download-simple"
+      size="sm"
+      @click="downloadReports"
+    />
+  </ReportHeader>
+
+  <div class="flex flex-col gap-4">
     <ReportFilterSelector
       show-agents-filter
       show-inbox-filter
@@ -117,14 +130,7 @@ export default {
       :show-business-hours-switch="false"
       @filter-change="onFilterChange"
     />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
-      @click="downloadReports"
-    >
-      {{ $t('CSAT_REPORTS.DOWNLOAD') }}
-    </woot-button>
+
     <CsatMetrics :filters="requestPayload" />
     <CsatTable :page-index="pageIndex" @page-change="onPageNumberChange" />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
index 96d573829..100094f65 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/InboxReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="inboxes/getInboxes"
     action-key="inboxes/get"
     :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
+    :report-title="$t('INBOX_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 523266dd7..858ceb4ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -1,4 +1,5 @@
 <script>
+import V4Button from 'dashboard/components-next/button/Button.vue';
 import { useAlert, useTrack } from 'dashboard/composables';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
@@ -6,6 +7,7 @@ import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import ReportContainer from './ReportContainer.vue';
+import ReportHeader from './components/ReportHeader.vue';
 
 const REPORTS_KEYS = {
   CONVERSATIONS: 'conversations_count',
@@ -20,8 +22,10 @@ const REPORTS_KEYS = {
 export default {
   name: 'ConversationReports',
   components: {
+    ReportHeader,
     ReportFilterSelector,
     ReportContainer,
+    V4Button,
   },
   data() {
     return {
@@ -98,15 +102,15 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
+  <ReportHeader :header-title="$t('REPORT.HEADER')">
+    <V4Button
+      :label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+      icon="i-ph-download-simple"
+      size="sm"
       @click="downloadAgentReports"
-    >
-      {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
-    </woot-button>
+    />
+  </ReportHeader>
+  <div class="flex flex-col gap-3">
     <ReportFilterSelector
       :show-agents-filter="false"
       show-group-by-filter
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
index d3792bd79..04d7dc7ff 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LabelReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="labels/getLabels"
     action-key="labels/get"
     :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
+    :report-title="$t('LABEL_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index 7c182a12e..2d39d00f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -10,10 +10,12 @@ import getUnixTime from 'date-fns/getUnixTime';
 import startOfDay from 'date-fns/startOfDay';
 import subDays from 'date-fns/subDays';
 import { emitter } from 'shared/helpers/mitt';
+import ReportHeader from './components/ReportHeader.vue';
 
 export default {
   name: 'LiveReports',
   components: {
+    ReportHeader,
     AgentTable,
     MetricCard,
     ReportHeatmap,
@@ -123,8 +125,9 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <div class="flex flex-col items-center md:flex-row">
+  <ReportHeader :header-title="$t('OVERVIEW_REPORTS.HEADER')" />
+  <div class="flex flex-col gap-4 pb-6">
+    <div class="flex flex-col items-center md:flex-row gap-4">
       <div
         class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
       >
@@ -140,10 +143,10 @@ export default {
             :key="index"
             class="flex-1 min-w-0 pb-2"
           >
-            <h3 class="text-base text-slate-700 dark:text-slate-100">
+            <h3 class="text-base text-n-slate-11">
               {{ name }}
             </h3>
-            <p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
+            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
               {{ metric }}
             </p>
           </div>
@@ -156,17 +159,17 @@ export default {
             :key="index"
             class="flex-1 min-w-0 pb-2"
           >
-            <h3 class="text-base text-slate-700 dark:text-slate-100">
+            <h3 class="text-base text-n-slate-11">
               {{ name }}
             </h3>
-            <p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
+            <p class="text-n-slate-12 text-3xl mb-0 mt-1">
               {{ metric }}
             </p>
           </div>
         </MetricCard>
       </div>
     </div>
-    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+    <div class="flex flex-row flex-wrap max-w-full">
       <MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
         <template #control>
           <woot-button
@@ -185,7 +188,7 @@ export default {
         />
       </MetricCard>
     </div>
-    <div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
+    <div class="flex flex-row flex-wrap max-w-full">
       <MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
         <AgentTable
           :agents="agents"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index 0de1fb40d..f89d1ac4d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -135,7 +135,7 @@ export default {
 
 <template>
   <div
-    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"
+    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 px-6 py-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2"
   >
     <div
       v-for="metric in metrics"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index 07b283cf5..826b12fec 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,13 +1,17 @@
 <script>
+import V4Button from 'dashboard/components-next/button/Button.vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import SLAMetrics from './components/SLA/SLAMetrics.vue';
 import SLATable from './components/SLA/SLATable.vue';
 import SLAReportFilters from './components/SLA/SLAReportFilters.vue';
 import { generateFileName } from 'dashboard/helper/downloadHelper';
+import ReportHeader from './components/ReportHeader.vue';
 export default {
   name: 'SLAReports',
   components: {
+    V4Button,
+    ReportHeader,
     SLAMetrics,
     SLATable,
     SLAReportFilters,
@@ -77,30 +81,28 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
-    <SLAReportFilters @filter-change="onFilterChange" />
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
+  <ReportHeader :header-title="$t('SLA_REPORTS.HEADER')">
+    <V4Button
+      :label="$t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS')"
+      icon="i-ph-download-simple"
+      size="sm"
       @click="downloadReports"
-    >
-      {{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
-    </woot-button>
-    <div class="flex flex-col gap-6">
-      <SLAMetrics
-        :hit-rate="slaMetrics.hitRate"
-        :no-of-breaches="slaMetrics.numberOfSLAMisses"
-        :no-of-conversations="slaMetrics.numberOfConversations"
-        :is-loading="uiFlags.isFetchingMetrics"
-      />
-      <SLATable
-        :sla-reports="slaReports"
-        :is-loading="uiFlags.isFetching"
-        :current-page="Number(slaMeta.currentPage)"
-        :total-count="Number(slaMeta.count)"
-        @page-change="onPageChange"
-      />
-    </div>
+    />
+  </ReportHeader>
+  <div class="flex flex-col flex-1 gap-6">
+    <SLAReportFilters @filter-change="onFilterChange" />
+    <SLAMetrics
+      :hit-rate="slaMetrics.hitRate"
+      :no-of-breaches="slaMetrics.numberOfSLAMisses"
+      :no-of-conversations="slaMetrics.numberOfConversations"
+      :is-loading="uiFlags.isFetchingMetrics"
+    />
+    <SLATable
+      :sla-reports="slaReports"
+      :is-loading="uiFlags.isFetching"
+      :current-page="Number(slaMeta.currentPage)"
+      :total-count="Number(slaMeta.count)"
+      @page-change="onPageChange"
+    />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
index 523186b8d..d441c986b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/TeamReports.vue
@@ -1,11 +1,5 @@
-<script>
+<script setup>
 import WootReports from './components/WootReports.vue';
-
-export default {
-  components: {
-    WootReports,
-  },
-};
 </script>
 
 <template>
@@ -15,5 +9,6 @@ export default {
     getter-key="teams/getTeams"
     action-key="teams/get"
     :download-button-label="$t('TEAM_REPORTS.DOWNLOAD_TEAM_REPORTS')"
+    :report-title="$t('TEAM_REPORTS.HEADER')"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
index fe8e30ba8..e8d8eccf9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/BotMetrics.vue
@@ -38,7 +38,7 @@ onMounted(fetchMetrics);
 
 <template>
   <div
-    class="flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
+    class="flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
   >
     <ReportMetricCard
       :label="$t('BOT_REPORTS.METRIC.TOTAL_CONVERSATIONS.LABEL')"
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 2ebeeb28e..74258898e 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
@@ -29,11 +29,11 @@ const trendColor = (value, key) => {
 </script>
 
 <template>
-  <div class="text-slate-900 dark:text-slate-100">
+  <div class="text-n-slate-11">
     <span class="text-sm">
       {{ metric.NAME }}
     </span>
-    <div class="flex items-end">
+    <div class="flex items-end text-n-slate-12">
       <div class="text-xl font-medium">
         {{ displayMetric(metric.KEY) }}
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index 22c738f4d..f33ba9f37 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -86,7 +86,7 @@ export default {
 <!-- Added ref for writing specs -->
 <template>
   <div
-    class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
+    class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4"
   >
     <CsatMetricCard
       :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
@@ -111,10 +111,10 @@ export default {
     <div
       v-if="metrics.totalResponseCount && !ratingFilterEnabled"
       ref="csatBarChart"
-      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
+      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial]"
     >
       <h3
-        class="flex items-center m-0 text-xs font-medium md:text-sm text-slate-800 dark:text-slate-100"
+        class="flex items-center m-0 text-xs font-medium md:text-sm text-n-slate-12"
       >
         <div class="flex flex-row-reverse justify-end">
           <div
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index d870f3808..b66ec20f6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -145,14 +145,13 @@ const table = useVueTable({
 </script>
 
 <template>
-  <div class="csat--table-container">
-    <Table
-      :table="table"
-      class="max-h-[calc(100vh-21.875rem)] border bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800"
-    />
+  <div
+    class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
+  >
+    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
     <div
       v-show="!tableData.length"
-      class="csat--empty-records text-slate-600 dark:text-slate-200 bg-white dark:bg-slate-900 border border-t-0 border-solid border-slate-75 dark:border-slate-700"
+      class="h-48 flex items-center justify-center text-n-slate-12 text-sm"
     >
       {{ $t('CSAT_REPORTS.NO_RECORDS') }}
     </div>
@@ -161,17 +160,3 @@ const table = useVueTable({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.csat--empty-records {
-  align-items: center;
-  // border: 1px solid var(--color-border);
-  border-top: 0;
-  display: flex;
-  font-size: var(--font-size-small);
-  height: 12.5rem;
-  justify-content: center;
-  margin-top: -1px;
-  width: 100%;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
index 6eae61836..4e66f6350 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -178,7 +178,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col justify-between gap-3 mb-4 md:flex-row">
+  <div class="flex flex-col justify-between gap-3 md:flex-row">
     <div
       class="w-full grid gap-y-2 gap-x-1.5 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
index 3a02deb73..2a21ab1be 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/v3/ActiveFilterChip.vue
@@ -53,7 +53,6 @@ const closeDropdown = () => emit('closeDropdown');
   <FilterButton
     right-icon="chevron-down"
     :button-text="name"
-    class="bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
     @click="toggleDropdown"
   >
     <template v-if="showMenu && activeFilterType === type" #dropdown>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
index 472eac272..a8c1229f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
@@ -63,8 +63,7 @@ function getDayOfTheWeek(date) {
   return days[dayIndex];
 }
 function getHeatmapLevelClass(value) {
-  if (!value)
-    return 'outline-slate-100 dark:outline-slate-700 dark:bg-slate-700/40 bg-slate-50/50';
+  if (!value) return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
 
   let level = [...quantileRange.value, Infinity].findIndex(
     range => value <= range && value > 0
@@ -73,7 +72,7 @@ function getHeatmapLevelClass(value) {
   if (level > 6) level = 5;
 
   if (level === 0) {
-    return 'outline-slate-100 dark:outline-slate-700 dark:bg-slate-700/40 bg-slate-50/50';
+    return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
   }
 
   const classes = [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
new file mode 100644
index 000000000..a42442a9d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
@@ -0,0 +1,17 @@
+<script setup>
+defineProps({
+  headerTitle: {
+    required: true,
+    type: String,
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-between w-full h-20 gap-2">
+    <span class="text-xl font-medium text-n-slate-12">
+      {{ headerTitle }}
+    </span>
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
index dff88eae9..4c6aff970 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.vue
@@ -22,26 +22,23 @@ defineProps({
 <template>
   <div
     data-test-id="reportMetricContainer"
-    class="p-4 m-0"
     :class="{
       'grayscale pointer-events-none opacity-30': disabled,
     }"
   >
-    <h3
-      class="flex items-center m-0 text-sm font-medium text-slate-800 dark:text-slate-100"
-    >
+    <h3 class="flex items-center m-0 text-sm font-medium text-n-slate-11">
       <span data-test-id="reportMetricLabel">{{ label }}</span>
       <fluent-icon
         v-tooltip="infoText"
         data-test-id="reportMetricInfo"
         size="14"
         icon="info"
-        class="text-slate-500 dark:text-slate-200 my-0 mx-1 mt-0.5"
+        class="text-n-slate-11 my-0 mx-1 mt-0.5"
       />
     </h3>
     <h4
       data-test-id="reportMetricValue"
-      class="mt-1 mb-0 text-3xl font-thin text-slate-700 dark:text-slate-100"
+      class="mt-1 mb-0 text-2xl text-n-slate-12"
     >
       {{ value }}
     </h4>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
new file mode 100644
index 000000000..2be08487d
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
@@ -0,0 +1,85 @@
+<template>
+  <div
+    class="reports--wrapper overflow-auto bg-n-background w-full px-8 xl:px-0"
+  >
+    <div class="max-w-[960px] mx-auto pb-12">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.reports--wrapper {
+  ::v-deep {
+    .multiselect--disabled {
+      @apply opacity-50 border border-n-weak rounded-md cursor-not-allowed;
+    }
+
+    .multiselect__content-wrapper {
+      @apply bg-n-solid-2 border border-n-weak text-n-slate-12;
+    }
+
+    .multiselect__tags {
+      @apply bg-n-slate-1 border border-n-weak m-0 min-h-[2.875rem] pt-0;
+
+      input[type='text'] {
+        @apply bg-n-alpha-3 border-n-weak !min-h-[2.375rem] !h-[2.375rem] !ps-0.5 !py-0 !text-sm;
+      }
+    }
+
+    .multiselect__placeholder {
+      @apply text-n-slate-11;
+    }
+
+    .multiselect__select {
+      @apply min-h-0;
+    }
+
+    .multiselect__single {
+      @apply bg-n-alpha-3 text-n-slate-11;
+    }
+
+    .multiselect__input {
+      @apply text-sm !h-[2.375rem] mb-0 !py-0;
+    }
+
+    .multiselect__tags,
+    .multiselect__input,
+    .multiselect {
+      @apply bg-n-alpha-3 !border-n-weak text-n-slate-12 rounded-lg text-sm min-h-[2.5rem];
+    }
+
+    .mx-input-wrapper {
+      @apply bg-n-alpha-3 !border-n-weak text-n-slate-12 rounded-lg text-sm;
+
+      input {
+        @apply border-n-weak text-sm;
+      }
+    }
+
+    .multiselect__option {
+      @apply flex items-center;
+    }
+
+    .mx-datepicker {
+      .mx-input {
+        @apply bg-n-alpha-3;
+      }
+
+      .mx-input-wrapper input::placeholder {
+        @apply text-n-slate-11;
+      }
+
+      .mx-input-wrapper input {
+        @apply text-n-slate-11;
+      }
+    }
+
+    .multiselect--active:not(.multiselect--above) .multiselect__current,
+    .multiselect--active:not(.multiselect--above) .multiselect__input,
+    .multiselect--active:not(.multiselect--above) .multiselect__tags {
+      @apply rounded-b-none;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index 6a4bafc2e..2111b26e3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -24,7 +24,7 @@ export default {
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
-      class="inline-flex items-center gap-1 text-sm font-medium text-slate-700 dark:text-slate-200"
+      class="inline-flex items-center gap-1 text-sm font-medium text-n-slate-11"
     >
       {{ label }}
       <fluent-icon
@@ -32,15 +32,15 @@ export default {
         size="14"
         icon="information"
         type="outline"
-        class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-slate-500 dark:text-slate-500"
+        class="flex flex-shrink-0 text-sm font-normal sm:font-medium text-n-slate-10"
       />
     </span>
     <div
       v-if="isLoading"
-      class="w-12 h-6 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-800 animate-pulse"
+      class="w-12 h-6 mb-0.5 rounded-md bg-n-slate-3 animate-pulse"
     />
 
-    <span v-else class="text-2xl font-medium text-slate-900 dark:text-slate-25">
+    <span v-else class="text-2xl font-medium text-n-slate-12">
       {{ value }}
     </span>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
index 9f638f3ac..433c30d49 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -22,7 +22,7 @@ defineProps({
 
 <template>
   <div
-    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
+    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
   >
     <SLAMetricCard
       :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
@@ -31,18 +31,14 @@ defineProps({
       :is-loading="isLoading"
     />
 
-    <div
-      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
-    />
+    <div class="w-full sm:w-px bg-n-strong" />
     <SLAMetricCard
       :label="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.LABEL')"
       :value="noOfBreaches"
       :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.TOOLTIP')"
       :is-loading="isLoading"
     />
-    <div
-      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
-    />
+    <div class="w-full sm:w-px bg-n-strong" />
     <SLAMetricCard
       :label="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.LABEL')"
       :value="noOfConversations"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
index a85dcffbf..1cd18226e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -31,22 +31,23 @@ const conversationLabels = computed(() => {
 
 <template>
   <div
-    class="grid items-center content-center w-full h-16 grid-cols-12 gap-4 px-6 py-0 bg-white border-b last:border-b-0 last:rounded-b-xl border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+    class="grid items-center content-center w-full h-16 grid-cols-12 gap-4 px-6 py-0 border-b last:border-b-0 last:rounded-b-xl border-n-weak"
   >
     <div
       class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
     >
-      <span class="text-slate-700 dark:text-slate-200">
+      <span class="text-n-slate-12">
         {{ `#${conversationId} ` }}
       </span>
-      <span class="text-slate-600 dark:text-slate-300">
+      <span class="text-slate-11">
         {{ $t('SLA_REPORTS.WITH') }}
       </span>
-      <span class="capitalize truncate text-slate-700 dark:text-slate-200">{{
+      <span class="capitalize truncate text-n-slate-12">{{
         conversation.contact.name
       }}</span>
       <CardLabels
-        class="w-[80%]"
+        v-if="conversationLabels.length"
+        class="w-[60%]"
         :conversation-id="conversationId"
         :conversation-labels="conversationLabels"
       />
@@ -61,7 +62,7 @@ const conversationLabels = computed(() => {
         v-if="conversation.assignee"
         :user="conversation.assignee"
       />
-      <span v-else class="text-slate-600 dark:text-slate-200"> --- </span>
+      <span v-else class="text-n-slate-11"> --- </span>
     </div>
     <SLAViewDetails :sla-events="slaEvents" />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
index 8354a0f8d..503ccf442 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -57,10 +57,10 @@ export default {
 <template>
   <div>
     <div
-      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
+      class="min-w-full shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 p-6"
     >
       <div
-        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
+        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 bg-n-slate-2 rounded-md"
       >
         <TableHeaderCell
           :span="6"
@@ -74,13 +74,10 @@ export default {
           :span="2"
           :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
         />
-        <TableHeaderCell :span="2" label="" />
+        <TableHeaderCell :span="1" label="" />
       </div>
 
-      <div
-        v-if="isLoading"
-        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
-      >
+      <div v-if="isLoading" class="flex items-center justify-center h-32">
         <Spinner />
         <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
       </div>
@@ -94,10 +91,7 @@ export default {
           :sla-events="slaReport.sla_events"
         />
       </div>
-      <div
-        v-else
-        class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
-      >
+      <div v-else class="flex items-center justify-center h-32">
         {{ $t('SLA_REPORTS.NO_RECORDS') }}
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
index ff84c2f1c..eb7a60dd1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -29,24 +29,23 @@ export default {
 </script>
 
 <template>
-  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
-    <div
-      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-    >
-      <div class="relative">
-        <woot-button
-          color-scheme="secondary"
-          variant="link"
-          @click="openSlaEvents"
-        >
-          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
-        </woot-button>
-        <SLAPopoverCard
-          v-if="showSlaPopoverCard"
-          :sla-missed-events="slaEvents"
-          class="right-0"
-        />
-      </div>
+  <div
+    v-on-clickaway="closeSlaEvents"
+    class="flex items-center col-span-2 text-slate-11 justify-end"
+  >
+    <div class="relative">
+      <woot-button
+        color-scheme="secondary"
+        variant="link"
+        @click="openSlaEvents"
+      >
+        {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
+      </woot-button>
+      <SLAPopoverCard
+        v-if="showSlaPopoverCard"
+        :sla-missed-events="slaEvents"
+        class="right-0"
+      />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index 06b8c76ee..b0e6b84a0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -1,10 +1,12 @@
 <script>
+import V4Button from 'dashboard/components-next/button/Button.vue';
 import { useAlert, useTrack } from 'dashboard/composables';
 import ReportFilters from './ReportFilters.vue';
 import ReportContainer from '../ReportContainer.vue';
 import { GROUP_BY_FILTER } from '../constants';
 import { generateFileName } from '../../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
+import ReportHeader from './ReportHeader.vue';
 
 const GROUP_BY_OPTIONS = {
   DAY: [{ id: 1, groupByKey: 'REPORT.GROUPING_OPTIONS.DAY' }],
@@ -26,6 +28,8 @@ const GROUP_BY_OPTIONS = {
 
 export default {
   components: {
+    ReportHeader,
+    V4Button,
     ReportFilters,
     ReportContainer,
   },
@@ -46,6 +50,10 @@ export default {
       type: String,
       default: 'Download Reports',
     },
+    reportTitle: {
+      type: String,
+      default: 'Download Reports',
+    },
   },
   data() {
     return {
@@ -198,30 +206,29 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="arrow-download"
+  <ReportHeader :header-title="reportTitle">
+    <V4Button
+      :label="downloadButtonLabel"
+      icon="i-ph-download-simple"
+      size="sm"
       @click="downloadReports"
-    >
-      {{ downloadButtonLabel }}
-    </woot-button>
-    <ReportFilters
-      v-if="filterItemsList"
-      :type="type"
-      :filter-items-list="filterItemsList"
-      :group-by-filter-items-list="groupByfilterItemsList"
-      :selected-group-by-filter="selectedGroupByFilter"
-      @date-range-change="onDateRangeChange"
-      @filter-change="onFilterChange"
-      @group-by-filter-change="onGroupByFilterChange"
-      @business-hours-toggle="onBusinessHoursToggle"
     />
-    <ReportContainer
-      v-if="filterItemsList.length"
-      :group-by="groupBy"
-      :report-keys="reportKeys"
-    />
-  </div>
+  </ReportHeader>
+
+  <ReportFilters
+    v-if="filterItemsList"
+    :type="type"
+    :filter-items-list="filterItemsList"
+    :group-by-filter-items-list="groupByfilterItemsList"
+    :selected-group-by-filter="selectedGroupByFilter"
+    @date-range-change="onDateRangeChange"
+    @filter-change="onFilterChange"
+    @group-by-filter-change="onGroupByFilterChange"
+    @business-hours-toggle="onBusinessHoursToggle"
+  />
+  <ReportContainer
+    v-if="filterItemsList.length"
+    :group-by="groupBy"
+    :report-keys="reportKeys"
+  />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index d176b6377..810db7029 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -144,10 +144,7 @@ const table = useVueTable({
 
 <template>
   <div class="agent-table-container">
-    <Table
-      :table="table"
-      class="max-h-[calc(100vh-21.875rem)] border border-slate-50 dark:border-slate-800"
-    />
+    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
     <Pagination class="mt-2" :table="table" />
     <div v-if="isLoading" class="agents-loader">
       <Spinner />
@@ -169,7 +166,7 @@ const table = useVueTable({
   .ve-table {
     &::v-deep {
       th.ve-table-header-th {
-        font-size: var(--font-size-mini) !important;
+        @apply text-sm rounded-xl;
         padding: var(--space-small) var(--space-two) !important;
       }
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
index 78ca70927..83b93d61f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -25,25 +25,23 @@ export default {
 
 <template>
   <div
-    class="metric-card mb-2 p flex flex-col m-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem]"
+    class="flex flex-col m-0.5 px-6 py-5 overflow-hidden rounded-xl flex-grow text-n-slate-12 shadow outline-1 outline outline-n-container bg-n-solid-2 min-h-[10rem]"
   >
     <div
       class="card-header grid w-full mb-6 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
     >
       <slot name="header">
-        <div class="flex items-center gap-0.5 flex-row">
-          <h5
-            class="mb-0 text-slate-800 dark:text-slate-100 font-medium text-xl"
-          >
+        <div class="flex items-center gap-2 flex-row">
+          <h5 class="mb-0 text-n-slate-12 font-medium text-lg">
             {{ header }}
           </h5>
           <span
-            class="flex flex-row items-center pr-2 pl-2 m-1 rounded-sm text-green-400 dark:text-green-400 text-xs bg-green-100/30 dark:bg-green-100/20"
+            class="flex flex-row items-center py-0.5 px-2 rounded bg-n-teal-3 text-xs"
           >
             <span
-              class="bg-green-500 dark:bg-green-500 h-1 w-1 rounded-full mr-1 rtl:mr-0 rtl:ml-0"
+              class="bg-n-teal-9 h-1 w-1 rounded-full mr-1 rtl:mr-0 rtl:ml-0"
             />
-            <span>
+            <span class="text-xs text-n-teal-11">
               {{ $t('OVERVIEW_REPORTS.LIVE') }}
             </span>
           </span>
@@ -66,7 +64,7 @@ export default {
       class="items-center flex text-base justify-center px-12 py-6"
     >
       <Spinner />
-      <span class="text-slate-300 dark:text-slate-200">
+      <span class="text-n-slate-11">
         {{ loadingMessage }}
       </span>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
index 78462b3bf..1f1e80f83 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CsatMetrics.vue > computes response count correctly 1`] = `
-"<div class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700">
+"<div class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4">
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="100"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="--"></csat-metric-card-stub>
   <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="90%"></csat-metric-card-stub>
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 d19c081d1..0a3b4d8a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
-import SettingsContent from '../Wrapper.vue';
+import ReportsWrapper from './components/ReportsWrapper.vue';
 import Index from './Index.vue';
 import AgentReports from './AgentReports.vue';
 import LabelReports from './LabelReports.vue';
@@ -16,12 +16,7 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'OVERVIEW_REPORTS.HEADER',
-        icon: 'arrow-trending-lines',
-        keepAlive: false,
-      },
+      component: ReportsWrapper,
       children: [
         {
           path: '',
@@ -37,17 +32,6 @@ export default {
           },
           component: LiveReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'REPORT.HEADER',
-        icon: 'chat',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'conversation',
           name: 'conversation_reports',
@@ -56,56 +40,6 @@ export default {
           },
           component: Index,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'CSAT_REPORTS.HEADER',
-        icon: 'emoji',
-        keepAlive: false,
-      },
-      children: [
-        {
-          path: 'csat',
-          name: 'csat_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-          },
-          component: CsatResponses,
-        },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'BOT_REPORTS.HEADER',
-        icon: 'bot',
-        keepAlive: false,
-      },
-      children: [
-        {
-          path: 'bot',
-          name: 'bot_reports',
-          meta: {
-            permissions: ['administrator', 'report_manage'],
-            featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
-          },
-          component: BotReports,
-        },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'AGENT_REPORTS.HEADER',
-        icon: 'people',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'agent',
           name: 'agent_reports',
@@ -114,17 +48,6 @@ export default {
           },
           component: AgentReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'LABEL_REPORTS.HEADER',
-        icon: 'tag',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'label',
           name: 'label_reports',
@@ -133,17 +56,6 @@ export default {
           },
           component: LabelReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'INBOX_REPORTS.HEADER',
-        icon: 'mail-inbox-all',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'inboxes',
           name: 'inbox_reports',
@@ -152,16 +64,6 @@ export default {
           },
           component: InboxReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'TEAM_REPORTS.HEADER',
-        icon: 'people-team',
-      },
-      children: [
         {
           path: 'teams',
           name: 'team_reports',
@@ -170,17 +72,6 @@ export default {
           },
           component: TeamReports,
         },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/reports'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'SLA_REPORTS.HEADER',
-        icon: 'document-list-clock',
-        keepAlive: false,
-      },
-      children: [
         {
           path: 'sla',
           name: 'sla_reports',
@@ -190,6 +81,22 @@ export default {
           },
           component: SLAReports,
         },
+        {
+          path: 'csat',
+          name: 'csat_reports',
+          meta: {
+            permissions: ['administrator', 'report_manage'],
+          },
+          component: CsatResponses,
+        },
+        {
+          path: 'bot',
+          name: 'bot_reports',
+          meta: {
+            permissions: ['administrator', 'report_manage'],
+          },
+          component: BotReports,
+        },
       ],
     },
   ],
diff --git a/app/javascript/dashboard/store/modules/attributes.js b/app/javascript/dashboard/store/modules/attributes.js
index af6d3ce4f..c7cb771a5 100644
--- a/app/javascript/dashboard/store/modules/attributes.js
+++ b/app/javascript/dashboard/store/modules/attributes.js
@@ -1,6 +1,7 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import AttributeAPI from '../../api/attributes';
+import camelcaseKeys from 'camelcase-keys';
 
 export const state = {
   records: [],
@@ -19,6 +20,16 @@ export const getters = {
   getAttributes: _state => {
     return _state.records;
   },
+  getConversationAttributes: _state => {
+    return _state.records
+      .filter(record => record.attribute_model === 'conversation_attribute')
+      .map(camelcaseKeys);
+  },
+  getContactAttributes: _state => {
+    return _state.records
+      .filter(record => record.attribute_model === 'contact_attribute')
+      .map(camelcaseKeys);
+  },
   getAttributesByModel: _state => attributeModel => {
     return _state.records.filter(
       record => record.attribute_model === attributeModel
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index 695edc3cb..fa49af339 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -133,9 +133,10 @@ export const actions = {
     }
   },
 
-  deleteAvatar: async () => {
+  deleteAvatar: async ({ commit }) => {
     try {
-      await authAPI.deleteAvatar();
+      const response = await authAPI.deleteAvatar();
+      commit(types.SET_CURRENT_USER, response.data);
     } catch (error) {
       // Ignore error
     }
diff --git a/app/javascript/dashboard/store/modules/contactConversations.js b/app/javascript/dashboard/store/modules/contactConversations.js
index 795578e63..55dfcf441 100644
--- a/app/javascript/dashboard/store/modules/contactConversations.js
+++ b/app/javascript/dashboard/store/modules/contactConversations.js
@@ -1,6 +1,7 @@
 import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
 import ConversationApi from '../../api/conversations';
+import camelcaseKeys from 'camelcase-keys';
 
 export const createMessagePayload = (payload, message) => {
   const { content, cc_emails, bcc_emails } = message;
@@ -74,6 +75,10 @@ export const getters = {
   getContactConversation: $state => id => {
     return $state.records[Number(id)] || [];
   },
+  getAllConversationsByContactId: $state => id => {
+    const records = $state.records[Number(id)] || [];
+    return camelcaseKeys(records, { deep: true });
+  },
 };
 
 export const actions = {
diff --git a/app/javascript/dashboard/store/modules/contactNotes.js b/app/javascript/dashboard/store/modules/contactNotes.js
index 2a82981a3..005a4f113 100644
--- a/app/javascript/dashboard/store/modules/contactNotes.js
+++ b/app/javascript/dashboard/store/modules/contactNotes.js
@@ -1,5 +1,6 @@
 import types from '../mutation-types';
 import ContactNotesAPI from '../../api/contactNotes';
+import camelcaseKeys from 'camelcase-keys';
 
 export const state = {
   records: {},
@@ -18,6 +19,11 @@ export const getters = {
   getUIFlags(_state) {
     return _state.uiFlags;
   },
+  getAllNotesByContactId: _state => contactId => {
+    const records = _state.records[contactId] || [];
+    const contactNotes = records.sort((r1, r2) => r2.id - r1.id);
+    return camelcaseKeys(contactNotes);
+  },
 };
 
 export const actions = {
diff --git a/app/javascript/dashboard/store/modules/contacts/actions.js b/app/javascript/dashboard/store/modules/contacts/actions.js
index deb1c96d1..e8da81482 100644
--- a/app/javascript/dashboard/store/modules/contacts/actions.js
+++ b/app/javascript/dashboard/store/modules/contacts/actions.js
@@ -4,6 +4,7 @@ import {
 } from 'shared/helpers/CustomErrors';
 import types from '../../mutation-types';
 import ContactAPI from '../../../api/contacts';
+import snakecaseKeys from 'snakecase-keys';
 import AccountActionsAPI from '../../../api/accountActions';
 import AnalyticsHelper from '../../../helper/AnalyticsHelper';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -33,7 +34,7 @@ const buildContactFormData = contactParams => {
   return formData;
 };
 
-export const raiseContactCreateErrors = error => {
+export const handleContactOperationErrors = error => {
   if (error.response?.status === 422) {
     throw new DuplicateContactException(error.response.data.attributes);
   } else if (error.response?.data?.message) {
@@ -90,29 +91,38 @@ export const actions = {
   },
 
   update: async ({ commit }, { id, isFormData = false, ...contactParams }) => {
+    const { avatar, customAttributes, ...paramsToDecamelize } = contactParams;
+    const decamelizedContactParams = {
+      ...snakecaseKeys(paramsToDecamelize, { deep: true }),
+      ...(customAttributes && { custom_attributes: customAttributes }),
+      ...(avatar && { avatar }),
+    };
     commit(types.SET_CONTACT_UI_FLAG, { isUpdating: true });
     try {
       const response = await ContactAPI.update(
         id,
-        isFormData ? buildContactFormData(contactParams) : contactParams
+        isFormData
+          ? buildContactFormData(decamelizedContactParams)
+          : decamelizedContactParams
       );
       commit(types.EDIT_CONTACT, response.data.payload);
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
     } catch (error) {
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
-      if (error.response?.status === 422) {
-        throw new DuplicateContactException(error.response.data.attributes);
-      } else {
-        throw new Error(error);
-      }
+      handleContactOperationErrors(error);
     }
   },
 
   create: async ({ commit }, { isFormData = false, ...contactParams }) => {
+    const decamelizedContactParams = snakecaseKeys(contactParams, {
+      deep: true,
+    });
     commit(types.SET_CONTACT_UI_FLAG, { isCreating: true });
     try {
       const response = await ContactAPI.create(
-        isFormData ? buildContactFormData(contactParams) : contactParams
+        isFormData
+          ? buildContactFormData(decamelizedContactParams)
+          : decamelizedContactParams
       );
 
       AnalyticsHelper.track(CONTACTS_EVENTS.CREATE_CONTACT);
@@ -121,17 +131,17 @@ export const actions = {
       return response.data.payload.contact;
     } catch (error) {
       commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
-      return raiseContactCreateErrors(error);
+      return handleContactOperationErrors(error);
     }
   },
 
   import: async ({ commit }, file) => {
-    commit(types.SET_CONTACT_UI_FLAG, { isCreating: true });
+    commit(types.SET_CONTACT_UI_FLAG, { isImporting: true });
     try {
       await ContactAPI.importContacts(file);
-      commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
+      commit(types.SET_CONTACT_UI_FLAG, { isImporting: false });
     } catch (error) {
-      commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
+      commit(types.SET_CONTACT_UI_FLAG, { isImporting: false });
       if (error.response?.data?.message) {
         throw new ExceptionWithMessage(error.response.data.message);
       }
@@ -139,12 +149,13 @@ export const actions = {
   },
 
   export: async ({ commit }, { payload, label }) => {
+    commit(types.SET_CONTACT_UI_FLAG, { isExporting: true });
     try {
       await ContactAPI.exportContacts({ payload, label });
 
-      commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
+      commit(types.SET_CONTACT_UI_FLAG, { isExporting: false });
     } catch (error) {
-      commit(types.SET_CONTACT_UI_FLAG, { isCreating: false });
+      commit(types.SET_CONTACT_UI_FLAG, { isExporting: false });
       if (error.response?.data?.message) {
         throw new Error(error.response.data.message);
       } else {
@@ -194,8 +205,8 @@ export const actions = {
     try {
       const response = await ContactAPI.getContactableInboxes(id);
       const contact = {
-        id,
-        contactableInboxes: response.data.payload,
+        id: Number(id),
+        contact_inboxes: response.data.payload,
       };
       commit(types.SET_CONTACT_ITEM, contact);
     } catch (error) {
diff --git a/app/javascript/dashboard/store/modules/contacts/getters.js b/app/javascript/dashboard/store/modules/contacts/getters.js
index c72176171..5a75ac091 100644
--- a/app/javascript/dashboard/store/modules/contacts/getters.js
+++ b/app/javascript/dashboard/store/modules/contacts/getters.js
@@ -1,7 +1,15 @@
+import camelcaseKeys from 'camelcase-keys';
+
 export const getters = {
   getContacts($state) {
     return $state.sortOrder.map(contactId => $state.records[contactId]);
   },
+  getContactsList($state) {
+    const contacts = $state.sortOrder.map(
+      contactId => $state.records[contactId]
+    );
+    return camelcaseKeys(contacts, { deep: true });
+  },
   getUIFlags($state) {
     return $state.uiFlags;
   },
@@ -9,10 +17,20 @@ export const getters = {
     const contact = $state.records[id];
     return contact || {};
   },
+  getContactById: $state => id => {
+    const contact = $state.records[id];
+    return camelcaseKeys(contact || {}, {
+      deep: true,
+      stopPaths: ['custom_attributes'],
+    });
+  },
   getMeta: $state => {
     return $state.meta;
   },
   getAppliedContactFilters: _state => {
     return _state.appliedFilters;
   },
+  getAppliedContactFiltersV4: _state => {
+    return _state.appliedFilters.map(camelcaseKeys);
+  },
 };
diff --git a/app/javascript/dashboard/store/modules/contacts/index.js b/app/javascript/dashboard/store/modules/contacts/index.js
index ba8d47642..eb1e92434 100644
--- a/app/javascript/dashboard/store/modules/contacts/index.js
+++ b/app/javascript/dashboard/store/modules/contacts/index.js
@@ -15,6 +15,8 @@ const state = {
     isUpdating: false,
     isMerging: false,
     isDeleting: false,
+    isExporting: false,
+    isImporting: false,
   },
   sortOrder: [],
   appliedFilters: [],
diff --git a/app/javascript/dashboard/store/modules/conversationStats.js b/app/javascript/dashboard/store/modules/conversationStats.js
index 201bf6564..025e3352f 100644
--- a/app/javascript/dashboard/store/modules/conversationStats.js
+++ b/app/javascript/dashboard/store/modules/conversationStats.js
@@ -5,6 +5,7 @@ const state = {
   mineCount: 0,
   unAssignedCount: 0,
   allCount: 0,
+  updatedOn: null,
 };
 
 export const getters = {
@@ -12,7 +13,17 @@ export const getters = {
 };
 
 export const actions = {
-  get: async ({ commit }, params) => {
+  get: async ({ commit, state: $state }, params) => {
+    const currentTime = new Date();
+    const lastUpdatedTime = new Date($state.updatedOn);
+
+    // Skip large accounts from making too many requests
+    if (currentTime - lastUpdatedTime < 10000 && $state.allCount > 1000) {
+      // eslint-disable-next-line no-console
+      console.warn('Skipping conversation meta fetch');
+      return;
+    }
+
     try {
       const response = await ConversationApi.meta(params);
       const {
@@ -40,6 +51,7 @@ export const mutations = {
     $state.mineCount = mineCount;
     $state.allCount = allCount;
     $state.unAssignedCount = unAssignedCount;
+    $state.updatedOn = new Date();
   },
 };
 
diff --git a/app/javascript/dashboard/store/modules/conversations/getters.js b/app/javascript/dashboard/store/modules/conversations/getters.js
index 1a905c3c5..085766bfd 100644
--- a/app/javascript/dashboard/store/modules/conversations/getters.js
+++ b/app/javascript/dashboard/store/modules/conversations/getters.js
@@ -1,6 +1,7 @@
 import { MESSAGE_TYPE } from 'shared/constants/messages';
 import { applyPageFilters, sortComparator } from './helpers';
 import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
+import camelcaseKeys from 'camelcase-keys';
 
 export const getSelectedChatConversation = ({
   allConversations,
@@ -54,6 +55,10 @@ const getters = {
       return isChatMine;
     });
   },
+  getAppliedConversationFiltersV2: _state => {
+    // TODO: Replace existing one with V2 after migrating the filters to use camelcase
+    return _state.appliedFilters.map(camelcaseKeys);
+  },
   getAppliedConversationFilters: _state => {
     return _state.appliedFilters;
   },
diff --git a/app/javascript/dashboard/store/modules/customViews.js b/app/javascript/dashboard/store/modules/customViews.js
index 9c7f6f0ff..a69bc2c17 100644
--- a/app/javascript/dashboard/store/modules/customViews.js
+++ b/app/javascript/dashboard/store/modules/customViews.js
@@ -70,6 +70,7 @@ export const actions = {
         data: response.data,
         filterType: FILTER_KEYS[obj.filter_type],
       });
+      return response;
     } catch (error) {
       const errorMessage = error?.response?.data?.message;
       throw new Error(errorMessage);
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index 8e1dbb301..001cc237e 100644
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -7,6 +7,7 @@ import FBChannel from '../../api/channel/fbChannel';
 import TwilioChannel from '../../api/channel/twilioChannel';
 import { throwErrorMessage } from '../utils/api';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
+import camelcaseKeys from 'camelcase-keys';
 import { ACCOUNT_EVENTS } from '../../helper/AnalyticsHelper/events';
 
 const buildInboxData = inboxParams => {
@@ -92,6 +93,12 @@ export const getters = {
     );
     return inbox || {};
   },
+  getInboxById: $state => inboxId => {
+    const [inbox] = $state.records.filter(
+      record => record.id === Number(inboxId)
+    );
+    return camelcaseKeys(inbox || {}, { deep: true });
+  },
   getUIFlags($state) {
     return $state.uiFlags;
   },
diff --git a/app/javascript/dashboard/store/modules/specs/conversationStats/actions.spec.js b/app/javascript/dashboard/store/modules/specs/conversationStats/actions.spec.js
index 33d927103..4572387ac 100644
--- a/app/javascript/dashboard/store/modules/specs/conversationStats/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversationStats/actions.spec.js
@@ -11,7 +11,7 @@ describe('#actions', () => {
     it('sends correct mutations if API is success', async () => {
       axios.get.mockResolvedValue({ data: { meta: { mine_count: 1 } } });
       await actions.get(
-        { commit },
+        { commit, state: { updatedOn: null } },
         { inboxId: 1, assigneeTpe: 'me', status: 'open' }
       );
       expect(commit.mock.calls).toEqual([
@@ -21,7 +21,7 @@ describe('#actions', () => {
     it('sends correct actions if API is error', async () => {
       axios.get.mockRejectedValue({ message: 'Incorrect header' });
       await actions.get(
-        { commit },
+        { commit, state: { updatedOn: null } },
         { inboxId: 1, assigneeTpe: 'me', status: 'open' }
       );
       expect(commit.mock.calls).toEqual([]);
diff --git a/app/javascript/dashboard/store/modules/specs/conversationStats/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversationStats/mutations.spec.js
index e49d938e3..e625eb13c 100644
--- a/app/javascript/dashboard/store/modules/specs/conversationStats/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversationStats/mutations.spec.js
@@ -14,6 +14,7 @@ describe('#mutations', () => {
         mineCount: 1,
         unAssignedCount: 1,
         allCount: 2,
+        updatedOn: expect.any(Date),
       });
     });
   });
diff --git a/app/javascript/dashboard/store/utils/api.js b/app/javascript/dashboard/store/utils/api.js
index e8628300b..281b911b5 100644
--- a/app/javascript/dashboard/store/utils/api.js
+++ b/app/javascript/dashboard/store/utils/api.js
@@ -1,15 +1,15 @@
 import fromUnixTime from 'date-fns/fromUnixTime';
 import differenceInDays from 'date-fns/differenceInDays';
 import Cookies from 'js-cookie';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import { emitter } from 'shared/helpers/mitt';
 import {
   ANALYTICS_IDENTITY,
   ANALYTICS_RESET,
   CHATWOOT_RESET,
   CHATWOOT_SET_USER,
-} from '../../helper/scriptHelpers';
-import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { LocalStorage } from 'shared/helpers/localStorage';
-import { emitter } from 'shared/helpers/mitt';
+} from '../../constants/appEvents';
 
 Cookies.defaults = { sameSite: 'Lax' };
 
diff --git a/app/javascript/entrypoints/dashboard.js b/app/javascript/entrypoints/dashboard.js
index 857a62d12..a2184d074 100644
--- a/app/javascript/entrypoints/dashboard.js
+++ b/app/javascript/entrypoints/dashboard.js
@@ -6,7 +6,6 @@ import axios from 'axios';
 import hljsVuePlugin from '@highlightjs/vue-plugin';
 
 import Multiselect from 'vue-multiselect';
-// import VueFormulate from '@braid/vue-formulate';
 import { plugin, defaultConfig } from '@formkit/vue';
 import WootSwitch from 'components/ui/Switch.vue';
 import WootWizard from 'components/ui/Wizard.vue';
@@ -22,7 +21,6 @@ import router, { initalizeRouter } from 'dashboard/routes';
 import store from 'dashboard/store';
 import constants from 'dashboard/constants/globals';
 import * as Sentry from '@sentry/vue';
-// import { Integrations } from '@sentry/tracing';
 import {
   initializeAnalyticsEvents,
   initializeChatwootEvents,
@@ -101,7 +99,6 @@ app.directive('on-clickaway', onClickaway);
 
 // load common helpers into js
 commonHelpers();
-window.WOOT_STORE = store;
 window.WootConstants = constants;
 window.axios = createAxios(axios);
 // [VITE] Disabled this we don't need it, we can use `useEmitter` directly
@@ -114,7 +111,3 @@ initalizeRouter();
 window.onload = () => {
   app.mount('#app');
 };
-
-window.addEventListener('load', () => {
-  window.playAudioAlert = () => {};
-});
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index 6b7358d59..7642da78d 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -4,8 +4,10 @@ import i18nMessages from 'dashboard/i18n';
 import { createI18n } from 'vue-i18n';
 import { vResizeObserver } from '@vueuse/components';
 import store from 'dashboard/store';
+import FloatingVue from 'floating-vue';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js';
+import { directive as onClickaway } from 'vue3-click-away';
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
@@ -16,6 +18,13 @@ const i18n = createI18n({
 export const setupVue3 = defineSetupVue3(({ app }) => {
   app.use(store);
   app.use(i18n);
+  app.use(FloatingVue, {
+    instantMove: true,
+    arrowOverflow: false,
+    disposeTimeout: 5000000,
+  });
+
   app.directive('resize', vResizeObserver);
   app.use(VueDOMPurifyHTML, domPurifyConfig);
+  app.directive('on-clickaway', onClickaway);
 });
diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js
index 2229a8b4c..8ae15c3f8 100644
--- a/app/javascript/shared/constants/busEvents.js
+++ b/app/javascript/shared/constants/busEvents.js
@@ -14,4 +14,5 @@ export const BUS_EVENTS = {
   SHOW_TOAST: 'newToastMessage',
   NEW_CONVERSATION_MODAL: 'newConversationModal',
   INSERT_INTO_RICH_EDITOR: 'insertIntoRichEditor',
+  INSERT_INTO_NORMAL_EDITOR: 'insertIntoNormalEditor',
 };
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
deleted file mode 100644
index 32eff693a..000000000
--- a/app/javascript/v3/components/Form/ProfileAvatar.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import InitialsAvatar from './InitialsAvatar.vue';
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['change', 'delete']);
-
-const hasImageLoaded = ref(false);
-const imageLoadedError = ref(false);
-const fileInputRef = ref(null);
-
-const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
-
-const onImageLoadError = () => {
-  imageLoadedError.value = true;
-};
-
-const onImageLoad = () => {
-  hasImageLoaded.value = true;
-  imageLoadedError.value = false;
-};
-
-const openFileInput = () => {
-  fileInputRef.value.click();
-};
-
-const onImageUpload = event => {
-  const [file] = event.target.files;
-  emit('change', {
-    file,
-    url: file ? URL.createObjectURL(file) : null,
-  });
-};
-
-const onAvatarDelete = () => {
-  emit('delete');
-};
-</script>
-
-<template>
-  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
-    <img
-      v-if="shouldShowImage"
-      class="rounded-xl h-[72px] w-[72px]"
-      :alt="name"
-      :src="src"
-      draggable="false"
-      @load="onImageLoad"
-      @error="onImageLoadError"
-    />
-    <InitialsAvatar v-else-if="!shouldShowImage" :name="name" :size="72" />
-
-    <input
-      ref="fileInputRef"
-      type="file"
-      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-      hidden
-      @change="onImageUpload"
-    />
-    <div class="hidden group-hover:block">
-      <button
-        v-if="src"
-        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
-        @click="onAvatarDelete"
-      >
-        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
-      </button>
-      <button
-        class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
-        @click="openFileInput"
-      >
-        <fluent-icon icon="avatar-upload" size="32" class="text-white" />
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/app/jobs/internal/process_stale_redis_keys_job.rb b/app/jobs/internal/process_stale_redis_keys_job.rb
new file mode 100644
index 000000000..30c3cffed
--- /dev/null
+++ b/app/jobs/internal/process_stale_redis_keys_job.rb
@@ -0,0 +1,12 @@
+# housekeeping
+# remove contact inboxes that does not have any conversations
+# and are older than 3 months
+
+class Internal::ProcessStaleRedisKeysJob < ApplicationJob
+  queue_as :low
+
+  def perform(account)
+    removed_count = Internal::RemoveStaleRedisKeysService.new(account_id: account.id).perform
+    Rails.logger.info "Successfully cleaned up Redis keys for account #{account.id} (removed #{removed_count} keys)"
+  end
+end
diff --git a/app/jobs/internal/remove_stale_redis_keys_job.rb b/app/jobs/internal/remove_stale_redis_keys_job.rb
new file mode 100644
index 000000000..da3892b3c
--- /dev/null
+++ b/app/jobs/internal/remove_stale_redis_keys_job.rb
@@ -0,0 +1,16 @@
+# housekeeping
+# ensure stale ONLINE PRESENCE KEYS for contacts are removed periodically
+# should result in 50% redis mem size reduction
+
+class Internal::RemoveStaleRedisKeysJob < ApplicationJob
+  queue_as :scheduled_jobs
+
+  def perform
+    Account.find_in_batches(batch_size: 100) do |accounts|
+      accounts.each do |account|
+        Rails.logger.info "Enqueuing ProcessStaleRedisKeysJob for account #{account.id}"
+        Internal::ProcessStaleRedisKeysJob.perform_later(account)
+      end
+    end
+  end
+end
diff --git a/app/models/attachment.rb b/app/models/attachment.rb
index b9ed804d3..65e56a21f 100644
--- a/app/models/attachment.rb
+++ b/app/models/attachment.rb
@@ -69,6 +69,10 @@ class Attachment < ApplicationRecord
     end
   end
 
+  def with_attached_file?
+    [:image, :audio, :video, :file].include?(file_type.to_sym)
+  end
+
   private
 
   def file_metadata
diff --git a/app/models/concerns/llm_formattable.rb b/app/models/concerns/llm_formattable.rb
new file mode 100644
index 000000000..086ccc46a
--- /dev/null
+++ b/app/models/concerns/llm_formattable.rb
@@ -0,0 +1,7 @@
+module LlmFormattable
+  extend ActiveSupport::Concern
+
+  def to_llm_text
+    LlmFormatter::LlmTextFormatterService.new(self).format
+  end
+end
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index df4bbf31c..ba60f5295 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -51,6 +51,7 @@
 
 class Conversation < ApplicationRecord
   include Labelable
+  include LlmFormattable
   include AssignmentHandler
   include AutoAssignmentHandler
   include ActivityMessageHandler
diff --git a/app/services/internal/remove_stale_redis_keys_service.rb b/app/services/internal/remove_stale_redis_keys_service.rb
new file mode 100644
index 000000000..553cc6c6a
--- /dev/null
+++ b/app/services/internal/remove_stale_redis_keys_service.rb
@@ -0,0 +1,15 @@
+class Internal::RemoveStaleRedisKeysService
+  pattr_initialize [:account_id!]
+
+  def perform
+    Rails.logger.info "Removing redis stale keys for account #{@account_id}"
+    range_start = (Time.zone.now - OnlineStatusTracker::PRESENCE_DURATION).to_i
+    # exclusive minimum score is specified by prefixing (
+    # we are clearing old records because this could clogg up the sorted set
+    ::Redis::Alfred.zremrangebyscore(
+      OnlineStatusTracker.presence_key(@account_id, 'Contact'),
+      '-inf',
+      "(#{range_start}"
+    )
+  end
+end
diff --git a/app/services/llm_formatter/conversation_llm_formatter.rb b/app/services/llm_formatter/conversation_llm_formatter.rb
new file mode 100644
index 000000000..07afc2cac
--- /dev/null
+++ b/app/services/llm_formatter/conversation_llm_formatter.rb
@@ -0,0 +1,32 @@
+class LlmFormatter::ConversationLlmFormatter < LlmFormatter::DefaultLlmFormatter
+  def format
+    sections = []
+    sections << "Conversation ID: ##{@record.display_id}"
+    sections << "Channel: #{@record.inbox.channel.name}"
+    sections << 'Message History:'
+    sections << if @record.messages.any?
+                  build_messages
+                else
+                  'No messages in this conversation'
+                end
+
+    sections.join("\n")
+  end
+
+  private
+
+  def build_messages
+    return "No messages in this conversation\n" if @record.messages.empty?
+
+    message_text = ''
+    @record.messages.chat.order(created_at: :asc).each do |message|
+      message_text << format_message(message)
+    end
+    message_text
+  end
+
+  def format_message(message)
+    sender = message.message_type == 'incoming' ? 'User' : 'Support agent'
+    "#{sender}: #{message.content}\n"
+  end
+end
diff --git a/app/services/llm_formatter/default_llm_formatter.rb b/app/services/llm_formatter/default_llm_formatter.rb
new file mode 100644
index 000000000..b82a039cf
--- /dev/null
+++ b/app/services/llm_formatter/default_llm_formatter.rb
@@ -0,0 +1,9 @@
+class LlmFormatter::DefaultLlmFormatter
+  def initialize(record)
+    @record = record
+  end
+
+  def format
+    # override this
+  end
+end
diff --git a/app/services/llm_formatter/llm_text_formatter_service.rb b/app/services/llm_formatter/llm_text_formatter_service.rb
new file mode 100644
index 000000000..0f1f37cf8
--- /dev/null
+++ b/app/services/llm_formatter/llm_text_formatter_service.rb
@@ -0,0 +1,20 @@
+class LlmFormatter::LlmTextFormatterService
+  def initialize(record)
+    @record = record
+  end
+
+  def format
+    formatter_class = find_formatter
+    formatter_class.new(@record).format
+  end
+
+  private
+
+  def find_formatter
+    formatter_name = "LlmFormatter::#{@record.class.name}LlmFormatter"
+    formatter_class = formatter_name.safe_constantize
+    raise FormatterNotFoundError, "No formatter found for #{@record.class.name}" unless formatter_class
+
+    formatter_class
+  end
+end
diff --git a/app/views/api/v1/accounts/contacts/show.json.jbuilder b/app/views/api/v1/accounts/contacts/show.json.jbuilder
index 524a393bf..1add73326 100644
--- a/app/views/api/v1/accounts/contacts/show.json.jbuilder
+++ b/app/views/api/v1/accounts/contacts/show.json.jbuilder
@@ -1,3 +1,3 @@
 json.payload do
-  json.partial! 'api/v1/models/contact', formats: [:json], resource: @contact, with_contact_inboxes: true
+  json.partial! 'api/v1/models/contact', formats: [:json], resource: @contact, with_contact_inboxes: @include_contact_inboxes
 end
diff --git a/app/views/api/v1/accounts/contacts/update.json.jbuilder b/app/views/api/v1/accounts/contacts/update.json.jbuilder
index 524a393bf..1add73326 100644
--- a/app/views/api/v1/accounts/contacts/update.json.jbuilder
+++ b/app/views/api/v1/accounts/contacts/update.json.jbuilder
@@ -1,3 +1,3 @@
 json.payload do
-  json.partial! 'api/v1/models/contact', formats: [:json], resource: @contact, with_contact_inboxes: true
+  json.partial! 'api/v1/models/contact', formats: [:json], resource: @contact, with_contact_inboxes: @include_contact_inboxes
 end
diff --git a/app/views/api/v1/profiles/avatar.json.jbuilder b/app/views/api/v1/profiles/avatar.json.jbuilder
new file mode 100644
index 000000000..0a4b4f9fa
--- /dev/null
+++ b/app/views/api/v1/profiles/avatar.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'api/v1/models/user', formats: [:json], resource: @user
diff --git a/config/routes.rb b/config/routes.rb
index 1c913155b..d33a40827 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -220,6 +220,7 @@ Rails.application.routes.draw do
             resource :captain, controller: 'captain', only: [] do
               collection do
                 post :proxy
+                post :copilot
               end
             end
             resources :hooks, only: [:show, :create, :update, :destroy] do
diff --git a/config/schedule.yml b/config/schedule.yml
index 7a0d2faeb..a92960db8 100644
--- a/config/schedule.yml
+++ b/config/schedule.yml
@@ -26,3 +26,10 @@ remove_stale_contact_inboxes_job.rb:
   cron: '30 22 * * *'
   class: 'Internal::RemoveStaleContactInboxesJob'
   queue: scheduled_jobs
+
+# executed daily at 2230 UTC
+# which is our lowest traffic time
+remove_stale_redis_keys_job.rb:
+  cron: '30 22 * * *'
+  class: 'Internal::RemoveStaleRedisKeysJob'
+  queue: scheduled_jobs
diff --git a/deployment/setup_20.04.sh b/deployment/setup_20.04.sh
index 830d03708..6c5d0843e 100644
--- a/deployment/setup_20.04.sh
+++ b/deployment/setup_20.04.sh
@@ -171,8 +171,8 @@ EOF
 #   None
 ##############################################################################
 function install_dependencies() {
-  apt update && apt upgrade -y
-  apt install -y curl
+  apt-get update && apt-get upgrade -y
+  apt-get install -y curl
   curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
   echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
   mkdir -p /etc/apt/keyrings
@@ -180,9 +180,9 @@ function install_dependencies() {
   NODE_MAJOR=20
   echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
 
-  apt update
+  apt-get update
 
-  apt install -y \
+  apt-get install -y \
       git software-properties-common ca-certificates imagemagick libpq-dev \
       libxml2-dev libxslt1-dev file g++ gcc autoconf build-essential \
       libssl-dev libyaml-dev libreadline-dev gnupg2 \
@@ -203,7 +203,7 @@ function install_dependencies() {
 #   None
 ##############################################################################
 function install_databases() {
-  apt install -y postgresql postgresql-contrib redis-server
+  apt-get install -y postgresql postgresql-contrib redis-server
 }
 
 ##############################################################################
@@ -216,7 +216,7 @@ function install_databases() {
 #   None
 ##############################################################################
 function install_webserver() {
-  apt install -y nginx nginx-full certbot python3-certbot-nginx
+  apt-get install -y nginx nginx-full certbot python3-certbot-nginx
 }
 
 ##############################################################################
@@ -752,9 +752,9 @@ function upgrade_redis() {
 
   curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
   echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
-  apt update -y
-  apt upgrade redis-server -y
-  apt install libvips -y
+  apt-get update -y
+  apt-get upgrade redis-server -y
+  apt-get install libvips -y
 }
 
 
@@ -787,8 +787,8 @@ function upgrade_node() {
   NODE_MAJOR=20
   echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
 
-  apt update
-  apt install nodejs -y
+  apt-get update
+  apt-get install nodejs -y
 
 }
 
@@ -989,7 +989,7 @@ function cwctl_upgrade_check() {
     #Check if pip is not installed, and install it if not
     if ! command -v pip3 &> /dev/null; then
         echo "Installing pip..."
-        apt install -y python3-pip
+        apt-get install -y python3-pip
     fi
 
     # Check if packaging library is installed, and install it if not
@@ -1025,7 +1025,7 @@ function install_packaging() {
   ubuntu_version=$(lsb_release -r | awk '{print $2}')
   if [[ "$ubuntu_version" == "24.04" ]]; then
     echo "Detected Ubuntu 24.04. Installing packaging library using apt."
-    apt install -y python3-packaging
+    apt-get install -y python3-packaging
   else
     echo "Installing packaging library using pip."
     python3 -m pip install packaging
diff --git a/lib/integrations/slack/send_on_slack_service.rb b/lib/integrations/slack/send_on_slack_service.rb
index aa9d3ad5b..20a65905c 100644
--- a/lib/integrations/slack/send_on_slack_service.rb
+++ b/lib/integrations/slack/send_on_slack_service.rb
@@ -117,6 +117,8 @@ class Integrations::Slack::SendOnSlackService < Base::SendOnChannelService
   end
 
   def upload_file
+    return unless message.attachments.first.with_attached_file?
+
     result = slack_client.files_upload({
       channels: hook.reference_id,
       initial_comment: 'Attached File!',
diff --git a/package.json b/package.json
index fc2de8c7d..ec06e9375 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@chatwoot/captain": "0.0.3-alpha.4",
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
-    "@chatwoot/utils": "^0.0.25",
+    "@chatwoot/utils": "^0.0.30",
     "@formkit/core": "^1.6.7",
     "@formkit/vue": "^1.6.7",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
@@ -53,8 +53,8 @@
     "@vue/compiler-sfc": "^3.5.8",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/components": "^11.1.0",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/components": "^12.0.0",
+    "@vueuse/core": "^12.0.0",
     "activestorage": "^5.2.6",
     "axios": "^1.7.7",
     "camelcase-keys": "^9.1.3",
@@ -66,17 +66,20 @@
     "date-fns": "2.21.1",
     "date-fns-tz": "^1.3.3",
     "dompurify": "3.1.6",
+    "flag-icons": "^7.2.3",
     "floating-vue": "^5.2.2",
     "highlight.js": "^11.10.0",
     "idb": "^8.0.0",
     "js-cookie": "^3.0.5",
     "libphonenumber-js": "^1.11.9",
+    "maplibre-gl": "^4.7.1",
     "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1",
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "opus-recorder": "^8.0.5",
     "semver": "7.6.3",
+    "snakecase-keys": "^8.0.1",
     "timezone-phone-codes": "^0.0.2",
     "tinykeys": "^3.0.0",
     "turbolinks": "^5.2.0",
@@ -88,7 +91,7 @@
     "vue-chartjs": "5.3.1",
     "vue-datepicker-next": "^1.0.3",
     "vue-dompurify-html": "^5.1.0",
-    "vue-i18n": "9.14.0",
+    "vue-i18n": "9.14.2",
     "vue-letter": "^0.2.0",
     "vue-multiselect": "3.1.0",
     "vue-router": "~4.4.5",
@@ -105,7 +108,9 @@
     "@histoire/plugin-vue": "0.17.15",
     "@iconify-json/logos": "^1.2.3",
     "@iconify-json/lucide": "^1.2.11",
+    "@iconify-json/ph": "^1.2.1",
     "@iconify-json/ri": "^1.2.3",
+    "@iconify-json/teenyicons": "^1.2.1",
     "@size-limit/file": "^8.2.4",
     "@vitest/coverage-v8": "2.0.1",
     "@vue/test-utils": "^2.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed87f5009..d1b4e58a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,8 +26,8 @@ importers:
         specifier: 1.1.1-next
         version: 1.1.1-next
       '@chatwoot/utils':
-        specifier: ^0.0.25
-        version: 0.0.25
+        specifier: ^0.0.30
+        version: 0.0.30
       '@formkit/core':
         specifier: ^1.6.7
         version: 1.6.7
@@ -83,11 +83,11 @@ importers:
         specifier: ^2.0.4
         version: 2.0.4(vue@3.5.12(typescript@5.6.2))
       '@vueuse/components':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.12(typescript@5.6.2))
+        specifier: ^12.0.0
+        version: 12.0.0(typescript@5.6.2)
       '@vueuse/core':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.12(typescript@5.6.2))
+        specifier: ^12.0.0
+        version: 12.0.0(typescript@5.6.2)
       activestorage:
         specifier: ^5.2.6
         version: 5.2.8
@@ -121,6 +121,9 @@ importers:
       dompurify:
         specifier: 3.1.6
         version: 3.1.6
+      flag-icons:
+        specifier: ^7.2.3
+        version: 7.2.3
       floating-vue:
         specifier: ^5.2.2
         version: 5.2.2(vue@3.5.12(typescript@5.6.2))
@@ -136,6 +139,9 @@ importers:
       libphonenumber-js:
         specifier: ^1.11.9
         version: 1.11.9
+      maplibre-gl:
+        specifier: ^4.7.1
+        version: 4.7.1
       markdown-it:
         specifier: ^13.0.2
         version: 13.0.2
@@ -154,6 +160,9 @@ importers:
       semver:
         specifier: 7.6.3
         version: 7.6.3
+      snakecase-keys:
+        specifier: ^8.0.1
+        version: 8.0.1
       timezone-phone-codes:
         specifier: ^0.0.2
         version: 0.0.2
@@ -188,8 +197,8 @@ importers:
         specifier: ^5.1.0
         version: 5.1.0(vue@3.5.12(typescript@5.6.2))
       vue-i18n:
-        specifier: 9.14.0
-        version: 9.14.0(vue@3.5.12(typescript@5.6.2))
+        specifier: 9.14.2
+        version: 9.14.2(vue@3.5.12(typescript@5.6.2))
       vue-letter:
         specifier: ^0.2.0
         version: 0.2.0
@@ -233,9 +242,15 @@ importers:
       '@iconify-json/lucide':
         specifier: ^1.2.11
         version: 1.2.11
+      '@iconify-json/ph':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@iconify-json/ri':
         specifier: ^1.2.3
         version: 1.2.3
+      '@iconify-json/teenyicons':
+        specifier: ^1.2.1
+        version: 1.2.1
       '@size-limit/file':
         specifier: ^8.2.4
         version: 8.2.6(size-limit@8.2.6)
@@ -395,8 +410,8 @@ packages:
   '@chatwoot/prosemirror-schema@1.1.1-next':
     resolution: {integrity: sha512-/M2qZ+ZF7GlQNt1riwVP499fvp3hxSqd5iy8hxyF9pkj9qQ+OKYn5JK+v3qwwqQY3IxhmNOn1Lp6tm7vstrd9Q==}
 
-  '@chatwoot/utils@0.0.25':
-    resolution: {integrity: sha512-2bGfRewHu0Bra47vHwJa3SdZ0VqXK/2q2ampcc6TT3z8ojSfZqpfMdb+1RKJ/Q1tQEYn/0rJTdWtLDRjePF92A==}
+  '@chatwoot/utils@0.0.30':
+    resolution: {integrity: sha512-UfKn2GUV/9PF7zoj17dAoyx5RZkJihjjclhWTtG0SHRfRizKS/pg0SpXSt9ToAEDeNeRtqmD7RrVMUaso8TZxw==}
     engines: {node: '>=10'}
 
   '@codemirror/commands@6.7.0':
@@ -878,9 +893,15 @@ packages:
   '@iconify-json/lucide@1.2.11':
     resolution: {integrity: sha512-dqpbV7+g1qqxtZOHCZKwdKhtYYqEUjFhYiOg/+PcADbjtapoL+bwa1Brn12gAHq5r2K7Mf29xRHOTmZ3UHHOrw==}
 
+  '@iconify-json/ph@1.2.1':
+    resolution: {integrity: sha512-x0DNfwWrS18dbsBYOq3XGiZnGz4CgRyC+YSl/TZvMQiKhIUl1woWqUbMYqqfMNUBzjyk7ulvaRovpRsIlqIf8g==}
+
   '@iconify-json/ri@1.2.3':
     resolution: {integrity: sha512-UVKofd5xkSevGd5K01pvO4NWsu+2C9spu+GxnMZUYymUiaWmpCAxtd22MFSpm6MGf0MP4GCwhDCo1Q8L8oZ9wg==}
 
+  '@iconify-json/teenyicons@1.2.1':
+    resolution: {integrity: sha512-PaVv+zrQEO6I/9YfEwxkJfYSrCIWyOoSv/ZOVgETsr0MOqN9k7ecnHF/lPrgpyCLkwLzPX7MyFm3/gmziwjSiw==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -893,16 +914,16 @@ packages:
   '@internationalized/number@3.5.4':
     resolution: {integrity: sha512-h9huwWjNqYyE2FXZZewWqmCdkw1HeFds5q4Siuoms3hUQC5iPJK3aBmkFZoDSLN4UD0Bl8G22L/NdHpeOr+/7A==}
 
-  '@intlify/core-base@9.14.0':
-    resolution: {integrity: sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==}
+  '@intlify/core-base@9.14.2':
+    resolution: {integrity: sha512-DZyQ4Hk22sC81MP4qiCDuU+LdaYW91A6lCjq8AWPvY3+mGMzhGDfOCzvyR6YBQxtlPjFqMoFk9ylnNYRAQwXtQ==}
     engines: {node: '>= 16'}
 
-  '@intlify/message-compiler@9.14.0':
-    resolution: {integrity: sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==}
+  '@intlify/message-compiler@9.14.2':
+    resolution: {integrity: sha512-YsKKuV4Qv4wrLNsvgWbTf0E40uRv+Qiw1BeLQ0LAxifQuhiMe+hfTIzOMdWj/ZpnTDj4RSZtkXjJM7JDiiB5LQ==}
     engines: {node: '>= 16'}
 
-  '@intlify/shared@9.14.0':
-    resolution: {integrity: sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==}
+  '@intlify/shared@9.14.2':
+    resolution: {integrity: sha512-uRAHAxYPeF+G5DBIboKpPgC/Waecd4Jz8ihtkpJQD5ycb5PwXp0k/+hBGl5dAjwF7w+l74kz/PKA8r8OK//RUw==}
     engines: {node: '>= 16'}
 
   '@isaacs/cliui@8.0.2':
@@ -973,6 +994,34 @@ packages:
     resolution: {integrity: sha512-dUz8OmYvlY5A9wXaroHIMSPASpSYRLCqbPvxGSyHguhtTQIy24lC+EGxQlwv71AhRCO55WOtgwhzQLpw27JaJQ==}
     engines: {node: '>=8'}
 
+  '@mapbox/geojson-rewind@0.5.2':
+    resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
+    hasBin: true
+
+  '@mapbox/jsonlint-lines-primitives@2.0.2':
+    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
+    engines: {node: '>= 0.6'}
+
+  '@mapbox/point-geometry@0.1.0':
+    resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==}
+
+  '@mapbox/tiny-sdf@2.0.6':
+    resolution: {integrity: sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==}
+
+  '@mapbox/unitbezier@0.0.1':
+    resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==}
+
+  '@mapbox/vector-tile@1.3.1':
+    resolution: {integrity: sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==}
+
+  '@mapbox/whoots-js@3.1.0':
+    resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
+    engines: {node: '>=6.0.0'}
+
+  '@maplibre/maplibre-gl-style-spec@20.4.0':
+    resolution: {integrity: sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==}
+    hasBin: true
+
   '@material/mwc-icon@0.25.3':
     resolution: {integrity: sha512-36076AWZIRSr8qYOLjuDDkxej/HA0XAosrj7TS1ZeLlUBnLUtbDtvc1S7KSa0hqez7ouzOqGaWK24yoNnTa2OA==}
     deprecated: MWC beta is longer supported. Please upgrade to @material/web
@@ -1722,12 +1771,24 @@ packages:
   '@types/fs-extra@9.0.13':
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
 
+  '@types/geojson-vt@3.2.5':
+    resolution: {integrity: sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==}
+
+  '@types/geojson@7946.0.14':
+    resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
+
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
   '@types/linkify-it@5.0.0':
     resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
 
+  '@types/mapbox__point-geometry@0.1.4':
+    resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
+
+  '@types/mapbox__vector-tile@1.3.4':
+    resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
+
   '@types/markdown-it@12.2.3':
     resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==}
 
@@ -1737,6 +1798,12 @@ packages:
   '@types/node@22.7.0':
     resolution: {integrity: sha512-MOdOibwBs6KW1vfqz2uKMlxq5xAfAZ98SZjO8e3XnAbFnTJtAspqhWk7hrdSAs9/Y14ZWMiy7/MxMUzAOadYEw==}
 
+  '@types/pbf@3.0.5':
+    resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
+
+  '@types/supercluster@7.1.3':
+    resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
+
   '@types/trusted-types@2.0.2':
     resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
 
@@ -1793,24 +1860,36 @@ packages:
   '@vue/compiler-core@3.5.12':
     resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
 
+  '@vue/compiler-core@3.5.13':
+    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
+
   '@vue/compiler-core@3.5.8':
     resolution: {integrity: sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==}
 
   '@vue/compiler-dom@3.5.12':
     resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
 
+  '@vue/compiler-dom@3.5.13':
+    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
+
   '@vue/compiler-dom@3.5.8':
     resolution: {integrity: sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==}
 
   '@vue/compiler-sfc@3.5.12':
     resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
 
+  '@vue/compiler-sfc@3.5.13':
+    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
+
   '@vue/compiler-sfc@3.5.8':
     resolution: {integrity: sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==}
 
   '@vue/compiler-ssr@3.5.12':
     resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
 
+  '@vue/compiler-ssr@3.5.13':
+    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
+
   '@vue/compiler-ssr@3.5.8':
     resolution: {integrity: sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==}
 
@@ -1823,20 +1902,37 @@ packages:
   '@vue/reactivity@3.5.12':
     resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
 
+  '@vue/reactivity@3.5.13':
+    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
+
   '@vue/runtime-core@3.5.12':
     resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
 
+  '@vue/runtime-core@3.5.13':
+    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
+
   '@vue/runtime-dom@3.5.12':
     resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
 
+  '@vue/runtime-dom@3.5.13':
+    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
+
   '@vue/server-renderer@3.5.12':
     resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
     peerDependencies:
       vue: 3.5.12
 
+  '@vue/server-renderer@3.5.13':
+    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
+    peerDependencies:
+      vue: 3.5.13
+
   '@vue/shared@3.5.12':
     resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
 
+  '@vue/shared@3.5.13':
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
+
   '@vue/shared@3.5.8':
     resolution: {integrity: sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==}
 
@@ -1861,26 +1957,26 @@ packages:
       '@vue/composition-api':
         optional: true
 
-  '@vueuse/components@11.1.0':
-    resolution: {integrity: sha512-8CTbvH1rHfAlqsMdMg6G2OiIvHiHn8HRx0yyJ+Ri/C8J6cLylXAd7VESawoCAkRdAXT4ucPnj/uYHZqEb0JbBQ==}
+  '@vueuse/components@12.0.0':
+    resolution: {integrity: sha512-XpOoBXYRuFuUiiq+HsMX6rGzqvcHdKnbT4sbR0FHYxwSGBHO3Zli8pPTZoLRNBGp4CGov7BRCnANEK/1Ch/6tQ==}
 
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
-  '@vueuse/core@11.1.0':
-    resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}
+  '@vueuse/core@12.0.0':
+    resolution: {integrity: sha512-C12RukhXiJCbx4MGhjmd/gH52TjJsc3G0E0kQj/kb19H3Nt6n1CA4DRWuTdWWcaFRdlTe0npWDS942mvacvNBw==}
 
   '@vueuse/metadata@10.11.1':
     resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
 
-  '@vueuse/metadata@11.1.0':
-    resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==}
+  '@vueuse/metadata@12.0.0':
+    resolution: {integrity: sha512-Yzimd1D3sjxTDOlF05HekU5aSGdKjxhuhRFHA7gDWLn57PRbBIh+SF5NmjhJ0WRgF3my7T8LBucyxdFJjIfRJQ==}
 
   '@vueuse/shared@10.11.1':
     resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
-  '@vueuse/shared@11.1.0':
-    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
+  '@vueuse/shared@12.0.0':
+    resolution: {integrity: sha512-3i6qtcq2PIio5i/vVYidkkcgvmTjCqrf26u+Fd4LhnbBmIT6FN8y6q/GJERp8lfcB9zVEfjdV0Br0443qZuJpw==}
 
   '@xmldom/xmldom@0.7.13':
     resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==}
@@ -2513,6 +2609,9 @@ packages:
     resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
     engines: {node: '>=4'}
 
+  earcut@3.0.0:
+    resolution: {integrity: sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -2816,6 +2915,9 @@ packages:
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  flag-icons@7.2.3:
+    resolution: {integrity: sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==}
+
   flat-cache@3.1.0:
     resolution: {integrity: sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==}
     engines: {node: '>=12.0.0'}
@@ -2880,6 +2982,9 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  geojson-vt@4.0.2:
+    resolution: {integrity: sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -2911,6 +3016,9 @@ packages:
     resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
     engines: {node: '>= 0.4'}
 
+  gl-matrix@3.4.3:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -2931,6 +3039,10 @@ packages:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
 
+  global-prefix@4.0.0:
+    resolution: {integrity: sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==}
+    engines: {node: '>=16'}
+
   global@4.4.0:
     resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
 
@@ -3070,6 +3182,9 @@ packages:
   idb@8.0.0:
     resolution: {integrity: sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==}
 
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
   ignore@5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
@@ -3102,6 +3217,10 @@ packages:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  ini@4.1.3:
+    resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   internal-slot@1.0.5:
     resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
     engines: {node: '>= 0.4'}
@@ -3253,6 +3372,10 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  isexe@3.1.1:
+    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
+    engines: {node: '>=16'}
+
   istanbul-lib-coverage@3.2.2:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
@@ -3330,6 +3453,9 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json-stringify-pretty-compact@4.0.0:
+    resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==}
+
   json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -3337,6 +3463,9 @@ packages:
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  kdbush@4.0.2:
+    resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
+
   keycode@2.2.1:
     resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==}
 
@@ -3472,6 +3601,9 @@ packages:
   magic-string@0.30.12:
     resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
 
+  magic-string@0.30.14:
+    resolution: {integrity: sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==}
+
   magicast@0.3.4:
     resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
 
@@ -3479,10 +3611,18 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  map-obj@4.3.0:
+    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
+    engines: {node: '>=8'}
+
   map-obj@5.0.0:
     resolution: {integrity: sha512-2L3MIgJynYrZ3TYMriLDLWocz15okFakV6J12HXvMXDHui2x/zgChzg1u9mFFGbbGWE+GsLpQByt4POb9Or+uA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  maplibre-gl@4.7.1:
+    resolution: {integrity: sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==}
+    engines: {node: '>=16.14.0', npm: '>=8.1.0'}
+
   markdown-it-anchor@8.6.7:
     resolution: {integrity: sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==}
     peerDependencies:
@@ -3615,6 +3755,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  murmurhash-js@1.0.0:
+    resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
+
   mux.js@6.0.1:
     resolution: {integrity: sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==}
     engines: {node: '>=8', npm: '>=5'}
@@ -3623,8 +3766,8 @@ packages:
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
-  nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -3842,12 +3985,19 @@ packages:
     resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
     engines: {node: '>= 14.16'}
 
+  pbf@3.3.0:
+    resolution: {integrity: sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==}
+    hasBin: true
+
   picocolors@1.0.1:
     resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
 
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -4099,6 +4249,13 @@ packages:
     resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  potpack@2.0.0:
+    resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -4171,6 +4328,9 @@ packages:
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
+  protocol-buffers-schema@3.6.0:
+    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
+
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
@@ -4195,6 +4355,12 @@ packages:
     resolution: {integrity: sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==}
     engines: {node: '>=12'}
 
+  quickselect@2.0.0:
+    resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
+
+  quickselect@3.0.0:
+    resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==}
+
   radix-vue@1.9.9:
     resolution: {integrity: sha512-DuL2o7jxNjzlSP5Ko+kJgrW5db+jC3RlnYQIs3WITTqgzfdeP7hXjcqIUveY1f0uXRpOAN3OAd5MZ/SpRyQzQQ==}
     peerDependencies:
@@ -4243,6 +4409,9 @@ packages:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
+  resolve-protobuf-schema@2.1.0:
+    resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
+
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -4287,6 +4456,9 @@ packages:
   rust-result@1.0.0:
     resolution: {integrity: sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -4414,6 +4586,10 @@ packages:
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
+  snakecase-keys@8.0.1:
+    resolution: {integrity: sha512-Sj51kE1zC7zh6TDlNNz0/Jn1n5HiHdoQErxO8jLtnyrkJW/M5PrI7x05uDgY3BO7OUQYKCvmeMurW6BPUdwEOw==}
+    engines: {node: '>=18'}
+
   sortablejs@1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
 
@@ -4520,6 +4696,9 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  supercluster@8.0.1:
+    resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -4598,6 +4777,9 @@ packages:
     resolution: {integrity: sha512-KIKExllK7jp3uvrNtvRBYBWBOAXSX8ZvoaD8T+7KB/QHIuoJW3Pmr60zucywjAlMb5TeXUkcs/MWeWLu0qvuAQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
+  tinyqueue@3.0.0:
+    resolution: {integrity: sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==}
+
   tinyspy@3.0.2:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
@@ -4855,6 +5037,9 @@ packages:
       jsdom:
         optional: true
 
+  vt-pbf@3.1.3:
+    resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
+
   vue-chartjs@5.3.1:
     resolution: {integrity: sha512-rZjqcHBxKiHrBl0CIvcOlVEBwRhpWAVf6rDU3vUfa7HuSRmGtCslc0Oc8m16oAVuk0erzc1FCtH1VCriHsrz+A==}
     peerDependencies:
@@ -4902,8 +5087,8 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-i18n@9.14.0:
-    resolution: {integrity: sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==}
+  vue-i18n@9.14.2:
+    resolution: {integrity: sha512-JK9Pm80OqssGJU2Y6F7DcM8RFHqVG4WkuCqOZTVsXkEzZME7ABejAUqUdA931zEBedc4thBgSUWxeQh4uocJAQ==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
@@ -4952,6 +5137,14 @@ packages:
       typescript:
         optional: true
 
+  vue@3.5.13:
+    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   vuedraggable@4.1.0:
     resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
     peerDependencies:
@@ -5036,6 +5229,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
@@ -5218,7 +5416,7 @@ snapshots:
       prosemirror-utils: 1.2.2(prosemirror-model@1.22.3)(prosemirror-state@1.4.3)
       prosemirror-view: 1.34.1
 
-  '@chatwoot/utils@0.0.25':
+  '@chatwoot/utils@0.0.30':
     dependencies:
       date-fns: 2.29.3
 
@@ -5708,10 +5906,18 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/ph@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/ri@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/teenyicons@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.1.32':
@@ -5734,17 +5940,17 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.15
 
-  '@intlify/core-base@9.14.0':
+  '@intlify/core-base@9.14.2':
     dependencies:
-      '@intlify/message-compiler': 9.14.0
-      '@intlify/shared': 9.14.0
+      '@intlify/message-compiler': 9.14.2
+      '@intlify/shared': 9.14.2
 
-  '@intlify/message-compiler@9.14.0':
+  '@intlify/message-compiler@9.14.2':
     dependencies:
-      '@intlify/shared': 9.14.0
+      '@intlify/shared': 9.14.2
       source-map-js: 1.2.1
 
-  '@intlify/shared@9.14.0': {}
+  '@intlify/shared@9.14.2': {}
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -5834,10 +6040,39 @@ snapshots:
     dependencies:
       '@lukeed/csprng': 1.0.1
 
+  '@mapbox/geojson-rewind@0.5.2':
+    dependencies:
+      get-stream: 6.0.1
+      minimist: 1.2.8
+
+  '@mapbox/jsonlint-lines-primitives@2.0.2': {}
+
+  '@mapbox/point-geometry@0.1.0': {}
+
+  '@mapbox/tiny-sdf@2.0.6': {}
+
+  '@mapbox/unitbezier@0.0.1': {}
+
+  '@mapbox/vector-tile@1.3.1':
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+
+  '@mapbox/whoots-js@3.1.0': {}
+
+  '@maplibre/maplibre-gl-style-spec@20.4.0':
+    dependencies:
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/unitbezier': 0.0.1
+      json-stringify-pretty-compact: 4.0.0
+      minimist: 1.2.8
+      quickselect: 2.0.0
+      rw: 1.3.3
+      tinyqueue: 3.0.0
+
   '@material/mwc-icon@0.25.3':
     dependencies:
       lit: 2.2.6
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
@@ -5922,7 +6157,7 @@ snapshots:
     dependencies:
       '@lukeed/uuid': 2.0.0
       dset: 3.1.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   '@segment/analytics.js-video-plugins@0.2.1':
     dependencies:
@@ -6675,10 +6910,24 @@ snapshots:
     dependencies:
       '@types/node': 22.7.0
 
+  '@types/geojson-vt@3.2.5':
+    dependencies:
+      '@types/geojson': 7946.0.14
+
+  '@types/geojson@7946.0.14': {}
+
   '@types/json5@0.0.29': {}
 
   '@types/linkify-it@5.0.0': {}
 
+  '@types/mapbox__point-geometry@0.1.4': {}
+
+  '@types/mapbox__vector-tile@1.3.4':
+    dependencies:
+      '@types/geojson': 7946.0.14
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/pbf': 3.0.5
+
   '@types/markdown-it@12.2.3':
     dependencies:
       '@types/linkify-it': 5.0.0
@@ -6690,6 +6939,12 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
+  '@types/pbf@3.0.5': {}
+
+  '@types/supercluster@7.1.3':
+    dependencies:
+      '@types/geojson': 7946.0.14
+
   '@types/trusted-types@2.0.2': {}
 
   '@types/web-bluetooth@0.0.20': {}
@@ -6785,6 +7040,14 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-core@3.5.13':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/shared': 3.5.13
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-core@3.5.8':
     dependencies:
       '@babel/parser': 7.25.6
@@ -6798,6 +7061,11 @@ snapshots:
       '@vue/compiler-core': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/compiler-dom@3.5.13':
+    dependencies:
+      '@vue/compiler-core': 3.5.13
+      '@vue/shared': 3.5.13
+
   '@vue/compiler-dom@3.5.8':
     dependencies:
       '@vue/compiler-core': 3.5.8
@@ -6815,6 +7083,18 @@ snapshots:
       postcss: 8.4.47
       source-map-js: 1.2.1
 
+  '@vue/compiler-sfc@3.5.13':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/compiler-core': 3.5.13
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      estree-walker: 2.0.2
+      magic-string: 0.30.14
+      postcss: 8.4.49
+      source-map-js: 1.2.1
+
   '@vue/compiler-sfc@3.5.8':
     dependencies:
       '@babel/parser': 7.25.6
@@ -6832,6 +7112,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/compiler-ssr@3.5.13':
+    dependencies:
+      '@vue/compiler-dom': 3.5.13
+      '@vue/shared': 3.5.13
+
   '@vue/compiler-ssr@3.5.8':
     dependencies:
       '@vue/compiler-dom': 3.5.8
@@ -6845,11 +7130,20 @@ snapshots:
     dependencies:
       '@vue/shared': 3.5.12
 
+  '@vue/reactivity@3.5.13':
+    dependencies:
+      '@vue/shared': 3.5.13
+
   '@vue/runtime-core@3.5.12':
     dependencies:
       '@vue/reactivity': 3.5.12
       '@vue/shared': 3.5.12
 
+  '@vue/runtime-core@3.5.13':
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/shared': 3.5.13
+
   '@vue/runtime-dom@3.5.12':
     dependencies:
       '@vue/reactivity': 3.5.12
@@ -6857,14 +7151,29 @@ snapshots:
       '@vue/shared': 3.5.12
       csstype: 3.1.3
 
+  '@vue/runtime-dom@3.5.13':
+    dependencies:
+      '@vue/reactivity': 3.5.13
+      '@vue/runtime-core': 3.5.13
+      '@vue/shared': 3.5.13
+      csstype: 3.1.3
+
   '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@vue/compiler-ssr': 3.5.12
       '@vue/shared': 3.5.12
       vue: 3.5.12(typescript@5.6.2)
 
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.6.2))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      vue: 3.5.13(typescript@5.6.2)
+
   '@vue/shared@3.5.12': {}
 
+  '@vue/shared@3.5.13': {}
+
   '@vue/shared@3.5.8': {}
 
   '@vue/test-utils@2.4.6':
@@ -6882,14 +7191,13 @@ snapshots:
       vue: 3.5.12(typescript@5.6.2)
       vue-demi: 0.13.11(vue@3.5.12(typescript@5.6.2))
 
-  '@vueuse/components@11.1.0(vue@3.5.12(typescript@5.6.2))':
+  '@vueuse/components@12.0.0(typescript@5.6.2)':
     dependencies:
-      '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.2))
-      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/core': 12.0.0(typescript@5.6.2)
+      '@vueuse/shared': 12.0.0(typescript@5.6.2)
+      vue: 3.5.13(typescript@5.6.2)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      - typescript
 
   '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.2))':
     dependencies:
@@ -6901,19 +7209,18 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@11.1.0(vue@3.5.12(typescript@5.6.2))':
+  '@vueuse/core@12.0.0(typescript@5.6.2)':
     dependencies:
       '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 11.1.0
-      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/metadata': 12.0.0
+      '@vueuse/shared': 12.0.0(typescript@5.6.2)
+      vue: 3.5.13(typescript@5.6.2)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      - typescript
 
   '@vueuse/metadata@10.11.1': {}
 
-  '@vueuse/metadata@11.1.0': {}
+  '@vueuse/metadata@12.0.0': {}
 
   '@vueuse/shared@10.11.1(vue@3.5.12(typescript@5.6.2))':
     dependencies:
@@ -6922,12 +7229,11 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@11.1.0(vue@3.5.12(typescript@5.6.2))':
+  '@vueuse/shared@12.0.0(typescript@5.6.2)':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+      vue: 3.5.13(typescript@5.6.2)
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
+      - typescript
 
   '@xmldom/xmldom@0.7.13': {}
 
@@ -7031,7 +7337,7 @@ snapshots:
 
   aria-hidden@1.2.4:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   array-buffer-byte-length@1.0.0:
     dependencies:
@@ -7199,7 +7505,7 @@ snapshots:
   camel-case@4.1.2:
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   camelcase-css@2.0.1: {}
 
@@ -7217,7 +7523,7 @@ snapshots:
   capital-case@1.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
       upper-case-first: 2.0.2
 
   chai@5.1.1:
@@ -7374,7 +7680,7 @@ snapshots:
   constant-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
       upper-case: 2.0.2
 
   core-js@3.38.1: {}
@@ -7568,10 +7874,12 @@ snapshots:
   dot-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   dset@3.1.4: {}
 
+  earcut@3.0.0: {}
+
   eastasianwidth@0.2.0: {}
 
   editorconfig@1.0.4:
@@ -8040,6 +8348,8 @@ snapshots:
       locate-path: 7.2.0
       path-exists: 5.0.0
 
+  flag-icons@7.2.3: {}
+
   flat-cache@3.1.0:
     dependencies:
       flatted: 3.2.9
@@ -8097,6 +8407,8 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  geojson-vt@4.0.2: {}
+
   get-caller-file@2.0.5: {}
 
   get-east-asian-width@1.2.0: {}
@@ -8126,6 +8438,8 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
 
+  gl-matrix@3.4.3: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -8156,6 +8470,12 @@ snapshots:
     dependencies:
       ini: 4.1.1
 
+  global-prefix@4.0.0:
+    dependencies:
+      ini: 4.1.3
+      kind-of: 6.0.3
+      which: 4.0.0
+
   global@4.4.0:
     dependencies:
       min-document: 2.19.0
@@ -8239,7 +8559,7 @@ snapshots:
   header-case@2.0.4:
     dependencies:
       capital-case: 1.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   highlight.js@11.10.0: {}
 
@@ -8351,6 +8671,8 @@ snapshots:
 
   idb@8.0.0: {}
 
+  ieee754@1.2.1: {}
+
   ignore@5.2.4: {}
 
   immutable@4.3.7:
@@ -8376,6 +8698,8 @@ snapshots:
 
   ini@4.1.1: {}
 
+  ini@4.1.3: {}
+
   internal-slot@1.0.5:
     dependencies:
       get-intrinsic: 1.2.4
@@ -8508,6 +8832,8 @@ snapshots:
 
   isexe@2.0.0: {}
 
+  isexe@3.1.1: {}
+
   istanbul-lib-coverage@3.2.2: {}
 
   istanbul-lib-report@3.0.1:
@@ -8629,6 +8955,8 @@ snapshots:
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json-stringify-pretty-compact@4.0.0: {}
+
   json5@1.0.2:
     dependencies:
       minimist: 1.2.8
@@ -8639,6 +8967,8 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  kdbush@4.0.2: {}
+
   keycode@2.2.1: {}
 
   keyv@4.5.3:
@@ -8766,7 +9096,7 @@ snapshots:
 
   lower-case@2.0.2:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   lru-cache@10.4.3: {}
 
@@ -8794,6 +9124,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.14:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   magicast@0.3.4:
     dependencies:
       '@babel/parser': 7.25.6
@@ -8804,8 +9138,39 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
+  map-obj@4.3.0: {}
+
   map-obj@5.0.0: {}
 
+  maplibre-gl@4.7.1:
+    dependencies:
+      '@mapbox/geojson-rewind': 0.5.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/tiny-sdf': 2.0.6
+      '@mapbox/unitbezier': 0.0.1
+      '@mapbox/vector-tile': 1.3.1
+      '@mapbox/whoots-js': 3.1.0
+      '@maplibre/maplibre-gl-style-spec': 20.4.0
+      '@types/geojson': 7946.0.14
+      '@types/geojson-vt': 3.2.5
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/mapbox__vector-tile': 1.3.4
+      '@types/pbf': 3.0.5
+      '@types/supercluster': 7.1.3
+      earcut: 3.0.0
+      geojson-vt: 4.0.2
+      gl-matrix: 3.4.3
+      global-prefix: 4.0.0
+      kdbush: 4.0.2
+      murmurhash-js: 1.0.0
+      pbf: 3.3.0
+      potpack: 2.0.0
+      quickselect: 3.0.0
+      supercluster: 8.0.1
+      tinyqueue: 3.0.0
+      vt-pbf: 3.1.3
+
   markdown-it-anchor@8.6.7(@types/markdown-it@12.2.3)(markdown-it@12.3.2):
     dependencies:
       '@types/markdown-it': 12.2.3
@@ -8932,6 +9297,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  murmurhash-js@1.0.0: {}
+
   mux.js@6.0.1:
     dependencies:
       '@babel/runtime': 7.25.6
@@ -8943,7 +9310,7 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  nanoid@3.3.7: {}
+  nanoid@3.3.8: {}
 
   nanoid@5.0.8: {}
 
@@ -8960,7 +9327,7 @@ snapshots:
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   node-fetch@2.6.11:
     dependencies:
@@ -9107,7 +9474,7 @@ snapshots:
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   parent-module@1.0.1:
     dependencies:
@@ -9122,12 +9489,12 @@ snapshots:
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   path-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   path-exists@4.0.0: {}
 
@@ -9152,10 +9519,17 @@ snapshots:
 
   pathval@2.0.0: {}
 
+  pbf@3.3.0:
+    dependencies:
+      ieee754: 1.2.1
+      resolve-protobuf-schema: 2.1.0
+
   picocolors@1.0.1: {}
 
   picocolors@1.1.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   pidtree@0.6.0: {}
@@ -9430,10 +9804,18 @@ snapshots:
 
   postcss@8.4.47:
     dependencies:
-      nanoid: 3.3.7
+      nanoid: 3.3.8
       picocolors: 1.1.0
       source-map-js: 1.2.1
 
+  postcss@8.4.49:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  potpack@2.0.0: {}
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.0:
@@ -9539,6 +9921,8 @@ snapshots:
 
   proto-list@1.2.4: {}
 
+  protocol-buffers-schema@3.6.0: {}
+
   proxy-from-env@1.1.0: {}
 
   psl@1.9.0: {}
@@ -9553,6 +9937,10 @@ snapshots:
 
   quick-lru@6.1.2: {}
 
+  quickselect@2.0.0: {}
+
+  quickselect@3.0.0: {}
+
   radix-vue@1.9.9(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@floating-ui/dom': 1.6.12
@@ -9608,6 +9996,10 @@ snapshots:
 
   resolve-from@4.0.0: {}
 
+  resolve-protobuf-schema@2.1.0:
+    dependencies:
+      protocol-buffers-schema: 3.6.0
+
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.15.1
@@ -9668,6 +10060,8 @@ snapshots:
     dependencies:
       individual: 2.0.0
 
+  rw@1.3.3: {}
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
@@ -9738,7 +10132,7 @@ snapshots:
   sentence-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
       upper-case-first: 2.0.2
 
   set-function-length@1.2.2:
@@ -9813,7 +10207,13 @@ snapshots:
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.7.0
+      tslib: 2.8.1
+
+  snakecase-keys@8.0.1:
+    dependencies:
+      map-obj: 4.3.0
+      snake-case: 3.0.4
+      type-fest: 4.26.1
 
   sortablejs@1.14.0: {}
 
@@ -9929,6 +10329,10 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
+  supercluster@8.0.1:
+    dependencies:
+      kdbush: 4.0.2
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -10029,6 +10433,8 @@ snapshots:
 
   tinypool@1.0.0: {}
 
+  tinyqueue@3.0.0: {}
+
   tinyspy@3.0.2: {}
 
   to-fast-properties@2.0.0: {}
@@ -10186,11 +10592,11 @@ snapshots:
 
   upper-case-first@2.0.2:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   upper-case@2.0.2:
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.8.1
 
   uri-js@4.4.1:
     dependencies:
@@ -10313,6 +10719,12 @@ snapshots:
       - supports-color
       - terser
 
+  vt-pbf@3.1.3:
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/vector-tile': 1.3.1
+      pbf: 3.3.0
+
   vue-chartjs@5.3.1(chart.js@4.4.4)(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       chart.js: 4.4.4
@@ -10351,11 +10763,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.14.0(vue@3.5.12(typescript@5.6.2)):
+  vue-i18n@9.14.2(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      '@intlify/core-base': 9.14.0
-      '@intlify/shared': 9.14.0
-      '@vue/devtools-api': 6.6.3
+      '@intlify/core-base': 9.14.2
+      '@intlify/shared': 9.14.2
+      '@vue/devtools-api': 6.6.4
       vue: 3.5.12(typescript@5.6.2)
 
   vue-letter@0.2.0:
@@ -10400,6 +10812,16 @@ snapshots:
     optionalDependencies:
       typescript: 5.6.2
 
+  vue@3.5.13(typescript@5.6.2):
+    dependencies:
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-sfc': 3.5.13
+      '@vue/runtime-dom': 3.5.13
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.6.2))
+      '@vue/shared': 3.5.13
+    optionalDependencies:
+      typescript: 5.6.2
+
   vuedraggable@4.1.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       sortablejs: 1.14.0
@@ -10490,6 +10912,10 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.1
+
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
diff --git a/public/audio/dashboard/chime.mp3 b/public/audio/dashboard/chime.mp3
new file mode 100644
index 000000000..e48530e1f
Binary files /dev/null and b/public/audio/dashboard/chime.mp3 differ
diff --git a/public/audio/dashboard/magic.mp3 b/public/audio/dashboard/magic.mp3
new file mode 100644
index 000000000..ee8d03dc1
Binary files /dev/null and b/public/audio/dashboard/magic.mp3 differ
diff --git a/public/audio/dashboard/ping.mp3 b/public/audio/dashboard/ping.mp3
new file mode 100644
index 000000000..d5304e2f9
Binary files /dev/null and b/public/audio/dashboard/ping.mp3 differ
diff --git a/spec/builders/conversation_builder_spec.rb b/spec/builders/conversation_builder_spec.rb
index 956aec966..c0c5f248b 100644
--- a/spec/builders/conversation_builder_spec.rb
+++ b/spec/builders/conversation_builder_spec.rb
@@ -3,39 +3,77 @@ require 'rails_helper'
 describe ConversationBuilder do
   let(:account) { create(:account) }
   let!(:sms_channel) { create(:channel_sms, account: account) }
+  let!(:api_channel) { create(:channel_api, account: account) }
   let!(:sms_inbox) { create(:inbox, channel: sms_channel, account: account) }
+  let!(:api_inbox) { create(:inbox, channel: api_channel, account: account) }
   let(:contact) { create(:contact, account: account) }
-  let(:contact_inbox) { create(:contact_inbox, contact: contact, inbox: sms_inbox) }
+  let(:contact_sms_inbox) { create(:contact_inbox, contact: contact, inbox: sms_inbox) }
+  let(:contact_api_inbox) { create(:contact_inbox, contact: contact, inbox: api_inbox) }
 
   describe '#perform' do
-    it 'creates conversation' do
+    it 'creates sms conversation' do
       conversation = described_class.new(
-        contact_inbox: contact_inbox,
+        contact_inbox: contact_sms_inbox,
         params: {}
       ).perform
 
-      expect(conversation.contact_inbox_id).to eq(contact_inbox.id)
+      expect(conversation.contact_inbox_id).to eq(contact_sms_inbox.id)
     end
 
-    context 'when lock_to_single_conversation is true for inbox' do
+    it 'creates api conversation' do
+      conversation = described_class.new(
+        contact_inbox: contact_api_inbox,
+        params: {}
+      ).perform
+
+      expect(conversation.contact_inbox_id).to eq(contact_api_inbox.id)
+    end
+
+    context 'when lock_to_single_conversation is true for sms inbox' do
       before do
         sms_inbox.update!(lock_to_single_conversation: true)
       end
 
-      it 'creates conversation when existing conversation is not present' do
+      it 'creates sms conversation when existing conversation is not present' do
         conversation = described_class.new(
-          contact_inbox: contact_inbox,
+          contact_inbox: contact_sms_inbox,
           params: {}
         ).perform
 
-        expect(conversation.contact_inbox_id).to eq(contact_inbox.id)
+        expect(conversation.contact_inbox_id).to eq(contact_sms_inbox.id)
       end
 
-      it 'returns last from existing conversations when existing conversation is not present' do
-        create(:conversation, contact_inbox: contact_inbox)
-        existing_conversation = create(:conversation, contact_inbox: contact_inbox)
+      it 'returns last from existing sms conversations when existing conversation is not present' do
+        create(:conversation, contact_inbox: contact_sms_inbox)
+        existing_conversation = create(:conversation, contact_inbox: contact_sms_inbox)
         conversation = described_class.new(
-          contact_inbox: contact_inbox,
+          contact_inbox: contact_sms_inbox,
+          params: {}
+        ).perform
+
+        expect(conversation.id).to eq(existing_conversation.id)
+      end
+    end
+
+    context 'when lock_to_single_conversation is true for api inbox' do
+      before do
+        api_inbox.update!(lock_to_single_conversation: true)
+      end
+
+      it 'creates conversation when existing api conversation is not present' do
+        conversation = described_class.new(
+          contact_inbox: contact_api_inbox,
+          params: {}
+        ).perform
+
+        expect(conversation.contact_inbox_id).to eq(contact_api_inbox.id)
+      end
+
+      it 'returns last from existing api conversations when existing conversation is not present' do
+        create(:conversation, contact_inbox: contact_api_inbox)
+        existing_conversation = create(:conversation, contact_inbox: contact_api_inbox)
+        conversation = described_class.new(
+          contact_inbox: contact_api_inbox,
           params: {}
         ).perform
 
diff --git a/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
index 3dfb49294..078736e06 100644
--- a/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
@@ -2,13 +2,15 @@ require 'rails_helper'
 
 RSpec.describe 'Captain Integrations API', type: :request do
   let!(:account) { create(:account) }
+  let(:conversation) { create(:conversation, account: account) }
   let!(:agent) { create(:user, account: account, role: :agent) }
   let!(:hook) do
     create(:integrations_hook, account: account, app_id: 'captain', settings: {
              access_token: SecureRandom.hex,
              account_email: Faker::Internet.email,
              assistant_id: '1',
-             account_id: '1'
+             account_id: '1',
+             inbox_ids: []
            })
   end
   let(:captain_api_url) { 'https://captain.example.com/' }
@@ -77,4 +79,45 @@ RSpec.describe 'Captain Integrations API', type: :request do
       end
     end
   end
+
+  describe 'POST /api/v1/accounts/{account.id}/integrations/captain/copilot' do
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        post copilot_api_v1_account_integrations_captain_url(account_id: account.id),
+             params: { method: 'get', route: 'some_route' },
+             as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      context 'when valid request method and route' do
+        let(:route) { 'assistants/1/copilot' }
+        let(:method) { 'get' }
+
+        it 'proxies the request to Copilot API' do
+          stub_request(:post, "#{captain_api_url}api/accounts/#{hook.settings['account_id']}/#{route}")
+            .with(headers: {
+                    'X-User-Email' => hook.settings['account_email'],
+                    'X-User-Token' => hook.settings['access_token'],
+                    'Content-Type' => 'application/json'
+                  })
+            .to_return(status: 200, body: 'Success', headers: {})
+
+          post copilot_api_v1_account_integrations_captain_url(account_id: account.id),
+               params: {
+                 message: 'hello',
+                 previous_messages: [],
+                 conversation_id: conversation.display_id
+               },
+               headers: agent.create_new_auth_token,
+               as: :json
+
+          expect(response).to have_http_status(:success)
+          expect(response.body).to eq('Success')
+        end
+      end
+    end
+  end
 end
diff --git a/spec/controllers/api/v1/profiles_controller_spec.rb b/spec/controllers/api/v1/profiles_controller_spec.rb
index 28b4c5ed5..50404ad55 100644
--- a/spec/controllers/api/v1/profiles_controller_spec.rb
+++ b/spec/controllers/api/v1/profiles_controller_spec.rb
@@ -180,6 +180,8 @@ RSpec.describe 'Profile API', type: :request do
                as: :json
 
         expect(response).to have_http_status(:success)
+        json_response = response.parsed_body
+        expect(json_response['avatar_url']).to be_empty
       end
     end
   end
diff --git a/spec/jobs/internal/process_stale_redis_keys_job_spec.rb b/spec/jobs/internal/process_stale_redis_keys_job_spec.rb
new file mode 100644
index 000000000..6189b1b5c
--- /dev/null
+++ b/spec/jobs/internal/process_stale_redis_keys_job_spec.rb
@@ -0,0 +1,15 @@
+require 'rails_helper'
+
+RSpec.describe Internal::ProcessStaleRedisKeysJob do
+  let(:account) { create(:account) }
+
+  describe '#perform' do
+    it 'calls the RemoveStaleRedisKeysService with the correct account ID' do
+      expect(Internal::RemoveStaleRedisKeysService).to receive(:new)
+        .with(account_id: account.id)
+        .and_call_original
+
+      described_class.perform_now(account)
+    end
+  end
+end
diff --git a/spec/jobs/internal/remove_stale_redis_keys_job_spec.rb b/spec/jobs/internal/remove_stale_redis_keys_job_spec.rb
new file mode 100644
index 000000000..a1b98c9db
--- /dev/null
+++ b/spec/jobs/internal/remove_stale_redis_keys_job_spec.rb
@@ -0,0 +1,13 @@
+require 'rails_helper'
+
+RSpec.describe Internal::RemoveStaleRedisKeysJob do
+  let(:account) { create(:account) }
+
+  describe '#perform' do
+    it 'enqueues ProcessStaleRedisKeysJob for the account' do
+      expect(Internal::ProcessStaleRedisKeysJob).to receive(:perform_later).with(account)
+
+      described_class.perform_now
+    end
+  end
+end
diff --git a/spec/lib/integrations/slack/send_on_slack_service_spec.rb b/spec/lib/integrations/slack/send_on_slack_service_spec.rb
index 3474cbfcd..6524154b4 100644
--- a/spec/lib/integrations/slack/send_on_slack_service_spec.rb
+++ b/spec/lib/integrations/slack/send_on_slack_service_spec.rb
@@ -180,6 +180,28 @@ describe Integrations::Slack::SendOnSlackService do
         expect(message.attachments).to be_any
       end
 
+      it 'will not call file_upload if attachment does not have a file (e.g facebook - fallback type)' do
+        expect(slack_client).to receive(:chat_postMessage).with(
+          channel: hook.reference_id,
+          text: message.content,
+          username: "#{message.sender.name} (Contact)",
+          thread_ts: conversation.identifier,
+          icon_url: anything,
+          unfurl_links: true
+        ).and_return(slack_message)
+
+        message.attachments.new(account_id: message.account_id, file_type: :fallback)
+
+        expect(slack_client).not_to receive(:files_upload)
+
+        message.save!
+
+        builder.perform
+
+        expect(message.external_source_id_slack).to eq 'cw-origin-6789.12345'
+        expect(message.attachments).to be_any
+      end
+
       it 'sent a template message on slack' do
         builder = described_class.new(message: template_message, hook: hook)
         allow(builder).to receive(:slack_client).and_return(slack_client)
diff --git a/spec/models/attachment_spec.rb b/spec/models/attachment_spec.rb
index 6b05d26fb..b1d19bd0e 100644
--- a/spec/models/attachment_spec.rb
+++ b/spec/models/attachment_spec.rb
@@ -1,8 +1,9 @@
 require 'rails_helper'
 
 RSpec.describe Attachment do
+  let!(:message) { create(:message) }
+
   describe 'external url validations' do
-    let(:message) { create(:message) }
     let(:attachment) { message.attachments.new(account_id: message.account_id, file_type: :image) }
 
     before do
@@ -25,13 +26,25 @@ RSpec.describe Attachment do
 
   describe 'download_url' do
     it 'returns valid download url' do
-      message = create(:message)
       attachment = message.attachments.new(account_id: message.account_id, file_type: :image)
       attachment.file.attach(io: Rails.root.join('spec/assets/avatar.png').open, filename: 'avatar.png', content_type: 'image/png')
       expect(attachment.download_url).not_to be_nil
     end
   end
 
+  describe 'with_attached_file?' do
+    it 'returns true if its an attachment with file' do
+      attachment = message.attachments.new(account_id: message.account_id, file_type: :image)
+      attachment.file.attach(io: Rails.root.join('spec/assets/avatar.png').open, filename: 'avatar.png', content_type: 'image/png')
+      expect(attachment.with_attached_file?).to be true
+    end
+
+    it 'returns false if its an attachment with out a file' do
+      attachment = message.attachments.new(account_id: message.account_id, file_type: :fallback)
+      expect(attachment.with_attached_file?).to be false
+    end
+  end
+
   describe 'push_event_data for instagram story mentions' do
     let(:instagram_message) { create(:message, :instagram_story_mention) }
 
diff --git a/spec/services/internal/remove_stale_redis_keys_service_spec.rb b/spec/services/internal/remove_stale_redis_keys_service_spec.rb
new file mode 100644
index 000000000..75d182aab
--- /dev/null
+++ b/spec/services/internal/remove_stale_redis_keys_service_spec.rb
@@ -0,0 +1,18 @@
+require 'rails_helper'
+
+RSpec.describe Internal::RemoveStaleRedisKeysService, type: :service do
+  let(:account_id) { 1 }
+  let(:service) { described_class.new(account_id: account_id) }
+
+  describe '#perform' do
+    it 'removes stale Redis keys for the specified account' do
+      presence_key = OnlineStatusTracker.presence_key(account_id, 'Contact')
+
+      # Mock Redis calls
+      expect(Redis::Alfred).to receive(:zremrangebyscore)
+        .with(presence_key, '-inf', anything)
+
+      service.perform
+    end
+  end
+end
diff --git a/spec/services/llm_formatter/conversation_llm_formatter_spec.rb b/spec/services/llm_formatter/conversation_llm_formatter_spec.rb
new file mode 100644
index 000000000..3838b8126
--- /dev/null
+++ b/spec/services/llm_formatter/conversation_llm_formatter_spec.rb
@@ -0,0 +1,51 @@
+require 'rails_helper'
+
+RSpec.describe LlmFormatter::ConversationLlmFormatter do
+  let(:account) { create(:account) }
+  let(:conversation) { create(:conversation, account: account) }
+  let(:formatter) { described_class.new(conversation) }
+
+  describe '#format' do
+    context 'when conversation has no messages' do
+      it 'returns basic conversation info with no messages' do
+        expected_output = [
+          "Conversation ID: ##{conversation.display_id}",
+          "Channel: #{conversation.inbox.channel.name}",
+          'Message History:',
+          'No messages in this conversation'
+        ].join("\n")
+
+        expect(formatter.format).to eq(expected_output)
+      end
+    end
+
+    context 'when conversation has messages' do
+      it 'formats messages in chronological order with sender labels' do
+        create(
+          :message,
+          conversation: conversation,
+          message_type: 'incoming',
+          content: 'Hello, I need help'
+        )
+
+        create(
+          :message,
+          conversation: conversation,
+          message_type: 'outgoing',
+          content: 'How can I assist you today?'
+        )
+
+        expected_output = [
+          "Conversation ID: ##{conversation.display_id}",
+          "Channel: #{conversation.inbox.channel.name}",
+          'Message History:',
+          'User: Hello, I need help',
+          'Support agent: How can I assist you today?',
+          ''
+        ].join("\n")
+
+        expect(formatter.format).to eq(expected_output)
+      end
+    end
+  end
+end
diff --git a/tailwind.config.js b/tailwind.config.js
index 578b963d6..93c164cac 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 const { slateDark } = require('@radix-ui/colors');
 import { colors } from './theme/colors';
+import { icons } from './theme/icons';
 const defaultTheme = require('tailwindcss/defaultTheme');
 const {
   iconsPlugin,
@@ -28,7 +29,9 @@ const tailwindConfig = {
     './app/javascript/portal/**/*.vue',
     './app/javascript/shared/**/*.vue',
     './app/javascript/survey/**/*.vue',
+    './app/javascript/dashboard/components-next/**/*.vue',
     './app/javascript/dashboard/helper/**/*.js',
+    './app/javascript/dashboard/components-next/**/*.js',
     './app/views/**/*.html.erb',
   ],
   theme: {
@@ -38,6 +41,112 @@ const tailwindConfig = {
         inter: ['Inter', ...defaultSansFonts],
         interDisplay: ['Inter Display', ...defaultSansFonts],
       },
+      typography: {
+        email: {
+          css: {
+            color: 'rgb(var(--slate-11))',
+            lineHeight: '1.6',
+            fontSize: '14px',
+            '*': {
+              '&:first-child': {
+                marginTop: '0',
+              },
+            },
+
+            strong: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+            },
+
+            b: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+            },
+
+            h1: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+              fontSize: '1.25rem',
+              '&:first-child': {
+                marginTop: '0',
+              },
+            },
+            h2: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+              fontSize: '1rem',
+              '&:first-child': {
+                marginTop: '0',
+              },
+            },
+            h3: {
+              color: 'rgb(var(--slate-12))',
+              fontWeight: '700',
+              fontSize: '1rem',
+              '&:first-child': {
+                marginTop: '0',
+              },
+            },
+            hr: {
+              marginTop: '1.5em',
+              marginBottom: '1.5em',
+            },
+            a: {
+              color: 'rgb(var(--text-blue))',
+              textDecoration: 'underline',
+            },
+            'ul li': {
+              margin: '0 0 0.5em 1.5em',
+              listStyleType: 'disc',
+            },
+            'ol li': {
+              margin: '0 0 0.5em 1.5em',
+              listStyleType: 'decimal',
+            },
+            blockquote: {
+              fontStyle: 'italic',
+              color: 'rgb(var(--slate-11))',
+              borderLeft: `4px solid rgb(var(--border-strong))`,
+              paddingLeft: '1em',
+            },
+            code: {
+              backgroundColor: 'rgb(var(--alpha-3))',
+              color: 'rgb(var(--solid-amber))',
+              padding: '0.2em 0.4em',
+              borderRadius: '4px',
+              fontSize: '0.95em',
+            },
+            pre: {
+              backgroundColor: 'rgb(var(--alpha-3))',
+              padding: '1em',
+              borderRadius: '6px',
+              overflowX: 'auto',
+            },
+            table: {
+              width: '100%',
+              borderCollapse: 'collapse',
+            },
+            th: {
+              padding: '0.75em',
+              color: 'rgb(var(--slate-12))',
+              borderBottom: `1px solid rgb(var(--border-strong))`,
+              textAlign: 'left',
+              fontWeight: '600',
+            },
+            tr: {
+              borderBottom: `1px solid rgb(var(--border-strong))`,
+            },
+            td: {
+              padding: '0.75em',
+              borderBottom: `1px solid rgb(var(--border-strong))`,
+            },
+            img: {
+              maxWidth: '100%',
+              height: 'auto',
+            },
+          },
+        },
+      },
     },
     screens: {
       xs: '480px',
@@ -110,23 +219,8 @@ const tailwindConfig = {
     require('@tailwindcss/typography'),
     iconsPlugin({
       collections: {
-        woot: {
-          icons: {
-            alert: {
-              body: `<path d="M1.81348 0.9375L1.69727 7.95117H0.302734L0.179688 0.9375H1.81348ZM1 11.1025C0.494141 11.1025 0.0908203 10.7061 0.0976562 10.2207C0.0908203 9.72852 0.494141 9.33203 1 9.33203C1.49219 9.33203 1.89551 9.72852 1.90234 10.2207C1.89551 10.7061 1.49219 11.1025 1 11.1025Z" fill="currentColor" />`,
-              width: 2,
-              height: 12,
-            },
-            captain: {
-              body: `<path d="M150.485 213.282C150.485 200.856 160.559 190.782 172.985 190.782C185.411 190.782 195.485 200.856 195.485 213.282V265.282C195.485 277.709 185.411 287.782 172.985 287.782C160.559 287.782 150.485 277.709 150.485 265.282V213.282Z" fill="currentColor"/>
-              <path d="M222.485 213.282C222.485 200.856 232.559 190.782 244.985 190.782C257.411 190.782 267.485 200.856 267.485 213.282V265.282C267.485 277.709 257.411 287.782 244.985 287.782C232.559 287.782 222.485 277.709 222.485 265.282V213.282Z" fill="currentColor"/>
-              <path fill-rule="evenodd" clip-rule="evenodd" d="M412.222 109.961C317.808 96.6217 240.845 96.0953 144.309 109.902C119.908 113.392 103.762 115.751 91.4521 119.354C80.0374 122.694 73.5457 126.678 68.1762 132.687C57.0576 145.13 55.592 159.204 54.0765 208.287C52.587 256.526 55.5372 299.759 61.1249 348.403C64.1025 374.324 66.1515 391.817 69.4229 405.117C72.526 417.732 76.2792 424.515 81.4954 429.708C86.7533 434.942 93.4917 438.633 105.859 441.629C118.94 444.797 136.104 446.713 161.613 449.5C244.114 458.514 305.869 458.469 388.677 449.548C414.495 446.767 431.939 444.849 445.216 441.702C457.83 438.712 464.612 435.047 469.797 429.962C474.873 424.985 478.752 418.118 482.116 404.874C485.626 391.056 488.014 372.772 491.47 345.913C497.636 297.99 502.076 255.903 502.248 209.798C502.433 160.503 501.426 146.477 490.181 133.468C484.75 127.185 478.148 123.053 466.473 119.612C453.865 115.897 437.283 113.502 412.222 109.961ZM138.414 68.5711C238.977 54.1882 319.888 54.7514 418.047 68.6199L419.483 68.8227C442.724 72.1054 462.359 74.8786 478.244 79.5601C495.387 84.6124 509.724 92.2821 521.706 106.145C544.308 132.295 544.161 163.321 543.965 204.542C543.956 206.327 543.948 208.131 543.941 209.954C543.758 258.703 539.048 302.844 532.821 351.247L532.656 352.528C529.407 377.787 526.729 398.602 522.522 415.166C518.098 432.584 511.485 447.517 498.968 459.792C486.56 471.959 471.897 478.282 454.819 482.33C438.691 486.153 418.624 488.314 394.436 490.919L393.136 491.059C307.385 500.297 242.618 500.349 157.091 491.004L155.772 490.86C131.921 488.255 112.062 486.086 96.056 482.209C79.0408 478.087 64.4759 471.637 52.1005 459.316C39.6835 446.955 33.1618 432.265 28.94 415.102C24.9582 398.915 22.6435 378.759 19.8561 354.488L19.7052 353.174C13.9746 303.287 10.8315 257.908 12.4035 206.997C12.4606 205.15 12.5151 203.323 12.5691 201.516C13.7911 160.603 14.7077 129.914 37.1055 104.847C48.989 91.5477 63.035 84.1731 79.7563 79.2794C95.2643 74.7408 114.386 72.0068 137.018 68.7707C137.482 68.7044 137.948 68.6379 138.414 68.5711Z" fill="currentColor"/>`,
-              width: 556,
-              height: 556,
-            },
-          },
-        },
-        ...getIconCollections(['lucide', 'logos', 'ri']),
+        woot: { icons },
+        ...getIconCollections(['lucide', 'logos', 'ri', 'ph', 'teenyicons']),
       },
     }),
   ],
diff --git a/theme/colors.js b/theme/colors.js
index 150106c65..1bf16f6a8 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -300,6 +300,21 @@ export const colors = {
       12: 'rgb(var(--slate-12) / <alpha-value>)',
     },
 
+    iris: {
+      1: 'rgb(var(--iris-1) / <alpha-value>)',
+      2: 'rgb(var(--iris-2) / <alpha-value>)',
+      3: 'rgb(var(--iris-3) / <alpha-value>)',
+      4: 'rgb(var(--iris-4) / <alpha-value>)',
+      5: 'rgb(var(--iris-5) / <alpha-value>)',
+      6: 'rgb(var(--iris-6) / <alpha-value>)',
+      7: 'rgb(var(--iris-7) / <alpha-value>)',
+      8: 'rgb(var(--iris-8) / <alpha-value>)',
+      9: 'rgb(var(--iris-9) / <alpha-value>)',
+      10: 'rgb(var(--iris-10) / <alpha-value>)',
+      11: 'rgb(var(--iris-11) / <alpha-value>)',
+      12: 'rgb(var(--iris-12) / <alpha-value>)',
+    },
+
     ruby: {
       1: 'rgb(var(--ruby-1) / <alpha-value>)',
       2: 'rgb(var(--ruby-2) / <alpha-value>)',
@@ -355,6 +370,7 @@ export const colors = {
       active: 'rgb(var(--solid-active) / <alpha-value>)',
       amber: 'rgb(var(--solid-amber) / <alpha-value>)',
       blue: 'rgb(var(--solid-blue) / <alpha-value>)',
+      iris: 'rgb(var(--solid-iris) / <alpha-value>)',
     },
     alpha: {
       1: 'rgba(var(--alpha-1))',
diff --git a/theme/icons.js b/theme/icons.js
new file mode 100644
index 000000000..265c859b4
--- /dev/null
+++ b/theme/icons.js
@@ -0,0 +1,116 @@
+export const icons = {
+  'logic-or': {
+    body: `<rect x="14" y="5" width="2" height="13" rx="1" fill="currentColor"/><rect x="8" y="5" width="2" height="13" rx="1" fill="currentColor"/>`,
+    width: 24,
+    height: 24,
+  },
+  alert: {
+    body: `<path d="M1.81348 0.9375L1.69727 7.95117H0.302734L0.179688 0.9375H1.81348ZM1 11.1025C0.494141 11.1025 0.0908203 10.7061 0.0976562 10.2207C0.0908203 9.72852 0.494141 9.33203 1 9.33203C1.49219 9.33203 1.89551 9.72852 1.90234 10.2207C1.89551 10.7061 1.49219 11.1025 1 11.1025Z" fill="currentColor" />`,
+    width: 2,
+    height: 12,
+  },
+  captain: {
+    body: `<path d="M150.485 213.282C150.485 200.856 160.559 190.782 172.985 190.782C185.411 190.782 195.485 200.856 195.485 213.282V265.282C195.485 277.709 185.411 287.782 172.985 287.782C160.559 287.782 150.485 277.709 150.485 265.282V213.282Z" fill="currentColor"/>
+    <path d="M222.485 213.282C222.485 200.856 232.559 190.782 244.985 190.782C257.411 190.782 267.485 200.856 267.485 213.282V265.282C267.485 277.709 257.411 287.782 244.985 287.782C232.559 287.782 222.485 277.709 222.485 265.282V213.282Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M412.222 109.961C317.808 96.6217 240.845 96.0953 144.309 109.902C119.908 113.392 103.762 115.751 91.4521 119.354C80.0374 122.694 73.5457 126.678 68.1762 132.687C57.0576 145.13 55.592 159.204 54.0765 208.287C52.587 256.526 55.5372 299.759 61.1249 348.403C64.1025 374.324 66.1515 391.817 69.4229 405.117C72.526 417.732 76.2792 424.515 81.4954 429.708C86.7533 434.942 93.4917 438.633 105.859 441.629C118.94 444.797 136.104 446.713 161.613 449.5C244.114 458.514 305.869 458.469 388.677 449.548C414.495 446.767 431.939 444.849 445.216 441.702C457.83 438.712 464.612 435.047 469.797 429.962C474.873 424.985 478.752 418.118 482.116 404.874C485.626 391.056 488.014 372.772 491.47 345.913C497.636 297.99 502.076 255.903 502.248 209.798C502.433 160.503 501.426 146.477 490.181 133.468C484.75 127.185 478.148 123.053 466.473 119.612C453.865 115.897 437.283 113.502 412.222 109.961ZM138.414 68.5711C238.977 54.1882 319.888 54.7514 418.047 68.6199L419.483 68.8227C442.724 72.1054 462.359 74.8786 478.244 79.5601C495.387 84.6124 509.724 92.2821 521.706 106.145C544.308 132.295 544.161 163.321 543.965 204.542C543.956 206.327 543.948 208.131 543.941 209.954C543.758 258.703 539.048 302.844 532.821 351.247L532.656 352.528C529.407 377.787 526.729 398.602 522.522 415.166C518.098 432.584 511.485 447.517 498.968 459.792C486.56 471.959 471.897 478.282 454.819 482.33C438.691 486.153 418.624 488.314 394.436 490.919L393.136 491.059C307.385 500.297 242.618 500.349 157.091 491.004L155.772 490.86C131.921 488.255 112.062 486.086 96.056 482.209C79.0408 478.087 64.4759 471.637 52.1005 459.316C39.6835 446.955 33.1618 432.265 28.94 415.102C24.9582 398.915 22.6435 378.759 19.8561 354.488L19.7052 353.174C13.9746 303.287 10.8315 257.908 12.4035 206.997C12.4606 205.15 12.5151 203.323 12.5691 201.516C13.7911 160.603 14.7077 129.914 37.1055 104.847C48.989 91.5477 63.035 84.1731 79.7563 79.2794C95.2643 74.7408 114.386 72.0068 137.018 68.7707C137.482 68.7044 137.948 68.6379 138.414 68.5711Z" fill="currentColor"/>`,
+    width: 556,
+    height: 556,
+  },
+  'file-csv': {
+    body: `<g clip-path="url(#clip0_2931_148091)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM3.46583 15.9741C3.66935 16.0317 3.86903 16.0605 4.06487 16.0605C4.23383 16.0605 4.39607 16.0374 4.55159 15.9914C4.70903 15.9434 4.84919 15.8771 4.97206 15.7926C5.09495 15.7082 5.19191 15.6102 5.26295 15.4989C5.33591 15.3875 5.37239 15.2675 5.37239 15.1389C5.37239 15.0198 5.33207 14.9238 5.25143 14.8509C5.17271 14.776 5.07863 14.7386 4.96919 14.7386C4.83671 14.7386 4.74359 14.7683 4.68983 14.8278C4.63799 14.8854 4.59575 14.9507 4.56311 15.0237C4.54007 15.0813 4.50935 15.1389 4.47095 15.1965C4.43447 15.2522 4.38359 15.2982 4.31831 15.3347C4.25495 15.3712 4.17046 15.3894 4.06487 15.3894C3.93431 15.3894 3.80951 15.352 3.69047 15.2771C3.57335 15.2022 3.47831 15.0803 3.40535 14.9114C3.33239 14.7405 3.29591 14.5139 3.29591 14.2317C3.29591 13.9475 3.33239 13.721 3.40535 13.552C3.47831 13.383 3.57335 13.2611 3.69047 13.1862C3.80951 13.1094 3.93431 13.071 4.06487 13.071C4.17046 13.071 4.25495 13.0893 4.31831 13.1258C4.38359 13.1622 4.43447 13.2093 4.47095 13.2669C4.50935 13.3226 4.54007 13.3792 4.56311 13.4368C4.59575 13.5098 4.63799 13.576 4.68983 13.6355C4.74359 13.6931 4.83671 13.7219 4.96919 13.7219C5.07863 13.7219 5.17271 13.6854 5.25143 13.6125C5.33207 13.5395 5.37239 13.4426 5.37239 13.3216C5.37239 13.193 5.33687 13.073 5.26583 12.9616C5.19479 12.8502 5.09687 12.7523 4.97206 12.6678C4.84919 12.5834 4.70999 12.5181 4.55447 12.472C4.39895 12.424 4.23575 12.4 4.06487 12.4C3.86903 12.4 3.66935 12.4288 3.46583 12.4864C3.26423 12.544 3.07799 12.6419 2.9071 12.7802C2.73623 12.9165 2.59895 13.1037 2.49527 13.3418C2.39159 13.5779 2.33975 13.8746 2.33975 14.2317C2.33975 14.5869 2.39159 14.8826 2.49527 15.1187C2.59895 15.3549 2.73623 15.5421 2.9071 15.6803C3.07799 15.8186 3.26423 15.9165 3.46583 15.9741ZM6.76232 15.9626C6.97736 16.0278 7.22408 16.0605 7.50248 16.0605C7.80584 16.0605 8.07368 16.0154 8.30599 15.9251C8.53832 15.8349 8.71976 15.7072 8.85032 15.5421C8.98088 15.375 9.04615 15.1792 9.04615 14.9546C9.04615 14.7376 8.99048 14.5581 8.87912 14.416C8.76776 14.2739 8.61416 14.1578 8.41831 14.0675C8.22439 13.9773 8.00072 13.9014 7.74728 13.84C7.49384 13.7766 7.30568 13.7094 7.1828 13.6384C7.06184 13.5674 7.00136 13.4829 7.00136 13.385C7.00136 13.3216 7.02248 13.2669 7.06472 13.2208C7.10696 13.1728 7.16648 13.1363 7.24328 13.1114C7.32008 13.0845 7.4084 13.071 7.50824 13.071C7.64456 13.071 7.75976 13.0922 7.85384 13.1344C7.94792 13.1766 8.02184 13.2294 8.07559 13.2928C8.12551 13.3408 8.18984 13.3926 8.26856 13.4483C8.34728 13.504 8.44136 13.5318 8.5508 13.5318C8.66216 13.5318 8.75144 13.5002 8.81863 13.4368C8.88776 13.3715 8.92232 13.2832 8.92232 13.1718C8.92232 13.0778 8.89832 12.9933 8.85032 12.9184C8.80232 12.8435 8.73896 12.7782 8.66024 12.7226C8.52776 12.617 8.36264 12.5373 8.16488 12.4835C7.96712 12.4278 7.76264 12.4 7.55143 12.4C7.26536 12.4 7.00808 12.4403 6.7796 12.521C6.55304 12.6016 6.37352 12.7168 6.24103 12.8666C6.10856 13.0163 6.04232 13.1939 6.04232 13.3994C6.04232 13.6778 6.14407 13.9168 6.3476 14.1165C6.55304 14.3162 6.88423 14.4678 7.3412 14.5715C7.59272 14.6291 7.77992 14.6877 7.9028 14.7472C8.02567 14.8048 8.08712 14.895 8.08712 15.0179C8.08712 15.0947 8.06215 15.161 8.01224 15.2166C7.96232 15.2723 7.89416 15.3155 7.80775 15.3462C7.72328 15.375 7.62728 15.3894 7.51976 15.3894C7.3604 15.3894 7.22888 15.3587 7.1252 15.2973C7.02152 15.2358 6.93032 15.1648 6.8516 15.0842C6.7844 15.0208 6.7124 14.9651 6.6356 14.9171C6.55879 14.8691 6.46472 14.8451 6.35335 14.8451C6.2228 14.8451 6.1268 14.8854 6.06536 14.9661C6.00392 15.0467 5.9732 15.1293 5.9732 15.2138C5.9732 15.4019 6.06344 15.5632 6.24392 15.6976C6.3764 15.807 6.5492 15.8954 6.76232 15.9626ZM10.6578 15.8877C10.7673 15.9664 10.9122 16.0058 11.0927 16.0058H11.2252C11.4076 16.0058 11.5535 15.9664 11.663 15.8877C11.7724 15.809 11.8511 15.6928 11.8991 15.5392L12.7055 12.9904C12.7132 12.9616 12.718 12.9338 12.7199 12.9069C12.7238 12.88 12.7257 12.8541 12.7257 12.8291C12.7257 12.6966 12.6825 12.593 12.5961 12.5181C12.5116 12.4432 12.4031 12.4058 12.2706 12.4058C12.1132 12.4058 12.0009 12.4461 11.9337 12.5267C11.8684 12.6054 11.8166 12.7245 11.7782 12.8838L11.159 15.2051L10.5455 12.8838C10.5071 12.7245 10.4543 12.6054 10.3871 12.5267C10.3218 12.4461 10.2095 12.4058 10.0502 12.4058C9.92153 12.4058 9.81305 12.4422 9.72472 12.5152C9.6364 12.5882 9.59225 12.6918 9.59225 12.8262C9.59225 12.8493 9.59416 12.8752 9.59801 12.904C9.60184 12.9328 9.6076 12.9616 9.61528 12.9904L10.4188 15.5392C10.4687 15.6928 10.5484 15.809 10.6578 15.8877Z" fill="#FFC53D"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#FFC53D"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148091">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-doc': {
+    body: `<g clip-path="url(#clip0_2931_148089)">
+    <path d="M4.2927 15.238C4.1847 15.28 4.06369 15.301 3.92969 15.301H3.63569V12.985H3.92969C4.06369 12.985 4.1847 13.007 4.2927 13.051C4.4007 13.093 4.4927 13.16 4.5687 13.252C4.6467 13.344 4.7067 13.464 4.7487 13.612C4.7907 13.758 4.8117 13.935 4.8117 14.143C4.8117 14.349 4.7907 14.526 4.7487 14.674C4.7067 14.822 4.6467 14.942 4.5687 15.034C4.4927 15.126 4.4007 15.194 4.2927 15.238Z" fill="#3E63DD"/>
+    <path d="M8.36858 15.229C8.26458 15.319 8.14258 15.364 8.00258 15.364C7.86058 15.364 7.73658 15.319 7.63058 15.229C7.52457 15.137 7.44257 15.001 7.38457 14.821C7.32857 14.641 7.30057 14.419 7.30057 14.155C7.30057 13.893 7.32857 13.673 7.38457 13.495C7.44257 13.315 7.52457 13.179 7.63058 13.087C7.73658 12.995 7.86058 12.949 8.00258 12.949C8.14258 12.949 8.26458 12.995 8.36858 13.087C8.47258 13.179 8.55358 13.315 8.61158 13.495C8.66959 13.673 8.69859 13.893 8.69859 14.155C8.69859 14.419 8.66959 14.641 8.61158 14.821C8.55358 15.001 8.47258 15.137 8.36858 15.229Z" fill="#3E63DD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM4.3557 12.319C4.1937 12.297 4.0527 12.286 3.93269 12.286H3.20669C2.83868 12.286 2.65468 12.47 2.65468 12.838V15.448C2.65468 15.816 2.83868 16 3.20669 16H3.93269C4.0527 16 4.1937 15.989 4.3557 15.967C4.5177 15.945 4.6827 15.901 4.8507 15.835C5.0187 15.767 5.17471 15.666 5.31871 15.532C5.46471 15.396 5.58171 15.216 5.66971 14.992C5.75971 14.766 5.80471 14.483 5.80471 14.143C5.80471 13.803 5.75971 13.521 5.66971 13.297C5.58171 13.071 5.46471 12.891 5.31871 12.757C5.17471 12.621 5.0187 12.52 4.8507 12.454C4.6827 12.386 4.5177 12.341 4.3557 12.319ZM7.39057 15.964C7.59057 16.03 7.79458 16.063 8.00258 16.063C8.20658 16.063 8.40858 16.03 8.60858 15.964C8.81059 15.896 8.99259 15.788 9.15459 15.64C9.31859 15.492 9.44959 15.296 9.54759 15.052C9.6456 14.808 9.6946 14.509 9.6946 14.155C9.6946 13.801 9.6456 13.503 9.54759 13.261C9.44959 13.017 9.31859 12.821 9.15459 12.673C8.99259 12.525 8.81059 12.418 8.60858 12.352C8.40858 12.284 8.20658 12.25 8.00258 12.25C7.79458 12.25 7.59057 12.284 7.39057 12.352C7.19057 12.418 7.00757 12.525 6.84157 12.673C6.67757 12.821 6.54656 13.017 6.44856 13.261C6.35056 13.503 6.30156 13.801 6.30156 14.155C6.30156 14.509 6.35056 14.808 6.44856 15.052C6.54656 15.296 6.67757 15.492 6.84157 15.64C7.00757 15.788 7.19057 15.896 7.39057 15.964ZM11.4275 15.973C11.6395 16.033 11.8475 16.063 12.0515 16.063C12.2275 16.063 12.3965 16.039 12.5585 15.991C12.7225 15.941 12.8685 15.872 12.9965 15.784C13.1245 15.696 13.2255 15.594 13.2995 15.478C13.3755 15.362 13.4135 15.237 13.4135 15.103C13.4135 14.979 13.3715 14.879 13.2875 14.803C13.2055 14.725 13.1075 14.686 12.9935 14.686C12.8555 14.686 12.7585 14.717 12.7025 14.779C12.6485 14.839 12.6045 14.907 12.5705 14.983C12.5465 15.043 12.5145 15.103 12.4745 15.163C12.4365 15.221 12.3835 15.269 12.3155 15.307C12.2495 15.345 12.1615 15.364 12.0515 15.364C11.9155 15.364 11.7855 15.325 11.6615 15.247C11.5395 15.169 11.4405 15.042 11.3645 14.866C11.2885 14.688 11.2505 14.452 11.2505 14.158C11.2505 13.862 11.2885 13.626 11.3645 13.45C11.4405 13.274 11.5395 13.147 11.6615 13.069C11.7855 12.989 11.9155 12.949 12.0515 12.949C12.1615 12.949 12.2495 12.968 12.3155 13.006C12.3835 13.044 12.4365 13.093 12.4745 13.153C12.5145 13.211 12.5465 13.27 12.5705 13.33C12.6045 13.406 12.6485 13.475 12.7025 13.537C12.7585 13.597 12.8555 13.627 12.9935 13.627C13.1075 13.627 13.2055 13.589 13.2875 13.513C13.3715 13.437 13.4135 13.336 13.4135 13.21C13.4135 13.076 13.3765 12.951 13.3025 12.835C13.2285 12.719 13.1265 12.617 12.9965 12.529C12.8685 12.441 12.7235 12.373 12.5615 12.325C12.3995 12.275 12.2295 12.25 12.0515 12.25C11.8475 12.25 11.6395 12.28 11.4275 12.34C11.2175 12.4 11.0235 12.502 10.8455 12.646C10.6674 12.788 10.5244 12.983 10.4164 13.231C10.3084 13.477 10.2544 13.786 10.2544 14.158C10.2544 14.528 10.3084 14.836 10.4164 15.082C10.5244 15.328 10.6674 15.523 10.8455 15.667C11.0235 15.811 11.2175 15.913 11.4275 15.973Z" fill="#3E63DD"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#3E63DD"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148089">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-pdf': {
+    body: `<g clip-path="url(#clip0_2931_148088)">
+    <path d="M3.83969 14.011V12.985H4.1847C4.2547 12.985 4.3227 12.99 4.3887 13C4.4547 13.01 4.5137 13.032 4.5657 13.066C4.6197 13.1 4.6617 13.151 4.6917 13.219C4.7237 13.285 4.7397 13.374 4.7397 13.486C4.7397 13.6 4.7237 13.692 4.6917 13.762C4.6617 13.832 4.6197 13.885 4.5657 13.921C4.5137 13.955 4.4547 13.979 4.3887 13.993C4.3227 14.005 4.2547 14.011 4.1847 14.011H3.83969Z" fill="#E54666"/>
+    <path d="M8.10758 15.238C7.99958 15.28 7.87858 15.301 7.74458 15.301H7.45057V12.985H7.74458C7.87858 12.985 7.99958 13.007 8.10758 13.051C8.21558 13.093 8.30758 13.16 8.38358 13.252C8.46158 13.344 8.52158 13.464 8.56358 13.612C8.60559 13.758 8.62659 13.935 8.62659 14.143C8.62659 14.349 8.60559 14.526 8.56358 14.674C8.52158 14.822 8.46158 14.942 8.38358 15.034C8.30758 15.126 8.21558 15.194 8.10758 15.238Z" fill="#E54666"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM3.83969 14.71H4.3377C4.4297 14.71 4.5347 14.703 4.6527 14.689C4.7727 14.673 4.8947 14.642 5.0187 14.596C5.14471 14.55 5.26071 14.483 5.36671 14.395C5.47471 14.305 5.56071 14.186 5.62471 14.038C5.69071 13.89 5.72371 13.706 5.72371 13.486C5.72371 13.266 5.69071 13.084 5.62471 12.94C5.56071 12.794 5.47471 12.677 5.36671 12.589C5.26071 12.501 5.14471 12.436 5.0187 12.394C4.8947 12.35 4.7727 12.321 4.6527 12.307C4.5347 12.293 4.4297 12.286 4.3377 12.286H3.41069C3.04269 12.286 2.85868 12.47 2.85868 12.838V15.448C2.85868 15.816 3.02268 16 3.35069 16C3.67669 16 3.83969 15.816 3.83969 15.448V14.71ZM8.17058 12.319C8.00858 12.297 7.86758 12.286 7.74758 12.286H7.02157C6.65356 12.286 6.46956 12.47 6.46956 12.838V15.448C6.46956 15.816 6.65356 16 7.02157 16H7.74758C7.86758 16 8.00858 15.989 8.17058 15.967C8.33258 15.945 8.49758 15.901 8.66559 15.835C8.83359 15.767 8.98959 15.666 9.13359 15.532C9.27959 15.396 9.39659 15.216 9.48459 14.992C9.57459 14.766 9.61959 14.483 9.61959 14.143C9.61959 13.803 9.57459 13.521 9.48459 13.297C9.39659 13.071 9.27959 12.891 9.13359 12.757C8.98959 12.621 8.83359 12.52 8.66559 12.454C8.49758 12.386 8.33258 12.341 8.17058 12.319ZM13.1405 12.895C13.2345 12.833 13.2815 12.746 13.2815 12.634C13.2815 12.52 13.2345 12.434 13.1405 12.376C13.0465 12.316 12.9085 12.286 12.7265 12.286H11.1755C10.8095 12.286 10.6264 12.47 10.6264 12.838V15.502C10.6264 15.868 10.7894 16.051 11.1155 16.051C11.4455 16.051 11.6105 15.868 11.6105 15.502V14.788H12.5915C12.8955 14.788 13.0475 14.672 13.0475 14.44C13.0475 14.206 12.8955 14.089 12.5915 14.089H11.6105V12.985H12.7265C12.9085 12.985 13.0465 12.955 13.1405 12.895Z" fill="#E54666"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#E54666"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148088">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-ppt': {
+    body: `<g clip-path="url(#clip0_2931_148086)">
+    <path d="M3.83969 14.011V12.985H4.1847C4.2547 12.985 4.3227 12.99 4.3887 13C4.4547 13.01 4.5137 13.032 4.5657 13.066C4.6197 13.1 4.6617 13.151 4.6917 13.219C4.7237 13.285 4.7397 13.374 4.7397 13.486C4.7397 13.6 4.7237 13.692 4.6917 13.762C4.6617 13.832 4.6197 13.885 4.5657 13.921C4.5137 13.955 4.4547 13.979 4.3887 13.993C4.3227 14.005 4.2547 14.011 4.1847 14.011H3.83969Z" fill="#F76808"/>
+    <path d="M7.65458 14.011V12.985H7.99958C8.06958 12.985 8.13758 12.99 8.20358 13C8.26958 13.01 8.32858 13.032 8.38058 13.066C8.43458 13.1 8.47658 13.151 8.50658 13.219C8.53858 13.285 8.55458 13.374 8.55458 13.486C8.55458 13.6 8.53858 13.692 8.50658 13.762C8.47658 13.832 8.43458 13.885 8.38058 13.921C8.32858 13.955 8.26958 13.979 8.20358 13.993C8.13758 14.005 8.06958 14.011 7.99958 14.011H7.65458Z" fill="#F76808"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM3.83969 14.71H4.3377C4.4297 14.71 4.5347 14.703 4.6527 14.689C4.7727 14.673 4.8947 14.642 5.0187 14.596C5.14471 14.55 5.26071 14.483 5.36671 14.395C5.47471 14.305 5.56071 14.186 5.62471 14.038C5.69071 13.89 5.72371 13.706 5.72371 13.486C5.72371 13.266 5.69071 13.084 5.62471 12.94C5.56071 12.794 5.47471 12.677 5.36671 12.589C5.26071 12.501 5.14471 12.436 5.0187 12.394C4.8947 12.35 4.7727 12.321 4.6527 12.307C4.5347 12.293 4.4297 12.286 4.3377 12.286H3.41069C3.04269 12.286 2.85868 12.47 2.85868 12.838V15.448C2.85868 15.816 3.02268 16 3.35069 16C3.67669 16 3.83969 15.816 3.83969 15.448V14.71ZM7.65458 14.71H8.15258C8.24458 14.71 8.34958 14.703 8.46758 14.689C8.58758 14.673 8.70959 14.642 8.83359 14.596C8.95959 14.55 9.07559 14.483 9.18159 14.395C9.28959 14.305 9.37559 14.186 9.43959 14.038C9.50559 13.89 9.53859 13.706 9.53859 13.486C9.53859 13.266 9.50559 13.084 9.43959 12.94C9.37559 12.794 9.28959 12.677 9.18159 12.589C9.07559 12.501 8.95959 12.436 8.83359 12.394C8.70959 12.35 8.58758 12.321 8.46758 12.307C8.34958 12.293 8.24458 12.286 8.15258 12.286H7.22557C6.85757 12.286 6.67357 12.47 6.67357 12.838V15.448C6.67357 15.816 6.83757 16 7.16557 16C7.49157 16 7.65458 15.816 7.65458 15.448V14.71ZM13.4105 12.634C13.4105 12.402 13.2265 12.286 12.8585 12.286H10.7704C10.5924 12.286 10.4554 12.316 10.3594 12.376C10.2654 12.434 10.2184 12.52 10.2184 12.634C10.2184 12.746 10.2654 12.833 10.3594 12.895C10.4554 12.955 10.5924 12.985 10.7704 12.985H11.3225V15.502C11.3225 15.868 11.4855 16.051 11.8115 16.051C12.1395 16.051 12.3035 15.868 12.3035 15.502V12.985H12.9605C13.1085 12.985 13.2205 12.955 13.2965 12.895C13.3725 12.833 13.4105 12.746 13.4105 12.634Z" fill="#F76808"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#F76808"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148086">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-txt': {
+    body: `<g clip-path="url(#clip0_2931_148087)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM5.78071 12.634C5.78071 12.402 5.59671 12.286 5.22871 12.286H3.14069C2.96268 12.286 2.82568 12.316 2.72968 12.376C2.63568 12.434 2.58868 12.52 2.58868 12.634C2.58868 12.746 2.63568 12.833 2.72968 12.895C2.82568 12.955 2.96268 12.985 3.14069 12.985H3.69269V15.502C3.69269 15.868 3.85569 16.051 4.1817 16.051C4.5097 16.051 4.6737 15.868 4.6737 15.502V12.985H5.33071C5.47871 12.985 5.59071 12.955 5.66671 12.895C5.74271 12.833 5.78071 12.746 5.78071 12.634ZM6.63757 15.952C6.71557 16.022 6.82457 16.057 6.96457 16.057C7.09657 16.057 7.19657 16.022 7.26457 15.952C7.33457 15.882 7.41057 15.782 7.49257 15.652L7.99358 14.869L8.48858 15.652C8.57058 15.78 8.64559 15.88 8.71359 15.952C8.78359 16.022 8.88659 16.057 9.02259 16.057C9.15859 16.057 9.26759 16.024 9.34959 15.958C9.43359 15.892 9.47559 15.808 9.47559 15.706C9.47559 15.656 9.46659 15.605 9.44859 15.553C9.43259 15.501 9.40159 15.44 9.35559 15.37L8.54858 14.158L9.41559 12.907C9.47959 12.817 9.51159 12.723 9.51159 12.625C9.51159 12.497 9.46959 12.403 9.38559 12.343C9.30359 12.281 9.20159 12.25 9.07959 12.25C8.95159 12.25 8.84859 12.282 8.77059 12.346C8.69259 12.408 8.60458 12.52 8.50658 12.682L8.00558 13.501L7.49257 12.682C7.42657 12.576 7.36957 12.492 7.32157 12.43C7.27357 12.366 7.22057 12.32 7.16257 12.292C7.10657 12.264 7.03357 12.25 6.94357 12.25C6.82357 12.25 6.71857 12.282 6.62856 12.346C6.53856 12.41 6.49356 12.503 6.49356 12.625C6.49356 12.669 6.49856 12.714 6.50856 12.76C6.52056 12.804 6.54456 12.852 6.58056 12.904L7.45657 14.194L6.64056 15.37C6.59656 15.436 6.56556 15.493 6.54756 15.541C6.53156 15.589 6.52356 15.638 6.52356 15.688C6.52356 15.792 6.56156 15.88 6.63757 15.952ZM13.4105 12.634C13.4105 12.402 13.2265 12.286 12.8585 12.286H10.7704C10.5924 12.286 10.4554 12.316 10.3594 12.376C10.2654 12.434 10.2184 12.52 10.2184 12.634C10.2184 12.746 10.2654 12.833 10.3594 12.895C10.4554 12.955 10.5924 12.985 10.7704 12.985H11.3225V15.502C11.3225 15.868 11.4855 16.051 11.8115 16.051C12.1395 16.051 12.3035 15.868 12.3035 15.502V12.985H12.9605C13.1085 12.985 13.2205 12.955 13.2965 12.895C13.3725 12.833 13.4105 12.746 13.4105 12.634Z" fill="#696E77"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#696E77"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148087">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-xls': {
+    body: `<g clip-path="url(#clip0_2931_148085)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578ZM2.82268 15.952C2.90068 16.022 3.00968 16.057 3.14969 16.057C3.28169 16.057 3.38169 16.022 3.44969 15.952C3.51969 15.882 3.59569 15.782 3.67769 15.652L4.1787 14.869L4.6737 15.652C4.7557 15.78 4.8307 15.88 4.8987 15.952C4.9687 16.022 5.07171 16.057 5.20771 16.057C5.34371 16.057 5.45271 16.024 5.53471 15.958C5.61871 15.892 5.66071 15.808 5.66071 15.706C5.66071 15.656 5.65171 15.605 5.63371 15.553C5.61771 15.501 5.58671 15.44 5.54071 15.37L4.7337 14.158L5.60071 12.907C5.66471 12.817 5.69671 12.723 5.69671 12.625C5.69671 12.497 5.65471 12.403 5.57071 12.343C5.48871 12.281 5.38671 12.25 5.26471 12.25C5.13671 12.25 5.0337 12.282 4.9557 12.346C4.8777 12.408 4.7897 12.52 4.6917 12.682L4.1907 13.501L3.67769 12.682C3.61169 12.576 3.55469 12.492 3.50669 12.43C3.45869 12.366 3.40569 12.32 3.34769 12.292C3.29169 12.264 3.21869 12.25 3.12869 12.25C3.00868 12.25 2.90368 12.282 2.81368 12.346C2.72368 12.41 2.67868 12.503 2.67868 12.625C2.67868 12.669 2.68368 12.714 2.69368 12.76C2.70568 12.804 2.72968 12.852 2.76568 12.904L3.64169 14.194L2.82568 15.37C2.78168 15.436 2.75068 15.493 2.73268 15.541C2.71668 15.589 2.70868 15.638 2.70868 15.688C2.70868 15.792 2.74668 15.88 2.82268 15.952ZM8.89059 15.301H7.90358V12.811C7.90358 12.441 7.73958 12.256 7.41157 12.256C7.08357 12.256 6.91957 12.441 6.91957 12.811V15.448C6.91957 15.816 7.10357 16 7.47157 16H8.89059C9.06859 16 9.20459 15.97 9.29859 15.91C9.39459 15.85 9.44259 15.764 9.44259 15.652C9.44259 15.54 9.39459 15.454 9.29859 15.394C9.20459 15.332 9.06859 15.301 8.89059 15.301ZM11.0465 15.961C11.2705 16.029 11.5275 16.063 11.8175 16.063C12.1335 16.063 12.4125 16.016 12.6545 15.922C12.8965 15.828 13.0855 15.695 13.2215 15.523C13.3575 15.349 13.4255 15.145 13.4255 14.911C13.4255 14.685 13.3675 14.498 13.2515 14.35C13.1355 14.202 12.9755 14.081 12.7715 13.987C12.5695 13.893 12.3365 13.814 12.0725 13.75C11.8085 13.684 11.6125 13.614 11.4845 13.54C11.3585 13.466 11.2955 13.378 11.2955 13.276C11.2955 13.21 11.3175 13.153 11.3615 13.105C11.4055 13.055 11.4675 13.017 11.5475 12.991C11.6275 12.963 11.7195 12.949 11.8235 12.949C11.9655 12.949 12.0855 12.971 12.1835 13.015C12.2815 13.059 12.3585 13.114 12.4145 13.18C12.4665 13.23 12.5335 13.284 12.6155 13.342C12.6975 13.4 12.7955 13.429 12.9095 13.429C13.0255 13.429 13.1185 13.396 13.1885 13.33C13.2605 13.262 13.2965 13.17 13.2965 13.054C13.2965 12.956 13.2715 12.868 13.2215 12.79C13.1715 12.712 13.1055 12.644 13.0235 12.586C12.8855 12.476 12.7135 12.393 12.5075 12.337C12.3015 12.279 12.0885 12.25 11.8685 12.25C11.5705 12.25 11.3025 12.292 11.0645 12.376C10.8285 12.46 10.6414 12.58 10.5034 12.736C10.3654 12.892 10.2964 13.077 10.2964 13.291C10.2964 13.581 10.4024 13.83 10.6144 14.038C10.8285 14.246 11.1735 14.404 11.6495 14.512C11.9115 14.572 12.1065 14.633 12.2345 14.695C12.3625 14.755 12.4265 14.849 12.4265 14.977C12.4265 15.057 12.4005 15.126 12.3485 15.184C12.2965 15.242 12.2255 15.287 12.1355 15.319C12.0475 15.349 11.9475 15.364 11.8355 15.364C11.6695 15.364 11.5325 15.332 11.4245 15.268C11.3165 15.204 11.2215 15.13 11.1395 15.046C11.0695 14.98 10.9945 14.922 10.9145 14.872C10.8345 14.822 10.7364 14.797 10.6204 14.797C10.4844 14.797 10.3844 14.839 10.3204 14.923C10.2564 15.007 10.2244 15.093 10.2244 15.181C10.2244 15.377 10.3184 15.545 10.5064 15.685C10.6444 15.799 10.8245 15.891 11.0465 15.961Z" fill="#29A383"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#29A383"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148085">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+  'file-zip': {
+    body: `<g clip-path="url(#clip0_2931_148090)">
+    <path d="M12.6562 19.7578H2.94141C0.972656 19.7578 0 18.7734 0 16.7695V2.98828C0 0.996094 0.972656 0 2.94141 0H3V2H2.5C2.22386 2 2 2.22386 2 2.5C2 2.77614 2.22386 3 2.5 3H3V4H2.5C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H3V6H2.5C2.22386 6 2 6.22386 2 6.5C2 6.77614 2.22386 7 2.5 7H3V8H2.5C2.22386 8 2 8.22386 2 8.5C2 8.77614 2.22386 9 2.5 9H3V10H2.5C2.22386 10 2 10.2239 2 10.5C2 10.7761 2.22386 11 2.5 11H3V12H2.5C2.22386 12 2 12.2239 2 12.5C2 12.7761 2.22386 13 2.5 13H3V14H2.75C2.33579 14 2 14.3358 2 14.75V15.5C2 16.3284 2.67157 17 3.5 17C4.32843 17 5 16.3284 5 15.5V14.75C5 14.3358 4.66421 14 4.25 14H4V13H4.5C4.77614 13 5 12.7761 5 12.5C5 12.2239 4.77614 12 4.5 12H4V11H4.5C4.77614 11 5 10.7761 5 10.5C5 10.2239 4.77614 10 4.5 10H4V9H4.5C4.77614 9 5 8.77614 5 8.5C5 8.22386 4.77614 8 4.5 8H4V7H4.5C4.77614 7 5 6.77614 5 6.5C5 6.22386 4.77614 6 4.5 6H4V5H4.5C4.77614 5 5 4.77614 5 4.5C5 4.22386 4.77614 4 4.5 4H4V3H4.5C4.77614 3 5 2.77614 5 2.5C5 2.22386 4.77614 2 4.5 2H4V0H7.07812V6.80859C7.07812 8.05078 7.66406 8.63672 8.90625 8.63672H15.6094V16.7695C15.6094 18.7617 14.625 19.7578 12.6562 19.7578Z" fill="#6958AD"/>
+    <path d="M15.5039 7.26562H8.90625C8.61328 7.26562 8.44922 7.11328 8.44922 6.80859V0.0820312C8.88281 0.152344 9.31641 0.457031 9.79688 0.949219L14.6602 5.91797C15.1523 6.42188 15.4453 6.83203 15.5039 7.26562Z" fill="#6958AD"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_2931_148090">
+    <rect width="15.9609" height="19.7695" fill="white"/>
+    </clipPath>
+    </defs>`,
+    width: 16,
+    height: 20,
+  },
+};