From 46ec92c86ea8f8d36272e5b31e2f5a1bb04d1a65 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Fri, 14 Mar 2025 17:37:36 -0700
Subject: [PATCH 01/16] fix: Improve performance of most hit APIs in widget
 (#11089)

- Cache campaigns for better performance
- Fix N+1 queries in inbox members
- Remove unused related articles
---
 .../api/v1/widget/campaigns_controller.rb     |  6 ++++-
 .../api/v1/widget/inbox_members_controller.rb |  2 +-
 .../widget/store/modules/campaign.js          | 21 ++++++++++-----
 .../modules/specs/campaign/actions.spec.js    | 26 +++++++++++++++++--
 .../modules/specs/campaign/mutations.spec.js  |  3 ++-
 .../api/v1/models/_category.json.jbuilder     | 20 --------------
 6 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/app/controllers/api/v1/widget/campaigns_controller.rb b/app/controllers/api/v1/widget/campaigns_controller.rb
index cb9b96a38..10a73aa62 100644
--- a/app/controllers/api/v1/widget/campaigns_controller.rb
+++ b/app/controllers/api/v1/widget/campaigns_controller.rb
@@ -2,6 +2,10 @@ class Api::V1::Widget::CampaignsController < Api::V1::Widget::BaseController
   skip_before_action :set_contact
 
   def index
-    @campaigns = @web_widget.inbox.campaigns.where(enabled: true)
+    @campaigns = @web_widget
+                 .inbox
+                 .campaigns
+                 .where(enabled: true, account_id: @web_widget.inbox.account_id)
+                 .includes(:sender)
   end
 end
diff --git a/app/controllers/api/v1/widget/inbox_members_controller.rb b/app/controllers/api/v1/widget/inbox_members_controller.rb
index c4bc377ea..22934388b 100644
--- a/app/controllers/api/v1/widget/inbox_members_controller.rb
+++ b/app/controllers/api/v1/widget/inbox_members_controller.rb
@@ -2,6 +2,6 @@ class Api::V1::Widget::InboxMembersController < Api::V1::Widget::BaseController
   skip_before_action :set_contact
 
   def index
-    @inbox_members = @web_widget.inbox.inbox_members.includes(:user)
+    @inbox_members = @web_widget.inbox.inbox_members.includes(user: { avatar_attachment: :blob })
   end
 end
diff --git a/app/javascript/widget/store/modules/campaign.js b/app/javascript/widget/store/modules/campaign.js
index 317c64148..ad2822dd9 100644
--- a/app/javascript/widget/store/modules/campaign.js
+++ b/app/javascript/widget/store/modules/campaign.js
@@ -7,6 +7,7 @@ import {
 const state = {
   records: [],
   uiFlags: {
+    hasFetched: false,
     isError: false,
   },
   activeCampaign: {},
@@ -30,6 +31,7 @@ const resetCampaignTimers = (
 
 export const getters = {
   getCampaigns: $state => $state.records,
+  getUIFlags: $state => $state.uiFlags,
   getActiveCampaign: $state => $state.activeCampaign,
 };
 
@@ -53,15 +55,21 @@ export const actions = {
     }
   },
   initCampaigns: async (
-    { getters: { getCampaigns: campaigns }, dispatch },
+    { getters: { getCampaigns: campaigns, getUIFlags: uiFlags }, dispatch },
     { currentURL, websiteToken, isInBusinessHours }
   ) => {
     if (!campaigns.length) {
-      dispatch('fetchCampaigns', {
-        websiteToken,
-        currentURL,
-        isInBusinessHours,
-      });
+      // This check is added to ensure that the campaigns are fetched once
+      // On high traffic sites, if the campaigns are empty, the API is called
+      // every time the user changes the URL (in case of the SPA)
+      // So, we need to ensure that the campaigns are fetched only once
+      if (!uiFlags.hasFetched) {
+        dispatch('fetchCampaigns', {
+          websiteToken,
+          currentURL,
+          isInBusinessHours,
+        });
+      }
     } else {
       resetCampaignTimers(
         campaigns,
@@ -127,6 +135,7 @@ export const actions = {
 export const mutations = {
   setCampaigns($state, data) {
     $state.records = data;
+    $state.uiFlags.hasFetched = true;
   },
   setActiveCampaign($state, data) {
     $state.activeCampaign = data;
diff --git a/app/javascript/widget/store/modules/specs/campaign/actions.spec.js b/app/javascript/widget/store/modules/specs/campaign/actions.spec.js
index ca4a9736b..c24490171 100644
--- a/app/javascript/widget/store/modules/specs/campaign/actions.spec.js
+++ b/app/javascript/widget/store/modules/specs/campaign/actions.spec.js
@@ -63,15 +63,37 @@ describe('#actions', () => {
     };
     it('sends correct actions if campaigns are empty', async () => {
       await actions.initCampaigns(
-        { dispatch, getters: { getCampaigns: [] } },
+        {
+          dispatch,
+          getters: { getCampaigns: [], getUIFlags: { hasFetched: false } },
+        },
         actionParams
       );
       expect(dispatch.mock.calls).toEqual([['fetchCampaigns', actionParams]]);
       expect(campaignTimer.initTimers).not.toHaveBeenCalled();
     });
+
+    it('do not refetch if the campaigns are fetched once', async () => {
+      await actions.initCampaigns(
+        {
+          dispatch,
+          getters: { getCampaigns: [], getUIFlags: { hasFetched: true } },
+        },
+        actionParams
+      );
+      expect(dispatch.mock.calls).toEqual([]);
+      expect(campaignTimer.initTimers).not.toHaveBeenCalled();
+    });
+
     it('resets time if campaigns are available', async () => {
       await actions.initCampaigns(
-        { dispatch, getters: { getCampaigns: campaigns } },
+        {
+          dispatch,
+          getters: {
+            getCampaigns: campaigns,
+            getUIFlags: { hasFetched: true },
+          },
+        },
         actionParams
       );
       expect(dispatch.mock.calls).toEqual([]);
diff --git a/app/javascript/widget/store/modules/specs/campaign/mutations.spec.js b/app/javascript/widget/store/modules/specs/campaign/mutations.spec.js
index 28efb3146..9554a9d6b 100644
--- a/app/javascript/widget/store/modules/specs/campaign/mutations.spec.js
+++ b/app/javascript/widget/store/modules/specs/campaign/mutations.spec.js
@@ -7,9 +7,10 @@ vi.mock('widget/store/index.js', () => ({
 describe('#mutations', () => {
   describe('#setCampaigns', () => {
     it('set campaign records', () => {
-      const state = { records: [] };
+      const state = { records: [], uiFlags: {} };
       mutations.setCampaigns(state, campaigns);
       expect(state.records).toEqual(campaigns);
+      expect(state.uiFlags.hasFetched).toEqual(true);
     });
   });
 
diff --git a/app/views/public/api/v1/models/_category.json.jbuilder b/app/views/public/api/v1/models/_category.json.jbuilder
index 915914e57..15dc61668 100644
--- a/app/views/public/api/v1/models/_category.json.jbuilder
+++ b/app/views/public/api/v1/models/_category.json.jbuilder
@@ -4,26 +4,6 @@ json.locale category.locale
 json.description category.description
 json.position category.position
 
-json.related_categories do
-  if category.related_categories.any?
-    json.array! category.related_categories.each do |related_category|
-      json.partial! partial: 'public/api/v1/models/associated_category', formats: [:json], category: related_category
-    end
-  end
-end
-
-if category.parent_category.present?
-  json.parent_category do
-    json.partial! partial: 'public/api/v1/models/associated_category', formats: [:json], category: category.parent_category
-  end
-end
-
-if category.root_category.present?
-  json.root_category do
-    json.partial! partial: 'public/api/v1/models/associated_category', formats: [:json], category: category.root_category
-  end
-end
-
 json.meta do
   json.articles_count category.articles.published.size
 end

From 586dc800bb0d6772a9668eb5b4fe7c59df6fe82f Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Sat, 15 Mar 2025 13:51:08 -0700
Subject: [PATCH 02/16] chore: Move Twilio event processing to background job
 (#11094)

- Twilio events were being processed synchronously, leading to slow API
responses.
- This change moves Twilio event processing to a background job to
improve performance and align with how other events (e.g., WhatsApp) are
handled.

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 app/controllers/twilio/callback_controller.rb |  2 +-
 .../twilio/delivery_status_controller.rb      |  2 +-
 .../webhooks/twilio_delivery_status_job.rb    |  8 ++++++
 app/jobs/webhooks/twilio_events_job.rb        |  8 ++++++
 .../twilio/callbacks_controller_spec.rb       | 28 +++++++++++++------
 .../twilio/delivery_status_controller_spec.rb | 26 +++++++++++------
 .../twilio_delivery_status_job_spec.rb        | 26 +++++++++++++++++
 spec/jobs/webhooks/twilio_events_job_spec.rb  | 28 +++++++++++++++++++
 8 files changed, 108 insertions(+), 20 deletions(-)
 create mode 100644 app/jobs/webhooks/twilio_delivery_status_job.rb
 create mode 100644 app/jobs/webhooks/twilio_events_job.rb
 create mode 100644 spec/jobs/webhooks/twilio_delivery_status_job_spec.rb
 create mode 100644 spec/jobs/webhooks/twilio_events_job_spec.rb

diff --git a/app/controllers/twilio/callback_controller.rb b/app/controllers/twilio/callback_controller.rb
index 7723e5dd2..ff5db952d 100644
--- a/app/controllers/twilio/callback_controller.rb
+++ b/app/controllers/twilio/callback_controller.rb
@@ -1,6 +1,6 @@
 class Twilio::CallbackController < ApplicationController
   def create
-    ::Twilio::IncomingMessageService.new(params: permitted_params).perform
+    Webhooks::TwilioEventsJob.perform_later(permitted_params.to_unsafe_hash)
 
     head :no_content
   end
diff --git a/app/controllers/twilio/delivery_status_controller.rb b/app/controllers/twilio/delivery_status_controller.rb
index cc7afb0fc..1c756a1c2 100644
--- a/app/controllers/twilio/delivery_status_controller.rb
+++ b/app/controllers/twilio/delivery_status_controller.rb
@@ -1,6 +1,6 @@
 class Twilio::DeliveryStatusController < ApplicationController
   def create
-    ::Twilio::DeliveryStatusService.new(params: permitted_params).perform
+    Webhooks::TwilioDeliveryStatusJob.perform_later(permitted_params.to_unsafe_hash)
 
     head :no_content
   end
diff --git a/app/jobs/webhooks/twilio_delivery_status_job.rb b/app/jobs/webhooks/twilio_delivery_status_job.rb
new file mode 100644
index 000000000..324a17e94
--- /dev/null
+++ b/app/jobs/webhooks/twilio_delivery_status_job.rb
@@ -0,0 +1,8 @@
+class Webhooks::TwilioDeliveryStatusJob < ApplicationJob
+  queue_as :low
+
+  def perform(params = {})
+    # Process the Twilio delivery status webhook event in the background
+    ::Twilio::DeliveryStatusService.new(params: params).perform
+  end
+end
diff --git a/app/jobs/webhooks/twilio_events_job.rb b/app/jobs/webhooks/twilio_events_job.rb
new file mode 100644
index 000000000..cd430a6eb
--- /dev/null
+++ b/app/jobs/webhooks/twilio_events_job.rb
@@ -0,0 +1,8 @@
+class Webhooks::TwilioEventsJob < ApplicationJob
+  queue_as :low
+
+  def perform(params = {})
+    # Process the Twilio webhook event in the background
+    ::Twilio::IncomingMessageService.new(params: params).perform
+  end
+end
diff --git a/spec/controllers/twilio/callbacks_controller_spec.rb b/spec/controllers/twilio/callbacks_controller_spec.rb
index bf975be6b..d16acf229 100644
--- a/spec/controllers/twilio/callbacks_controller_spec.rb
+++ b/spec/controllers/twilio/callbacks_controller_spec.rb
@@ -2,17 +2,27 @@ require 'rails_helper'
 
 RSpec.describe 'Twilio::CallbacksController', type: :request do
   include Rails.application.routes.url_helpers
-  let(:twilio_service) { instance_double(Twilio::IncomingMessageService) }
 
-  before do
-    allow(Twilio::IncomingMessageService).to receive(:new).and_return(twilio_service)
-    allow(twilio_service).to receive(:perform)
-  end
+  describe 'POST /twilio/callback' do
+    let(:params) do
+      {
+        'From' => '+1234567890',
+        'To' => '+0987654321',
+        'Body' => 'Test message',
+        'AccountSid' => 'AC123',
+        'SmsSid' => 'SM123'
+      }
+    end
 
-  describe 'GET /twilio/callback' do
-    it 'calls incoming message service' do
-      post twilio_callback_index_url, params: {}
-      expect(twilio_service).to have_received(:perform)
+    it 'enqueues the Twilio events job' do
+      expect do
+        post twilio_callback_index_url, params: params
+      end.to have_enqueued_job(Webhooks::TwilioEventsJob).with(params)
+    end
+
+    it 'returns no content status' do
+      post twilio_callback_index_url, params: params
+      expect(response).to have_http_status(:no_content)
     end
   end
 end
diff --git a/spec/controllers/twilio/delivery_status_controller_spec.rb b/spec/controllers/twilio/delivery_status_controller_spec.rb
index 05c236259..fc21f8f94 100644
--- a/spec/controllers/twilio/delivery_status_controller_spec.rb
+++ b/spec/controllers/twilio/delivery_status_controller_spec.rb
@@ -2,17 +2,25 @@ require 'rails_helper'
 
 RSpec.describe 'Twilio::DeliveryStatusController', type: :request do
   include Rails.application.routes.url_helpers
-  let(:twilio_service) { instance_double(Twilio::DeliveryStatusService) }
 
-  before do
-    allow(Twilio::DeliveryStatusService).to receive(:new).and_return(twilio_service)
-    allow(twilio_service).to receive(:perform)
-  end
+  describe 'POST /twilio/delivery_status' do
+    let(:params) do
+      {
+        'MessageSid' => 'SM123',
+        'MessageStatus' => 'delivered',
+        'AccountSid' => 'AC123'
+      }
+    end
 
-  describe 'POST /twilio/delivery' do
-    it 'calls incoming message service' do
-      post twilio_delivery_status_index_url, params: {}
-      expect(twilio_service).to have_received(:perform)
+    it 'enqueues the Twilio delivery status job' do
+      expect do
+        post twilio_delivery_status_index_url, params: params
+      end.to have_enqueued_job(Webhooks::TwilioDeliveryStatusJob).with(params)
+    end
+
+    it 'returns no content status' do
+      post twilio_delivery_status_index_url, params: params
+      expect(response).to have_http_status(:no_content)
     end
   end
 end
diff --git a/spec/jobs/webhooks/twilio_delivery_status_job_spec.rb b/spec/jobs/webhooks/twilio_delivery_status_job_spec.rb
new file mode 100644
index 000000000..dc94169ae
--- /dev/null
+++ b/spec/jobs/webhooks/twilio_delivery_status_job_spec.rb
@@ -0,0 +1,26 @@
+require 'rails_helper'
+
+RSpec.describe Webhooks::TwilioDeliveryStatusJob do
+  subject(:job) { described_class.perform_later(params) }
+
+  let(:params) do
+    {
+      'MessageSid' => 'SM123',
+      'MessageStatus' => 'delivered',
+      'AccountSid' => 'AC123'
+    }
+  end
+
+  it 'queues the job' do
+    expect { job }.to have_enqueued_job(described_class)
+      .with(params)
+      .on_queue('low')
+  end
+
+  it 'calls the Twilio::DeliveryStatusService' do
+    service = double
+    expect(Twilio::DeliveryStatusService).to receive(:new).with(params: params).and_return(service)
+    expect(service).to receive(:perform)
+    described_class.new.perform(params)
+  end
+end
diff --git a/spec/jobs/webhooks/twilio_events_job_spec.rb b/spec/jobs/webhooks/twilio_events_job_spec.rb
new file mode 100644
index 000000000..4eea87d6a
--- /dev/null
+++ b/spec/jobs/webhooks/twilio_events_job_spec.rb
@@ -0,0 +1,28 @@
+require 'rails_helper'
+
+RSpec.describe Webhooks::TwilioEventsJob do
+  subject(:job) { described_class.perform_later(params) }
+
+  let(:params) do
+    {
+      'From' => '+1234567890',
+      'To' => '+0987654321',
+      'Body' => 'Test message',
+      'AccountSid' => 'AC123',
+      'SmsSid' => 'SM123'
+    }
+  end
+
+  it 'queues the job' do
+    expect { job }.to have_enqueued_job(described_class)
+      .with(params)
+      .on_queue('low')
+  end
+
+  it 'calls the Twilio::IncomingMessageService' do
+    service = double
+    expect(Twilio::IncomingMessageService).to receive(:new).with(params: params).and_return(service)
+    expect(service).to receive(:perform)
+    described_class.new.perform(params)
+  end
+end

From bf5e4a92ddd42b540a29c7f26bb6f23d29f3baf8 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Sat, 15 Mar 2025 14:10:12 -0700
Subject: [PATCH 03/16] chore: Limit the number of articles retrieved by widget
 (#11095)

The UI displays only six articles, and this update introduces a per_page
parameter to control the number of articles returned per API call. The
value is capped between 1 and 100, with a default fallback if a lower
number is set.

This change is necessary due to high website traffic, where excessive
payloads are returned without adding value.

**Changes:**
- Add index to status, account_id, portal_id, views.
- Add per_page param in the API.
- Update the code in the frontend to fetch only 6
---
 .../api/v1/portals/articles_controller.rb       | 14 +++++++++++---
 app/javascript/widget/api/endPoints.js          |  1 +
 app/models/article.rb                           |  4 ++++
 .../api/v1/portals/articles/index.json.jbuilder |  2 +-
 app/views/widget_tests/index.html.erb           |  3 ++-
 .../20250315202035_add_index_to_articles.rb     |  8 ++++++++
 db/schema.rb                                    |  6 +++++-
 .../api/v1/portals/articles_controller_spec.rb  | 17 +++++++++++++++++
 8 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 db/migrate/20250315202035_add_index_to_articles.rb

diff --git a/app/controllers/public/api/v1/portals/articles_controller.rb b/app/controllers/public/api/v1/portals/articles_controller.rb
index f0fcf403d..d07dbcb9d 100644
--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/app/controllers/public/api/v1/portals/articles_controller.rb
@@ -6,17 +6,25 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   layout 'portal'
 
   def index
-    @articles = @portal.articles.published
+    @articles = @portal.articles.published.includes(:category, :author)
     @articles_count = @articles.count
     search_articles
     order_by_sort_param
-    @articles = @articles.page(list_params[:page]) if list_params[:page].present?
+    limit_results
   end
 
   def show; end
 
   private
 
+  def limit_results
+    return if list_params[:per_page].blank?
+
+    per_page = [list_params[:per_page].to_i, 100].min
+    per_page = 25 if per_page < 1
+    @articles = @articles.page(list_params[:page]).per(per_page)
+  end
+
   def search_articles
     @articles = @articles.search(list_params) if list_params.present?
   end
@@ -45,7 +53,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   end
 
   def list_params
-    params.permit(:query, :locale, :sort, :status, :page)
+    params.permit(:query, :locale, :sort, :status, :page, :per_page)
   end
 
   def permitted_params
diff --git a/app/javascript/widget/api/endPoints.js b/app/javascript/widget/api/endPoints.js
index e6ada5914..b595fdf00 100755
--- a/app/javascript/widget/api/endPoints.js
+++ b/app/javascript/widget/api/endPoints.js
@@ -103,6 +103,7 @@ const getMostReadArticles = (slug, locale) => ({
     page: 1,
     sort: 'views',
     status: 1,
+    per_page: 6,
   },
 });
 
diff --git a/app/models/article.rb b/app/models/article.rb
index ace793016..48e0529a2 100644
--- a/app/models/article.rb
+++ b/app/models/article.rb
@@ -23,9 +23,13 @@
 #
 # Indexes
 #
+#  index_articles_on_account_id             (account_id)
 #  index_articles_on_associated_article_id  (associated_article_id)
 #  index_articles_on_author_id              (author_id)
+#  index_articles_on_portal_id              (portal_id)
 #  index_articles_on_slug                   (slug) UNIQUE
+#  index_articles_on_status                 (status)
+#  index_articles_on_views                  (views)
 #
 class Article < ApplicationRecord
   include PgSearch::Model
diff --git a/app/views/public/api/v1/portals/articles/index.json.jbuilder b/app/views/public/api/v1/portals/articles/index.json.jbuilder
index 1927d5a09..43a9a173a 100644
--- a/app/views/public/api/v1/portals/articles/index.json.jbuilder
+++ b/app/views/public/api/v1/portals/articles/index.json.jbuilder
@@ -4,5 +4,5 @@ json.payload do
 end
 
 json.meta do
-  json.articles_count @articles.published.size
+  json.articles_count @articles_count
 end
diff --git a/app/views/widget_tests/index.html.erb b/app/views/widget_tests/index.html.erb
index cfc084384..9471c44c2 100644
--- a/app/views/widget_tests/index.html.erb
+++ b/app/views/widget_tests/index.html.erb
@@ -1,5 +1,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
-
+<body>
+</body>
 
 <%
   user_id = 1
diff --git a/db/migrate/20250315202035_add_index_to_articles.rb b/db/migrate/20250315202035_add_index_to_articles.rb
new file mode 100644
index 000000000..8b26344de
--- /dev/null
+++ b/db/migrate/20250315202035_add_index_to_articles.rb
@@ -0,0 +1,8 @@
+class AddIndexToArticles < ActiveRecord::Migration[7.0]
+  def change
+    add_index :articles, :status unless index_exists?(:articles, :status)
+    add_index :articles, :views unless index_exists?(:articles, :views)
+    add_index :articles, :portal_id unless index_exists?(:articles, :portal_id)
+    add_index :articles, :account_id unless index_exists?(:articles, :account_id)
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index a68593c68..0818d1117 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2025_02_28_185548) do
+ActiveRecord::Schema[7.0].define(version: 2025_03_15_202035) do
   # These extensions should be enabled to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"
@@ -159,9 +159,13 @@ ActiveRecord::Schema[7.0].define(version: 2025_02_28_185548) do
     t.string "slug", null: false
     t.integer "position"
     t.string "locale", default: "en", null: false
+    t.index ["account_id"], name: "index_articles_on_account_id"
     t.index ["associated_article_id"], name: "index_articles_on_associated_article_id"
     t.index ["author_id"], name: "index_articles_on_author_id"
+    t.index ["portal_id"], name: "index_articles_on_portal_id"
     t.index ["slug"], name: "index_articles_on_slug", unique: true
+    t.index ["status"], name: "index_articles_on_status"
+    t.index ["views"], name: "index_articles_on_views"
   end
 
   create_table "attachments", id: :serial, force: :cascade do |t|
diff --git a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
index 249d1e78a..08c5206c1 100644
--- a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
+++ b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
@@ -58,6 +58,23 @@ RSpec.describe 'Public Articles API', type: :request do
       expect(response_data[1][:views]).to eq(1)
       expect(response_data.last[:id]).to eq(article.id)
     end
+
+    it 'limits results based on per_page parameter' do
+      get "/hc/#{portal.slug}/#{category.locale}/articles.json", params: { per_page: 2 }
+
+      expect(response).to have_http_status(:success)
+      response_data = JSON.parse(response.body, symbolize_names: true)[:payload]
+      expect(response_data.length).to eq(2)
+      expect(JSON.parse(response.body, symbolize_names: true)[:meta][:articles_count]).to eq(5)
+    end
+
+    it 'uses default items per page if per_page is less than 1' do
+      get "/hc/#{portal.slug}/#{category.locale}/articles.json", params: { per_page: 0 }
+
+      expect(response).to have_http_status(:success)
+      response_data = JSON.parse(response.body, symbolize_names: true)[:payload]
+      expect(response_data.length).to eq(3)
+    end
   end
 
   describe 'GET /public/api/v1/portals/:slug/articles/:id' do

From 991b108a35c03b73af6366357b9e145be2ff9228 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Mon, 17 Mar 2025 00:17:11 -0700
Subject: [PATCH 04/16] feat: discard Twilio events when Body parameter is not
 present (#11096)

- Discard Twilio events when body parameter is not present.

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../webhooks/twilio_delivery_status_job.rb    |  1 -
 app/jobs/webhooks/twilio_events_job.rb        |  5 +-
 spec/jobs/webhooks/twilio_events_job_spec.rb  | 66 +++++++++++++++++--
 3 files changed, 64 insertions(+), 8 deletions(-)

diff --git a/app/jobs/webhooks/twilio_delivery_status_job.rb b/app/jobs/webhooks/twilio_delivery_status_job.rb
index 324a17e94..d57946b4c 100644
--- a/app/jobs/webhooks/twilio_delivery_status_job.rb
+++ b/app/jobs/webhooks/twilio_delivery_status_job.rb
@@ -2,7 +2,6 @@ class Webhooks::TwilioDeliveryStatusJob < ApplicationJob
   queue_as :low
 
   def perform(params = {})
-    # Process the Twilio delivery status webhook event in the background
     ::Twilio::DeliveryStatusService.new(params: params).perform
   end
 end
diff --git a/app/jobs/webhooks/twilio_events_job.rb b/app/jobs/webhooks/twilio_events_job.rb
index cd430a6eb..5f44d981b 100644
--- a/app/jobs/webhooks/twilio_events_job.rb
+++ b/app/jobs/webhooks/twilio_events_job.rb
@@ -2,7 +2,10 @@ class Webhooks::TwilioEventsJob < ApplicationJob
   queue_as :low
 
   def perform(params = {})
-    # Process the Twilio webhook event in the background
+    # Skip processing if Body parameter or MediaUrl0 is not present
+    # This is to skip processing delivery events being delivered to this endpoint
+    return if params[:Body].blank? && params[:MediaUrl0].blank?
+
     ::Twilio::IncomingMessageService.new(params: params).perform
   end
 end
diff --git a/spec/jobs/webhooks/twilio_events_job_spec.rb b/spec/jobs/webhooks/twilio_events_job_spec.rb
index 4eea87d6a..f42caf675 100644
--- a/spec/jobs/webhooks/twilio_events_job_spec.rb
+++ b/spec/jobs/webhooks/twilio_events_job_spec.rb
@@ -5,11 +5,11 @@ RSpec.describe Webhooks::TwilioEventsJob do
 
   let(:params) do
     {
-      'From' => '+1234567890',
-      'To' => '+0987654321',
-      'Body' => 'Test message',
-      'AccountSid' => 'AC123',
-      'SmsSid' => 'SM123'
+      From: '+1234567890',
+      To: '+0987654321',
+      Body: 'Test message',
+      AccountSid: 'AC123',
+      SmsSid: 'SM123'
     }
   end
 
@@ -23,6 +23,60 @@ RSpec.describe Webhooks::TwilioEventsJob do
     service = double
     expect(Twilio::IncomingMessageService).to receive(:new).with(params: params).and_return(service)
     expect(service).to receive(:perform)
-    described_class.new.perform(params)
+    described_class.perform_now(params)
+  end
+
+  context 'when Body parameter or MediaUrl0 is not present' do
+    let(:params_without_body) do
+      {
+        From: '+1234567890',
+        To: '+0987654321',
+        AccountSid: 'AC123',
+        SmsSid: 'SM123'
+      }
+    end
+
+    it 'does not process the event' do
+      expect(Twilio::IncomingMessageService).not_to receive(:new)
+      described_class.perform_now(params_without_body)
+    end
+  end
+
+  context 'when Body parameter is present' do
+    let(:params_with_body) do
+      {
+        From: '+1234567890',
+        To: '+0987654321',
+        Body: 'Test message',
+        AccountSid: 'AC123',
+        SmsSid: 'SM123'
+      }
+    end
+
+    it 'processes the event' do
+      service = double
+      expect(Twilio::IncomingMessageService).to receive(:new).with(params: params_with_body).and_return(service)
+      expect(service).to receive(:perform)
+      described_class.perform_now(params_with_body)
+    end
+  end
+
+  context 'when MediaUrl0 parameter is present' do
+    let(:params_with_media) do
+      {
+        From: '+1234567890',
+        To: '+0987654321',
+        MediaUrl0: 'https://example.com/media.jpg',
+        AccountSid: 'AC123',
+        SmsSid: 'SM123'
+      }
+    end
+
+    it 'processes the event' do
+      service = double
+      expect(Twilio::IncomingMessageService).to receive(:new).with(params: params_with_media).and_return(service)
+      expect(service).to receive(:perform)
+      described_class.perform_now(params_with_media)
+    end
   end
 end

From 1c42957891d0a5e5249127aaa7c0bfa156083812 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Tue, 18 Mar 2025 07:57:05 +0530
Subject: [PATCH 05/16] perf: enable active record connection pool reaper
 (#10866)

The pg_stat_activity data showed a lot of idle connections. This affects the total number of database connections available which resulted in production incidents during the weekend.

> reaping_frequency: frequency in seconds to periodically run the Reaper, which attempts to find and recover connections from dead threads, which can occur if a programmer forgets to close a connection at the end of a thread or a thread dies unexpectedly. Regardless of this setting, the Reaper will be invoked before every blocking wait. (Default nil, which means don't schedule the Reaper).

Ref: https://api.rubyonrails.org/v5.1/classes/ActiveRecord/ConnectionAdapters/ConnectionPool.html
---
 config/database.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/config/database.yml b/config/database.yml
index 5cd278f8d..0577e3ee6 100644
--- a/config/database.yml
+++ b/config/database.yml
@@ -5,6 +5,9 @@ default: &default
   port: <%= ENV.fetch('POSTGRES_PORT', '5432') %>
    # ref: https://github.com/mperham/sidekiq/issues/2985#issuecomment-531097962
   pool: <%= Sidekiq.server? ? ENV.fetch('SIDEKIQ_CONCURRENCY', 10) : ENV.fetch('RAILS_MAX_THREADS', 5) %>
+  # frequency in seconds to periodically run the Reaper, which attempts
+  # to find and recover connections from dead threads
+  reaping_frequency: <%= ENV.fetch('DB_POOL_REAPING_FREQUENCY', 30) %>
   variables:
     # we are setting this value to be close to the racktimeout value. we will iterate and reduce this value going forward
     statement_timeout: <%= ENV["POSTGRES_STATEMENT_TIMEOUT"] || "14s" %>

From 3dc7045340ecb81cfcd2cda2f87e87e33d362787 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 18 Mar 2025 09:21:56 +0530
Subject: [PATCH 06/16] fix: Dropdown for custom attributes in conversation
 sidebar hides under the list (#11099)

# Pull Request Template

## Description

This PR fixes the issue where the custom attributes type list dropdown
in the conversation sidebar gets hidden under the section.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshots
**Before**
<img width="310" alt="image"
src="https://github.com/user-attachments/assets/1aec7f08-8ca8-4868-914a-d545eab34dce"
/>


**After**
<img width="310" alt="image"
src="https://github.com/user-attachments/assets/eb9006f3-0bc1-4008-ac0d-1feeeadc139d"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../conversation/customAttributes/CustomAttributes.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 01fbe9b71..4f0cf6340 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -271,7 +271,7 @@ const evenClass = [
       ghost-class="ghost"
       handle=".drag-handle"
       item-key="key"
-      class="last:rounded-b-lg overflow-hidden"
+      class="last:rounded-b-lg"
       :class="evenClass"
       @start="dragging = true"
       @end="onDragEnd"

From bbfcdb3d428b7485e42aeedf9435b3e8c642a7f5 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 18 Mar 2025 14:01:18 +0530
Subject: [PATCH 07/16] chore: Improvements in image attachment viewer (#11040)

This PR includes improvements in image attachment/gallery viewer:

1. Added double-click zoom functionality (depreciated click to zoom)
2. Implemented scroll zoom based on cursor position
3. Increase the zoom scale
4. Improved layout and styling for better usability

Fixes
https://linear.app/chatwoot/issue/CW-4127/zoom-images-from-a-specific-location


## How Has This Been Tested?

Loom video

https://www.loom.com/share/b21e00db3bc74231a90202eb6eb2fb5a?sid=a0651bf1-0952-430b-a5a9-83bf0858e059

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../conversation/components/GalleryView.vue   | 255 ++++++++----------
 .../composables/spec/useImageZoom.spec.js     | 141 ++++++++++
 .../dashboard/composables/useImageZoom.js     | 186 +++++++++++++
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  10 +-
 5 files changed, 439 insertions(+), 155 deletions(-)
 create mode 100644 app/javascript/dashboard/composables/spec/useImageZoom.spec.js
 create mode 100644 app/javascript/dashboard/composables/useImageZoom.js

diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index f6e496ce6..5c56639f4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 
 import { useStoreGetters } from 'dashboard/composables/store';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useImageZoom } from 'dashboard/composables/useImageZoom';
 import { messageTimestamp } from 'shared/helpers/timeHelper';
 import { downloadFile } from '@chatwoot/utils';
 
@@ -26,7 +27,6 @@ const emit = defineEmits(['close']);
 const show = defineModel('show', { type: Boolean, default: false });
 
 const { t } = useI18n();
-
 const getters = useStoreGetters();
 
 const ALLOWED_FILE_TYPES = {
@@ -36,11 +36,7 @@ const ALLOWED_FILE_TYPES = {
   AUDIO: 'audio',
 };
 
-const MAX_ZOOM_LEVEL = 2;
-const MIN_ZOOM_LEVEL = 1;
-
 const isDownloading = ref(false);
-const zoomScale = ref(1);
 const activeAttachment = ref({});
 const activeFileType = ref('');
 const activeImageIndex = ref(
@@ -48,10 +44,23 @@ const activeImageIndex = ref(
     attachment => attachment.message_id === props.attachment.message_id
   ) || 0
 );
-const activeImageRotation = ref(0);
+
+const imageRef = useTemplateRef('imageRef');
+
+const {
+  imageWrapperStyle,
+  imageStyle,
+  onRotate,
+  activeImageRotation,
+  onZoom,
+  onDoubleClickZoomImage,
+  onWheelImageZoom,
+  onMouseMove,
+  onMouseLeave,
+  resetZoomAndRotation,
+} = useImageZoom(imageRef);
 
 const currentUser = computed(() => getters.getCurrentUser.value);
-
 const hasMoreThanOneAttachment = computed(
   () => props.allAttachments.length > 1
 );
@@ -65,10 +74,10 @@ const readableTime = computed(() => {
 const isImage = computed(
   () => activeFileType.value === ALLOWED_FILE_TYPES.IMAGE
 );
-const isVideo = computed(
-  () =>
-    activeFileType.value === ALLOWED_FILE_TYPES.VIDEO ||
-    activeFileType.value === ALLOWED_FILE_TYPES.IG_REEL
+const isVideo = computed(() =>
+  [ALLOWED_FILE_TYPES.VIDEO, ALLOWED_FILE_TYPES.IG_REEL].includes(
+    activeFileType.value
+  )
 );
 const isAudio = computed(
   () => activeFileType.value === ALLOWED_FILE_TYPES.AUDIO
@@ -82,9 +91,9 @@ const senderDetails = computed(() => {
     thumbnail,
     id,
   } = activeAttachment.value?.sender || props.attachment?.sender || {};
-  const currentUserID = currentUser.value?.id;
+
   return {
-    name: currentUserID === id ? 'You' : name || availableName || '',
+    name: currentUser.value?.id === id ? 'You' : name || availableName || '',
     avatar: thumbnail || avatar_url || '',
   };
 });
@@ -92,43 +101,32 @@ const senderDetails = computed(() => {
 const fileNameFromDataUrl = computed(() => {
   const { data_url: dataUrl } = activeAttachment.value;
   if (!dataUrl) return '';
-  const fileName = dataUrl?.split('/').pop();
-  return decodeURIComponent(fileName || '');
+
+  const fileName = dataUrl.split('/').pop();
+  return fileName ? decodeURIComponent(fileName) : '';
 });
 
-const imageRotationStyle = computed(() => ({
-  transform: `rotate(${activeImageRotation.value}deg) scale(${zoomScale.value})`,
-  cursor: zoomScale.value < MAX_ZOOM_LEVEL ? 'zoom-in' : 'zoom-out',
-}));
-
-const onClose = () => {
-  emit('close');
-};
+const onClose = () => emit('close');
 
 const setImageAndVideoSrc = attachment => {
   const { file_type: type } = attachment;
-  if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
-    return;
-  }
+  if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) return;
+
   activeAttachment.value = attachment;
   activeFileType.value = type;
 };
 
 const onClickChangeAttachment = (attachment, index) => {
-  if (!attachment) {
-    return;
-  }
+  if (!attachment) return;
+
   activeImageIndex.value = index;
   setImageAndVideoSrc(attachment);
-  activeImageRotation.value = 0;
-  zoomScale.value = 1;
+  resetZoomAndRotation();
 };
 
 const onClickDownload = async () => {
   const { file_type: type, data_url: url, extension } = activeAttachment.value;
-  if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
-    return;
-  }
+  if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) return;
 
   try {
     isDownloading.value = true;
@@ -140,66 +138,8 @@ const onClickDownload = async () => {
   }
 };
 
-const onRotate = type => {
-  if (!isImage.value) {
-    return;
-  }
-
-  const rotation = type === 'clockwise' ? 90 : -90;
-
-  // Reset rotation if it is 360
-  if (Math.abs(activeImageRotation.value) === 360) {
-    activeImageRotation.value = rotation;
-  } else {
-    activeImageRotation.value += rotation;
-  }
-};
-
-const onZoom = scale => {
-  if (!isImage.value) {
-    return;
-  }
-
-  const newZoomScale = zoomScale.value + scale;
-  // Check if the new zoom scale is within the allowed range
-  if (newZoomScale > MAX_ZOOM_LEVEL) {
-    // Set zoom to max but do not reset to default
-    zoomScale.value = MAX_ZOOM_LEVEL;
-    return;
-  }
-  if (newZoomScale < MIN_ZOOM_LEVEL) {
-    // Set zoom to min but do not reset to default
-    zoomScale.value = MIN_ZOOM_LEVEL;
-    return;
-  }
-  // If within bounds, update the zoom scale
-  zoomScale.value = newZoomScale;
-};
-
-const onClickZoomImage = () => {
-  // If already at max zoom, clicking should zoom out to minimum
-  if (zoomScale.value >= MAX_ZOOM_LEVEL) {
-    zoomScale.value = MIN_ZOOM_LEVEL;
-    return;
-  }
-  // Otherwise zoom in
-  onZoom(0.1);
-};
-
-const onWheelImageZoom = e => {
-  if (!isImage.value) {
-    return;
-  }
-  const scale = e.deltaY > 0 ? -0.1 : 0.1;
-  onZoom(scale);
-};
-
 const keyboardEvents = {
-  Escape: {
-    action: () => {
-      onClose();
-    },
-  },
+  Escape: { action: onClose },
   ArrowLeft: {
     action: () => {
       onClickChangeAttachment(
@@ -217,6 +157,7 @@ const keyboardEvents = {
     },
   },
 };
+
 useKeyboardEvents(keyboardEvents);
 
 onMounted(() => {
@@ -232,50 +173,46 @@ onMounted(() => {
     :on-close="onClose"
   >
     <div
-      class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
+      class="bg-n-background flex flex-col h-[inherit] w-[inherit] overflow-hidden select-none"
       @click="onClose"
     >
-      <div
-        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-white dark:bg-slate-900"
+      <header
+        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-n-background border-b border-n-weak"
         @click.stop
       >
         <div
           v-if="senderDetails"
-          class="items-center flex justify-start min-w-[15rem]"
+          class="flex items-center min-w-[15rem] shrink-0"
         >
           <Thumbnail
             v-if="senderDetails.avatar"
             :username="senderDetails.name"
             :src="senderDetails.avatar"
+            class="flex-shrink-0"
           />
-          <div
-            class="flex flex-col items-start justify-center ml-2 rtl:ml-0 rtl:mr-2"
-          >
-            <h3 class="text-base inline-block leading-[1.4] m-0 p-0 capitalize">
+          <div class="flex flex-col ml-2 rtl:ml-0 rtl:mr-2 overflow-hidden">
+            <h3 class="text-base leading-5 m-0 font-medium">
               <span
-                class="overflow-hidden text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+                class="overflow-hidden text-n-slate-12 whitespace-nowrap text-ellipsis"
               >
                 {{ senderDetails.name }}
               </span>
             </h3>
             <span
-              class="p-0 m-0 overflow-hidden text-xs text-slate-400 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+              class="text-xs text-n-slate-11 whitespace-nowrap text-ellipsis"
             >
               {{ readableTime }}
             </span>
           </div>
         </div>
+
         <div
-          class="flex items-center justify-start w-auto min-w-0 p-1 text-sm font-semibold text-slate-700 dark:text-slate-100"
+          class="flex-1 mx-2 px-2 truncate text-sm font-medium text-center text-n-slate-12"
         >
-          <span
-            v-dompurify-html="fileNameFromDataUrl"
-            class="overflow-hidden text-slate-700 dark:text-slate-100 whitespace-nowrap text-ellipsis"
-          />
+          <span v-dompurify-html="fileNameFromDataUrl" class="truncate" />
         </div>
-        <div
-          class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
-        >
+
+        <div class="flex items-center gap-2 ml-2 shrink-0">
           <NextButton
             v-if="isImage"
             icon="i-lucide-zoom-in"
@@ -314,13 +251,14 @@ onMounted(() => {
           />
           <NextButton icon="i-lucide-x" slate ghost @click="onClose" />
         </div>
-      </div>
-      <div class="flex items-center justify-center w-full h-full">
-        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
+      </header>
+
+      <main class="flex items-stretch flex-1 h-full overflow-hidden">
+        <div class="flex items-center justify-center w-16 shrink-0">
           <NextButton
             v-if="hasMoreThanOneAttachment"
             icon="i-lucide-chevron-left"
-            class="z-10 disabled:pointer-events-auto"
+            class="z-10"
             blue
             faded
             lg
@@ -333,42 +271,60 @@ onMounted(() => {
             "
           />
         </div>
-        <div class="flex flex-col items-center justify-center w-full h-full">
-          <div>
+
+        <div class="flex-1 flex items-center justify-center overflow-hidden">
+          <div
+            v-if="isImage"
+            :style="imageWrapperStyle"
+            class="flex items-center justify-center origin-center"
+            :class="{
+              // Adjust dimensions when rotated 90/270 degrees to maintain visibility
+              // and prevent image from overflowing container in different aspect ratios
+              'w-[calc(100dvh-8rem)] h-[calc(100dvw-7rem)]':
+                activeImageRotation % 180 !== 0,
+              'size-full': activeImageRotation % 180 === 0,
+            }"
+          >
             <img
-              v-if="isImage"
+              ref="imageRef"
               :key="activeAttachment.message_id"
               :src="activeAttachment.data_url"
-              class="mx-auto my-0 duration-150 ease-in-out transform modal-image skip-context-menu"
-              :style="imageRotationStyle"
-              @click.stop="onClickZoomImage"
-              @wheel.stop="onWheelImageZoom"
-            />
-            <video
-              v-if="isVideo"
-              :key="activeAttachment.message_id"
-              :src="activeAttachment.data_url"
-              controls
-              playsInline
-              class="mx-auto my-0 modal-video skip-context-menu"
+              :style="imageStyle"
+              class="max-h-full max-w-full object-contain duration-100 ease-in-out transform select-none"
               @click.stop
+              @dblclick.stop="onDoubleClickZoomImage"
+              @wheel.prevent.stop="onWheelImageZoom"
+              @mousemove="onMouseMove"
+              @mouseleave="onMouseLeave"
             />
-            <audio
-              v-if="isAudio"
-              :key="activeAttachment.message_id"
-              controls
-              class="skip-context-menu"
-              @click.stop
-            >
-              <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
-            </audio>
           </div>
+
+          <video
+            v-if="isVideo"
+            :key="activeAttachment.message_id"
+            :src="activeAttachment.data_url"
+            controls
+            playsInline
+            class="max-h-full max-w-full object-contain"
+            @click.stop
+          />
+
+          <audio
+            v-if="isAudio"
+            :key="activeAttachment.message_id"
+            controls
+            class="w-full max-w-md"
+            @click.stop
+          >
+            <source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
+          </audio>
         </div>
-        <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
+
+        <div class="flex items-center justify-center w-16 shrink-0">
           <NextButton
             v-if="hasMoreThanOneAttachment"
             icon="i-lucide-chevron-right"
-            class="z-10 disabled:pointer-events-auto"
+            class="z-10"
             blue
             faded
             lg
@@ -381,16 +337,17 @@ onMounted(() => {
             "
           />
         </div>
-      </div>
-      <div class="z-10 flex items-center justify-center w-full h-16 px-6 py-2">
+      </main>
+
+      <footer
+        class="z-10 flex items-center justify-center h-12 border-t border-n-weak"
+      >
         <div
-          class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
+          class="rounded-md flex items-center justify-center px-3 py-1 bg-n-slate-3 text-n-slate-12 text-sm font-medium"
         >
-          <span class="count">
-            {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
-          </span>
+          {{ `${activeImageIndex + 1} / ${allAttachments.length}` }}
         </div>
-      </div>
+      </footer>
     </div>
   </woot-modal>
 </template>
diff --git a/app/javascript/dashboard/composables/spec/useImageZoom.spec.js b/app/javascript/dashboard/composables/spec/useImageZoom.spec.js
new file mode 100644
index 000000000..0cd86ca00
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useImageZoom.spec.js
@@ -0,0 +1,141 @@
+import { ref } from 'vue';
+import { useImageZoom } from 'dashboard/composables/useImageZoom';
+
+describe('useImageZoom', () => {
+  let imageRef;
+
+  beforeEach(() => {
+    // Mock imageRef element with getBoundingClientRect method
+    imageRef = ref({
+      getBoundingClientRect: () => ({
+        left: 100,
+        top: 100,
+        width: 200,
+        height: 200,
+      }),
+    });
+  });
+
+  it('should initialize with default values', () => {
+    const { zoomScale, imgTransformOriginPoint, activeImageRotation } =
+      useImageZoom(imageRef);
+
+    expect(zoomScale.value).toBe(1);
+    expect(imgTransformOriginPoint.value).toBe('center center');
+    expect(activeImageRotation.value).toBe(0);
+  });
+
+  it('should update zoom scale when onZoom is called', () => {
+    const { zoomScale, onZoom } = useImageZoom(imageRef);
+
+    onZoom(0.5);
+    expect(zoomScale.value).toBe(1.5);
+
+    // Should respect max zoom level
+    onZoom(10);
+    expect(zoomScale.value).toBe(3);
+
+    // Should respect min zoom level
+    onZoom(-10);
+    expect(zoomScale.value).toBe(1);
+  });
+
+  it('should update rotation when onRotate is called', () => {
+    const { activeImageRotation, onRotate } = useImageZoom(imageRef);
+
+    onRotate('clockwise');
+    expect(activeImageRotation.value).toBe(90);
+
+    onRotate('counter-clockwise');
+    expect(activeImageRotation.value).toBe(0);
+
+    // Test full rotation reset
+    onRotate('clockwise');
+    onRotate('clockwise');
+    onRotate('clockwise');
+    onRotate('clockwise');
+    onRotate('clockwise');
+    // After 360 degrees, it should reset and add the new rotation
+    expect(activeImageRotation.value).toBe(90);
+  });
+
+  it('should reset zoom and rotation', () => {
+    const {
+      zoomScale,
+      activeImageRotation,
+      onZoom,
+      onRotate,
+      resetZoomAndRotation,
+    } = useImageZoom(imageRef);
+
+    onZoom(0.5);
+    onRotate('clockwise');
+    expect(zoomScale.value).toBe(1); // Rotation resets zoom
+    expect(activeImageRotation.value).toBe(90);
+
+    onZoom(0.5);
+    expect(zoomScale.value).toBe(1.5);
+
+    resetZoomAndRotation();
+    expect(zoomScale.value).toBe(1);
+    expect(activeImageRotation.value).toBe(0);
+  });
+
+  it('should handle double click zoom', () => {
+    const { zoomScale, onDoubleClickZoomImage } = useImageZoom(imageRef);
+
+    // Mock event
+    const event = {
+      clientX: 150,
+      clientY: 150,
+      preventDefault: vi.fn(),
+    };
+
+    onDoubleClickZoomImage(event);
+    expect(zoomScale.value).toBe(3); // Max zoom
+    expect(event.preventDefault).toHaveBeenCalled();
+
+    onDoubleClickZoomImage(event);
+    expect(zoomScale.value).toBe(1); // Min zoom
+  });
+
+  it('should handle wheel zoom', () => {
+    const { zoomScale, onWheelImageZoom } = useImageZoom(imageRef);
+
+    // Mock event
+    const event = {
+      clientX: 150,
+      clientY: 150,
+      deltaY: -10, // Zoom in
+      preventDefault: vi.fn(),
+    };
+
+    onWheelImageZoom(event);
+    expect(zoomScale.value).toBe(1.2);
+    expect(event.preventDefault).toHaveBeenCalled();
+
+    // Zoom out
+    event.deltaY = 10;
+    onWheelImageZoom(event);
+    expect(zoomScale.value).toBe(1);
+  });
+
+  it('should correctly compute zoom origin', () => {
+    const { getZoomOrigin } = useImageZoom(imageRef);
+
+    // Test center point
+    const centerOrigin = getZoomOrigin(200, 200);
+    expect(centerOrigin.x).toBeCloseTo(50);
+    expect(centerOrigin.y).toBeCloseTo(50);
+
+    // Test top-left corner
+    const topLeftOrigin = getZoomOrigin(100, 100);
+    expect(topLeftOrigin.x).toBeCloseTo(0);
+    expect(topLeftOrigin.y).toBeCloseTo(0);
+
+    // Test bottom-right corner
+    const bottomRightOrigin = getZoomOrigin(300, 300);
+    expect(bottomRightOrigin.x).toBeCloseTo(100);
+    expect(bottomRightOrigin.y).toBeCloseTo(100);
+  });
+});
diff --git a/app/javascript/dashboard/composables/useImageZoom.js b/app/javascript/dashboard/composables/useImageZoom.js
new file mode 100644
index 000000000..2a56e7ce2
--- /dev/null
+++ b/app/javascript/dashboard/composables/useImageZoom.js
@@ -0,0 +1,186 @@
+import { ref, computed } from 'vue';
+import {
+  debounce,
+  calculateCenterOffset,
+  applyRotationTransform,
+  normalizeToPercentage,
+} from '@chatwoot/utils';
+
+// Composable for images in gallery view
+export const useImageZoom = imageRef => {
+  const MAX_ZOOM_LEVEL = 3;
+  const MIN_ZOOM_LEVEL = 1;
+  const ZOOM_INCREMENT = 0.2;
+  const MOUSE_MOVE_DEBOUNCE_MS = 100;
+  const MOUSE_LEAVE_DEBOUNCE_MS = 110;
+  const DEFAULT_IMG_TRANSFORM_ORIGIN = 'center center';
+
+  const zoomScale = ref(1);
+  const imgTransformOriginPoint = ref(DEFAULT_IMG_TRANSFORM_ORIGIN);
+  const activeImageRotation = ref(0);
+
+  const imageWrapperStyle = computed(() => ({
+    transform: `rotate(${activeImageRotation.value}deg)`,
+  }));
+
+  const imageStyle = computed(() => ({
+    transform: `scale(${zoomScale.value})`,
+    cursor: zoomScale.value < MAX_ZOOM_LEVEL ? 'zoom-in' : 'zoom-out',
+    transformOrigin: `${imgTransformOriginPoint.value}`,
+  }));
+
+  // Resets the transform origin to center
+  const resetTransformOrigin = () => {
+    if (imageRef.value) {
+      imgTransformOriginPoint.value = DEFAULT_IMG_TRANSFORM_ORIGIN;
+    }
+  };
+
+  // Rotates the current image
+  const onRotate = type => {
+    if (!imageRef.value) return;
+    resetTransformOrigin();
+
+    const rotation = type === 'clockwise' ? 90 : -90;
+
+    // ensure that the value of the rotation is within the range of -360 to 360 degrees
+    activeImageRotation.value = (activeImageRotation.value + rotation) % 360;
+
+    // Reset zoom when rotating
+    zoomScale.value = 1;
+    resetTransformOrigin();
+  };
+
+  /**
+   * Calculates the appropriate transform origin point based on mouse position and image rotation
+   * Used to create a natural zoom behavior where the image zooms toward/from the cursor position
+   *
+   * @param {number} x - The client X coordinate of the mouse pointer
+   * @param {number} y - The client Y coordinate of the mouse pointer
+   * @returns {{x: number, y: number}} Object containing the transform origin coordinates as percentages
+   */
+  const getZoomOrigin = (x, y) => {
+    // Default to center
+    if (!imageRef.value) return { x: 50, y: 50 };
+
+    const rect = imageRef.value.getBoundingClientRect();
+
+    // Step 1: Calculate offset from center
+    const { relativeX, relativeY } = calculateCenterOffset(x, y, rect);
+
+    // Step 2: Apply rotation transformation
+    const { rotatedX, rotatedY } = applyRotationTransform(
+      relativeX,
+      relativeY,
+      activeImageRotation.value
+    );
+
+    // Step 3: Convert to percentage coordinates
+    return normalizeToPercentage(rotatedX, rotatedY, rect.width, rect.height);
+  };
+
+  // Handles zooming the image
+  const onZoom = (scale, x, y) => {
+    if (!imageRef.value) return;
+
+    // Calculate new scale within bounds
+    const newScale = Math.max(
+      MIN_ZOOM_LEVEL,
+      Math.min(MAX_ZOOM_LEVEL, zoomScale.value + scale)
+    );
+
+    // Skip if no change
+    if (newScale === zoomScale.value) return;
+
+    // Update transform origin based on mouse position and zoom scale is minimum
+    if (x != null && y != null && zoomScale.value === MIN_ZOOM_LEVEL) {
+      const { x: originX, y: originY } = getZoomOrigin(x, y);
+      imgTransformOriginPoint.value = `${originX}% ${originY}%`;
+    }
+
+    // Apply the new scale
+    zoomScale.value = newScale;
+  };
+
+  // Handles double-click zoom toggling
+  const onDoubleClickZoomImage = e => {
+    if (!imageRef.value) return;
+    e.preventDefault();
+
+    // Toggle between max zoom and min zoom
+    const newScale =
+      zoomScale.value >= MAX_ZOOM_LEVEL ? MIN_ZOOM_LEVEL : MAX_ZOOM_LEVEL;
+
+    // Update transform origin based on mouse position
+    const { x: originX, y: originY } = getZoomOrigin(e.clientX, e.clientY);
+    imgTransformOriginPoint.value = `${originX}% ${originY}%`;
+
+    // Apply the new scale
+    zoomScale.value = newScale;
+  };
+
+  // Handles mouse wheel zooming for images
+  const onWheelImageZoom = e => {
+    if (!imageRef.value) return;
+    e.preventDefault();
+
+    const scale = e.deltaY > 0 ? -ZOOM_INCREMENT : ZOOM_INCREMENT;
+    onZoom(scale, e.clientX, e.clientY);
+  };
+
+  /**
+   * Sets transform origin to mouse position during hover.
+   * Enables precise scroll/double-click zoom targeting by updating the
+   * transform origin to cursor position. Only active at minimum zoom level.
+   * Debounced (100ms) to improve performance during rapid mouse movement.
+   */
+  const onMouseMove = debounce(
+    e => {
+      if (!imageRef.value) return;
+      if (zoomScale.value !== MIN_ZOOM_LEVEL) return;
+
+      const { x: originX, y: originY } = getZoomOrigin(e.clientX, e.clientY);
+      imgTransformOriginPoint.value = `${originX}% ${originY}%`;
+    },
+    MOUSE_MOVE_DEBOUNCE_MS,
+    false
+  );
+
+  /**
+   * Resets transform origin to center when mouse leaves image.
+   * Ensures button-based zooming works predictably after hover ends.
+   * Uses slightly longer debounce (110ms) to avoid conflicts with onMouseMove.
+   */
+  const onMouseLeave = debounce(
+    () => {
+      if (!imageRef.value) return;
+      if (zoomScale.value !== MIN_ZOOM_LEVEL) return;
+      imgTransformOriginPoint.value = DEFAULT_IMG_TRANSFORM_ORIGIN;
+    },
+    MOUSE_LEAVE_DEBOUNCE_MS,
+    false
+  );
+
+  const resetZoomAndRotation = () => {
+    activeImageRotation.value = 0;
+    zoomScale.value = 1;
+    resetTransformOrigin();
+  };
+
+  return {
+    zoomScale,
+    imgTransformOriginPoint,
+    activeImageRotation,
+    imageWrapperStyle,
+    imageStyle,
+    getZoomOrigin,
+    resetTransformOrigin,
+    onRotate,
+    onZoom,
+    onDoubleClickZoomImage,
+    onWheelImageZoom,
+    onMouseMove,
+    onMouseLeave,
+    resetZoomAndRotation,
+  };
+};
diff --git a/package.json b/package.json
index a01e45d82..8264fb5e7 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@breezystack/lamejs": "^1.2.7",
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
-    "@chatwoot/utils": "^0.0.40",
+    "@chatwoot/utils": "^0.0.41",
     "@formkit/core": "^1.6.7",
     "@formkit/vue": "^1.6.7",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index feda03e04..fdeeac9fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,8 +23,8 @@ importers:
         specifier: 1.1.1-next
         version: 1.1.1-next
       '@chatwoot/utils':
-        specifier: ^0.0.40
-        version: 0.0.40
+        specifier: ^0.0.41
+        version: 0.0.41
       '@formkit/core':
         specifier: ^1.6.7
         version: 1.6.7
@@ -403,8 +403,8 @@ packages:
   '@chatwoot/prosemirror-schema@1.1.1-next':
     resolution: {integrity: sha512-/M2qZ+ZF7GlQNt1riwVP499fvp3hxSqd5iy8hxyF9pkj9qQ+OKYn5JK+v3qwwqQY3IxhmNOn1Lp6tm7vstrd9Q==}
 
-  '@chatwoot/utils@0.0.40':
-    resolution: {integrity: sha512-Rg5wwQXi4mnEiv8scw66QVIgal9F1di+UDg4hHCw37zLXrqExQQ9CL7jDvO+ddvzEl6TUXw91Lu5L/qVlEyvdg==}
+  '@chatwoot/utils@0.0.41':
+    resolution: {integrity: sha512-f0D+XArVYbc9m9M7KZpCaVJ+EUVzobX+D9P5Vt/h2jUipg706GoBhGwsP8kjfWhUdNdcS+H+OB4ZCKGF1NIkTQ==}
     engines: {node: '>=10'}
 
   '@codemirror/commands@6.7.0':
@@ -5244,7 +5244,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.40':
+  '@chatwoot/utils@0.0.41':
     dependencies:
       date-fns: 2.30.0
 

From f67b20b203aba42805fdaab01378b8399ec6bd38 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Tue, 18 Mar 2025 15:08:28 +0530
Subject: [PATCH 08/16] feat: remove sentry log and allow same timestamp
 (#11100)

---
 .../dashboard/store/modules/conversations/index.js  | 13 -------------
 .../modules/specs/conversations/mutations.spec.js   |  4 ++--
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js
index 8715d24ec..ca0759320 100644
--- a/app/javascript/dashboard/store/modules/conversations/index.js
+++ b/app/javascript/dashboard/store/modules/conversations/index.js
@@ -6,7 +6,6 @@ import { MESSAGE_STATUS } from 'shared/constants/messages';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from '../../../../shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
-import * as Sentry from '@sentry/vue';
 
 const state = {
   allConversations: [],
@@ -217,18 +216,6 @@ export const mutations = {
 
       // ignore out of order events
       if (conversation.updated_at < selectedConversation.updated_at) {
-        Sentry.withScope(scope => {
-          scope.setContext('incoming', conversation);
-          scope.setContext('stored', selectedConversation);
-          scope.setContext('incoming_meta', conversation.meta);
-          scope.setContext('stored_meta', selectedConversation.meta);
-          Sentry.captureMessage('Conversation update mismatch');
-        });
-
-        return;
-      }
-
-      if (conversation.updated_at === selectedConversation.updated_at) {
         return;
       }
 
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
index 081eb9f79..091dc3daa 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
@@ -778,7 +778,7 @@ describe('#mutations', () => {
       expect(state.allConversations[0].status).toEqual('open');
     });
 
-    it('should ignore updates with same timestamps', () => {
+    it('should allow updates with same timestamps', () => {
       const state = {
         allConversations: [
           {
@@ -796,7 +796,7 @@ describe('#mutations', () => {
       };
 
       mutations[types.UPDATE_CONVERSATION](state, conversation);
-      expect(state.allConversations[0].status).toEqual('open');
+      expect(state.allConversations[0].status).toEqual('resolved');
     });
   });
 

From 8291c84cc3a201d495de8ef770f645b496d446cd Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:09:10 +0530
Subject: [PATCH 09/16] feat: Use new compose conversation in conversation
 sidebar (#11085)

# Pull Request Template

## Description

This PR includes the implementation of the new Compose Conversation form
in the conversation sidebar, replacing the old one.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/4312e20a63714eb892d7b5cd0dcda893?sid=9bd5254e-2b1f-462c-b2c1-a3048a111683

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../NewConversation/ComposeConversation.vue   |  79 ++-
 .../components/ActionButtons.vue              |  16 +
 .../components/ComposeNewConversationForm.vue |   2 +-
 .../components/ContactSelector.vue            |   4 +-
 .../components/InboxSelector.vue              |   2 +-
 .../components/WhatsAppOptions.vue            |   2 +-
 .../components/WhatsappTemplateParser.vue     |   2 +-
 .../components/widgets/InboxDropdownItem.vue  |  76 ---
 .../conversation/contact/ContactInfo.vue      |  60 +-
 .../conversation/contact/ConversationForm.vue | 638 ------------------
 .../conversation/contact/NewConversation.vue  |  71 --
 .../contact/WhatsappTemplates.vue             |  54 --
 12 files changed, 113 insertions(+), 893 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue

diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
index 93b0baa3d..610d11dab 100644
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -27,8 +27,14 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  isModal: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const emit = defineEmits(['close']);
+
 const store = useStore();
 const { t } = useI18n();
 
@@ -61,6 +67,8 @@ const directUploadsEnabled = computed(
 const activeContact = computed(() => contactById.value(props.contactId));
 
 const composePopoverClass = computed(() => {
+  if (props.isModal) return '';
+
   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]';
@@ -131,9 +139,14 @@ const clearSelectedContact = () => {
 
 const closeCompose = () => {
   showComposeNewConversation.value = false;
-  selectedContact.value = null;
+  if (!props.contactId) {
+    // If contactId is passed as prop
+    // Then don't allow to remove the selected contact
+    selectedContact.value = null;
+  }
   targetInbox.value = null;
   resetContacts();
+  emit('close');
 };
 
 const createConversation = async ({ payload, isFromWhatsApp }) => {
@@ -182,7 +195,15 @@ watch(
 );
 
 const handleClickOutside = () => {
+  if (!showComposeNewConversation.value) return;
+
   showComposeNewConversation.value = false;
+  emit('close');
+};
+
+const onModalBackdropClick = () => {
+  if (!props.isModal) return;
+  handleClickOutside();
 };
 
 onMounted(() => resetContacts());
@@ -205,7 +226,7 @@ useKeyboardEvents(keyboardEvents);
     v-on-click-outside="[
       handleClickOutside,
       // Fixed and edge case https://github.com/chatwoot/chatwoot/issues/10785
-      // This will prevent closing the compose conversation modal when the editor Create link popup is open.
+      // This will prevent closing the compose conversation modal when the editor Create link popup is open
       { ignore: ['div.ProseMirror-prompt'] },
     ]"
     class="relative"
@@ -218,29 +239,37 @@ useKeyboardEvents(keyboardEvents);
       :is-open="showComposeNewConversation"
       :toggle="toggle"
     />
-    <ComposeNewConversationForm
+    <div
       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"
-      :message-signature="messageSignature"
-      :send-with-signature="sendWithSignature"
-      @search-contacts="onContactSearch"
-      @reset-contact-search="resetContacts"
-      @update-selected-contact="handleSelectedContact"
-      @update-target-inbox="handleTargetInbox"
-      @clear-selected-contact="clearSelectedContact"
-      @create-conversation="createConversation"
-      @discard="closeCompose"
-    />
+      :class="{
+        'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
+          isModal,
+      }"
+      @click.self="onModalBackdropClick"
+    >
+      <ComposeNewConversationForm
+        :class="[{ 'mt-2': !isModal }, composePopoverClass]"
+        :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"
+        :message-signature="messageSignature"
+        :send-with-signature="sendWithSignature"
+        @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>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
index 8d421a5aa..90cb67c4f 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -232,4 +232,20 @@ useKeyboardEvents(keyboardEvents);
 .emoji-dialog::before {
   @apply hidden;
 }
+
+// The <label> tag inside the file-upload component overlaps the button due to its position.
+// This causes the button's hover state to not work, as it's positioned below the label (z-index).
+// Increasing the button's z-index would break the file upload functionality.
+// This style ensures the label remains clickable while preserving the button's hover effect.
+:deep() {
+  .file-uploads.file-uploads-html5 {
+    label {
+      @apply hover:cursor-pointer;
+    }
+
+    &:hover button {
+      @apply dark:bg-n-solid-2 bg-n-alpha-2;
+    }
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
index 41ff88976..4d44b4d42 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -265,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
 
 <template>
   <div
-    class="w-[42rem] 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"
+    class="w-[42rem] 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"
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
index 7ff0a2efa..895928f77 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue
@@ -113,7 +113,8 @@ const handleInput = value => {
       </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"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 min-h-7 min-w-0"
+        :class="!contactId ? 'ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1' : 'px-3'"
       >
         <span class="text-sm truncate text-n-slate-12">
           {{
@@ -123,6 +124,7 @@ const handleInput = value => {
           }}
         </span>
         <Button
+          v-if="!contactId"
           variant="ghost"
           icon="i-lucide-x"
           color="slate"
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
index 4e1b0f510..7794d5bdd 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
@@ -52,7 +52,7 @@ const targetInboxLabel = computed(() => {
     </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"
+      class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 h-7 min-w-0"
     >
       <span class="text-sm truncate text-n-slate-12">
         {{ targetInboxLabel }}
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
index 8d32509b8..b8fd1429a 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
@@ -84,7 +84,7 @@ const handleSendMessage = template => {
     />
     <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"
+      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-[21.875rem] 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" />
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
index 85f69a665..f3b8a26da 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
@@ -106,7 +106,7 @@ onMounted(() => {
 
 <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"
+    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
   >
     <span class="text-sm text-n-slate-12">
       {{
diff --git a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue b/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
deleted file mode 100644
index e2a9a9d46..000000000
--- a/app/javascript/dashboard/components/widgets/InboxDropdownItem.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-import {
-  getInboxClassByType,
-  getReadableInboxByType,
-} from 'dashboard/helper/inbox';
-
-export default {
-  components: {},
-  props: {
-    name: {
-      type: String,
-      default: '',
-    },
-    inboxIdentifier: {
-      type: String,
-      default: '',
-    },
-    channelType: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    computedInboxIcon() {
-      if (!this.channelType) return 'chat';
-      const classByType = getInboxClassByType(
-        this.channelType,
-        this.inboxIdentifier
-      );
-      return classByType;
-    },
-    computedInboxType() {
-      if (!this.channelType) return 'chat';
-      const classByType = getReadableInboxByType(
-        this.channelType,
-        this.inboxIdentifier
-      );
-      return classByType;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex items-center h-[2.375rem] min-w-0 py-0 px-1">
-    <span
-      class="inline-flex rounded mr-1 rtl:ml-1 rtl:mr-0 bg-slate-25 dark:bg-slate-700 p-0.5 items-center flex-shrink-0 justify-center w-6 h-6"
-    >
-      <fluent-icon
-        :icon="computedInboxIcon"
-        size="14"
-        class="text-slate-800 dark:text-slate-200"
-      />
-    </span>
-    <div class="flex flex-col w-full min-w-0 ml-1 mr-1">
-      <h5 class="option__title">
-        {{ name }}
-      </h5>
-      <p
-        class="option__body overflow-hidden whitespace-nowrap text-ellipsis"
-        :title="inboxIdentifier"
-      >
-        {{ inboxIdentifier || computedInboxType }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.option__body {
-  @apply inline-block text-slate-600 dark:text-slate-200 leading-[1.3] min-w-0 m-0;
-}
-.option__title {
-  @apply leading-[1.1] text-xs m-0 text-slate-800 dark:text-slate-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 0de55a92e..b423ecfc6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -7,8 +7,8 @@ import ContactInfoRow from './ContactInfoRow.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from './SocialIcons.vue';
 import EditContact from './EditContact.vue';
-import NewConversation from './NewConversation.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
+import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
@@ -25,8 +25,8 @@ export default {
     ContactInfoRow,
     EditContact,
     Thumbnail,
+    ComposeConversation,
     SocialIcons,
-    NewConversation,
     ContactMergeModal,
   },
   props: {
@@ -49,7 +49,6 @@ export default {
   data() {
     return {
       showEditModal: false,
-      showConversationModal: false,
       showMergeModal: false,
       showDeleteModal: false,
     };
@@ -92,17 +91,29 @@ export default {
       return ` ${this.contact.name}?`;
     },
   },
+  watch: {
+    'contact.id': {
+      handler(id) {
+        this.$store.dispatch('contacts/fetchContactableInbox', id);
+      },
+      immediate: true,
+    },
+  },
   methods: {
     dynamicTime,
     toggleEditModal() {
       this.showEditModal = !this.showEditModal;
     },
-    toggleConversationModal() {
-      this.showConversationModal = !this.showConversationModal;
-      emitter.emit(
-        BUS_EVENTS.NEW_CONVERSATION_MODAL,
-        this.showConversationModal
-      );
+    openComposeConversationModal(toggleFn) {
+      toggleFn();
+      // Flag to prevent triggering drag n drop,
+      // When compose modal is active
+      emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
+    },
+    closeComposeConversationModal() {
+      // Flag to enable drag n drop,
+      // When compose modal is closed
+      emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
     },
     toggleDeleteModal() {
       this.showDeleteModal = !this.showDeleteModal;
@@ -113,7 +124,6 @@ export default {
     },
     closeDelete() {
       this.showDeleteModal = false;
-      this.showConversationModal = false;
       this.showEditModal = false;
     },
     findCountryFlag(countryCode, cityAndCountry) {
@@ -250,14 +260,22 @@ export default {
         </div>
       </div>
       <div class="flex items-center w-full mt-0.5 gap-2">
-        <NextButton
-          v-tooltip.top-end="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          icon="i-ph-chat-circle-dots"
-          slate
-          faded
-          sm
-          @click="toggleConversationModal"
-        />
+        <ComposeConversation
+          :contact-id="String(contact.id)"
+          is-modal
+          @close="closeComposeConversationModal"
+        >
+          <template #trigger="{ toggle }">
+            <NextButton
+              v-tooltip.top-end="$t('CONTACT_PANEL.NEW_MESSAGE')"
+              icon="i-ph-chat-circle-dots"
+              slate
+              faded
+              sm
+              @click="openComposeConversationModal(toggle)"
+            />
+          </template>
+        </ComposeConversation>
         <NextButton
           v-tooltip.top-end="$t('EDIT_CONTACT.BUTTON_LABEL')"
           icon="i-ph-pencil-simple"
@@ -293,12 +311,6 @@ export default {
         :contact="contact"
         @cancel="toggleEditModal"
       />
-      <NewConversation
-        v-if="contact.id"
-        :show="showConversationModal"
-        :contact="contact"
-        @cancel="toggleConversationModal"
-      />
       <ContactMergeModal
         v-if="showMergeModal"
         :primary-contact="contact"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
deleted file mode 100644
index 9b5614e8a..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ /dev/null
@@ -1,638 +0,0 @@
-<script>
-import { ref } from 'vue';
-// constants & helpers
-import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
-import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
-import { getInboxSource, INBOX_TYPES } from 'dashboard/helper/inbox';
-
-// store
-import { mapGetters } from 'vuex';
-
-// composables
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useAlert } from 'dashboard/composables';
-import { required, requiredIf } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-
-// mixins
-import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
-import inboxMixin from 'shared/mixins/inboxMixin';
-
-// components
-import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview.vue';
-import CannedResponse from 'dashboard/components/widgets/conversation/CannedResponse.vue';
-import InboxDropdownItem from 'dashboard/components/widgets/InboxDropdownItem.vue';
-import MessageSignatureMissingAlert from 'dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue';
-import ReplyEmailHead from 'dashboard/components/widgets/conversation/ReplyEmailHead.vue';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import FileUpload from 'vue-upload-component';
-import WhatsappTemplates from './WhatsappTemplates.vue';
-
-import {
-  appendSignature,
-  removeSignature,
-} from 'dashboard/helper/editorHelper';
-
-export default {
-  components: {
-    Thumbnail,
-    WootMessageEditor,
-    ReplyEmailHead,
-    CannedResponse,
-    WhatsappTemplates,
-    InboxDropdownItem,
-    FileUpload,
-    AttachmentPreview,
-    MessageSignatureMissingAlert,
-  },
-  mixins: [inboxMixin, fileUploadMixin],
-  props: {
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-    onSubmit: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  emits: ['cancel', 'success'],
-  setup() {
-    const { fetchSignatureFlagFromUISettings, setSignatureFlagForInbox } =
-      useUISettings();
-    const v$ = useVuelidate();
-    const uploadAttachment = ref(false);
-
-    return {
-      fetchSignatureFlagFromUISettings,
-      setSignatureFlagForInbox,
-      v$,
-      uploadAttachment,
-    };
-  },
-  data() {
-    return {
-      name: '',
-      subject: '',
-      message: '',
-      showCannedResponseMenu: false,
-      cannedResponseSearchKey: '',
-      bccEmails: '',
-      ccEmails: '',
-      targetInbox: {},
-      whatsappTemplateSelected: false,
-      attachedFiles: [],
-    };
-  },
-  validations() {
-    return {
-      subject: {
-        required: requiredIf(this.isAnEmailInbox),
-      },
-      message: {
-        required,
-      },
-      targetInbox: {
-        required,
-      },
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-      conversationsUiFlags: 'contactConversations/getUIFlags',
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      messageSignature: 'getMessageSignature',
-      inboxesList: 'inboxes/getInboxes',
-    }),
-    sendWithSignature() {
-      return this.fetchSignatureFlagFromUISettings(this.channelType);
-    },
-    signatureToApply() {
-      return this.messageSignature;
-    },
-    newMessagePayload() {
-      const payload = {
-        inboxId: this.targetInbox.id,
-        sourceId: this.targetInbox.sourceId,
-        contactId: this.contact.id,
-        message: { content: this.message },
-        mailSubject: this.subject,
-        assigneeId: this.currentUser.id,
-      };
-
-      if (this.attachedFiles && this.attachedFiles.length) {
-        payload.files = [];
-        this.setAttachmentPayload(payload);
-      }
-
-      if (this.ccEmails) {
-        payload.message.cc_emails = this.ccEmails;
-      }
-
-      if (this.bccEmails) {
-        payload.message.bcc_emails = this.bccEmails;
-      }
-      return payload;
-    },
-    selectedInbox: {
-      get() {
-        const inboxList = this.contact.contact_inboxes || [];
-        const selectedContactInbox = inboxList.find(
-          inbox => inbox.inbox?.id && inbox.inbox?.id === this.targetInbox?.id
-        );
-
-        if (!selectedContactInbox) {
-          return { inbox: {} };
-        }
-
-        // Find the matching inbox from the inboxesList
-        const matchingInbox =
-          this.inboxesList.find(
-            item => item.id === selectedContactInbox.inbox?.id
-          ) || {};
-
-        // The entire inbox payload is not available in this object, so we need to patch it from the store
-        return {
-          ...selectedContactInbox,
-          inbox: {
-            ...matchingInbox,
-            ...selectedContactInbox.inbox,
-            sourceId: selectedContactInbox.source_id || matchingInbox.sourceId,
-          },
-        };
-      },
-      set(value) {
-        this.targetInbox = value.inbox;
-      },
-    },
-    showNoInboxAlert() {
-      if (!this.contact.contact_inboxes) {
-        return false;
-      }
-      return this.inboxes.length === 0 && !this.uiFlags.isFetchingInboxes;
-    },
-    isSignatureEnabledForInbox() {
-      return this.isAnEmailInbox && this.sendWithSignature;
-    },
-    signatureToggleTooltip() {
-      return this.sendWithSignature
-        ? this.$t('CONVERSATION.FOOTER.DISABLE_SIGN_TOOLTIP')
-        : this.$t('CONVERSATION.FOOTER.ENABLE_SIGN_TOOLTIP');
-    },
-
-    inboxes() {
-      const inboxList = this.contact.contact_inboxes || [];
-      if (!inboxList.length) return [];
-
-      return inboxList.map(inbox => {
-        const matchingInbox =
-          this.inboxesList.find(item => item.id === inbox.inbox?.id) || {};
-
-        // Create merged object with a clear property order
-        return {
-          ...matchingInbox,
-          ...inbox.inbox,
-          sourceId: inbox.source_id,
-        };
-      });
-    },
-    isAnEmailInbox() {
-      return (
-        this.selectedInbox &&
-        this.selectedInbox.inbox.channel_type === INBOX_TYPES.EMAIL
-      );
-    },
-    isAnWebWidgetInbox() {
-      return (
-        this.selectedInbox &&
-        this.selectedInbox.inbox.channel_type === INBOX_TYPES.WEB
-      );
-    },
-    isEmailOrWebWidgetInbox() {
-      return this.isAnEmailInbox || this.isAnWebWidgetInbox;
-    },
-    hasWhatsappTemplates() {
-      return !!this.selectedInbox.inbox?.message_templates;
-    },
-    hasAttachments() {
-      return this.attachedFiles.length;
-    },
-    inbox() {
-      return this.targetInbox;
-    },
-    allowedFileTypes() {
-      return ALLOWED_FILE_TYPES;
-    },
-  },
-  watch: {
-    message(value) {
-      this.hasSlashCommand = value[0] === '/' && !this.isEmailOrWebWidgetInbox;
-      const hasNextWord = value.includes(' ');
-      const isShortCodeActive = this.hasSlashCommand && !hasNextWord;
-      if (isShortCodeActive) {
-        this.cannedResponseSearchKey = value.substring(1);
-        this.showCannedResponseMenu = true;
-      } else {
-        this.cannedResponseSearchKey = '';
-        this.showCannedResponseMenu = false;
-      }
-    },
-    targetInbox() {
-      this.setSignature();
-    },
-  },
-  mounted() {
-    this.setSignature();
-  },
-  methods: {
-    setSignature() {
-      if (this.messageSignature) {
-        if (this.isSignatureEnabledForInbox) {
-          this.message = appendSignature(this.message, this.signatureToApply);
-        } else {
-          this.message = removeSignature(this.message, this.signatureToApply);
-        }
-      }
-    },
-    setAttachmentPayload(payload) {
-      this.attachedFiles.forEach(attachment => {
-        if (this.globalConfig.directUploadsEnabled) {
-          payload.files.push(attachment.blobSignedId);
-        } else {
-          payload.files.push(attachment.resource.file);
-        }
-      });
-    },
-    attachFile({ blob, file }) {
-      const reader = new FileReader();
-      reader.readAsDataURL(file.file);
-      reader.onloadend = () => {
-        this.attachedFiles.push({
-          currentChatId: this.contact.id,
-          resource: blob || file,
-          isPrivate: this.isPrivate,
-          thumb: reader.result,
-          blobSignedId: blob ? blob.signed_id : undefined,
-        });
-      };
-    },
-    removeAttachment(attachments) {
-      this.attachedFiles = attachments;
-    },
-    onCancel() {
-      this.$emit('cancel');
-    },
-    onSuccess() {
-      this.$emit('success');
-    },
-    replaceTextWithCannedResponse(message) {
-      this.message = message;
-    },
-    toggleCannedMenu(value) {
-      this.showCannedMenu = value;
-    },
-    prepareWhatsAppMessagePayload({ message: content, templateParams }) {
-      const payload = {
-        inboxId: this.targetInbox.id,
-        sourceId: this.targetInbox.sourceId,
-        contactId: this.contact.id,
-        message: { content, template_params: templateParams },
-        assigneeId: this.currentUser.id,
-      };
-      return payload;
-    },
-    onFormSubmit() {
-      const isFromWhatsApp = false;
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      this.createConversation({
-        payload: this.newMessagePayload,
-        isFromWhatsApp,
-      });
-    },
-    async createConversation({ payload, isFromWhatsApp }) {
-      try {
-        const data = await this.onSubmit(payload, isFromWhatsApp);
-        const action = {
-          type: 'link',
-          to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
-          message: this.$t('NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
-        };
-        this.onSuccess();
-        useAlert(this.$t('NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
-      } catch (error) {
-        if (error instanceof ExceptionWithMessage) {
-          useAlert(error.data);
-        } else {
-          useAlert(this.$t('NEW_CONVERSATION.FORM.ERROR_MESSAGE'));
-        }
-      }
-    },
-
-    toggleWaTemplate(val) {
-      this.whatsappTemplateSelected = val;
-    },
-    async onSendWhatsAppReply(messagePayload) {
-      const isFromWhatsApp = true;
-      const payload = this.prepareWhatsAppMessagePayload(messagePayload);
-      await this.createConversation({ payload, isFromWhatsApp });
-    },
-    inboxReadableIdentifier(inbox) {
-      return `${inbox.name} (${inbox.channel_type})`;
-    },
-    computedInboxSource(inbox) {
-      if (!inbox.channel_type) return '';
-      const classByType = getInboxSource(
-        inbox.channel_type,
-        inbox.phone_number,
-        inbox
-      );
-      return classByType;
-    },
-    toggleMessageSignature() {
-      this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
-      this.setSignature();
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable vue/prefer-true-attribute-shorthand -->
-<template>
-  <form class="w-full conversation--form" @submit.prevent="onFormSubmit">
-    <div
-      v-if="showNoInboxAlert"
-      class="relative mx-0 mt-0 mb-2.5 p-2 rounded-none text-sm border border-solid border-yellow-500 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 text-slate-700 dark:text-yellow-400"
-    >
-      <p class="mb-0">
-        {{ $t('NEW_CONVERSATION.NO_INBOX') }}
-      </p>
-    </div>
-    <div v-else>
-      <div class="flex flex-row gap-2">
-        <div class="w-[50%]">
-          <label>
-            {{ $t('NEW_CONVERSATION.FORM.INBOX.LABEL') }}
-          </label>
-          <div
-            class="multiselect-wrap--small"
-            :class="{ 'has-multi-select-error': v$.targetInbox.$error }"
-          >
-            <multiselect
-              v-model="targetInbox"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              selected-label=""
-              select-label=""
-              class="reset-base"
-              deselect-label=""
-              :max-height="160"
-              close-on-select
-              :options="[...inboxes]"
-            >
-              <template #singleLabel="{ option }">
-                <InboxDropdownItem
-                  v-if="option.name"
-                  :name="option.name"
-                  :inbox-identifier="computedInboxSource(option)"
-                  :channel-type="option.channel_type"
-                />
-                <span v-else>
-                  {{ $t('NEW_CONVERSATION.FORM.INBOX.PLACEHOLDER') }}
-                </span>
-              </template>
-              <template #option="{ option }">
-                <InboxDropdownItem
-                  :name="option.name"
-                  :inbox-identifier="computedInboxSource(option)"
-                  :channel-type="option.channel_type"
-                />
-              </template>
-            </multiselect>
-          </div>
-          <label :class="{ error: v$.targetInbox.$error }">
-            <span v-if="v$.targetInbox.$error" class="message">
-              {{ $t('NEW_CONVERSATION.FORM.INBOX.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <div class="w-[50%]">
-          <label>
-            {{ $t('NEW_CONVERSATION.FORM.TO.LABEL') }}
-            <div
-              class="flex items-center h-[2.4735rem] rounded-sm py-1 px-2 bg-slate-25 dark:bg-slate-900 border border-solid border-slate-75 dark:border-slate-600"
-            >
-              <Thumbnail
-                :src="contact.thumbnail"
-                size="24px"
-                :username="contact.name"
-                :status="contact.availability_status"
-              />
-              <h4
-                class="m-0 ml-2 mr-2 text-sm text-slate-700 dark:text-slate-100"
-              >
-                {{ contact.name }}
-              </h4>
-            </div>
-          </label>
-        </div>
-      </div>
-      <div v-if="isAnEmailInbox" class="w-full">
-        <div class="w-full">
-          <label :class="{ error: v$.subject.$error }">
-            {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
-            <input
-              v-model="subject"
-              type="text"
-              :placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
-              @input="v$.subject.$touch"
-            />
-            <span v-if="v$.subject.$error" class="message">
-              {{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
-            </span>
-          </label>
-        </div>
-      </div>
-      <div class="w-full">
-        <div class="w-full">
-          <div class="relative">
-            <CannedResponse
-              v-if="showCannedResponseMenu && hasSlashCommand"
-              :search-key="cannedResponseSearchKey"
-              @replace="replaceTextWithCannedResponse"
-            />
-          </div>
-          <div v-if="isEmailOrWebWidgetInbox">
-            <label>
-              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
-            </label>
-            <ReplyEmailHead
-              v-if="isAnEmailInbox"
-              v-model:cc-emails="ccEmails"
-              v-model:bcc-emails="bccEmails"
-            />
-            <div class="editor-wrap">
-              <WootMessageEditor
-                v-model="message"
-                class="message-editor"
-                :class="{ editor_warning: v$.message.$error }"
-                enable-variables
-                :signature="signatureToApply"
-                allow-signature
-                :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
-                @toggle-canned-menu="toggleCannedMenu"
-                @blur="v$.message.$touch"
-              >
-                <template #footer>
-                  <MessageSignatureMissingAlert
-                    v-if="isSignatureEnabledForInbox && !messageSignature"
-                    class="!mx-0 mb-1"
-                  />
-                  <div v-if="isAnEmailInbox" class="mt-px mb-3">
-                    <woot-button
-                      v-tooltip.top-end="signatureToggleTooltip"
-                      icon="signature"
-                      color-scheme="secondary"
-                      variant="smooth"
-                      size="small"
-                      :title="signatureToggleTooltip"
-                      @click.prevent="toggleMessageSignature"
-                    />
-                  </div>
-                </template>
-              </WootMessageEditor>
-              <span v-if="v$.message.$error" class="editor-warning__message">
-                {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
-              </span>
-            </div>
-          </div>
-          <WhatsappTemplates
-            v-else-if="hasWhatsappTemplates"
-            :inbox-id="selectedInbox.inbox.id"
-            @on-select-template="toggleWaTemplate"
-            @on-send="onSendWhatsAppReply"
-          />
-          <label v-else :class="{ error: v$.message.$error }">
-            {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
-            <textarea
-              v-model="message"
-              class="min-h-[5rem]"
-              type="text"
-              :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
-              @input="v$.message.$touch"
-            />
-            <span v-if="v$.message.$error" class="message">
-              {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
-            </span>
-          </label>
-          <div v-if="isEmailOrWebWidgetInbox" class="flex flex-col">
-            <FileUpload
-              ref="uploadAttachment"
-              input-id="newConversationAttachment"
-              :size="4096 * 4096"
-              :accept="allowedFileTypes"
-              multiple
-              :drop="true"
-              :drop-directory="false"
-              :data="{
-                direct_upload_url: '/rails/active_storage/direct_uploads',
-                direct_upload: true,
-              }"
-              @input-file="onFileUpload"
-            >
-              <woot-button
-                class-names="button--upload"
-                icon="attach"
-                emoji="📎"
-                color-scheme="secondary"
-                variant="smooth"
-                size="small"
-              >
-                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.SELECT') }}
-              </woot-button>
-              <span
-                class="text-xs font-medium text-slate-500 ltr:ml-1 rtl:mr-1 dark:text-slate-400"
-              >
-                {{ $t('NEW_CONVERSATION.FORM.ATTACHMENTS.HELP_TEXT') }}
-              </span>
-            </FileUpload>
-            <div
-              v-if="hasAttachments"
-              class="max-h-20 overflow-y-auto mb-4 mt-1.5"
-            >
-              <AttachmentPreview
-                class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
-                :attachments="attachedFiles"
-                @remove-attachment="removeAttachment"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-if="!hasWhatsappTemplates"
-      class="flex flex-row justify-end w-full gap-2 px-0 py-2"
-    >
-      <button class="button clear" @click.prevent="onCancel">
-        {{ $t('NEW_CONVERSATION.FORM.CANCEL') }}
-      </button>
-      <woot-button type="submit" :is-loading="conversationsUiFlags.isCreating">
-        {{ $t('NEW_CONVERSATION.FORM.SUBMIT') }}
-      </woot-button>
-    </div>
-
-    <transition v-if="isEmailOrWebWidgetInbox" name="modal-fade">
-      <div
-        v-show="uploadAttachment && uploadAttachment.dropActive"
-        class="absolute top-0 bottom-0 left-0 right-0 z-30 flex flex-col items-center justify-center w-full h-full gap-2 bg-white/80 dark:bg-slate-700/80"
-      >
-        <fluent-icon icon="cloud-backup" size="40" />
-        <h4 class="text-2xl break-words text-slate-600 dark:text-slate-200">
-          {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
-        </h4>
-      </div>
-    </transition>
-  </form>
-</template>
-
-<style scoped lang="scss">
-.conversation--form {
-  @apply pt-4 px-8 pb-8;
-}
-
-.message-editor {
-  @apply px-3;
-
-  ::v-deep {
-    .ProseMirror-menubar {
-      @apply rounded-tl-[4px];
-    }
-  }
-}
-
-.file-uploads {
-  @apply text-start;
-}
-
-.multiselect-wrap--small.has-multi-select-error {
-  ::v-deep {
-    .multiselect__tags {
-      @apply border-red-500;
-    }
-  }
-}
-
-::v-deep {
-  .mention--box {
-    @apply left-0 m-auto right-0 top-auto h-fit;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
deleted file mode 100644
index 728d4954b..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/NewConversation.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script>
-import ConversationForm from './ConversationForm.vue';
-
-export default {
-  components: {
-    ConversationForm,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    contact: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['cancel', 'update:show'],
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-  },
-  watch: {
-    'contact.id'(id) {
-      this.$store.dispatch('contacts/fetchContactableInbox', id);
-    },
-  },
-  mounted() {
-    const { id } = this.contact;
-    this.$store.dispatch('contacts/fetchContactableInbox', id);
-  },
-  methods: {
-    onCancel() {
-      this.$emit('cancel');
-    },
-    onSuccess() {
-      this.$emit('cancel');
-    },
-    async onSubmit(params, isFromWhatsApp) {
-      const data = await this.$store.dispatch('contactConversations/create', {
-        params,
-        isFromWhatsApp,
-      });
-      return data;
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal v-model:show="localShow" :on-close="onCancel">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('NEW_CONVERSATION.TITLE')"
-        :header-content="$t('NEW_CONVERSATION.DESC')"
-      />
-      <ConversationForm
-        :contact="contact"
-        :on-submit="onSubmit"
-        @success="onSuccess"
-        @cancel="onCancel"
-      />
-    </div>
-  </woot-modal>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
deleted file mode 100644
index fce9456d9..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-import TemplatesPicker from 'dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue';
-import TemplateParser from 'dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue';
-export default {
-  components: {
-    TemplatesPicker,
-    TemplateParser,
-  },
-  props: {
-    inboxId: {
-      type: Number,
-      default: undefined,
-    },
-  },
-  emits: ['pickTemplate', 'onSend', 'cancel'],
-  data() {
-    return {
-      selectedWaTemplate: null,
-    };
-  },
-  methods: {
-    pickTemplate(template) {
-      this.$emit('pickTemplate', true);
-      this.selectedWaTemplate = template;
-    },
-    onResetTemplate() {
-      this.$emit('pickTemplate', false);
-      this.selectedWaTemplate = null;
-    },
-    onSendMessage(message) {
-      this.$emit('onSend', message);
-    },
-    onClose() {
-      this.$emit('cancel');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-wrap mx-0">
-    <TemplatesPicker
-      v-if="!selectedWaTemplate"
-      :inbox-id="inboxId"
-      @on-select="pickTemplate"
-    />
-    <TemplateParser
-      v-else
-      :template="selectedWaTemplate"
-      @reset-template="onResetTemplate"
-      @send-message="onSendMessage"
-    />
-  </div>
-</template>

From 9d49b69f2e1fd4c5a28a9d62df3c524ffc28f808 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 19 Mar 2025 01:47:42 +0530
Subject: [PATCH 10/16] feat: Add support for feature spotlight components
 (#11012)

---
 .../dashboard/assets/scss/_woot.scss          |  11 +
 .../components-next/captain/PageLayout.vue    |  16 +-
 .../emptyStates/AssistantPageEmptyState.vue   |   9 +
 .../emptyStates/DocumentPageEmptyState.vue    |   9 +
 .../emptyStates/ResponsePageEmptyState.vue    |   9 +
 .../FeatureSpotlight.story.vue                |  38 ++
 .../feature-spotlight/FeatureSpotlight.vue    |  95 +++
 .../FeatureSpotlightPopover.story.vue         |  44 ++
 .../FeatureSpotlightPopover.vue               | 125 ++++
 .../dashboard/i18n/locale/en/components.json  |   4 +
 .../i18n/locale/en/integrations.json          |  19 +-
 .../dashboard/captain/assistants/Index.vue    |  11 +
 .../captain/assistants/inboxes/Index.vue      |   4 +-
 .../dashboard/captain/documents/Index.vue     |  12 +
 .../dashboard/captain/responses/Index.vue     |  12 +
 .../dashboard/captain/assistant-dark.svg      | 207 +++++++
 .../dashboard/captain/assistant-light.svg     | 208 +++++++
 .../captain/assistant-popover-dark.svg        | 557 +++++++++++++++++
 .../captain/assistant-popover-light.svg       | 558 +++++++++++++++++
 .../dashboard/captain/document-dark.svg       |  26 +
 .../dashboard/captain/document-light.svg      |  27 +
 .../captain/document-popover-dark.svg         | 569 +++++++++++++++++
 .../captain/document-popover-light.svg        | 570 ++++++++++++++++++
 .../images/dashboard/captain/faqs-dark.svg    |  18 +
 .../images/dashboard/captain/faqs-light.svg   |  19 +
 .../dashboard/captain/faqs-popover-dark.svg   | 563 +++++++++++++++++
 .../dashboard/captain/faqs-popover-light.svg  | 564 +++++++++++++++++
 27 files changed, 4296 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.story.vue
 create mode 100644 app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.vue
 create mode 100644 app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.story.vue
 create mode 100644 app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue
 create mode 100644 public/assets/images/dashboard/captain/assistant-dark.svg
 create mode 100644 public/assets/images/dashboard/captain/assistant-light.svg
 create mode 100644 public/assets/images/dashboard/captain/assistant-popover-dark.svg
 create mode 100644 public/assets/images/dashboard/captain/assistant-popover-light.svg
 create mode 100644 public/assets/images/dashboard/captain/document-dark.svg
 create mode 100644 public/assets/images/dashboard/captain/document-light.svg
 create mode 100644 public/assets/images/dashboard/captain/document-popover-dark.svg
 create mode 100644 public/assets/images/dashboard/captain/document-popover-light.svg
 create mode 100644 public/assets/images/dashboard/captain/faqs-dark.svg
 create mode 100644 public/assets/images/dashboard/captain/faqs-light.svg
 create mode 100644 public/assets/images/dashboard/captain/faqs-popover-dark.svg
 create mode 100644 public/assets/images/dashboard/captain/faqs-popover-light.svg

diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index d736d7b5a..f62227d72 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -54,6 +54,17 @@
   @apply text-n-blue-text;
 }
 
+.custom-dashed-border {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23E2E3E7' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.dark .custom-dashed-border {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23343434' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
 // scss-lint:disable PropertySortOrder
 @layer base {
   /* NEXT COLORS START */
diff --git a/app/javascript/dashboard/components-next/captain/PageLayout.vue b/app/javascript/dashboard/components-next/captain/PageLayout.vue
index aaceda050..e9fae9ca7 100644
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -72,10 +72,18 @@ const handlePageChange = event => {
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
         >
-          <span class="text-xl font-medium text-n-slate-12">
-            {{ headerTitle }}
-            <slot name="headerTitle" />
-          </span>
+          <div class="flex gap-4 items-center">
+            <slot name="headerTitle">
+              <span class="text-xl font-medium text-n-slate-12">
+                {{ headerTitle }}
+              </span>
+            </slot>
+            <div v-if="!isEmpty" class="flex items-center gap-2">
+              <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
+              <slot name="knowMore" />
+            </div>
+          </div>
+
           <div
             v-if="!showPaywall"
             v-on-clickaway="() => emit('close')"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue
index a12fcce74..365b78222 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue
@@ -2,6 +2,7 @@
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 
 const emit = defineEmits(['click']);
@@ -12,6 +13,14 @@ const onClick = () => {
 </script>
 
 <template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
+    learn-more-url="https://chwt.app/captain-assistant"
+    class="mb-8"
+  />
   <EmptyStateLayout
     :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"
     :subtitle="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.SUBTITLE')"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue
index 23ad01926..39182587e 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue
@@ -2,6 +2,7 @@
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 
 const emit = defineEmits(['click']);
@@ -12,6 +13,14 @@ const onClick = () => {
 </script>
 
 <template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/document-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/document-dark.svg"
+    learn-more-url="https://chwt.app/captain-document"
+    class="mb-8"
+  />
   <EmptyStateLayout
     :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.TITLE')"
     :subtitle="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.SUBTITLE')"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue
index 2b8be652e..7e95a4a51 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue
@@ -2,6 +2,7 @@
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 
 const emit = defineEmits(['click']);
@@ -12,6 +13,14 @@ const onClick = () => {
 </script>
 
 <template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/faqs-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/faqs-dark.svg"
+    learn-more-url="https://chwt.app/captain-faq"
+    class="mb-8"
+  />
   <EmptyStateLayout
     :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')"
     :subtitle="$t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE')"
diff --git a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.story.vue b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.story.vue
new file mode 100644
index 000000000..d42af2a11
--- /dev/null
+++ b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.story.vue
@@ -0,0 +1,38 @@
+<script setup>
+import FeatureSpotlight from './FeatureSpotlight.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/FeatureSpotlight/Default"
+    :layout="{ type: 'grid', width: '1000px' }"
+  >
+    <Variant title="Default with learn more URL">
+      <div class="p-6 bg-n-background">
+        <FeatureSpotlight
+          title="Captain Assistant"
+          note="Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before transferring to an agent when needed."
+          video-url=""
+          thumbnail=""
+          fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
+          fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
+          learn-more-url="https://www.chatwoot.com/hc/user-guide/articles/1738101547-creating-an-assistant-with-captain"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Video URL and Thumbnail">
+      <div class="p-6 bg-n-background">
+        <FeatureSpotlight
+          title="Captain Assistant"
+          note="Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before transferring to an agent when needed."
+          video-url="https://www.youtube.com/watch?v=E4xUHyAAktY"
+          thumbnail="https://i.ytimg.com/an_webp/E4xUHyAAktY/mqdefault_6s.webp?du=3000&sqp=CJaKmL4G&rs=AOn4CLCmfy1TMOcW4UsjQTgyKRp4TSGZgg"
+          fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
+          fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
+          learn-more-url="https://www.chatwoot.com/hc/user-guide/articles/1738101547-creating-an-assistant-with-captain"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.vue b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.vue
new file mode 100644
index 000000000..d8e145817
--- /dev/null
+++ b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlight.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { ref } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  title: { type: String, default: '' },
+  note: { type: String, default: '' },
+  videoUrl: { type: String, default: '' },
+  thumbnail: { type: String, default: '' },
+  fallbackThumbnail: { type: String, default: '' },
+  fallbackThumbnailDark: { type: String, default: '' },
+  learnMoreUrl: { type: String, default: '' },
+});
+
+const imageError = ref(false);
+
+const handleImageError = () => {
+  imageError.value = true;
+};
+
+const openLink = link => {
+  if (link) {
+    window.open(link, '_blank');
+  }
+};
+</script>
+
+<template>
+  <section class="custom-dashed-border rounded-2xl py-5 px-6">
+    <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
+      <div
+        class="flex-shrink-0 bg-gray-800 w-[7.5rem] h-[6.5rem] rounded-lg flex items-center justify-center overflow-hidden"
+      >
+        <img
+          v-if="!imageError && thumbnail"
+          :src="thumbnail"
+          :alt="title"
+          draggable="false"
+          class="w-full h-full object-cover rounded-lg"
+          loading="lazy"
+          @error="handleImageError"
+        />
+
+        <template v-else>
+          <img
+            v-if="fallbackThumbnailDark"
+            :src="fallbackThumbnailDark"
+            :alt="title"
+            draggable="false"
+            class="w-full h-full object-cover hidden dark:block rounded-lg"
+            loading="lazy"
+          />
+
+          <img
+            v-if="fallbackThumbnail"
+            :src="fallbackThumbnail"
+            :alt="title"
+            draggable="false"
+            class="w-full h-full object-cover block dark:hidden rounded-lg"
+            loading="lazy"
+          />
+        </template>
+      </div>
+
+      <div class="flex flex-col flex-1 gap-3 ltr:pr-8 rtl:pl-8">
+        <p v-if="note" class="text-n-slate-12 text-sm mb-0">{{ note }}</p>
+
+        <div class="flex gap-3">
+          <slot name="actions">
+            <Button
+              v-if="videoUrl"
+              :label="$t('FEATURE_SPOTLIGHT.WATCH_VIDEO')"
+              sm
+              faded
+              slate
+              icon="i-lucide-circle-play"
+              @click="openLink(videoUrl)"
+            />
+
+            <Button
+              v-if="learnMoreUrl"
+              :label="$t('FEATURE_SPOTLIGHT.LEARN_MORE')"
+              sm
+              faded
+              slate
+              trailing-icon
+              icon="i-lucide-arrow-up-right"
+              @click="openLink(learnMoreUrl)"
+            />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.story.vue b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.story.vue
new file mode 100644
index 000000000..48bbc3c93
--- /dev/null
+++ b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.story.vue
@@ -0,0 +1,44 @@
+<script setup>
+import FeatureSpotlightPopover from './FeatureSpotlightPopover.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/FeatureSpotlight/Popup"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default with learn more URL">
+      <div class="p-6 h-[450px] bg-n-background">
+        <div class="flex gap-8">
+          <FeatureSpotlightPopover
+            button-label="Learn about Assistant"
+            title="Captain Assistant"
+            note="Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before transferring to an agent when needed."
+            video-url=""
+            thumbnail=""
+            fallback-thumbnail="/assets/images/dashboard/captain/assistant-popover-light.svg"
+            fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-popover-dark.svg"
+            learn-more-url="https://www.chatwoot.com/hc/user-guide/articles/1738101547-creating-an-assistant-with-captain"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="With Video Thumbnail and URL">
+      <div class="p-6 h-[450px] bg-n-background">
+        <div class="flex gap-8">
+          <FeatureSpotlightPopover
+            button-label="Learn about Assistant"
+            title="Captain Assistant"
+            note="Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before transferring to an agent when needed."
+            video-url="https://www.youtube.com/watch?v=E4xUHyAAktY"
+            thumbnail="https://i.ytimg.com/an_webp/E4xUHyAAktY/mqdefault_6s.webp?du=3000&sqp=CJaKmL4G&rs=AOn4CLCmfy1TMOcW4UsjQTgyKRp4TSGZgg"
+            fallback-thumbnail="/assets/images/dashboard/captain/assistant-popover-light.svg"
+            fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-popover-dark.svg"
+            learn-more-url="https://www.chatwoot.com/hc/user-guide/articles/1738101547-creating-an-assistant-with-captain"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue
new file mode 100644
index 000000000..6d3c48cdc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue
@@ -0,0 +1,125 @@
+<script setup>
+import { ref } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  buttonLabel: { type: String, default: '' },
+  title: { type: String, default: '' },
+  note: { type: String, default: '' },
+  videoUrl: { type: String, default: '' },
+  thumbnail: { type: String, default: '' },
+  fallbackThumbnail: { type: String, default: '' },
+  fallbackThumbnailDark: { type: String, default: '' },
+  learnMoreUrl: { type: String, default: '' },
+});
+
+const imageError = ref(false);
+const [isPopupVisible, togglePopup] = useToggle();
+
+const handleImageError = () => {
+  imageError.value = true;
+};
+
+const openLink = link => {
+  if (link) {
+    window.open(link, '_blank');
+  }
+};
+</script>
+
+<template>
+  <div class="relative">
+    <Button
+      id="togglePopup"
+      :label="buttonLabel"
+      slate
+      ghost
+      sm
+      :class="{ 'bg-n-alpha-2': isPopupVisible }"
+      @click="togglePopup(!isPopupVisible)"
+    />
+
+    <div
+      v-if="isPopupVisible"
+      v-on-click-outside="[
+        () => isPopupVisible && (isPopupVisible = false),
+        { ignore: ['#togglePopup'] },
+      ]"
+    >
+      <section
+        class="absolute top-full mt-6 ltr:left-0 rtl:right-0 outline outline-1 outline-n-weak bg-n-alpha-3 backdrop-blur-[100px] rounded-xl p-4 w-80"
+      >
+        <div
+          class="absolute -top-[0.77rem] ltr:left-12 rtl:right-12 w-6 h-6 ltr:rotate-45 rtl:-rotate-45 rtl:rounded-tr ltr:rounded-tl rtl:border-r ltr:border-l border-t border-n-weak bg-n-alpha-3 z-10"
+        />
+
+        <div class="relative flex flex-col items-start gap-4 z-20">
+          <div class="flex-shrink-0 bg-gray-800 w-full h-[7.5rem] rounded-lg">
+            <img
+              v-if="!imageError && thumbnail"
+              :src="thumbnail"
+              :alt="title"
+              draggable="false"
+              loading="lazy"
+              class="w-full h-full object-cover rounded-lg"
+              @error="handleImageError"
+            />
+
+            <template v-else>
+              <img
+                v-if="fallbackThumbnailDark"
+                :src="fallbackThumbnailDark"
+                :alt="title"
+                draggable="false"
+                loading="lazy"
+                class="w-full h-full object-cover hidden dark:block"
+              />
+
+              <img
+                v-if="fallbackThumbnail"
+                :src="fallbackThumbnail"
+                :alt="title"
+                draggable="false"
+                loading="lazy"
+                class="w-full h-full object-cover block dark:hidden"
+              />
+            </template>
+          </div>
+
+          <p v-if="note" class="text-n-slate-12 text-start text-sm mb-0">
+            {{ note }}
+          </p>
+
+          <div class="flex gap-3 justify-between w-full">
+            <slot name="actions">
+              <Button
+                v-if="videoUrl"
+                :label="$t('FEATURE_SPOTLIGHT.WATCH_VIDEO')"
+                sm
+                faded
+                slate
+                icon="i-lucide-circle-play"
+                class="w-full"
+                @click="openLink(videoUrl)"
+              />
+
+              <Button
+                v-if="learnMoreUrl"
+                :label="$t('FEATURE_SPOTLIGHT.LEARN_MORE')"
+                sm
+                faded
+                slate
+                trailing-icon
+                class="w-full"
+                icon="i-lucide-arrow-up-right"
+                @click="openLink(learnMoreUrl)"
+              />
+            </slot>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 0bbc0c65a..c7230b1fc 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -39,5 +39,9 @@
   },
   "LABEL": {
     "TAG_BUTTON": "tag"
+  },
+  "FEATURE_SPOTLIGHT": {
+    "LEARN_MORE": "Learn more",
+    "WATCH_VIDEO": "Watch video"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 8db6e4428..c6583d7f8 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -308,6 +308,7 @@
   },
   "CAPTAIN": {
     "NAME": "Captain",
+    "HEADER_KNOW_MORE": "Know more",
     "COPILOT": {
       "SEND_MESSAGE": "Send message...",
       "LOADER": "Captain is thinking",
@@ -387,7 +388,11 @@
       },
       "EMPTY_STATE": {
         "TITLE": "No assistants available",
-        "SUBTITLE": "Create an assistant to provide quick and accurate responses to your users. It can learn from your help articles and past conversations."
+        "SUBTITLE": "Create an assistant to provide quick and accurate responses to your users. It can learn from your help articles and past conversations.",
+        "FEATURE_SPOTLIGHT": {
+          "TITLE": "Captain Assistant",
+          "NOTE": "Captain Assistant engages directly with customers, learns from your help docs and past conversations, and delivers instant, accurate responses. It handles the initial queries, providing quick resolutions before  transferring to an agent when needed."
+        }
       }
     },
     "DOCUMENTS": {
@@ -429,7 +434,11 @@
       },
       "EMPTY_STATE": {
         "TITLE": "No documents available",
-        "SUBTITLE": "Documents are used by your assistant to generate FAQs. You can import documents to provide context for your assistant."
+        "SUBTITLE": "Documents are used by your assistant to generate FAQs. You can import documents to provide context for your assistant.",
+        "FEATURE_SPOTLIGHT": {
+          "TITLE": "Captain Document",
+          "NOTE": "A document in Captain serves as a knowledge resource for the assistant. By connecting your help center or guides, Captain can analyze the content and provide accurate responses for customer inquiries."
+        }
       }
     },
     "RESPONSES": {
@@ -507,7 +516,11 @@
       },
       "EMPTY_STATE": {
         "TITLE": "No FAQs Found",
-        "SUBTITLE": "FAQs help your assistant provide quick and accurate answers to questions from your customers. They can be generated automatically from your content or can be added manually."
+        "SUBTITLE": "FAQs help your assistant provide quick and accurate answers to questions from your customers. They can be generated automatically from your content or can be added manually.",
+        "FEATURE_SPOTLIGHT": {
+          "TITLE": "Captain FAQ",
+          "NOTE": "Captain FAQs detects common customer questions—whether missing from your knowledge base or frequently asked—and generates relevant FAQs to improve support. You can review each suggestion and decide whether to approve or reject it."
+        }
       }
     },
     "INBOXES": {
diff --git a/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
index bcc551966..242e6f086 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
@@ -9,6 +9,7 @@ import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
 import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Paywall.vue';
 import CreateAssistantDialog from 'dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue';
 import AssistantPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue';
+import FeatureSpotlightPopover from 'dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue';
 import LimitBanner from 'dashboard/components-next/captain/pageComponents/response/LimitBanner.vue';
 import { useRouter } from 'vue-router';
 
@@ -82,6 +83,16 @@ onMounted(() => store.dispatch('captainAssistants/get'));
     :feature-flag="FEATURE_FLAGS.CAPTAIN"
     @click="handleCreate"
   >
+    <template #knowMore>
+      <FeatureSpotlightPopover
+        :button-label="$t('CAPTAIN.HEADER_KNOW_MORE')"
+        :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+        :note="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+        fallback-thumbnail="/assets/images/dashboard/captain/assistant-popover-light.svg"
+        fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-popover-dark.svg"
+        learn-more-url="https://chwt.app/captain-assistant"
+      />
+    </template>
     <template #emptyState>
       <AssistantPageEmptyState @click="handleCreate" />
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue
index a9a36706a..81b6ccc04 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue
@@ -79,7 +79,9 @@ onMounted(() =>
     <template v-if="!isFetchingAssistant" #headerTitle>
       <div class="flex flex-row items-center gap-4">
         <BackButton compact />
-        <span class="flex items-center gap-1 text-lg">
+        <span
+          class="flex items-center gap-1 text-lg font-medium text-n-slate-12"
+        >
           {{ assistant.name }}
           <span class="i-lucide-chevron-right text-xl text-n-slate-10" />
           {{ $t('CAPTAIN.INBOXES.HEADER') }}
diff --git a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
index 12a595069..90db4694a 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
@@ -11,6 +11,7 @@ import RelatedResponses from 'dashboard/components-next/captain/pageComponents/d
 import CreateDocumentDialog from 'dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue';
 import AssistantSelector from 'dashboard/components-next/captain/pageComponents/AssistantSelector.vue';
 import DocumentPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue';
+import FeatureSpotlightPopover from 'dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue';
 import LimitBanner from 'dashboard/components-next/captain/pageComponents/document/LimitBanner.vue';
 
 const store = useStore();
@@ -115,6 +116,17 @@ onMounted(() => {
     @update:current-page="onPageChange"
     @click="handleCreateDocument"
   >
+    <template #knowMore>
+      <FeatureSpotlightPopover
+        :button-label="$t('CAPTAIN.HEADER_KNOW_MORE')"
+        :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+        :note="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+        fallback-thumbnail="/assets/images/dashboard/captain/document-popover-light.svg"
+        fallback-thumbnail-dark="/assets/images/dashboard/captain/document-popover-dark.svg"
+        learn-more-url="https://chwt.app/captain-document"
+      />
+    </template>
+
     <template #emptyState>
       <DocumentPageEmptyState @click="handleCreateDocument" />
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
index c087da817..258e1c0c9 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
@@ -18,6 +18,7 @@ import AssistantSelector from 'dashboard/components-next/captain/pageComponents/
 import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
 import CreateResponseDialog from 'dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue';
 import ResponsePageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue';
+import FeatureSpotlightPopover from 'dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue';
 import LimitBanner from 'dashboard/components-next/captain/pageComponents/response/LimitBanner.vue';
 
 const router = useRouter();
@@ -247,6 +248,17 @@ onMounted(() => {
     @update:current-page="onPageChange"
     @click="handleCreate"
   >
+    <template #knowMore>
+      <FeatureSpotlightPopover
+        :button-label="$t('CAPTAIN.HEADER_KNOW_MORE')"
+        :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+        :note="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+        fallback-thumbnail="/assets/images/dashboard/captain/faqs-popover-light.svg"
+        fallback-thumbnail-dark="/assets/images/dashboard/captain/faqs-popover-dark.svg"
+        learn-more-url="https://chwt.app/captain-faq"
+      />
+    </template>
+
     <template #emptyState>
       <ResponsePageEmptyState @click="handleCreate" />
     </template>
diff --git a/public/assets/images/dashboard/captain/assistant-dark.svg b/public/assets/images/dashboard/captain/assistant-dark.svg
new file mode 100644
index 000000000..bc9fac01a
--- /dev/null
+++ b/public/assets/images/dashboard/captain/assistant-dark.svg
@@ -0,0 +1,207 @@
+<svg width="120" height="104" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_156_14209)">
+<rect width="120" height="104" rx="8" fill="#1B1B1F"/>
+<circle cx="8" cy="4" r="1" fill="#56468B"/>
+<circle cx="16" cy="4" r="1" fill="#56468B"/>
+<circle cx="24" cy="4" r="1" fill="#56468B"/>
+<circle cx="32" cy="4" r="1" fill="#56468B"/>
+<circle cx="40" cy="4" r="1" fill="#56468B"/>
+<circle cx="48" cy="4" r="1" fill="#56468B"/>
+<circle cx="56" cy="4" r="1" fill="#56468B"/>
+<circle cx="64" cy="4" r="1" fill="#56468B"/>
+<circle cx="72" cy="4" r="1" fill="#56468B"/>
+<circle cx="80" cy="4" r="1" fill="#56468B"/>
+<circle cx="88" cy="4" r="1" fill="#56468B"/>
+<circle cx="96" cy="4" r="1" fill="#56468B"/>
+<circle cx="104" cy="4" r="1" fill="#56468B"/>
+<circle cx="112" cy="4" r="1" fill="#56468B"/>
+<circle cx="8" cy="12" r="1" fill="#56468B"/>
+<circle cx="16" cy="12" r="1" fill="#56468B"/>
+<circle cx="24" cy="12" r="1" fill="#56468B"/>
+<circle cx="32" cy="12" r="1" fill="#56468B"/>
+<circle cx="40" cy="12" r="1" fill="#56468B"/>
+<circle cx="48" cy="12" r="1" fill="#56468B"/>
+<circle cx="56" cy="12" r="1" fill="#56468B"/>
+<circle cx="64" cy="12" r="1" fill="#56468B"/>
+<circle cx="72" cy="12" r="1" fill="#56468B"/>
+<circle cx="80" cy="12" r="1" fill="#56468B"/>
+<circle cx="88" cy="12" r="1" fill="#56468B"/>
+<circle cx="96" cy="12" r="1" fill="#56468B"/>
+<circle cx="104" cy="12" r="1" fill="#56468B"/>
+<circle cx="112" cy="12" r="1" fill="#56468B"/>
+<circle cx="8" cy="20" r="1" fill="#56468B"/>
+<circle cx="16" cy="20" r="1" fill="#56468B"/>
+<circle cx="24" cy="20" r="1" fill="#56468B"/>
+<circle cx="32" cy="20" r="1" fill="#56468B"/>
+<circle cx="40" cy="20" r="1" fill="#56468B"/>
+<circle cx="48" cy="20" r="1" fill="#56468B"/>
+<circle cx="56" cy="20" r="1" fill="#56468B"/>
+<circle cx="64" cy="20" r="1" fill="#56468B"/>
+<circle cx="72" cy="20" r="1" fill="#56468B"/>
+<circle cx="80" cy="20" r="1" fill="#56468B"/>
+<circle cx="88" cy="20" r="1" fill="#56468B"/>
+<circle cx="96" cy="20" r="1" fill="#56468B"/>
+<circle cx="104" cy="20" r="1" fill="#56468B"/>
+<circle cx="112" cy="20" r="1" fill="#56468B"/>
+<circle cx="8" cy="28" r="1" fill="#56468B"/>
+<circle cx="16" cy="28" r="1" fill="#56468B"/>
+<circle cx="24" cy="28" r="1" fill="#56468B"/>
+<circle cx="32" cy="28" r="1" fill="#56468B"/>
+<circle cx="40" cy="28" r="1" fill="#56468B"/>
+<circle cx="48" cy="28" r="1" fill="#56468B"/>
+<circle cx="56" cy="28" r="1" fill="#56468B"/>
+<circle cx="64" cy="28" r="1" fill="#56468B"/>
+<circle cx="72" cy="28" r="1" fill="#56468B"/>
+<circle cx="80" cy="28" r="1" fill="#56468B"/>
+<circle cx="88" cy="28" r="1" fill="#56468B"/>
+<circle cx="96" cy="28" r="1" fill="#56468B"/>
+<circle cx="104" cy="28" r="1" fill="#56468B"/>
+<circle cx="112" cy="28" r="1" fill="#56468B"/>
+<circle cx="8" cy="36" r="1" fill="#56468B"/>
+<circle cx="16" cy="36" r="1" fill="#56468B"/>
+<circle cx="24" cy="36" r="1" fill="#56468B"/>
+<circle cx="32" cy="36" r="1" fill="#56468B"/>
+<circle cx="40" cy="36" r="1" fill="#56468B"/>
+<circle cx="48" cy="36" r="1" fill="#56468B"/>
+<circle cx="56" cy="36" r="1" fill="#56468B"/>
+<circle cx="64" cy="36" r="1" fill="#56468B"/>
+<circle cx="72" cy="36" r="1" fill="#56468B"/>
+<circle cx="80" cy="36" r="1" fill="#56468B"/>
+<circle cx="88" cy="36" r="1" fill="#56468B"/>
+<circle cx="96" cy="36" r="1" fill="#56468B"/>
+<circle cx="104" cy="36" r="1" fill="#56468B"/>
+<circle cx="112" cy="36" r="1" fill="#56468B"/>
+<circle cx="8" cy="44" r="1" fill="#56468B"/>
+<circle cx="16" cy="44" r="1" fill="#56468B"/>
+<circle cx="24" cy="44" r="1" fill="#56468B"/>
+<circle cx="32" cy="44" r="1" fill="#56468B"/>
+<circle cx="40" cy="44" r="1" fill="#56468B"/>
+<circle cx="48" cy="44" r="1" fill="#56468B"/>
+<circle cx="56" cy="44" r="1" fill="#56468B"/>
+<circle cx="64" cy="44" r="1" fill="#56468B"/>
+<circle cx="72" cy="44" r="1" fill="#56468B"/>
+<circle cx="80" cy="44" r="1" fill="#56468B"/>
+<circle cx="88" cy="44" r="1" fill="#56468B"/>
+<circle cx="96" cy="44" r="1" fill="#56468B"/>
+<circle cx="104" cy="44" r="1" fill="#56468B"/>
+<circle cx="112" cy="44" r="1" fill="#56468B"/>
+<circle cx="8" cy="52" r="1" fill="#56468B"/>
+<circle cx="16" cy="52" r="1" fill="#56468B"/>
+<circle cx="24" cy="52" r="1" fill="#56468B"/>
+<circle cx="32" cy="52" r="1" fill="#56468B"/>
+<circle cx="40" cy="52" r="1" fill="#56468B"/>
+<circle cx="48" cy="52" r="1" fill="#56468B"/>
+<circle cx="56" cy="52" r="1" fill="#56468B"/>
+<circle cx="64" cy="52" r="1" fill="#56468B"/>
+<circle cx="72" cy="52" r="1" fill="#56468B"/>
+<circle cx="80" cy="52" r="1" fill="#56468B"/>
+<circle cx="88" cy="52" r="1" fill="#56468B"/>
+<circle cx="96" cy="52" r="1" fill="#56468B"/>
+<circle cx="104" cy="52" r="1" fill="#56468B"/>
+<circle cx="112" cy="52" r="1" fill="#56468B"/>
+<circle cx="8" cy="60" r="1" fill="#56468B"/>
+<circle cx="16" cy="60" r="1" fill="#56468B"/>
+<circle cx="24" cy="60" r="1" fill="#56468B"/>
+<circle cx="32" cy="60" r="1" fill="#56468B"/>
+<circle cx="40" cy="60" r="1" fill="#56468B"/>
+<circle cx="48" cy="60" r="1" fill="#56468B"/>
+<circle cx="56" cy="60" r="1" fill="#56468B"/>
+<circle cx="64" cy="60" r="1" fill="#56468B"/>
+<circle cx="72" cy="60" r="1" fill="#56468B"/>
+<circle cx="80" cy="60" r="1" fill="#56468B"/>
+<circle cx="88" cy="60" r="1" fill="#56468B"/>
+<circle cx="96" cy="60" r="1" fill="#56468B"/>
+<circle cx="104" cy="60" r="1" fill="#56468B"/>
+<circle cx="112" cy="60" r="1" fill="#56468B"/>
+<circle cx="8" cy="68" r="1" fill="#56468B"/>
+<circle cx="16" cy="68" r="1" fill="#56468B"/>
+<circle cx="24" cy="68" r="1" fill="#56468B"/>
+<circle cx="32" cy="68" r="1" fill="#56468B"/>
+<circle cx="40" cy="68" r="1" fill="#56468B"/>
+<circle cx="48" cy="68" r="1" fill="#56468B"/>
+<circle cx="56" cy="68" r="1" fill="#56468B"/>
+<circle cx="64" cy="68" r="1" fill="#56468B"/>
+<circle cx="72" cy="68" r="1" fill="#56468B"/>
+<circle cx="80" cy="68" r="1" fill="#56468B"/>
+<circle cx="88" cy="68" r="1" fill="#56468B"/>
+<circle cx="96" cy="68" r="1" fill="#56468B"/>
+<circle cx="104" cy="68" r="1" fill="#56468B"/>
+<circle cx="112" cy="68" r="1" fill="#56468B"/>
+<circle cx="8" cy="76" r="1" fill="#56468B"/>
+<circle cx="16" cy="76" r="1" fill="#56468B"/>
+<circle cx="24" cy="76" r="1" fill="#56468B"/>
+<circle cx="32" cy="76" r="1" fill="#56468B"/>
+<circle cx="40" cy="76" r="1" fill="#56468B"/>
+<circle cx="48" cy="76" r="1" fill="#56468B"/>
+<circle cx="56" cy="76" r="1" fill="#56468B"/>
+<circle cx="64" cy="76" r="1" fill="#56468B"/>
+<circle cx="72" cy="76" r="1" fill="#56468B"/>
+<circle cx="80" cy="76" r="1" fill="#56468B"/>
+<circle cx="88" cy="76" r="1" fill="#56468B"/>
+<circle cx="96" cy="76" r="1" fill="#56468B"/>
+<circle cx="104" cy="76" r="1" fill="#56468B"/>
+<circle cx="112" cy="76" r="1" fill="#56468B"/>
+<circle cx="8" cy="84" r="1" fill="#56468B"/>
+<circle cx="16" cy="84" r="1" fill="#56468B"/>
+<circle cx="24" cy="84" r="1" fill="#56468B"/>
+<circle cx="32" cy="84" r="1" fill="#56468B"/>
+<circle cx="40" cy="84" r="1" fill="#56468B"/>
+<circle cx="48" cy="84" r="1" fill="#56468B"/>
+<circle cx="56" cy="84" r="1" fill="#56468B"/>
+<circle cx="64" cy="84" r="1" fill="#56468B"/>
+<circle cx="72" cy="84" r="1" fill="#56468B"/>
+<circle cx="80" cy="84" r="1" fill="#56468B"/>
+<circle cx="88" cy="84" r="1" fill="#56468B"/>
+<circle cx="96" cy="84" r="1" fill="#56468B"/>
+<circle cx="104" cy="84" r="1" fill="#56468B"/>
+<circle cx="112" cy="84" r="1" fill="#56468B"/>
+<circle cx="8" cy="92" r="1" fill="#56468B"/>
+<circle cx="16" cy="92" r="1" fill="#56468B"/>
+<circle cx="24" cy="92" r="1" fill="#56468B"/>
+<circle cx="32" cy="92" r="1" fill="#56468B"/>
+<circle cx="40" cy="92" r="1" fill="#56468B"/>
+<circle cx="48" cy="92" r="1" fill="#56468B"/>
+<circle cx="56" cy="92" r="1" fill="#56468B"/>
+<circle cx="64" cy="92" r="1" fill="#56468B"/>
+<circle cx="72" cy="92" r="1" fill="#56468B"/>
+<circle cx="80" cy="92" r="1" fill="#56468B"/>
+<circle cx="88" cy="92" r="1" fill="#56468B"/>
+<circle cx="96" cy="92" r="1" fill="#56468B"/>
+<circle cx="104" cy="92" r="1" fill="#56468B"/>
+<circle cx="112" cy="92" r="1" fill="#56468B"/>
+<circle cx="8" cy="100" r="1" fill="#56468B"/>
+<circle cx="16" cy="100" r="1" fill="#56468B"/>
+<circle cx="24" cy="100" r="1" fill="#56468B"/>
+<circle cx="32" cy="100" r="1" fill="#56468B"/>
+<circle cx="40" cy="100" r="1" fill="#56468B"/>
+<circle cx="48" cy="100" r="1" fill="#56468B"/>
+<circle cx="56" cy="100" r="1" fill="#56468B"/>
+<circle cx="64" cy="100" r="1" fill="#56468B"/>
+<circle cx="72" cy="100" r="1" fill="#56468B"/>
+<circle cx="80" cy="100" r="1" fill="#56468B"/>
+<circle cx="88" cy="100" r="1" fill="#56468B"/>
+<circle cx="96" cy="100" r="1" fill="#56468B"/>
+<circle cx="104" cy="100" r="1" fill="#56468B"/>
+<circle cx="112" cy="100" r="1" fill="#56468B"/>
+<rect width="120" height="104" fill="url(#paint0_radial_156_14209)"/>
+<path d="M32 54.1818C32 50.7677 34.8844 48 38.4424 48H40.053V63.3917C40.053 64.2799 39.3329 65 38.4447 65C34.8854 65 32 62.2313 32 58.816V54.1818Z" fill="#C171FF"/>
+<path d="M41.991 54.1818C41.991 50.7677 42.3351 48 38.7771 48H37.1665V65H38.7748C42.3341 65 41.991 62.2313 41.991 58.816V54.1818Z" fill="#C171FF"/>
+<path d="M86 53C86 47.1652 83.3661 41.5695 78.6777 37.4437C73.9893 33.3179 67.6304 31 61 31C54.3696 31 48.0107 33.3178 43.3223 37.4436C38.6339 41.5694 36 47.1652 36 53L39.594 53C39.594 48.0041 41.8493 43.2127 45.8637 39.6801C49.8781 36.1474 55.3228 34.1628 61 34.1628C66.6772 34.1628 72.1219 36.1474 76.1363 39.6801C80.1507 43.2127 82.406 48.0041 82.406 53H86Z" fill="#C171FF"/>
+<path d="M49.2493 52.4696C49.2493 51.3435 50.1621 50.4307 51.2882 50.4307C52.4143 50.4307 53.3272 51.3435 53.3272 52.4696V57.1819C53.3272 58.308 52.4143 59.2209 51.2882 59.2209C50.1621 59.2209 49.2493 58.308 49.2493 57.1819V52.4696Z" fill="#E2DDFE"/>
+<path d="M55.7737 52.4696C55.7737 51.3435 56.6866 50.4307 57.8127 50.4307C58.9387 50.4307 59.8516 51.3435 59.8516 52.4696V57.1819C59.8516 58.308 58.9387 59.2209 57.8127 59.2209C56.6866 59.2209 55.7737 58.308 55.7737 57.1819V52.4696Z" fill="#E2DDFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.6052 44.8367C64.0123 43.7654 57.8229 43.7231 50.0594 44.832C48.097 45.1122 46.7985 45.3017 45.8086 45.591C44.8906 45.8593 44.3685 46.1792 43.9367 46.6618C43.0425 47.6611 42.9247 48.7913 42.8028 52.7332C42.683 56.6073 42.9202 60.0793 43.3696 63.9859C43.6091 66.0676 43.7739 67.4725 44.0369 68.5406C44.2865 69.5537 44.5883 70.0984 45.0078 70.5155C45.4307 70.9358 45.9726 71.2322 46.9671 71.4728C48.0192 71.7273 49.3995 71.8812 51.451 72.105C58.0857 72.8289 63.0522 72.8252 69.7116 72.1088C71.788 71.8855 73.1908 71.7314 74.2586 71.4787C75.273 71.2386 75.8184 70.9442 76.2354 70.5359C76.6436 70.1361 76.9555 69.5847 77.2261 68.5211C77.5084 67.4113 77.7004 65.943 77.9784 63.7859C78.4742 59.9372 78.8313 56.5572 78.8452 52.8545C78.86 48.8957 78.779 47.7693 77.8747 46.7245C77.438 46.2199 76.907 45.8881 75.9681 45.6118C74.9541 45.3134 73.6206 45.121 71.6052 44.8367ZM49.5853 41.5127C57.6726 40.3576 64.1796 40.4028 72.0736 41.5166L72.1891 41.5329C74.0582 41.7965 75.6372 42.0192 76.9147 42.3952C78.2934 42.8009 79.4464 43.4169 80.41 44.5302C82.2277 46.6303 82.2158 49.122 82.2 52.4325C82.1994 52.5758 82.1987 52.7207 82.1981 52.8671C82.1835 56.7821 81.8047 60.3271 81.3038 64.2143L81.2906 64.3172C81.0293 66.3457 80.814 68.0174 80.4756 69.3476C80.1198 70.7464 79.588 71.9457 78.5813 72.9315C77.5835 73.9087 76.4043 74.4165 75.0309 74.7415C73.7339 75.0485 72.12 75.2221 70.1748 75.4313L70.0703 75.4426C63.1741 76.1844 57.9654 76.1886 51.0873 75.4382L50.9812 75.4266C49.0631 75.2174 47.466 75.0432 46.1788 74.7318C44.8104 74.4008 43.6391 73.8827 42.6439 72.8933C41.6453 71.9006 41.1208 70.7208 40.7813 69.3425C40.4611 68.0425 40.2749 66.4238 40.0507 64.4746L40.0386 64.369C39.5777 60.3626 39.325 56.7183 39.4514 52.6296C39.456 52.4813 39.4604 52.3345 39.4647 52.1894C39.563 48.9037 39.6367 46.4391 41.438 44.426C42.3936 43.3579 43.5232 42.7657 44.868 42.3726C46.1151 42.0081 47.6529 41.7886 49.473 41.5287C49.5103 41.5234 49.5478 41.518 49.5853 41.5127Z" fill="#E2DDFE"/>
+<path d="M79.5975 55.3508C79.5975 51.6744 82.5778 48.6941 86.2542 48.6941H87.3575V67H86.2566C82.5789 67 79.5975 64.0186 79.5975 60.3409V55.3508Z" fill="#C171FF"/>
+<path d="M92.3359 55.3508C92.3359 51.6744 89.3556 48.6941 85.6793 48.6941H84.576V67H85.6769C89.3546 67 92.3359 64.0186 92.3359 60.3409V55.3508Z" fill="#C171FF"/>
+<path d="M85.8456 58.6705C85.8456 58.6705 85.9608 65.4999 84.5619 70.4999C83.1631 75.4999 79.5629 76.9042 75.7024 77.9999C71.8419 79.0957 69.1743 78.9999 69.1743 78.9999" stroke="#C171FF" stroke-width="2.49412" stroke-linecap="round"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_156_14209" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 52) rotate(90) scale(52 60)">
+<stop offset="0.434745" stop-color="#1B1B1F"/>
+<stop offset="0.77" stop-color="#1B1B1F" stop-opacity="0.7"/>
+<stop offset="0.99" stop-color="#1B1B1F" stop-opacity="0.9"/>
+</radialGradient>
+<clipPath id="clip0_156_14209">
+<rect width="120" height="104" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/captain/assistant-light.svg b/public/assets/images/dashboard/captain/assistant-light.svg
new file mode 100644
index 000000000..bf4f4e296
--- /dev/null
+++ b/public/assets/images/dashboard/captain/assistant-light.svg
@@ -0,0 +1,208 @@
+<svg width="120" height="104" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_160_16406)">
+<rect width="120" height="104" rx="8" fill="#FCFCFD"/>
+<circle cx="8" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="4" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="12" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="20" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="28" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="36" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="44" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="52" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="60" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="68" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="76" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="84" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="92" r="1" fill="#B9BBC6"/>
+<circle cx="8" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="16" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="24" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="32" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="40" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="48" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="56" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="64" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="72" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="80" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="88" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="96" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="104" cy="100" r="1" fill="#B9BBC6"/>
+<circle cx="112" cy="100" r="1" fill="#B9BBC6"/>
+<rect width="120" height="104" fill="url(#paint0_radial_160_16406)"/>
+<path d="M32 54.1818C32 50.7677 34.8844 48 38.4424 48H40.053V63.3917C40.053 64.2799 39.3329 65 38.4447 65C34.8854 65 32 62.2313 32 58.816V54.1818Z" fill="#B77FFF"/>
+<path d="M41.991 54.1818C41.991 50.7677 42.3351 48 38.7771 48H37.1665V65H38.7748C42.3341 65 41.991 62.2313 41.991 58.816V54.1818Z" fill="#B77FFF"/>
+<path d="M86 53C86 47.1652 83.3661 41.5695 78.6777 37.4437C73.9893 33.3179 67.6304 31 61 31C54.3696 31 48.0107 33.3178 43.3223 37.4436C38.6339 41.5694 36 47.1652 36 53L39.594 53C39.594 48.0041 41.8493 43.2127 45.8637 39.6801C49.8781 36.1474 55.3228 34.1628 61 34.1628C66.6772 34.1628 72.1219 36.1474 76.1363 39.6801C80.1507 43.2127 82.406 48.0041 82.406 53H86Z" fill="#B77FFF"/>
+<path d="M49.2493 52.4696C49.2493 51.3435 50.1621 50.4307 51.2882 50.4307C52.4143 50.4307 53.3272 51.3435 53.3272 52.4696V57.1819C53.3272 58.308 52.4143 59.2209 51.2882 59.2209C50.1621 59.2209 49.2493 58.308 49.2493 57.1819V52.4696Z" fill="black"/>
+<path d="M55.7737 52.4696C55.7737 51.3435 56.6866 50.4307 57.8127 50.4307C58.9387 50.4307 59.8516 51.3435 59.8516 52.4696V57.1819C59.8516 58.308 58.9387 59.2209 57.8127 59.2209C56.6866 59.2209 55.7737 58.308 55.7737 57.1819V52.4696Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.6052 44.8367C64.0123 43.7654 57.8229 43.7231 50.0594 44.832C48.097 45.1122 46.7985 45.3017 45.8086 45.591C44.8906 45.8593 44.3685 46.1792 43.9367 46.6618C43.0425 47.6611 42.9247 48.7913 42.8028 52.7332C42.683 56.6073 42.9202 60.0793 43.3696 63.9859C43.6091 66.0676 43.7739 67.4725 44.0369 68.5406C44.2865 69.5537 44.5883 70.0984 45.0078 70.5155C45.4307 70.9358 45.9726 71.2322 46.9671 71.4728C48.0192 71.7273 49.3995 71.8812 51.451 72.105C58.0857 72.8289 63.0522 72.8252 69.7116 72.1088C71.788 71.8855 73.1908 71.7314 74.2586 71.4787C75.273 71.2386 75.8184 70.9442 76.2354 70.5359C76.6436 70.1361 76.9555 69.5847 77.2261 68.5211C77.5084 67.4113 77.7004 65.943 77.9784 63.7859C78.4742 59.9372 78.8313 56.5572 78.8452 52.8545C78.86 48.8957 78.779 47.7693 77.8747 46.7245C77.438 46.2199 76.907 45.8881 75.9681 45.6118C74.9541 45.3134 73.6206 45.121 71.6052 44.8367ZM49.5853 41.5127C57.6726 40.3576 64.1796 40.4028 72.0736 41.5166L72.1891 41.5329C74.0582 41.7965 75.6372 42.0192 76.9147 42.3952C78.2934 42.8009 79.4464 43.4169 80.41 44.5302C82.2277 46.6303 82.2158 49.122 82.2 52.4325C82.1994 52.5758 82.1987 52.7207 82.1981 52.8671C82.1835 56.7821 81.8047 60.3271 81.3038 64.2143L81.2906 64.3172C81.0293 66.3457 80.814 68.0174 80.4756 69.3476C80.1198 70.7464 79.588 71.9457 78.5813 72.9315C77.5835 73.9087 76.4043 74.4165 75.0309 74.7415C73.7339 75.0485 72.12 75.2221 70.1748 75.4313L70.0703 75.4426C63.1741 76.1844 57.9654 76.1886 51.0873 75.4382L50.9812 75.4266C49.0631 75.2174 47.466 75.0432 46.1788 74.7318C44.8104 74.4008 43.6391 73.8827 42.6439 72.8933C41.6453 71.9006 41.1208 70.7208 40.7813 69.3425C40.4611 68.0425 40.2749 66.4238 40.0507 64.4746L40.0386 64.369C39.5777 60.3626 39.325 56.7183 39.4514 52.6296C39.456 52.4813 39.4604 52.3345 39.4647 52.1894C39.563 48.9037 39.6367 46.4391 41.438 44.426C42.3936 43.3579 43.5232 42.7657 44.868 42.3726C46.1151 42.0081 47.6529 41.7886 49.473 41.5287C49.5103 41.5234 49.5478 41.518 49.5853 41.5127Z" fill="black"/>
+<path d="M79.5975 55.3508C79.5975 51.6744 82.5778 48.6941 86.2542 48.6941H87.3575V67H86.2566C82.5789 67 79.5975 64.0186 79.5975 60.3409V55.3508Z" fill="#B77FFF"/>
+<path d="M92.3359 55.3508C92.3359 51.6744 89.3556 48.6941 85.6793 48.6941H84.576V67H85.6769C89.3546 67 92.3359 64.0186 92.3359 60.3409V55.3508Z" fill="#B77FFF"/>
+<path d="M85.8456 58.6705C85.8456 58.6705 85.9608 65.4999 84.5619 70.4999C83.1631 75.4999 79.5629 76.9042 75.7024 77.9999C71.8419 79.0957 69.1743 78.9999 69.1743 78.9999" stroke="#B77FFF" stroke-width="2.49412" stroke-linecap="round"/>
+</g>
+<rect x="0.5" y="0.5" width="119" height="103" rx="7.5" stroke="#ECECEC"/>
+<defs>
+<radialGradient id="paint0_radial_160_16406" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 52) rotate(90) scale(52 60)">
+<stop offset="0.434745" stop-color="#FCFCFD"/>
+<stop offset="0.77" stop-color="#FCFCFD" stop-opacity="0.7"/>
+<stop offset="0.99" stop-color="#FCFCFD" stop-opacity="0.9"/>
+</radialGradient>
+<clipPath id="clip0_160_16406">
+<rect width="120" height="104" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/captain/assistant-popover-dark.svg b/public/assets/images/dashboard/captain/assistant-popover-dark.svg
new file mode 100644
index 000000000..10489b43c
--- /dev/null
+++ b/public/assets/images/dashboard/captain/assistant-popover-dark.svg
@@ -0,0 +1,557 @@
+<svg width="288" height="120" viewBox="0 0 288 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_302_5952)">
+<rect width="288" height="120" rx="8" fill="#2E3035"/>
+<circle cx="8" r="1" fill="#473876"/>
+<circle cx="16" r="1" fill="#473876"/>
+<circle cx="24" r="1" fill="#473876"/>
+<circle cx="32" r="1" fill="#473876"/>
+<circle cx="40" r="1" fill="#473876"/>
+<circle cx="48" r="1" fill="#473876"/>
+<circle cx="56" r="1" fill="#473876"/>
+<circle cx="64" r="1" fill="#473876"/>
+<circle cx="72" r="1" fill="#473876"/>
+<circle cx="80" r="1" fill="#473876"/>
+<circle cx="88" r="1" fill="#473876"/>
+<circle cx="96" r="1" fill="#473876"/>
+<circle cx="104" r="1" fill="#473876"/>
+<circle cx="112" r="1" fill="#473876"/>
+<circle cx="120" r="1" fill="#473876"/>
+<circle cx="128" r="1" fill="#473876"/>
+<circle cx="136" r="1" fill="#473876"/>
+<circle cx="144" r="1" fill="#473876"/>
+<circle cx="152" r="1" fill="#473876"/>
+<circle cx="160" r="1" fill="#473876"/>
+<circle cx="168" r="1" fill="#473876"/>
+<circle cx="176" r="1" fill="#473876"/>
+<circle cx="184" r="1" fill="#473876"/>
+<circle cx="192" r="1" fill="#473876"/>
+<circle cx="200" r="1" fill="#473876"/>
+<circle cx="208" r="1" fill="#473876"/>
+<circle cx="216" r="1" fill="#473876"/>
+<circle cx="224" r="1" fill="#473876"/>
+<circle cx="232" r="1" fill="#473876"/>
+<circle cx="240" r="1" fill="#473876"/>
+<circle cx="248" r="1" fill="#473876"/>
+<circle cx="256" r="1" fill="#473876"/>
+<circle cx="264" r="1" fill="#473876"/>
+<circle cx="272" r="1" fill="#473876"/>
+<circle cx="280" r="1" fill="#473876"/>
+<circle cx="8" cy="8" r="1" fill="#473876"/>
+<circle cx="16" cy="8" r="1" fill="#473876"/>
+<circle cx="24" cy="8" r="1" fill="#473876"/>
+<circle cx="32" cy="8" r="1" fill="#473876"/>
+<circle cx="40" cy="8" r="1" fill="#473876"/>
+<circle cx="48" cy="8" r="1" fill="#473876"/>
+<circle cx="56" cy="8" r="1" fill="#473876"/>
+<circle cx="64" cy="8" r="1" fill="#473876"/>
+<circle cx="72" cy="8" r="1" fill="#473876"/>
+<circle cx="80" cy="8" r="1" fill="#473876"/>
+<circle cx="88" cy="8" r="1" fill="#473876"/>
+<circle cx="96" cy="8" r="1" fill="#473876"/>
+<circle cx="104" cy="8" r="1" fill="#473876"/>
+<circle cx="112" cy="8" r="1" fill="#473876"/>
+<circle cx="120" cy="8" r="1" fill="#473876"/>
+<circle cx="128" cy="8" r="1" fill="#473876"/>
+<circle cx="136" cy="8" r="1" fill="#473876"/>
+<circle cx="144" cy="8" r="1" fill="#473876"/>
+<circle cx="152" cy="8" r="1" fill="#473876"/>
+<circle cx="160" cy="8" r="1" fill="#473876"/>
+<circle cx="168" cy="8" r="1" fill="#473876"/>
+<circle cx="176" cy="8" r="1" fill="#473876"/>
+<circle cx="184" cy="8" r="1" fill="#473876"/>
+<circle cx="192" cy="8" r="1" fill="#473876"/>
+<circle cx="200" cy="8" r="1" fill="#473876"/>
+<circle cx="208" cy="8" r="1" fill="#473876"/>
+<circle cx="216" cy="8" r="1" fill="#473876"/>
+<circle cx="224" cy="8" r="1" fill="#473876"/>
+<circle cx="232" cy="8" r="1" fill="#473876"/>
+<circle cx="240" cy="8" r="1" fill="#473876"/>
+<circle cx="248" cy="8" r="1" fill="#473876"/>
+<circle cx="256" cy="8" r="1" fill="#473876"/>
+<circle cx="264" cy="8" r="1" fill="#473876"/>
+<circle cx="272" cy="8" r="1" fill="#473876"/>
+<circle cx="280" cy="8" r="1" fill="#473876"/>
+<circle cx="8" cy="16" r="1" fill="#473876"/>
+<circle cx="16" cy="16" r="1" fill="#473876"/>
+<circle cx="24" cy="16" r="1" fill="#473876"/>
+<circle cx="32" cy="16" r="1" fill="#473876"/>
+<circle cx="40" cy="16" r="1" fill="#473876"/>
+<circle cx="48" cy="16" r="1" fill="#473876"/>
+<circle cx="56" cy="16" r="1" fill="#473876"/>
+<circle cx="64" cy="16" r="1" fill="#473876"/>
+<circle cx="72" cy="16" r="1" fill="#473876"/>
+<circle cx="80" cy="16" r="1" fill="#473876"/>
+<circle cx="88" cy="16" r="1" fill="#473876"/>
+<circle cx="96" cy="16" r="1" fill="#473876"/>
+<circle cx="104" cy="16" r="1" fill="#473876"/>
+<circle cx="112" cy="16" r="1" fill="#473876"/>
+<circle cx="120" cy="16" r="1" fill="#473876"/>
+<circle cx="128" cy="16" r="1" fill="#473876"/>
+<circle cx="136" cy="16" r="1" fill="#473876"/>
+<circle cx="144" cy="16" r="1" fill="#473876"/>
+<circle cx="152" cy="16" r="1" fill="#473876"/>
+<circle cx="160" cy="16" r="1" fill="#473876"/>
+<circle cx="168" cy="16" r="1" fill="#473876"/>
+<circle cx="176" cy="16" r="1" fill="#473876"/>
+<circle cx="184" cy="16" r="1" fill="#473876"/>
+<circle cx="192" cy="16" r="1" fill="#473876"/>
+<circle cx="200" cy="16" r="1" fill="#473876"/>
+<circle cx="208" cy="16" r="1" fill="#473876"/>
+<circle cx="216" cy="16" r="1" fill="#473876"/>
+<circle cx="224" cy="16" r="1" fill="#473876"/>
+<circle cx="232" cy="16" r="1" fill="#473876"/>
+<circle cx="240" cy="16" r="1" fill="#473876"/>
+<circle cx="248" cy="16" r="1" fill="#473876"/>
+<circle cx="256" cy="16" r="1" fill="#473876"/>
+<circle cx="264" cy="16" r="1" fill="#473876"/>
+<circle cx="272" cy="16" r="1" fill="#473876"/>
+<circle cx="280" cy="16" r="1" fill="#473876"/>
+<circle cx="8" cy="24" r="1" fill="#473876"/>
+<circle cx="16" cy="24" r="1" fill="#473876"/>
+<circle cx="24" cy="24" r="1" fill="#473876"/>
+<circle cx="32" cy="24" r="1" fill="#473876"/>
+<circle cx="40" cy="24" r="1" fill="#473876"/>
+<circle cx="48" cy="24" r="1" fill="#473876"/>
+<circle cx="56" cy="24" r="1" fill="#473876"/>
+<circle cx="64" cy="24" r="1" fill="#473876"/>
+<circle cx="72" cy="24" r="1" fill="#473876"/>
+<circle cx="80" cy="24" r="1" fill="#473876"/>
+<circle cx="88" cy="24" r="1" fill="#473876"/>
+<circle cx="96" cy="24" r="1" fill="#473876"/>
+<circle cx="104" cy="24" r="1" fill="#473876"/>
+<circle cx="112" cy="24" r="1" fill="#473876"/>
+<circle cx="120" cy="24" r="1" fill="#473876"/>
+<circle cx="128" cy="24" r="1" fill="#473876"/>
+<circle cx="136" cy="24" r="1" fill="#473876"/>
+<circle cx="144" cy="24" r="1" fill="#473876"/>
+<circle cx="152" cy="24" r="1" fill="#473876"/>
+<circle cx="160" cy="24" r="1" fill="#473876"/>
+<circle cx="168" cy="24" r="1" fill="#473876"/>
+<circle cx="176" cy="24" r="1" fill="#473876"/>
+<circle cx="184" cy="24" r="1" fill="#473876"/>
+<circle cx="192" cy="24" r="1" fill="#473876"/>
+<circle cx="200" cy="24" r="1" fill="#473876"/>
+<circle cx="208" cy="24" r="1" fill="#473876"/>
+<circle cx="216" cy="24" r="1" fill="#473876"/>
+<circle cx="224" cy="24" r="1" fill="#473876"/>
+<circle cx="232" cy="24" r="1" fill="#473876"/>
+<circle cx="240" cy="24" r="1" fill="#473876"/>
+<circle cx="248" cy="24" r="1" fill="#473876"/>
+<circle cx="256" cy="24" r="1" fill="#473876"/>
+<circle cx="264" cy="24" r="1" fill="#473876"/>
+<circle cx="272" cy="24" r="1" fill="#473876"/>
+<circle cx="280" cy="24" r="1" fill="#473876"/>
+<circle cx="8" cy="32" r="1" fill="#473876"/>
+<circle cx="16" cy="32" r="1" fill="#473876"/>
+<circle cx="24" cy="32" r="1" fill="#473876"/>
+<circle cx="32" cy="32" r="1" fill="#473876"/>
+<circle cx="40" cy="32" r="1" fill="#473876"/>
+<circle cx="48" cy="32" r="1" fill="#473876"/>
+<circle cx="56" cy="32" r="1" fill="#473876"/>
+<circle cx="64" cy="32" r="1" fill="#473876"/>
+<circle cx="72" cy="32" r="1" fill="#473876"/>
+<circle cx="80" cy="32" r="1" fill="#473876"/>
+<circle cx="88" cy="32" r="1" fill="#473876"/>
+<circle cx="96" cy="32" r="1" fill="#473876"/>
+<circle cx="104" cy="32" r="1" fill="#473876"/>
+<circle cx="112" cy="32" r="1" fill="#473876"/>
+<circle cx="120" cy="32" r="1" fill="#473876"/>
+<circle cx="128" cy="32" r="1" fill="#473876"/>
+<circle cx="136" cy="32" r="1" fill="#473876"/>
+<circle cx="144" cy="32" r="1" fill="#473876"/>
+<circle cx="152" cy="32" r="1" fill="#473876"/>
+<circle cx="160" cy="32" r="1" fill="#473876"/>
+<circle cx="168" cy="32" r="1" fill="#473876"/>
+<circle cx="176" cy="32" r="1" fill="#473876"/>
+<circle cx="184" cy="32" r="1" fill="#473876"/>
+<circle cx="192" cy="32" r="1" fill="#473876"/>
+<circle cx="200" cy="32" r="1" fill="#473876"/>
+<circle cx="208" cy="32" r="1" fill="#473876"/>
+<circle cx="216" cy="32" r="1" fill="#473876"/>
+<circle cx="224" cy="32" r="1" fill="#473876"/>
+<circle cx="232" cy="32" r="1" fill="#473876"/>
+<circle cx="240" cy="32" r="1" fill="#473876"/>
+<circle cx="248" cy="32" r="1" fill="#473876"/>
+<circle cx="256" cy="32" r="1" fill="#473876"/>
+<circle cx="264" cy="32" r="1" fill="#473876"/>
+<circle cx="272" cy="32" r="1" fill="#473876"/>
+<circle cx="280" cy="32" r="1" fill="#473876"/>
+<circle cx="8" cy="40" r="1" fill="#473876"/>
+<circle cx="16" cy="40" r="1" fill="#473876"/>
+<circle cx="24" cy="40" r="1" fill="#473876"/>
+<circle cx="32" cy="40" r="1" fill="#473876"/>
+<circle cx="40" cy="40" r="1" fill="#473876"/>
+<circle cx="48" cy="40" r="1" fill="#473876"/>
+<circle cx="56" cy="40" r="1" fill="#473876"/>
+<circle cx="64" cy="40" r="1" fill="#473876"/>
+<circle cx="72" cy="40" r="1" fill="#473876"/>
+<circle cx="80" cy="40" r="1" fill="#473876"/>
+<circle cx="88" cy="40" r="1" fill="#473876"/>
+<circle cx="96" cy="40" r="1" fill="#473876"/>
+<circle cx="104" cy="40" r="1" fill="#473876"/>
+<circle cx="112" cy="40" r="1" fill="#473876"/>
+<circle cx="120" cy="40" r="1" fill="#473876"/>
+<circle cx="128" cy="40" r="1" fill="#473876"/>
+<circle cx="136" cy="40" r="1" fill="#473876"/>
+<circle cx="144" cy="40" r="1" fill="#473876"/>
+<circle cx="152" cy="40" r="1" fill="#473876"/>
+<circle cx="160" cy="40" r="1" fill="#473876"/>
+<circle cx="168" cy="40" r="1" fill="#473876"/>
+<circle cx="176" cy="40" r="1" fill="#473876"/>
+<circle cx="184" cy="40" r="1" fill="#473876"/>
+<circle cx="192" cy="40" r="1" fill="#473876"/>
+<circle cx="200" cy="40" r="1" fill="#473876"/>
+<circle cx="208" cy="40" r="1" fill="#473876"/>
+<circle cx="216" cy="40" r="1" fill="#473876"/>
+<circle cx="224" cy="40" r="1" fill="#473876"/>
+<circle cx="232" cy="40" r="1" fill="#473876"/>
+<circle cx="240" cy="40" r="1" fill="#473876"/>
+<circle cx="248" cy="40" r="1" fill="#473876"/>
+<circle cx="256" cy="40" r="1" fill="#473876"/>
+<circle cx="264" cy="40" r="1" fill="#473876"/>
+<circle cx="272" cy="40" r="1" fill="#473876"/>
+<circle cx="280" cy="40" r="1" fill="#473876"/>
+<circle cx="8" cy="48" r="1" fill="#473876"/>
+<circle cx="16" cy="48" r="1" fill="#473876"/>
+<circle cx="24" cy="48" r="1" fill="#473876"/>
+<circle cx="32" cy="48" r="1" fill="#473876"/>
+<circle cx="40" cy="48" r="1" fill="#473876"/>
+<circle cx="48" cy="48" r="1" fill="#473876"/>
+<circle cx="56" cy="48" r="1" fill="#473876"/>
+<circle cx="64" cy="48" r="1" fill="#473876"/>
+<circle cx="72" cy="48" r="1" fill="#473876"/>
+<circle cx="80" cy="48" r="1" fill="#473876"/>
+<circle cx="88" cy="48" r="1" fill="#473876"/>
+<circle cx="96" cy="48" r="1" fill="#473876"/>
+<circle cx="104" cy="48" r="1" fill="#473876"/>
+<circle cx="112" cy="48" r="1" fill="#473876"/>
+<circle cx="120" cy="48" r="1" fill="#473876"/>
+<circle cx="128" cy="48" r="1" fill="#473876"/>
+<circle cx="136" cy="48" r="1" fill="#473876"/>
+<circle cx="144" cy="48" r="1" fill="#473876"/>
+<circle cx="152" cy="48" r="1" fill="#473876"/>
+<circle cx="160" cy="48" r="1" fill="#473876"/>
+<circle cx="168" cy="48" r="1" fill="#473876"/>
+<circle cx="176" cy="48" r="1" fill="#473876"/>
+<circle cx="184" cy="48" r="1" fill="#473876"/>
+<circle cx="192" cy="48" r="1" fill="#473876"/>
+<circle cx="200" cy="48" r="1" fill="#473876"/>
+<circle cx="208" cy="48" r="1" fill="#473876"/>
+<circle cx="216" cy="48" r="1" fill="#473876"/>
+<circle cx="224" cy="48" r="1" fill="#473876"/>
+<circle cx="232" cy="48" r="1" fill="#473876"/>
+<circle cx="240" cy="48" r="1" fill="#473876"/>
+<circle cx="248" cy="48" r="1" fill="#473876"/>
+<circle cx="256" cy="48" r="1" fill="#473876"/>
+<circle cx="264" cy="48" r="1" fill="#473876"/>
+<circle cx="272" cy="48" r="1" fill="#473876"/>
+<circle cx="280" cy="48" r="1" fill="#473876"/>
+<circle cx="8" cy="56" r="1" fill="#473876"/>
+<circle cx="16" cy="56" r="1" fill="#473876"/>
+<circle cx="24" cy="56" r="1" fill="#473876"/>
+<circle cx="32" cy="56" r="1" fill="#473876"/>
+<circle cx="40" cy="56" r="1" fill="#473876"/>
+<circle cx="48" cy="56" r="1" fill="#473876"/>
+<circle cx="56" cy="56" r="1" fill="#473876"/>
+<circle cx="64" cy="56" r="1" fill="#473876"/>
+<circle cx="72" cy="56" r="1" fill="#473876"/>
+<circle cx="80" cy="56" r="1" fill="#473876"/>
+<circle cx="88" cy="56" r="1" fill="#473876"/>
+<circle cx="96" cy="56" r="1" fill="#473876"/>
+<circle cx="104" cy="56" r="1" fill="#473876"/>
+<circle cx="112" cy="56" r="1" fill="#473876"/>
+<circle cx="120" cy="56" r="1" fill="#473876"/>
+<circle cx="128" cy="56" r="1" fill="#473876"/>
+<circle cx="136" cy="56" r="1" fill="#473876"/>
+<circle cx="144" cy="56" r="1" fill="#473876"/>
+<circle cx="152" cy="56" r="1" fill="#473876"/>
+<circle cx="160" cy="56" r="1" fill="#473876"/>
+<circle cx="168" cy="56" r="1" fill="#473876"/>
+<circle cx="176" cy="56" r="1" fill="#473876"/>
+<circle cx="184" cy="56" r="1" fill="#473876"/>
+<circle cx="192" cy="56" r="1" fill="#473876"/>
+<circle cx="200" cy="56" r="1" fill="#473876"/>
+<circle cx="208" cy="56" r="1" fill="#473876"/>
+<circle cx="216" cy="56" r="1" fill="#473876"/>
+<circle cx="224" cy="56" r="1" fill="#473876"/>
+<circle cx="232" cy="56" r="1" fill="#473876"/>
+<circle cx="240" cy="56" r="1" fill="#473876"/>
+<circle cx="248" cy="56" r="1" fill="#473876"/>
+<circle cx="256" cy="56" r="1" fill="#473876"/>
+<circle cx="264" cy="56" r="1" fill="#473876"/>
+<circle cx="272" cy="56" r="1" fill="#473876"/>
+<circle cx="280" cy="56" r="1" fill="#473876"/>
+<circle cx="8" cy="64" r="1" fill="#473876"/>
+<circle cx="16" cy="64" r="1" fill="#473876"/>
+<circle cx="24" cy="64" r="1" fill="#473876"/>
+<circle cx="32" cy="64" r="1" fill="#473876"/>
+<circle cx="40" cy="64" r="1" fill="#473876"/>
+<circle cx="48" cy="64" r="1" fill="#473876"/>
+<circle cx="56" cy="64" r="1" fill="#473876"/>
+<circle cx="64" cy="64" r="1" fill="#473876"/>
+<circle cx="72" cy="64" r="1" fill="#473876"/>
+<circle cx="80" cy="64" r="1" fill="#473876"/>
+<circle cx="88" cy="64" r="1" fill="#473876"/>
+<circle cx="96" cy="64" r="1" fill="#473876"/>
+<circle cx="104" cy="64" r="1" fill="#473876"/>
+<circle cx="112" cy="64" r="1" fill="#473876"/>
+<circle cx="120" cy="64" r="1" fill="#473876"/>
+<circle cx="128" cy="64" r="1" fill="#473876"/>
+<circle cx="136" cy="64" r="1" fill="#473876"/>
+<circle cx="144" cy="64" r="1" fill="#473876"/>
+<circle cx="152" cy="64" r="1" fill="#473876"/>
+<circle cx="160" cy="64" r="1" fill="#473876"/>
+<circle cx="168" cy="64" r="1" fill="#473876"/>
+<circle cx="176" cy="64" r="1" fill="#473876"/>
+<circle cx="184" cy="64" r="1" fill="#473876"/>
+<circle cx="192" cy="64" r="1" fill="#473876"/>
+<circle cx="200" cy="64" r="1" fill="#473876"/>
+<circle cx="208" cy="64" r="1" fill="#473876"/>
+<circle cx="216" cy="64" r="1" fill="#473876"/>
+<circle cx="224" cy="64" r="1" fill="#473876"/>
+<circle cx="232" cy="64" r="1" fill="#473876"/>
+<circle cx="240" cy="64" r="1" fill="#473876"/>
+<circle cx="248" cy="64" r="1" fill="#473876"/>
+<circle cx="256" cy="64" r="1" fill="#473876"/>
+<circle cx="264" cy="64" r="1" fill="#473876"/>
+<circle cx="272" cy="64" r="1" fill="#473876"/>
+<circle cx="280" cy="64" r="1" fill="#473876"/>
+<circle cx="8" cy="72" r="1" fill="#473876"/>
+<circle cx="16" cy="72" r="1" fill="#473876"/>
+<circle cx="24" cy="72" r="1" fill="#473876"/>
+<circle cx="32" cy="72" r="1" fill="#473876"/>
+<circle cx="40" cy="72" r="1" fill="#473876"/>
+<circle cx="48" cy="72" r="1" fill="#473876"/>
+<circle cx="56" cy="72" r="1" fill="#473876"/>
+<circle cx="64" cy="72" r="1" fill="#473876"/>
+<circle cx="72" cy="72" r="1" fill="#473876"/>
+<circle cx="80" cy="72" r="1" fill="#473876"/>
+<circle cx="88" cy="72" r="1" fill="#473876"/>
+<circle cx="96" cy="72" r="1" fill="#473876"/>
+<circle cx="104" cy="72" r="1" fill="#473876"/>
+<circle cx="112" cy="72" r="1" fill="#473876"/>
+<circle cx="120" cy="72" r="1" fill="#473876"/>
+<circle cx="128" cy="72" r="1" fill="#473876"/>
+<circle cx="136" cy="72" r="1" fill="#473876"/>
+<circle cx="144" cy="72" r="1" fill="#473876"/>
+<circle cx="152" cy="72" r="1" fill="#473876"/>
+<circle cx="160" cy="72" r="1" fill="#473876"/>
+<circle cx="168" cy="72" r="1" fill="#473876"/>
+<circle cx="176" cy="72" r="1" fill="#473876"/>
+<circle cx="184" cy="72" r="1" fill="#473876"/>
+<circle cx="192" cy="72" r="1" fill="#473876"/>
+<circle cx="200" cy="72" r="1" fill="#473876"/>
+<circle cx="208" cy="72" r="1" fill="#473876"/>
+<circle cx="216" cy="72" r="1" fill="#473876"/>
+<circle cx="224" cy="72" r="1" fill="#473876"/>
+<circle cx="232" cy="72" r="1" fill="#473876"/>
+<circle cx="240" cy="72" r="1" fill="#473876"/>
+<circle cx="248" cy="72" r="1" fill="#473876"/>
+<circle cx="256" cy="72" r="1" fill="#473876"/>
+<circle cx="264" cy="72" r="1" fill="#473876"/>
+<circle cx="272" cy="72" r="1" fill="#473876"/>
+<circle cx="280" cy="72" r="1" fill="#473876"/>
+<circle cx="8" cy="80" r="1" fill="#473876"/>
+<circle cx="16" cy="80" r="1" fill="#473876"/>
+<circle cx="24" cy="80" r="1" fill="#473876"/>
+<circle cx="32" cy="80" r="1" fill="#473876"/>
+<circle cx="40" cy="80" r="1" fill="#473876"/>
+<circle cx="48" cy="80" r="1" fill="#473876"/>
+<circle cx="56" cy="80" r="1" fill="#473876"/>
+<circle cx="64" cy="80" r="1" fill="#473876"/>
+<circle cx="72" cy="80" r="1" fill="#473876"/>
+<circle cx="80" cy="80" r="1" fill="#473876"/>
+<circle cx="88" cy="80" r="1" fill="#473876"/>
+<circle cx="96" cy="80" r="1" fill="#473876"/>
+<circle cx="104" cy="80" r="1" fill="#473876"/>
+<circle cx="112" cy="80" r="1" fill="#473876"/>
+<circle cx="120" cy="80" r="1" fill="#473876"/>
+<circle cx="128" cy="80" r="1" fill="#473876"/>
+<circle cx="136" cy="80" r="1" fill="#473876"/>
+<circle cx="144" cy="80" r="1" fill="#473876"/>
+<circle cx="152" cy="80" r="1" fill="#473876"/>
+<circle cx="160" cy="80" r="1" fill="#473876"/>
+<circle cx="168" cy="80" r="1" fill="#473876"/>
+<circle cx="176" cy="80" r="1" fill="#473876"/>
+<circle cx="184" cy="80" r="1" fill="#473876"/>
+<circle cx="192" cy="80" r="1" fill="#473876"/>
+<circle cx="200" cy="80" r="1" fill="#473876"/>
+<circle cx="208" cy="80" r="1" fill="#473876"/>
+<circle cx="216" cy="80" r="1" fill="#473876"/>
+<circle cx="224" cy="80" r="1" fill="#473876"/>
+<circle cx="232" cy="80" r="1" fill="#473876"/>
+<circle cx="240" cy="80" r="1" fill="#473876"/>
+<circle cx="248" cy="80" r="1" fill="#473876"/>
+<circle cx="256" cy="80" r="1" fill="#473876"/>
+<circle cx="264" cy="80" r="1" fill="#473876"/>
+<circle cx="272" cy="80" r="1" fill="#473876"/>
+<circle cx="280" cy="80" r="1" fill="#473876"/>
+<circle cx="8" cy="88" r="1" fill="#473876"/>
+<circle cx="16" cy="88" r="1" fill="#473876"/>
+<circle cx="24" cy="88" r="1" fill="#473876"/>
+<circle cx="32" cy="88" r="1" fill="#473876"/>
+<circle cx="40" cy="88" r="1" fill="#473876"/>
+<circle cx="48" cy="88" r="1" fill="#473876"/>
+<circle cx="56" cy="88" r="1" fill="#473876"/>
+<circle cx="64" cy="88" r="1" fill="#473876"/>
+<circle cx="72" cy="88" r="1" fill="#473876"/>
+<circle cx="80" cy="88" r="1" fill="#473876"/>
+<circle cx="88" cy="88" r="1" fill="#473876"/>
+<circle cx="96" cy="88" r="1" fill="#473876"/>
+<circle cx="104" cy="88" r="1" fill="#473876"/>
+<circle cx="112" cy="88" r="1" fill="#473876"/>
+<circle cx="120" cy="88" r="1" fill="#473876"/>
+<circle cx="128" cy="88" r="1" fill="#473876"/>
+<circle cx="136" cy="88" r="1" fill="#473876"/>
+<circle cx="144" cy="88" r="1" fill="#473876"/>
+<circle cx="152" cy="88" r="1" fill="#473876"/>
+<circle cx="160" cy="88" r="1" fill="#473876"/>
+<circle cx="168" cy="88" r="1" fill="#473876"/>
+<circle cx="176" cy="88" r="1" fill="#473876"/>
+<circle cx="184" cy="88" r="1" fill="#473876"/>
+<circle cx="192" cy="88" r="1" fill="#473876"/>
+<circle cx="200" cy="88" r="1" fill="#473876"/>
+<circle cx="208" cy="88" r="1" fill="#473876"/>
+<circle cx="216" cy="88" r="1" fill="#473876"/>
+<circle cx="224" cy="88" r="1" fill="#473876"/>
+<circle cx="232" cy="88" r="1" fill="#473876"/>
+<circle cx="240" cy="88" r="1" fill="#473876"/>
+<circle cx="248" cy="88" r="1" fill="#473876"/>
+<circle cx="256" cy="88" r="1" fill="#473876"/>
+<circle cx="264" cy="88" r="1" fill="#473876"/>
+<circle cx="272" cy="88" r="1" fill="#473876"/>
+<circle cx="280" cy="88" r="1" fill="#473876"/>
+<circle cx="8" cy="96" r="1" fill="#473876"/>
+<circle cx="16" cy="96" r="1" fill="#473876"/>
+<circle cx="24" cy="96" r="1" fill="#473876"/>
+<circle cx="32" cy="96" r="1" fill="#473876"/>
+<circle cx="40" cy="96" r="1" fill="#473876"/>
+<circle cx="48" cy="96" r="1" fill="#473876"/>
+<circle cx="56" cy="96" r="1" fill="#473876"/>
+<circle cx="64" cy="96" r="1" fill="#473876"/>
+<circle cx="72" cy="96" r="1" fill="#473876"/>
+<circle cx="80" cy="96" r="1" fill="#473876"/>
+<circle cx="88" cy="96" r="1" fill="#473876"/>
+<circle cx="96" cy="96" r="1" fill="#473876"/>
+<circle cx="104" cy="96" r="1" fill="#473876"/>
+<circle cx="112" cy="96" r="1" fill="#473876"/>
+<circle cx="120" cy="96" r="1" fill="#473876"/>
+<circle cx="128" cy="96" r="1" fill="#473876"/>
+<circle cx="136" cy="96" r="1" fill="#473876"/>
+<circle cx="144" cy="96" r="1" fill="#473876"/>
+<circle cx="152" cy="96" r="1" fill="#473876"/>
+<circle cx="160" cy="96" r="1" fill="#473876"/>
+<circle cx="168" cy="96" r="1" fill="#473876"/>
+<circle cx="176" cy="96" r="1" fill="#473876"/>
+<circle cx="184" cy="96" r="1" fill="#473876"/>
+<circle cx="192" cy="96" r="1" fill="#473876"/>
+<circle cx="200" cy="96" r="1" fill="#473876"/>
+<circle cx="208" cy="96" r="1" fill="#473876"/>
+<circle cx="216" cy="96" r="1" fill="#473876"/>
+<circle cx="224" cy="96" r="1" fill="#473876"/>
+<circle cx="232" cy="96" r="1" fill="#473876"/>
+<circle cx="240" cy="96" r="1" fill="#473876"/>
+<circle cx="248" cy="96" r="1" fill="#473876"/>
+<circle cx="256" cy="96" r="1" fill="#473876"/>
+<circle cx="264" cy="96" r="1" fill="#473876"/>
+<circle cx="272" cy="96" r="1" fill="#473876"/>
+<circle cx="280" cy="96" r="1" fill="#473876"/>
+<circle cx="8" cy="104" r="1" fill="#473876"/>
+<circle cx="16" cy="104" r="1" fill="#473876"/>
+<circle cx="24" cy="104" r="1" fill="#473876"/>
+<circle cx="32" cy="104" r="1" fill="#473876"/>
+<circle cx="40" cy="104" r="1" fill="#473876"/>
+<circle cx="48" cy="104" r="1" fill="#473876"/>
+<circle cx="56" cy="104" r="1" fill="#473876"/>
+<circle cx="64" cy="104" r="1" fill="#473876"/>
+<circle cx="72" cy="104" r="1" fill="#473876"/>
+<circle cx="80" cy="104" r="1" fill="#473876"/>
+<circle cx="88" cy="104" r="1" fill="#473876"/>
+<circle cx="96" cy="104" r="1" fill="#473876"/>
+<circle cx="104" cy="104" r="1" fill="#473876"/>
+<circle cx="112" cy="104" r="1" fill="#473876"/>
+<circle cx="120" cy="104" r="1" fill="#473876"/>
+<circle cx="128" cy="104" r="1" fill="#473876"/>
+<circle cx="136" cy="104" r="1" fill="#473876"/>
+<circle cx="144" cy="104" r="1" fill="#473876"/>
+<circle cx="152" cy="104" r="1" fill="#473876"/>
+<circle cx="160" cy="104" r="1" fill="#473876"/>
+<circle cx="168" cy="104" r="1" fill="#473876"/>
+<circle cx="176" cy="104" r="1" fill="#473876"/>
+<circle cx="184" cy="104" r="1" fill="#473876"/>
+<circle cx="192" cy="104" r="1" fill="#473876"/>
+<circle cx="200" cy="104" r="1" fill="#473876"/>
+<circle cx="208" cy="104" r="1" fill="#473876"/>
+<circle cx="216" cy="104" r="1" fill="#473876"/>
+<circle cx="224" cy="104" r="1" fill="#473876"/>
+<circle cx="232" cy="104" r="1" fill="#473876"/>
+<circle cx="240" cy="104" r="1" fill="#473876"/>
+<circle cx="248" cy="104" r="1" fill="#473876"/>
+<circle cx="256" cy="104" r="1" fill="#473876"/>
+<circle cx="264" cy="104" r="1" fill="#473876"/>
+<circle cx="272" cy="104" r="1" fill="#473876"/>
+<circle cx="280" cy="104" r="1" fill="#473876"/>
+<circle cx="8" cy="112" r="1" fill="#473876"/>
+<circle cx="16" cy="112" r="1" fill="#473876"/>
+<circle cx="24" cy="112" r="1" fill="#473876"/>
+<circle cx="32" cy="112" r="1" fill="#473876"/>
+<circle cx="40" cy="112" r="1" fill="#473876"/>
+<circle cx="48" cy="112" r="1" fill="#473876"/>
+<circle cx="56" cy="112" r="1" fill="#473876"/>
+<circle cx="64" cy="112" r="1" fill="#473876"/>
+<circle cx="72" cy="112" r="1" fill="#473876"/>
+<circle cx="80" cy="112" r="1" fill="#473876"/>
+<circle cx="88" cy="112" r="1" fill="#473876"/>
+<circle cx="96" cy="112" r="1" fill="#473876"/>
+<circle cx="104" cy="112" r="1" fill="#473876"/>
+<circle cx="112" cy="112" r="1" fill="#473876"/>
+<circle cx="120" cy="112" r="1" fill="#473876"/>
+<circle cx="128" cy="112" r="1" fill="#473876"/>
+<circle cx="136" cy="112" r="1" fill="#473876"/>
+<circle cx="144" cy="112" r="1" fill="#473876"/>
+<circle cx="152" cy="112" r="1" fill="#473876"/>
+<circle cx="160" cy="112" r="1" fill="#473876"/>
+<circle cx="168" cy="112" r="1" fill="#473876"/>
+<circle cx="176" cy="112" r="1" fill="#473876"/>
+<circle cx="184" cy="112" r="1" fill="#473876"/>
+<circle cx="192" cy="112" r="1" fill="#473876"/>
+<circle cx="200" cy="112" r="1" fill="#473876"/>
+<circle cx="208" cy="112" r="1" fill="#473876"/>
+<circle cx="216" cy="112" r="1" fill="#473876"/>
+<circle cx="224" cy="112" r="1" fill="#473876"/>
+<circle cx="232" cy="112" r="1" fill="#473876"/>
+<circle cx="240" cy="112" r="1" fill="#473876"/>
+<circle cx="248" cy="112" r="1" fill="#473876"/>
+<circle cx="256" cy="112" r="1" fill="#473876"/>
+<circle cx="264" cy="112" r="1" fill="#473876"/>
+<circle cx="272" cy="112" r="1" fill="#473876"/>
+<circle cx="280" cy="112" r="1" fill="#473876"/>
+<circle cx="120" cy="120" r="1" fill="#473876"/>
+<circle cx="128" cy="120" r="1" fill="#473876"/>
+<circle cx="136" cy="120" r="1" fill="#473876"/>
+<circle cx="144" cy="120" r="1" fill="#473876"/>
+<circle cx="152" cy="120" r="1" fill="#473876"/>
+<circle cx="160" cy="120" r="1" fill="#473876"/>
+<circle cx="168" cy="120" r="1" fill="#473876"/>
+<rect width="288" height="120" fill="url(#paint0_radial_302_5952)"/>
+<path d="M109 59.5614C109 55.6495 112.305 52.4783 116.382 52.4783H118.227V70.1139C118.227 71.1316 117.402 71.9566 116.384 71.9566C112.306 71.9566 109 68.7843 109 64.8711V59.5614Z" fill="#C171FF"/>
+<path d="M120.447 59.5614C120.447 55.6495 120.842 52.4783 116.765 52.4783H114.92V71.9566H116.762C120.841 71.9566 120.447 68.7843 120.447 64.8711V59.5614Z" fill="#C171FF"/>
+<path d="M170.872 58.2072C170.872 51.5219 167.854 45.1103 162.482 40.383C157.111 35.6558 149.825 33 142.228 33C134.631 33 127.345 35.6558 121.973 40.383C116.601 45.1103 113.583 51.5219 113.583 58.2072H117.701C117.701 52.483 120.285 46.9931 124.885 42.9455C129.484 38.8978 135.723 36.6238 142.228 36.6238C148.733 36.6238 154.971 38.8978 159.571 42.9455C164.17 46.9931 166.754 52.483 166.754 58.2072H170.872Z" fill="#C171FF"/>
+<path d="M128.764 57.5996C128.764 56.3093 129.81 55.2633 131.1 55.2633C132.391 55.2633 133.437 56.3093 133.437 57.5996V62.9988C133.437 64.2891 132.391 65.335 131.1 65.335C129.81 65.335 128.764 64.2891 128.764 62.9988V57.5996Z" fill="#E2DDFE"/>
+<path d="M136.239 57.5996C136.239 56.3093 137.285 55.2633 138.575 55.2633C139.866 55.2633 140.912 56.3093 140.912 57.5996V62.9988C140.912 64.2891 139.866 65.335 138.575 65.335C137.285 65.335 136.239 64.2891 136.239 62.9988V57.5996Z" fill="#E2DDFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M154.379 48.8538C145.679 47.6264 138.587 47.5779 129.692 48.8484C127.444 49.1696 125.956 49.3866 124.822 49.7181C123.77 50.0255 123.172 50.392 122.677 50.945C121.652 52.09 121.517 53.385 121.378 57.9016C121.24 62.3404 121.512 66.3186 122.027 70.7947C122.301 73.1799 122.49 74.7896 122.792 76.0134C123.078 77.1742 123.423 77.7983 123.904 78.2762C124.389 78.7578 125.01 79.0975 126.149 79.3731C127.354 79.6647 128.936 79.841 131.287 80.0974C138.889 80.9268 144.579 80.9227 152.209 80.1018C154.588 79.8459 156.196 79.6694 157.419 79.3799C158.581 79.1047 159.206 78.7674 159.684 78.2996C160.152 77.8415 160.509 77.2097 160.819 75.991C161.143 74.7195 161.363 73.0371 161.681 70.5655C162.249 66.1558 162.659 62.2831 162.674 58.0406C162.691 53.5046 162.599 52.214 161.562 51.0169C161.062 50.4387 160.454 50.0585 159.378 49.7419C158.216 49.4 156.688 49.1797 154.379 48.8538ZM129.149 45.0452C138.415 43.7218 145.871 43.7736 154.916 45.0497L155.048 45.0684C157.19 45.3705 158.999 45.6256 160.462 46.0564C162.042 46.5213 163.363 47.2271 164.467 48.5027C166.55 50.9089 166.536 53.7639 166.518 57.557C166.518 57.7212 166.517 57.8872 166.516 58.055C166.499 62.5407 166.065 66.6025 165.492 71.0564L165.476 71.1742C165.177 73.4985 164.93 75.4139 164.543 76.9381C164.135 78.5408 163.526 79.915 162.372 81.0444C161.229 82.1641 159.878 82.7459 158.304 83.1183C156.818 83.4701 154.969 83.669 152.74 83.9087L152.62 83.9216C144.719 84.7716 138.751 84.7764 130.87 83.9165L130.748 83.9033C128.551 83.6636 126.721 83.464 125.246 83.1072C123.678 82.7279 122.336 82.1343 121.196 81.0007C120.051 79.8632 119.45 78.5115 119.061 76.9322C118.695 75.4427 118.481 73.588 118.224 71.3546L118.21 71.2337C117.682 66.6432 117.393 62.4676 117.538 57.7829C117.543 57.6129 117.548 57.4448 117.553 57.2785C117.666 53.5138 117.75 50.6898 119.814 48.3833C120.909 47.1595 122.203 46.4809 123.744 46.0306C125.173 45.613 126.935 45.3614 129.02 45.0636C129.063 45.0575 129.106 45.0514 129.149 45.0452Z" fill="#E2DDFE"/>
+<path d="M163.537 60.9007C163.537 56.6884 166.951 53.2736 171.164 53.2736H172.428V74.2482H171.166C166.953 74.2482 163.537 70.8322 163.537 66.6183V60.9007Z" fill="#C171FF"/>
+<path d="M178.132 60.9007C178.132 56.6884 174.717 53.2736 170.505 53.2736H169.241V74.2482H170.502C174.716 74.2482 178.132 70.8322 178.132 66.6183V60.9007Z" fill="#C171FF"/>
+<path d="M170.695 64.7044C170.695 64.7044 170.827 72.5295 169.225 78.2584C167.622 83.9873 163.497 85.5962 159.073 86.8518C154.65 88.1073 151.594 87.9975 151.594 87.9975" stroke="#C171FF" stroke-width="2.85772" stroke-linecap="round"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_302_5952" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(144.5 67) rotate(90.5405) scale(53.0024 127.206)">
+<stop stop-color="#2E3035" stop-opacity="0.95"/>
+<stop offset="0.566518" stop-color="#2E3035" stop-opacity="0"/>
+<stop offset="1" stop-color="#2E3035" stop-opacity="0.7"/>
+</radialGradient>
+<clipPath id="clip0_302_5952">
+<rect width="288" height="120" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/captain/assistant-popover-light.svg b/public/assets/images/dashboard/captain/assistant-popover-light.svg
new file mode 100644
index 000000000..1153c39e3
--- /dev/null
+++ b/public/assets/images/dashboard/captain/assistant-popover-light.svg
@@ -0,0 +1,558 @@
+<svg width="288" height="120" viewBox="0 0 288 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_302_7643)">
+<rect width="288" height="120" rx="8" fill="#F9F9FB"/>
+<circle cx="8" r="1" fill="#E1D9FF"/>
+<circle cx="16" r="1" fill="#E1D9FF"/>
+<circle cx="24" r="1" fill="#E1D9FF"/>
+<circle cx="32" r="1" fill="#E1D9FF"/>
+<circle cx="40" r="1" fill="#E1D9FF"/>
+<circle cx="48" r="1" fill="#E1D9FF"/>
+<circle cx="56" r="1" fill="#E1D9FF"/>
+<circle cx="64" r="1" fill="#E1D9FF"/>
+<circle cx="72" r="1" fill="#E1D9FF"/>
+<circle cx="80" r="1" fill="#E1D9FF"/>
+<circle cx="88" r="1" fill="#E1D9FF"/>
+<circle cx="96" r="1" fill="#E1D9FF"/>
+<circle cx="104" r="1" fill="#E1D9FF"/>
+<circle cx="112" r="1" fill="#E1D9FF"/>
+<circle cx="120" r="1" fill="#E1D9FF"/>
+<circle cx="128" r="1" fill="#E1D9FF"/>
+<circle cx="136" r="1" fill="#E1D9FF"/>
+<circle cx="144" r="1" fill="#E1D9FF"/>
+<circle cx="152" r="1" fill="#E1D9FF"/>
+<circle cx="160" r="1" fill="#E1D9FF"/>
+<circle cx="168" r="1" fill="#E1D9FF"/>
+<circle cx="176" r="1" fill="#E1D9FF"/>
+<circle cx="184" r="1" fill="#E1D9FF"/>
+<circle cx="192" r="1" fill="#E1D9FF"/>
+<circle cx="200" r="1" fill="#E1D9FF"/>
+<circle cx="208" r="1" fill="#E1D9FF"/>
+<circle cx="216" r="1" fill="#E1D9FF"/>
+<circle cx="224" r="1" fill="#E1D9FF"/>
+<circle cx="232" r="1" fill="#E1D9FF"/>
+<circle cx="240" r="1" fill="#E1D9FF"/>
+<circle cx="248" r="1" fill="#E1D9FF"/>
+<circle cx="256" r="1" fill="#E1D9FF"/>
+<circle cx="264" r="1" fill="#E1D9FF"/>
+<circle cx="272" r="1" fill="#E1D9FF"/>
+<circle cx="280" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="120" r="1" fill="#E1D9FF"/>
+<rect width="288" height="120" fill="url(#paint0_radial_302_7643)"/>
+<path d="M109 59.5614C109 55.6495 112.305 52.4783 116.382 52.4783H118.227V70.1139C118.227 71.1316 117.402 71.9566 116.384 71.9566C112.306 71.9566 109 68.7843 109 64.8711V59.5614Z" fill="#C171FF"/>
+<path d="M120.447 59.5614C120.447 55.6495 120.842 52.4783 116.765 52.4783H114.92V71.9566H116.762C120.841 71.9566 120.447 68.7843 120.447 64.8711V59.5614Z" fill="#C171FF"/>
+<path d="M170.872 58.2072C170.872 51.5219 167.854 45.1103 162.482 40.383C157.111 35.6558 149.825 33 142.228 33C134.631 33 127.345 35.6558 121.973 40.383C116.601 45.1103 113.583 51.5219 113.583 58.2072H117.701C117.701 52.483 120.285 46.9931 124.885 42.9455C129.484 38.8978 135.723 36.6238 142.228 36.6238C148.733 36.6238 154.971 38.8978 159.571 42.9455C164.17 46.9931 166.754 52.483 166.754 58.2072H170.872Z" fill="#C171FF"/>
+<path d="M128.764 57.5996C128.764 56.3093 129.81 55.2633 131.1 55.2633C132.391 55.2633 133.437 56.3093 133.437 57.5996V62.9988C133.437 64.2891 132.391 65.335 131.1 65.335C129.81 65.335 128.764 64.2891 128.764 62.9988V57.5996Z" fill="#2F265F"/>
+<path d="M136.239 57.5996C136.239 56.3093 137.285 55.2633 138.575 55.2633C139.866 55.2633 140.912 56.3093 140.912 57.5996V62.9988C140.912 64.2891 139.866 65.335 138.575 65.335C137.285 65.335 136.239 64.2891 136.239 62.9988V57.5996Z" fill="#2F265F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M154.379 48.8538C145.679 47.6264 138.587 47.5779 129.692 48.8484C127.444 49.1696 125.956 49.3866 124.822 49.7181C123.77 50.0255 123.172 50.392 122.677 50.945C121.652 52.09 121.517 53.385 121.378 57.9016C121.24 62.3404 121.512 66.3186 122.027 70.7947C122.301 73.1799 122.49 74.7896 122.792 76.0134C123.078 77.1742 123.423 77.7983 123.904 78.2762C124.389 78.7578 125.01 79.0975 126.149 79.3731C127.354 79.6647 128.936 79.841 131.287 80.0974C138.889 80.9268 144.579 80.9227 152.209 80.1018C154.588 79.8459 156.196 79.6694 157.419 79.3799C158.581 79.1047 159.206 78.7674 159.684 78.2996C160.152 77.8415 160.509 77.2097 160.819 75.991C161.143 74.7195 161.363 73.0371 161.681 70.5655C162.249 66.1558 162.659 62.2831 162.674 58.0406C162.691 53.5046 162.599 52.214 161.562 51.0169C161.062 50.4387 160.454 50.0585 159.378 49.7419C158.216 49.4 156.688 49.1797 154.379 48.8538ZM129.149 45.0452C138.415 43.7218 145.871 43.7736 154.916 45.0497L155.048 45.0684C157.19 45.3705 158.999 45.6256 160.462 46.0564C162.042 46.5213 163.363 47.2271 164.467 48.5027C166.55 50.9089 166.536 53.7639 166.518 57.557C166.518 57.7212 166.517 57.8872 166.516 58.055C166.499 62.5407 166.065 66.6025 165.492 71.0564L165.476 71.1742C165.177 73.4985 164.93 75.4139 164.543 76.9381C164.135 78.5408 163.526 79.915 162.372 81.0444C161.229 82.1641 159.878 82.7459 158.304 83.1183C156.818 83.4701 154.969 83.669 152.74 83.9087L152.62 83.9216C144.719 84.7716 138.751 84.7764 130.87 83.9165L130.748 83.9033C128.551 83.6636 126.721 83.464 125.246 83.1072C123.678 82.7279 122.336 82.1343 121.196 81.0007C120.051 79.8632 119.45 78.5115 119.061 76.9322C118.695 75.4427 118.481 73.588 118.224 71.3546L118.21 71.2337C117.682 66.6432 117.393 62.4676 117.538 57.7829C117.543 57.6129 117.548 57.4448 117.553 57.2785C117.666 53.5138 117.75 50.6898 119.814 48.3833C120.909 47.1595 122.203 46.4809 123.744 46.0306C125.173 45.613 126.935 45.3614 129.02 45.0636C129.063 45.0575 129.106 45.0514 129.149 45.0452Z" fill="#2F265F"/>
+<path d="M163.537 60.9007C163.537 56.6884 166.951 53.2736 171.164 53.2736H172.428V74.2482H171.166C166.953 74.2482 163.537 70.8322 163.537 66.6183V60.9007Z" fill="#C171FF"/>
+<path d="M178.132 60.9007C178.132 56.6884 174.717 53.2736 170.505 53.2736H169.241V74.2482H170.502C174.716 74.2482 178.132 70.8322 178.132 66.6183V60.9007Z" fill="#C171FF"/>
+<path d="M170.695 64.7044C170.695 64.7044 170.827 72.5295 169.225 78.2584C167.622 83.9873 163.497 85.5962 159.073 86.8518C154.65 88.1073 151.594 87.9975 151.594 87.9975" stroke="#C171FF" stroke-width="2.85772" stroke-linecap="round"/>
+</g>
+<rect x="0.5" y="0.5" width="287" height="119" rx="7.5" stroke="#ECECEC"/>
+<defs>
+<radialGradient id="paint0_radial_302_7643" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(144.5 67) rotate(90.5405) scale(53.0024 127.206)">
+<stop stop-color="#F9F9FB" stop-opacity="0.95"/>
+<stop offset="0.566518" stop-color="#F9F9FB" stop-opacity="0"/>
+<stop offset="1" stop-color="#F9F9FB" stop-opacity="0.7"/>
+</radialGradient>
+<clipPath id="clip0_302_7643">
+<rect width="288" height="120" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/captain/document-dark.svg b/public/assets/images/dashboard/captain/document-dark.svg
new file mode 100644
index 000000000..d6bcde260
--- /dev/null
+++ b/public/assets/images/dashboard/captain/document-dark.svg
@@ -0,0 +1,26 @@
+<svg width="120" height="104" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_156_14208)">
+<rect width="120" height="104" rx="8" fill="#1B1B1F"/>
+<path d="M54.4477 26.5242C54.2821 25.4104 55.0508 24.3732 56.1646 24.2076C57.2785 24.0419 58.3157 24.8106 58.4813 25.9245L59.1744 30.5855C59.34 31.6994 58.5713 32.7366 57.4575 32.9022C56.3436 33.0678 55.3064 32.2991 55.1408 31.1853L54.4477 26.5242Z" fill="#E2DDFE"/>
+<path d="M60.9011 25.5647C60.7355 24.4508 61.5042 23.4136 62.6181 23.248C63.7319 23.0823 64.7691 23.851 64.9347 24.9649L65.6278 29.6259C65.7934 30.7398 65.0247 31.777 63.9109 31.9426C62.797 32.1082 61.7598 31.3395 61.5942 30.2257L60.9011 25.5647Z" fill="#E2DDFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M75.4378 15.6862C67.77 15.7433 61.6417 16.6118 54.1257 18.8504C52.2258 19.4163 50.9694 19.7946 50.0327 20.2264C49.1642 20.6268 48.6948 21.02 48.3387 21.5609C47.6012 22.6808 47.6509 23.8161 48.1101 27.7331C48.5614 31.5826 49.3067 34.982 50.3258 38.78C50.8688 40.8038 51.2384 42.1692 51.6557 43.187C52.0516 44.1524 52.4303 44.6468 52.9065 44.9976C53.3866 45.3512 53.9662 45.5647 54.9853 45.6564C56.0633 45.7534 57.4513 45.7025 59.5134 45.6222C66.1825 45.3624 71.0944 44.6284 77.576 42.9403C79.5969 42.414 80.9619 42.0553 81.9808 41.6483C82.9489 41.2616 83.4451 40.8902 83.7975 40.425C84.1425 39.9695 84.3699 39.3782 84.4811 38.2864C84.5971 37.1472 84.5711 35.6665 84.5287 33.492C84.4531 29.6123 84.3092 26.2165 83.7784 22.5521C83.2108 18.6341 82.965 17.5318 81.9169 16.6314C81.4107 16.1965 80.8366 15.9464 79.8673 15.8112C78.8205 15.6652 77.4732 15.6711 75.4378 15.6862ZM53.1686 15.637C60.9981 13.305 67.4409 12.3927 75.4129 12.3333L75.5295 12.3325C77.417 12.3183 79.0117 12.3064 80.3306 12.4904C81.754 12.6889 82.985 13.1286 84.1018 14.0881C86.2086 15.898 86.5634 18.3644 87.0347 21.6412C87.0551 21.783 87.0757 21.9264 87.0967 22.0714C87.658 25.9459 87.8047 29.5081 87.8811 33.4267L87.8831 33.5304C87.923 35.5753 87.9558 37.2604 87.8168 38.626C87.6706 40.0619 87.321 41.3264 86.4703 42.4495C85.627 43.5628 84.5353 44.2385 83.2246 44.762C81.9869 45.2565 80.4161 45.6655 78.5228 46.1585L78.4211 46.185C71.709 47.9331 66.5576 48.7033 59.6439 48.9726L59.5372 48.9768C57.6093 49.052 56.0039 49.1146 54.6849 48.9959C53.2827 48.8697 52.0479 48.5296 50.918 47.6973C49.7843 46.8622 49.092 45.7725 48.5534 44.459C48.0455 43.2202 47.6233 41.6465 47.1149 39.7515L47.0873 39.6489C46.0422 35.7538 45.2562 32.1863 44.7799 28.1235C44.7626 27.9761 44.7454 27.8303 44.7284 27.6861C44.3423 24.4217 44.0527 21.973 45.5383 19.7169C46.3265 18.5199 47.3567 17.7679 48.629 17.1814C49.809 16.6375 51.2978 16.1941 53.0599 15.6693C53.096 15.6586 53.1322 15.6478 53.1686 15.637Z" fill="#E2DDFE"/>
+<path d="M52.6139 31.385L45.538 32.5217C43.584 32.8356 42.2545 34.6741 42.5684 36.6281L43.1367 40.166C43.4506 42.12 45.2891 43.4495 47.243 43.1357L54.319 41.9989C56.2729 41.6851 57.6025 39.8466 57.2886 37.8926L56.7202 34.3546C56.4064 32.4007 54.5679 31.0711 52.6139 31.385Z" stroke="#C171FF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M64.0798 34.9869C63.9291 34.0486 63.4095 33.209 62.6352 32.6527C61.861 32.0965 60.8956 31.8692 59.9514 32.0209C59.0072 32.1725 58.1616 32.6908 57.6005 33.4615C57.0394 34.2323 56.8089 35.1924 56.9596 36.1307" stroke="#C171FF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M73.8418 27.9749L66.7658 29.1116C64.8118 29.4255 63.4823 31.2639 63.7962 33.2179L64.3645 36.7559C64.6784 38.7098 66.5169 40.0394 68.4709 39.7255L75.5468 38.5888C77.5008 38.2749 78.8303 36.4364 78.5164 34.4825L77.9481 30.9445C77.6342 28.9905 75.7957 27.661 73.8418 27.9749Z" stroke="#C171FF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.5001 -26L128.5 -2.5L49.5001 75.9995L31.9999 70.5L28.5001 -26Z" fill="url(#paint0_linear_156_14208)" fill-opacity="0.3"/>
+<path d="M41.3586 88.2861L42.7447 88.7517L42.931 87.3015L45.9797 63.5739C46.1801 62.0143 45.3058 60.5152 43.8496 59.9217L29.967 54.2642C28.5485 53.6862 26.9673 54.6084 26.7721 56.1276L23.6587 80.3586C23.5168 81.4628 24.1747 82.5133 25.2299 82.8679L41.3586 88.2861Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.4"/>
+<path d="M45.0701 88.506L43.6114 88.6061L43.7977 87.1558L46.8465 63.4282C47.0469 61.8686 48.2718 60.6393 49.8307 60.4332L64.6927 58.4691C66.2112 58.2684 67.5079 59.5605 67.3127 61.0797L64.1992 85.3107C64.0574 86.4148 63.1553 87.2649 62.0447 87.3412L45.0701 88.506Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.4"/>
+<path d="M38.1722 92.2769L39.5583 92.7425L39.7446 91.2923L42.9045 66.6998C43.0393 65.6501 42.4508 64.6411 41.4707 64.2417L26.7806 58.2551C25.3621 57.677 23.7809 58.5993 23.5857 60.1185L20.4723 84.3495C20.3304 85.4536 20.9883 86.5042 22.0435 86.8587L38.1722 92.2769Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.4"/>
+<path d="M47.3646 93.4581L45.9059 93.5581L46.0922 92.1079L49.2521 67.5154C49.387 66.4657 50.2115 65.6382 51.2607 65.4996L66.9871 63.4212C68.5057 63.2205 69.8024 64.5126 69.6072 66.0318L66.4937 90.2628C66.3519 91.3669 65.4498 92.217 64.3392 92.2932L47.3646 93.4581Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.4"/>
+<path d="M43.0765 65.8092L41.8863 65.6562L41.7334 66.8465L38.6068 91.1797C38.4426 92.4579 39.3456 93.6272 40.6237 93.7914L44.61 94.3036C45.8882 94.4678 47.0575 93.5648 47.2217 92.2867L50.3483 67.9534L50.5012 66.7632L49.311 66.6102L43.0765 65.8092Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.4"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_156_14208" x1="37.0001" y1="71.5" x2="103" y2="-1.00003" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CC8AFF" stop-opacity="0.9"/>
+<stop offset="1" stop-color="#CC8AFF" stop-opacity="0.1"/>
+</linearGradient>
+<clipPath id="clip0_156_14208">
+<rect width="120" height="104" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/captain/document-light.svg b/public/assets/images/dashboard/captain/document-light.svg
new file mode 100644
index 000000000..7b24dc870
--- /dev/null
+++ b/public/assets/images/dashboard/captain/document-light.svg
@@ -0,0 +1,27 @@
+<svg width="120" height="104" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_160_16404)">
+<rect width="120" height="104" rx="8" fill="#FCFCFD"/>
+<path d="M54.4477 26.5243C54.2821 25.4105 55.0508 24.3732 56.1646 24.2076C57.2785 24.042 58.3157 24.8107 58.4813 25.9245L59.1744 30.5856C59.34 31.6994 58.5713 32.7366 57.4575 32.9023C56.3436 33.0679 55.3064 32.2992 55.1408 31.1854L54.4477 26.5243Z" fill="black"/>
+<path d="M60.9011 25.5647C60.7355 24.4509 61.5042 23.4136 62.6181 23.248C63.7319 23.0824 64.7691 23.8511 64.9347 24.9649L65.6278 29.626C65.7934 30.7398 65.0247 31.7771 63.9109 31.9427C62.797 32.1083 61.7598 31.3396 61.5942 30.2258L60.9011 25.5647Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M75.4378 15.6863C67.77 15.7434 61.6417 16.6119 54.1257 18.8505C52.2258 19.4164 50.9694 19.7947 50.0327 20.2265C49.1642 20.6269 48.6948 21.0201 48.3387 21.5609C47.6012 22.6809 47.6509 23.8162 48.1101 27.7331C48.5614 31.5827 49.3067 34.982 50.3258 38.78C50.8688 40.8039 51.2384 42.1693 51.6557 43.187C52.0516 44.1525 52.4303 44.6469 52.9065 44.9977C53.3866 45.3513 53.9662 45.5648 54.9853 45.6565C56.0633 45.7534 57.4513 45.7026 59.5134 45.6223C66.1825 45.3625 71.0944 44.6284 77.576 42.9403C79.5969 42.414 80.9619 42.0554 81.9808 41.6484C82.9489 41.2617 83.4451 40.8903 83.7975 40.425C84.1425 39.9696 84.3699 39.3782 84.4811 38.2864C84.5971 37.1472 84.5711 35.6666 84.5287 33.4921C84.4531 29.6123 84.3092 26.2166 83.7784 22.5521C83.2108 18.6342 82.965 17.5319 81.9169 16.6315C81.4107 16.1966 80.8366 15.9465 79.8673 15.8113C78.8205 15.6652 77.4732 15.6711 75.4378 15.6863ZM53.1686 15.637C60.9981 13.3051 67.4409 12.3928 75.4129 12.3334L75.5295 12.3325C77.417 12.3184 79.0117 12.3065 80.3306 12.4904C81.754 12.689 82.985 13.1287 84.1018 14.0882C86.2086 15.8981 86.5634 18.3644 87.0347 21.6412C87.0551 21.7831 87.0757 21.9265 87.0967 22.0714C87.658 25.946 87.8047 29.5081 87.8811 33.4268L87.8831 33.5304C87.923 35.5754 87.9558 37.2605 87.8168 38.6261C87.6706 40.062 87.321 41.3265 86.4703 42.4496C85.627 43.5629 84.5353 44.2385 83.2246 44.7621C81.9869 45.2565 80.4161 45.6656 78.5228 46.1586L78.4211 46.1851C71.709 47.9332 66.5576 48.7034 59.6439 48.9727L59.5372 48.9769C57.6093 49.052 56.0039 49.1146 54.6849 48.9959C53.2827 48.8698 52.0479 48.5296 50.918 47.6974C49.7843 46.8623 49.092 45.7725 48.5534 44.4591C48.0455 43.2203 47.6233 41.6466 47.1149 39.7515L47.0873 39.6489C46.0422 35.7539 45.2562 32.1864 44.7799 28.1236C44.7626 27.9761 44.7454 27.8304 44.7284 27.6862C44.3423 24.4218 44.0527 21.9731 45.5383 19.717C46.3265 18.5199 47.3567 17.768 48.629 17.1815C49.809 16.6375 51.2978 16.1942 53.0599 15.6694C53.096 15.6587 53.1322 15.6479 53.1686 15.637Z" fill="black"/>
+<path d="M52.6139 31.385L45.538 32.5217C43.584 32.8356 42.2545 34.6741 42.5684 36.6281L43.1367 40.166C43.4506 42.12 45.2891 43.4495 47.243 43.1357L54.319 41.9989C56.2729 41.6851 57.6025 39.8466 57.2886 37.8926L56.7202 34.3546C56.4064 32.4007 54.5679 31.0711 52.6139 31.385Z" stroke="#B77FFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M64.0798 34.9869C63.9291 34.0486 63.4095 33.209 62.6352 32.6527C61.861 32.0965 60.8956 31.8692 59.9514 32.0209C59.0072 32.1725 58.1616 32.6908 57.6005 33.4615C57.0394 34.2323 56.8089 35.1924 56.9596 36.1307" stroke="#B77FFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M73.8418 27.9749L66.7658 29.1116C64.8118 29.4255 63.4823 31.264 63.7962 33.218L64.3645 36.7559C64.6784 38.7099 66.5169 40.0395 68.4709 39.7256L75.5468 38.5889C77.5008 38.275 78.8303 36.4365 78.5164 34.4825L77.9481 30.9446C77.6342 28.9906 75.7957 27.661 73.8418 27.9749Z" stroke="#B77FFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.5001 -26L128.5 -2.5L49.5001 75.9995L31.9999 70.5L28.5001 -26Z" fill="url(#paint0_linear_160_16404)" fill-opacity="0.3"/>
+<path d="M41.3586 88.2861L42.7447 88.7517L42.931 87.3015L45.9797 63.5739C46.1801 62.0143 45.3058 60.5152 43.8496 59.9217L29.967 54.2642C28.5485 53.6862 26.9673 54.6084 26.7721 56.1276L23.6587 80.3586C23.5168 81.4628 24.1747 82.5133 25.2299 82.8679L41.3586 88.2861Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.4"/>
+<path d="M45.0701 88.506L43.6114 88.6061L43.7977 87.1558L46.8465 63.4282C47.0469 61.8686 48.2718 60.6393 49.8307 60.4332L64.6927 58.4691C66.2112 58.2684 67.5079 59.5605 67.3127 61.0797L64.1992 85.3107C64.0574 86.4148 63.1553 87.2649 62.0447 87.3412L45.0701 88.506Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.4"/>
+<path d="M38.1722 92.2769L39.5583 92.7425L39.7446 91.2923L42.9045 66.6998C43.0393 65.6501 42.4508 64.6411 41.4707 64.2417L26.7806 58.2551C25.3621 57.677 23.7809 58.5993 23.5857 60.1185L20.4723 84.3495C20.3304 85.4536 20.9883 86.5042 22.0435 86.8587L38.1722 92.2769Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.4"/>
+<path d="M47.3646 93.4581L45.9059 93.5581L46.0922 92.1079L49.2521 67.5154C49.387 66.4657 50.2115 65.6382 51.2607 65.4996L66.9871 63.4212C68.5057 63.2205 69.8024 64.5126 69.6072 66.0318L66.4937 90.2628C66.3519 91.3669 65.4498 92.217 64.3392 92.2932L47.3646 93.4581Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.4"/>
+<path d="M43.0765 65.8092L41.8863 65.6562L41.7334 66.8465L38.6068 91.1797C38.4426 92.4579 39.3456 93.6272 40.6237 93.7914L44.61 94.3036C45.8882 94.4678 47.0575 93.5648 47.2217 92.2867L50.3483 67.9534L50.5012 66.7632L49.311 66.6102L43.0765 65.8092Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.4"/>
+</g>
+<rect x="0.5" y="0.5" width="119" height="103" rx="7.5" stroke="#ECECEC"/>
+<defs>
+<linearGradient id="paint0_linear_160_16404" x1="37.0001" y1="71.5" x2="103" y2="-1.00003" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CC8AFF" stop-opacity="0.9"/>
+<stop offset="1" stop-color="#CC8AFF" stop-opacity="0.1"/>
+</linearGradient>
+<clipPath id="clip0_160_16404">
+<rect width="120" height="104" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/captain/document-popover-dark.svg b/public/assets/images/dashboard/captain/document-popover-dark.svg
new file mode 100644
index 000000000..909f291ea
--- /dev/null
+++ b/public/assets/images/dashboard/captain/document-popover-dark.svg
@@ -0,0 +1,569 @@
+<svg width="288" height="120" viewBox="0 0 288 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_302_6503)">
+<rect width="288" height="120" rx="8" fill="#2E3035"/>
+<circle cx="8" r="1" fill="#473876"/>
+<circle cx="16" r="1" fill="#473876"/>
+<circle cx="24" r="1" fill="#473876"/>
+<circle cx="32" r="1" fill="#473876"/>
+<circle cx="40" r="1" fill="#473876"/>
+<circle cx="48" r="1" fill="#473876"/>
+<circle cx="56" r="1" fill="#473876"/>
+<circle cx="64" r="1" fill="#473876"/>
+<circle cx="72" r="1" fill="#473876"/>
+<circle cx="80" r="1" fill="#473876"/>
+<circle cx="88" r="1" fill="#473876"/>
+<circle cx="96" r="1" fill="#473876"/>
+<circle cx="104" r="1" fill="#473876"/>
+<circle cx="112" r="1" fill="#473876"/>
+<circle cx="120" r="1" fill="#473876"/>
+<circle cx="128" r="1" fill="#473876"/>
+<circle cx="136" r="1" fill="#473876"/>
+<circle cx="144" r="1" fill="#473876"/>
+<circle cx="152" r="1" fill="#473876"/>
+<circle cx="160" r="1" fill="#473876"/>
+<circle cx="168" r="1" fill="#473876"/>
+<circle cx="176" r="1" fill="#473876"/>
+<circle cx="184" r="1" fill="#473876"/>
+<circle cx="192" r="1" fill="#473876"/>
+<circle cx="200" r="1" fill="#473876"/>
+<circle cx="208" r="1" fill="#473876"/>
+<circle cx="216" r="1" fill="#473876"/>
+<circle cx="224" r="1" fill="#473876"/>
+<circle cx="232" r="1" fill="#473876"/>
+<circle cx="240" r="1" fill="#473876"/>
+<circle cx="248" r="1" fill="#473876"/>
+<circle cx="256" r="1" fill="#473876"/>
+<circle cx="264" r="1" fill="#473876"/>
+<circle cx="272" r="1" fill="#473876"/>
+<circle cx="280" r="1" fill="#473876"/>
+<circle cx="8" cy="8" r="1" fill="#473876"/>
+<circle cx="16" cy="8" r="1" fill="#473876"/>
+<circle cx="24" cy="8" r="1" fill="#473876"/>
+<circle cx="32" cy="8" r="1" fill="#473876"/>
+<circle cx="40" cy="8" r="1" fill="#473876"/>
+<circle cx="48" cy="8" r="1" fill="#473876"/>
+<circle cx="56" cy="8" r="1" fill="#473876"/>
+<circle cx="64" cy="8" r="1" fill="#473876"/>
+<circle cx="72" cy="8" r="1" fill="#473876"/>
+<circle cx="80" cy="8" r="1" fill="#473876"/>
+<circle cx="88" cy="8" r="1" fill="#473876"/>
+<circle cx="96" cy="8" r="1" fill="#473876"/>
+<circle cx="104" cy="8" r="1" fill="#473876"/>
+<circle cx="112" cy="8" r="1" fill="#473876"/>
+<circle cx="120" cy="8" r="1" fill="#473876"/>
+<circle cx="128" cy="8" r="1" fill="#473876"/>
+<circle cx="136" cy="8" r="1" fill="#473876"/>
+<circle cx="144" cy="8" r="1" fill="#473876"/>
+<circle cx="152" cy="8" r="1" fill="#473876"/>
+<circle cx="160" cy="8" r="1" fill="#473876"/>
+<circle cx="168" cy="8" r="1" fill="#473876"/>
+<circle cx="176" cy="8" r="1" fill="#473876"/>
+<circle cx="184" cy="8" r="1" fill="#473876"/>
+<circle cx="192" cy="8" r="1" fill="#473876"/>
+<circle cx="200" cy="8" r="1" fill="#473876"/>
+<circle cx="208" cy="8" r="1" fill="#473876"/>
+<circle cx="216" cy="8" r="1" fill="#473876"/>
+<circle cx="224" cy="8" r="1" fill="#473876"/>
+<circle cx="232" cy="8" r="1" fill="#473876"/>
+<circle cx="240" cy="8" r="1" fill="#473876"/>
+<circle cx="248" cy="8" r="1" fill="#473876"/>
+<circle cx="256" cy="8" r="1" fill="#473876"/>
+<circle cx="264" cy="8" r="1" fill="#473876"/>
+<circle cx="272" cy="8" r="1" fill="#473876"/>
+<circle cx="280" cy="8" r="1" fill="#473876"/>
+<circle cx="8" cy="16" r="1" fill="#473876"/>
+<circle cx="16" cy="16" r="1" fill="#473876"/>
+<circle cx="24" cy="16" r="1" fill="#473876"/>
+<circle cx="32" cy="16" r="1" fill="#473876"/>
+<circle cx="40" cy="16" r="1" fill="#473876"/>
+<circle cx="48" cy="16" r="1" fill="#473876"/>
+<circle cx="56" cy="16" r="1" fill="#473876"/>
+<circle cx="64" cy="16" r="1" fill="#473876"/>
+<circle cx="72" cy="16" r="1" fill="#473876"/>
+<circle cx="80" cy="16" r="1" fill="#473876"/>
+<circle cx="88" cy="16" r="1" fill="#473876"/>
+<circle cx="96" cy="16" r="1" fill="#473876"/>
+<circle cx="104" cy="16" r="1" fill="#473876"/>
+<circle cx="112" cy="16" r="1" fill="#473876"/>
+<circle cx="120" cy="16" r="1" fill="#473876"/>
+<circle cx="128" cy="16" r="1" fill="#473876"/>
+<circle cx="136" cy="16" r="1" fill="#473876"/>
+<circle cx="144" cy="16" r="1" fill="#473876"/>
+<circle cx="152" cy="16" r="1" fill="#473876"/>
+<circle cx="160" cy="16" r="1" fill="#473876"/>
+<circle cx="168" cy="16" r="1" fill="#473876"/>
+<circle cx="176" cy="16" r="1" fill="#473876"/>
+<circle cx="184" cy="16" r="1" fill="#473876"/>
+<circle cx="192" cy="16" r="1" fill="#473876"/>
+<circle cx="200" cy="16" r="1" fill="#473876"/>
+<circle cx="208" cy="16" r="1" fill="#473876"/>
+<circle cx="216" cy="16" r="1" fill="#473876"/>
+<circle cx="224" cy="16" r="1" fill="#473876"/>
+<circle cx="232" cy="16" r="1" fill="#473876"/>
+<circle cx="240" cy="16" r="1" fill="#473876"/>
+<circle cx="248" cy="16" r="1" fill="#473876"/>
+<circle cx="256" cy="16" r="1" fill="#473876"/>
+<circle cx="264" cy="16" r="1" fill="#473876"/>
+<circle cx="272" cy="16" r="1" fill="#473876"/>
+<circle cx="280" cy="16" r="1" fill="#473876"/>
+<circle cx="8" cy="24" r="1" fill="#473876"/>
+<circle cx="16" cy="24" r="1" fill="#473876"/>
+<circle cx="24" cy="24" r="1" fill="#473876"/>
+<circle cx="32" cy="24" r="1" fill="#473876"/>
+<circle cx="40" cy="24" r="1" fill="#473876"/>
+<circle cx="48" cy="24" r="1" fill="#473876"/>
+<circle cx="56" cy="24" r="1" fill="#473876"/>
+<circle cx="64" cy="24" r="1" fill="#473876"/>
+<circle cx="72" cy="24" r="1" fill="#473876"/>
+<circle cx="80" cy="24" r="1" fill="#473876"/>
+<circle cx="88" cy="24" r="1" fill="#473876"/>
+<circle cx="96" cy="24" r="1" fill="#473876"/>
+<circle cx="104" cy="24" r="1" fill="#473876"/>
+<circle cx="112" cy="24" r="1" fill="#473876"/>
+<circle cx="120" cy="24" r="1" fill="#473876"/>
+<circle cx="128" cy="24" r="1" fill="#473876"/>
+<circle cx="136" cy="24" r="1" fill="#473876"/>
+<circle cx="144" cy="24" r="1" fill="#473876"/>
+<circle cx="152" cy="24" r="1" fill="#473876"/>
+<circle cx="160" cy="24" r="1" fill="#473876"/>
+<circle cx="168" cy="24" r="1" fill="#473876"/>
+<circle cx="176" cy="24" r="1" fill="#473876"/>
+<circle cx="184" cy="24" r="1" fill="#473876"/>
+<circle cx="192" cy="24" r="1" fill="#473876"/>
+<circle cx="200" cy="24" r="1" fill="#473876"/>
+<circle cx="208" cy="24" r="1" fill="#473876"/>
+<circle cx="216" cy="24" r="1" fill="#473876"/>
+<circle cx="224" cy="24" r="1" fill="#473876"/>
+<circle cx="232" cy="24" r="1" fill="#473876"/>
+<circle cx="240" cy="24" r="1" fill="#473876"/>
+<circle cx="248" cy="24" r="1" fill="#473876"/>
+<circle cx="256" cy="24" r="1" fill="#473876"/>
+<circle cx="264" cy="24" r="1" fill="#473876"/>
+<circle cx="272" cy="24" r="1" fill="#473876"/>
+<circle cx="280" cy="24" r="1" fill="#473876"/>
+<circle cx="8" cy="32" r="1" fill="#473876"/>
+<circle cx="16" cy="32" r="1" fill="#473876"/>
+<circle cx="24" cy="32" r="1" fill="#473876"/>
+<circle cx="32" cy="32" r="1" fill="#473876"/>
+<circle cx="40" cy="32" r="1" fill="#473876"/>
+<circle cx="48" cy="32" r="1" fill="#473876"/>
+<circle cx="56" cy="32" r="1" fill="#473876"/>
+<circle cx="64" cy="32" r="1" fill="#473876"/>
+<circle cx="72" cy="32" r="1" fill="#473876"/>
+<circle cx="80" cy="32" r="1" fill="#473876"/>
+<circle cx="88" cy="32" r="1" fill="#473876"/>
+<circle cx="96" cy="32" r="1" fill="#473876"/>
+<circle cx="104" cy="32" r="1" fill="#473876"/>
+<circle cx="112" cy="32" r="1" fill="#473876"/>
+<circle cx="120" cy="32" r="1" fill="#473876"/>
+<circle cx="128" cy="32" r="1" fill="#473876"/>
+<circle cx="136" cy="32" r="1" fill="#473876"/>
+<circle cx="144" cy="32" r="1" fill="#473876"/>
+<circle cx="152" cy="32" r="1" fill="#473876"/>
+<circle cx="160" cy="32" r="1" fill="#473876"/>
+<circle cx="168" cy="32" r="1" fill="#473876"/>
+<circle cx="176" cy="32" r="1" fill="#473876"/>
+<circle cx="184" cy="32" r="1" fill="#473876"/>
+<circle cx="192" cy="32" r="1" fill="#473876"/>
+<circle cx="200" cy="32" r="1" fill="#473876"/>
+<circle cx="208" cy="32" r="1" fill="#473876"/>
+<circle cx="216" cy="32" r="1" fill="#473876"/>
+<circle cx="224" cy="32" r="1" fill="#473876"/>
+<circle cx="232" cy="32" r="1" fill="#473876"/>
+<circle cx="240" cy="32" r="1" fill="#473876"/>
+<circle cx="248" cy="32" r="1" fill="#473876"/>
+<circle cx="256" cy="32" r="1" fill="#473876"/>
+<circle cx="264" cy="32" r="1" fill="#473876"/>
+<circle cx="272" cy="32" r="1" fill="#473876"/>
+<circle cx="280" cy="32" r="1" fill="#473876"/>
+<circle cx="8" cy="40" r="1" fill="#473876"/>
+<circle cx="16" cy="40" r="1" fill="#473876"/>
+<circle cx="24" cy="40" r="1" fill="#473876"/>
+<circle cx="32" cy="40" r="1" fill="#473876"/>
+<circle cx="40" cy="40" r="1" fill="#473876"/>
+<circle cx="48" cy="40" r="1" fill="#473876"/>
+<circle cx="56" cy="40" r="1" fill="#473876"/>
+<circle cx="64" cy="40" r="1" fill="#473876"/>
+<circle cx="72" cy="40" r="1" fill="#473876"/>
+<circle cx="80" cy="40" r="1" fill="#473876"/>
+<circle cx="88" cy="40" r="1" fill="#473876"/>
+<circle cx="96" cy="40" r="1" fill="#473876"/>
+<circle cx="104" cy="40" r="1" fill="#473876"/>
+<circle cx="112" cy="40" r="1" fill="#473876"/>
+<circle cx="120" cy="40" r="1" fill="#473876"/>
+<circle cx="128" cy="40" r="1" fill="#473876"/>
+<circle cx="136" cy="40" r="1" fill="#473876"/>
+<circle cx="144" cy="40" r="1" fill="#473876"/>
+<circle cx="152" cy="40" r="1" fill="#473876"/>
+<circle cx="160" cy="40" r="1" fill="#473876"/>
+<circle cx="168" cy="40" r="1" fill="#473876"/>
+<circle cx="176" cy="40" r="1" fill="#473876"/>
+<circle cx="184" cy="40" r="1" fill="#473876"/>
+<circle cx="192" cy="40" r="1" fill="#473876"/>
+<circle cx="200" cy="40" r="1" fill="#473876"/>
+<circle cx="208" cy="40" r="1" fill="#473876"/>
+<circle cx="216" cy="40" r="1" fill="#473876"/>
+<circle cx="224" cy="40" r="1" fill="#473876"/>
+<circle cx="232" cy="40" r="1" fill="#473876"/>
+<circle cx="240" cy="40" r="1" fill="#473876"/>
+<circle cx="248" cy="40" r="1" fill="#473876"/>
+<circle cx="256" cy="40" r="1" fill="#473876"/>
+<circle cx="264" cy="40" r="1" fill="#473876"/>
+<circle cx="272" cy="40" r="1" fill="#473876"/>
+<circle cx="280" cy="40" r="1" fill="#473876"/>
+<circle cx="8" cy="48" r="1" fill="#473876"/>
+<circle cx="16" cy="48" r="1" fill="#473876"/>
+<circle cx="24" cy="48" r="1" fill="#473876"/>
+<circle cx="32" cy="48" r="1" fill="#473876"/>
+<circle cx="40" cy="48" r="1" fill="#473876"/>
+<circle cx="48" cy="48" r="1" fill="#473876"/>
+<circle cx="56" cy="48" r="1" fill="#473876"/>
+<circle cx="64" cy="48" r="1" fill="#473876"/>
+<circle cx="72" cy="48" r="1" fill="#473876"/>
+<circle cx="80" cy="48" r="1" fill="#473876"/>
+<circle cx="88" cy="48" r="1" fill="#473876"/>
+<circle cx="96" cy="48" r="1" fill="#473876"/>
+<circle cx="104" cy="48" r="1" fill="#473876"/>
+<circle cx="112" cy="48" r="1" fill="#473876"/>
+<circle cx="120" cy="48" r="1" fill="#473876"/>
+<circle cx="128" cy="48" r="1" fill="#473876"/>
+<circle cx="136" cy="48" r="1" fill="#473876"/>
+<circle cx="144" cy="48" r="1" fill="#473876"/>
+<circle cx="152" cy="48" r="1" fill="#473876"/>
+<circle cx="160" cy="48" r="1" fill="#473876"/>
+<circle cx="168" cy="48" r="1" fill="#473876"/>
+<circle cx="176" cy="48" r="1" fill="#473876"/>
+<circle cx="184" cy="48" r="1" fill="#473876"/>
+<circle cx="192" cy="48" r="1" fill="#473876"/>
+<circle cx="200" cy="48" r="1" fill="#473876"/>
+<circle cx="208" cy="48" r="1" fill="#473876"/>
+<circle cx="216" cy="48" r="1" fill="#473876"/>
+<circle cx="224" cy="48" r="1" fill="#473876"/>
+<circle cx="232" cy="48" r="1" fill="#473876"/>
+<circle cx="240" cy="48" r="1" fill="#473876"/>
+<circle cx="248" cy="48" r="1" fill="#473876"/>
+<circle cx="256" cy="48" r="1" fill="#473876"/>
+<circle cx="264" cy="48" r="1" fill="#473876"/>
+<circle cx="272" cy="48" r="1" fill="#473876"/>
+<circle cx="280" cy="48" r="1" fill="#473876"/>
+<circle cx="8" cy="56" r="1" fill="#473876"/>
+<circle cx="16" cy="56" r="1" fill="#473876"/>
+<circle cx="24" cy="56" r="1" fill="#473876"/>
+<circle cx="32" cy="56" r="1" fill="#473876"/>
+<circle cx="40" cy="56" r="1" fill="#473876"/>
+<circle cx="48" cy="56" r="1" fill="#473876"/>
+<circle cx="56" cy="56" r="1" fill="#473876"/>
+<circle cx="64" cy="56" r="1" fill="#473876"/>
+<circle cx="72" cy="56" r="1" fill="#473876"/>
+<circle cx="80" cy="56" r="1" fill="#473876"/>
+<circle cx="88" cy="56" r="1" fill="#473876"/>
+<circle cx="96" cy="56" r="1" fill="#473876"/>
+<circle cx="104" cy="56" r="1" fill="#473876"/>
+<circle cx="112" cy="56" r="1" fill="#473876"/>
+<circle cx="120" cy="56" r="1" fill="#473876"/>
+<circle cx="128" cy="56" r="1" fill="#473876"/>
+<circle cx="136" cy="56" r="1" fill="#473876"/>
+<circle cx="144" cy="56" r="1" fill="#473876"/>
+<circle cx="152" cy="56" r="1" fill="#473876"/>
+<circle cx="160" cy="56" r="1" fill="#473876"/>
+<circle cx="168" cy="56" r="1" fill="#473876"/>
+<circle cx="176" cy="56" r="1" fill="#473876"/>
+<circle cx="184" cy="56" r="1" fill="#473876"/>
+<circle cx="192" cy="56" r="1" fill="#473876"/>
+<circle cx="200" cy="56" r="1" fill="#473876"/>
+<circle cx="208" cy="56" r="1" fill="#473876"/>
+<circle cx="216" cy="56" r="1" fill="#473876"/>
+<circle cx="224" cy="56" r="1" fill="#473876"/>
+<circle cx="232" cy="56" r="1" fill="#473876"/>
+<circle cx="240" cy="56" r="1" fill="#473876"/>
+<circle cx="248" cy="56" r="1" fill="#473876"/>
+<circle cx="256" cy="56" r="1" fill="#473876"/>
+<circle cx="264" cy="56" r="1" fill="#473876"/>
+<circle cx="272" cy="56" r="1" fill="#473876"/>
+<circle cx="280" cy="56" r="1" fill="#473876"/>
+<circle cx="8" cy="64" r="1" fill="#473876"/>
+<circle cx="16" cy="64" r="1" fill="#473876"/>
+<circle cx="24" cy="64" r="1" fill="#473876"/>
+<circle cx="32" cy="64" r="1" fill="#473876"/>
+<circle cx="40" cy="64" r="1" fill="#473876"/>
+<circle cx="48" cy="64" r="1" fill="#473876"/>
+<circle cx="56" cy="64" r="1" fill="#473876"/>
+<circle cx="64" cy="64" r="1" fill="#473876"/>
+<circle cx="72" cy="64" r="1" fill="#473876"/>
+<circle cx="80" cy="64" r="1" fill="#473876"/>
+<circle cx="88" cy="64" r="1" fill="#473876"/>
+<circle cx="96" cy="64" r="1" fill="#473876"/>
+<circle cx="104" cy="64" r="1" fill="#473876"/>
+<circle cx="112" cy="64" r="1" fill="#473876"/>
+<circle cx="120" cy="64" r="1" fill="#473876"/>
+<circle cx="128" cy="64" r="1" fill="#473876"/>
+<circle cx="136" cy="64" r="1" fill="#473876"/>
+<circle cx="144" cy="64" r="1" fill="#473876"/>
+<circle cx="152" cy="64" r="1" fill="#473876"/>
+<circle cx="160" cy="64" r="1" fill="#473876"/>
+<circle cx="168" cy="64" r="1" fill="#473876"/>
+<circle cx="176" cy="64" r="1" fill="#473876"/>
+<circle cx="184" cy="64" r="1" fill="#473876"/>
+<circle cx="192" cy="64" r="1" fill="#473876"/>
+<circle cx="200" cy="64" r="1" fill="#473876"/>
+<circle cx="208" cy="64" r="1" fill="#473876"/>
+<circle cx="216" cy="64" r="1" fill="#473876"/>
+<circle cx="224" cy="64" r="1" fill="#473876"/>
+<circle cx="232" cy="64" r="1" fill="#473876"/>
+<circle cx="240" cy="64" r="1" fill="#473876"/>
+<circle cx="248" cy="64" r="1" fill="#473876"/>
+<circle cx="256" cy="64" r="1" fill="#473876"/>
+<circle cx="264" cy="64" r="1" fill="#473876"/>
+<circle cx="272" cy="64" r="1" fill="#473876"/>
+<circle cx="280" cy="64" r="1" fill="#473876"/>
+<circle cx="8" cy="72" r="1" fill="#473876"/>
+<circle cx="16" cy="72" r="1" fill="#473876"/>
+<circle cx="24" cy="72" r="1" fill="#473876"/>
+<circle cx="32" cy="72" r="1" fill="#473876"/>
+<circle cx="40" cy="72" r="1" fill="#473876"/>
+<circle cx="48" cy="72" r="1" fill="#473876"/>
+<circle cx="56" cy="72" r="1" fill="#473876"/>
+<circle cx="64" cy="72" r="1" fill="#473876"/>
+<circle cx="72" cy="72" r="1" fill="#473876"/>
+<circle cx="80" cy="72" r="1" fill="#473876"/>
+<circle cx="88" cy="72" r="1" fill="#473876"/>
+<circle cx="96" cy="72" r="1" fill="#473876"/>
+<circle cx="104" cy="72" r="1" fill="#473876"/>
+<circle cx="112" cy="72" r="1" fill="#473876"/>
+<circle cx="120" cy="72" r="1" fill="#473876"/>
+<circle cx="128" cy="72" r="1" fill="#473876"/>
+<circle cx="136" cy="72" r="1" fill="#473876"/>
+<circle cx="144" cy="72" r="1" fill="#473876"/>
+<circle cx="152" cy="72" r="1" fill="#473876"/>
+<circle cx="160" cy="72" r="1" fill="#473876"/>
+<circle cx="168" cy="72" r="1" fill="#473876"/>
+<circle cx="176" cy="72" r="1" fill="#473876"/>
+<circle cx="184" cy="72" r="1" fill="#473876"/>
+<circle cx="192" cy="72" r="1" fill="#473876"/>
+<circle cx="200" cy="72" r="1" fill="#473876"/>
+<circle cx="208" cy="72" r="1" fill="#473876"/>
+<circle cx="216" cy="72" r="1" fill="#473876"/>
+<circle cx="224" cy="72" r="1" fill="#473876"/>
+<circle cx="232" cy="72" r="1" fill="#473876"/>
+<circle cx="240" cy="72" r="1" fill="#473876"/>
+<circle cx="248" cy="72" r="1" fill="#473876"/>
+<circle cx="256" cy="72" r="1" fill="#473876"/>
+<circle cx="264" cy="72" r="1" fill="#473876"/>
+<circle cx="272" cy="72" r="1" fill="#473876"/>
+<circle cx="280" cy="72" r="1" fill="#473876"/>
+<circle cx="8" cy="80" r="1" fill="#473876"/>
+<circle cx="16" cy="80" r="1" fill="#473876"/>
+<circle cx="24" cy="80" r="1" fill="#473876"/>
+<circle cx="32" cy="80" r="1" fill="#473876"/>
+<circle cx="40" cy="80" r="1" fill="#473876"/>
+<circle cx="48" cy="80" r="1" fill="#473876"/>
+<circle cx="56" cy="80" r="1" fill="#473876"/>
+<circle cx="64" cy="80" r="1" fill="#473876"/>
+<circle cx="72" cy="80" r="1" fill="#473876"/>
+<circle cx="80" cy="80" r="1" fill="#473876"/>
+<circle cx="88" cy="80" r="1" fill="#473876"/>
+<circle cx="96" cy="80" r="1" fill="#473876"/>
+<circle cx="104" cy="80" r="1" fill="#473876"/>
+<circle cx="112" cy="80" r="1" fill="#473876"/>
+<circle cx="120" cy="80" r="1" fill="#473876"/>
+<circle cx="128" cy="80" r="1" fill="#473876"/>
+<circle cx="136" cy="80" r="1" fill="#473876"/>
+<circle cx="144" cy="80" r="1" fill="#473876"/>
+<circle cx="152" cy="80" r="1" fill="#473876"/>
+<circle cx="160" cy="80" r="1" fill="#473876"/>
+<circle cx="168" cy="80" r="1" fill="#473876"/>
+<circle cx="176" cy="80" r="1" fill="#473876"/>
+<circle cx="184" cy="80" r="1" fill="#473876"/>
+<circle cx="192" cy="80" r="1" fill="#473876"/>
+<circle cx="200" cy="80" r="1" fill="#473876"/>
+<circle cx="208" cy="80" r="1" fill="#473876"/>
+<circle cx="216" cy="80" r="1" fill="#473876"/>
+<circle cx="224" cy="80" r="1" fill="#473876"/>
+<circle cx="232" cy="80" r="1" fill="#473876"/>
+<circle cx="240" cy="80" r="1" fill="#473876"/>
+<circle cx="248" cy="80" r="1" fill="#473876"/>
+<circle cx="256" cy="80" r="1" fill="#473876"/>
+<circle cx="264" cy="80" r="1" fill="#473876"/>
+<circle cx="272" cy="80" r="1" fill="#473876"/>
+<circle cx="280" cy="80" r="1" fill="#473876"/>
+<circle cx="8" cy="88" r="1" fill="#473876"/>
+<circle cx="16" cy="88" r="1" fill="#473876"/>
+<circle cx="24" cy="88" r="1" fill="#473876"/>
+<circle cx="32" cy="88" r="1" fill="#473876"/>
+<circle cx="40" cy="88" r="1" fill="#473876"/>
+<circle cx="48" cy="88" r="1" fill="#473876"/>
+<circle cx="56" cy="88" r="1" fill="#473876"/>
+<circle cx="64" cy="88" r="1" fill="#473876"/>
+<circle cx="72" cy="88" r="1" fill="#473876"/>
+<circle cx="80" cy="88" r="1" fill="#473876"/>
+<circle cx="88" cy="88" r="1" fill="#473876"/>
+<circle cx="96" cy="88" r="1" fill="#473876"/>
+<circle cx="104" cy="88" r="1" fill="#473876"/>
+<circle cx="112" cy="88" r="1" fill="#473876"/>
+<circle cx="120" cy="88" r="1" fill="#473876"/>
+<circle cx="128" cy="88" r="1" fill="#473876"/>
+<circle cx="136" cy="88" r="1" fill="#473876"/>
+<circle cx="144" cy="88" r="1" fill="#473876"/>
+<circle cx="152" cy="88" r="1" fill="#473876"/>
+<circle cx="160" cy="88" r="1" fill="#473876"/>
+<circle cx="168" cy="88" r="1" fill="#473876"/>
+<circle cx="176" cy="88" r="1" fill="#473876"/>
+<circle cx="184" cy="88" r="1" fill="#473876"/>
+<circle cx="192" cy="88" r="1" fill="#473876"/>
+<circle cx="200" cy="88" r="1" fill="#473876"/>
+<circle cx="208" cy="88" r="1" fill="#473876"/>
+<circle cx="216" cy="88" r="1" fill="#473876"/>
+<circle cx="224" cy="88" r="1" fill="#473876"/>
+<circle cx="232" cy="88" r="1" fill="#473876"/>
+<circle cx="240" cy="88" r="1" fill="#473876"/>
+<circle cx="248" cy="88" r="1" fill="#473876"/>
+<circle cx="256" cy="88" r="1" fill="#473876"/>
+<circle cx="264" cy="88" r="1" fill="#473876"/>
+<circle cx="272" cy="88" r="1" fill="#473876"/>
+<circle cx="280" cy="88" r="1" fill="#473876"/>
+<circle cx="8" cy="96" r="1" fill="#473876"/>
+<circle cx="16" cy="96" r="1" fill="#473876"/>
+<circle cx="24" cy="96" r="1" fill="#473876"/>
+<circle cx="32" cy="96" r="1" fill="#473876"/>
+<circle cx="40" cy="96" r="1" fill="#473876"/>
+<circle cx="48" cy="96" r="1" fill="#473876"/>
+<circle cx="56" cy="96" r="1" fill="#473876"/>
+<circle cx="64" cy="96" r="1" fill="#473876"/>
+<circle cx="72" cy="96" r="1" fill="#473876"/>
+<circle cx="80" cy="96" r="1" fill="#473876"/>
+<circle cx="88" cy="96" r="1" fill="#473876"/>
+<circle cx="96" cy="96" r="1" fill="#473876"/>
+<circle cx="104" cy="96" r="1" fill="#473876"/>
+<circle cx="112" cy="96" r="1" fill="#473876"/>
+<circle cx="120" cy="96" r="1" fill="#473876"/>
+<circle cx="128" cy="96" r="1" fill="#473876"/>
+<circle cx="136" cy="96" r="1" fill="#473876"/>
+<circle cx="144" cy="96" r="1" fill="#473876"/>
+<circle cx="152" cy="96" r="1" fill="#473876"/>
+<circle cx="160" cy="96" r="1" fill="#473876"/>
+<circle cx="168" cy="96" r="1" fill="#473876"/>
+<circle cx="176" cy="96" r="1" fill="#473876"/>
+<circle cx="184" cy="96" r="1" fill="#473876"/>
+<circle cx="192" cy="96" r="1" fill="#473876"/>
+<circle cx="200" cy="96" r="1" fill="#473876"/>
+<circle cx="208" cy="96" r="1" fill="#473876"/>
+<circle cx="216" cy="96" r="1" fill="#473876"/>
+<circle cx="224" cy="96" r="1" fill="#473876"/>
+<circle cx="232" cy="96" r="1" fill="#473876"/>
+<circle cx="240" cy="96" r="1" fill="#473876"/>
+<circle cx="248" cy="96" r="1" fill="#473876"/>
+<circle cx="256" cy="96" r="1" fill="#473876"/>
+<circle cx="264" cy="96" r="1" fill="#473876"/>
+<circle cx="272" cy="96" r="1" fill="#473876"/>
+<circle cx="280" cy="96" r="1" fill="#473876"/>
+<circle cx="8" cy="104" r="1" fill="#473876"/>
+<circle cx="16" cy="104" r="1" fill="#473876"/>
+<circle cx="24" cy="104" r="1" fill="#473876"/>
+<circle cx="32" cy="104" r="1" fill="#473876"/>
+<circle cx="40" cy="104" r="1" fill="#473876"/>
+<circle cx="48" cy="104" r="1" fill="#473876"/>
+<circle cx="56" cy="104" r="1" fill="#473876"/>
+<circle cx="64" cy="104" r="1" fill="#473876"/>
+<circle cx="72" cy="104" r="1" fill="#473876"/>
+<circle cx="80" cy="104" r="1" fill="#473876"/>
+<circle cx="88" cy="104" r="1" fill="#473876"/>
+<circle cx="96" cy="104" r="1" fill="#473876"/>
+<circle cx="104" cy="104" r="1" fill="#473876"/>
+<circle cx="112" cy="104" r="1" fill="#473876"/>
+<circle cx="120" cy="104" r="1" fill="#473876"/>
+<circle cx="128" cy="104" r="1" fill="#473876"/>
+<circle cx="136" cy="104" r="1" fill="#473876"/>
+<circle cx="144" cy="104" r="1" fill="#473876"/>
+<circle cx="152" cy="104" r="1" fill="#473876"/>
+<circle cx="160" cy="104" r="1" fill="#473876"/>
+<circle cx="168" cy="104" r="1" fill="#473876"/>
+<circle cx="176" cy="104" r="1" fill="#473876"/>
+<circle cx="184" cy="104" r="1" fill="#473876"/>
+<circle cx="192" cy="104" r="1" fill="#473876"/>
+<circle cx="200" cy="104" r="1" fill="#473876"/>
+<circle cx="208" cy="104" r="1" fill="#473876"/>
+<circle cx="216" cy="104" r="1" fill="#473876"/>
+<circle cx="224" cy="104" r="1" fill="#473876"/>
+<circle cx="232" cy="104" r="1" fill="#473876"/>
+<circle cx="240" cy="104" r="1" fill="#473876"/>
+<circle cx="248" cy="104" r="1" fill="#473876"/>
+<circle cx="256" cy="104" r="1" fill="#473876"/>
+<circle cx="264" cy="104" r="1" fill="#473876"/>
+<circle cx="272" cy="104" r="1" fill="#473876"/>
+<circle cx="280" cy="104" r="1" fill="#473876"/>
+<circle cx="8" cy="112" r="1" fill="#473876"/>
+<circle cx="16" cy="112" r="1" fill="#473876"/>
+<circle cx="24" cy="112" r="1" fill="#473876"/>
+<circle cx="32" cy="112" r="1" fill="#473876"/>
+<circle cx="40" cy="112" r="1" fill="#473876"/>
+<circle cx="48" cy="112" r="1" fill="#473876"/>
+<circle cx="56" cy="112" r="1" fill="#473876"/>
+<circle cx="64" cy="112" r="1" fill="#473876"/>
+<circle cx="72" cy="112" r="1" fill="#473876"/>
+<circle cx="80" cy="112" r="1" fill="#473876"/>
+<circle cx="88" cy="112" r="1" fill="#473876"/>
+<circle cx="96" cy="112" r="1" fill="#473876"/>
+<circle cx="104" cy="112" r="1" fill="#473876"/>
+<circle cx="112" cy="112" r="1" fill="#473876"/>
+<circle cx="120" cy="112" r="1" fill="#473876"/>
+<circle cx="128" cy="112" r="1" fill="#473876"/>
+<circle cx="136" cy="112" r="1" fill="#473876"/>
+<circle cx="144" cy="112" r="1" fill="#473876"/>
+<circle cx="152" cy="112" r="1" fill="#473876"/>
+<circle cx="160" cy="112" r="1" fill="#473876"/>
+<circle cx="168" cy="112" r="1" fill="#473876"/>
+<circle cx="176" cy="112" r="1" fill="#473876"/>
+<circle cx="184" cy="112" r="1" fill="#473876"/>
+<circle cx="192" cy="112" r="1" fill="#473876"/>
+<circle cx="200" cy="112" r="1" fill="#473876"/>
+<circle cx="208" cy="112" r="1" fill="#473876"/>
+<circle cx="216" cy="112" r="1" fill="#473876"/>
+<circle cx="224" cy="112" r="1" fill="#473876"/>
+<circle cx="232" cy="112" r="1" fill="#473876"/>
+<circle cx="240" cy="112" r="1" fill="#473876"/>
+<circle cx="248" cy="112" r="1" fill="#473876"/>
+<circle cx="256" cy="112" r="1" fill="#473876"/>
+<circle cx="264" cy="112" r="1" fill="#473876"/>
+<circle cx="272" cy="112" r="1" fill="#473876"/>
+<circle cx="280" cy="112" r="1" fill="#473876"/>
+<circle cx="120" cy="120" r="1" fill="#473876"/>
+<circle cx="128" cy="120" r="1" fill="#473876"/>
+<circle cx="136" cy="120" r="1" fill="#473876"/>
+<circle cx="144" cy="120" r="1" fill="#473876"/>
+<circle cx="152" cy="120" r="1" fill="#473876"/>
+<circle cx="160" cy="120" r="1" fill="#473876"/>
+<circle cx="168" cy="120" r="1" fill="#473876"/>
+<rect width="288" height="120" fill="url(#paint0_radial_302_6503)"/>
+<g clip-path="url(#clip1_302_6503)">
+<path d="M145.754 28.3399C145.567 27.0868 146.432 25.9199 147.685 25.7336C148.938 25.5473 150.105 26.4121 150.291 27.6651L151.071 32.9088C151.258 34.1619 150.393 35.3288 149.14 35.5151C147.887 35.7014 146.72 34.8366 146.533 33.5836L145.754 28.3399Z" fill="#E2DDFE"/>
+<path d="M153.014 27.2603C152.827 26.0072 153.692 24.8403 154.945 24.654C156.198 24.4677 157.365 25.3325 157.552 26.5856L158.331 31.8292C158.518 33.0823 157.653 34.2492 156.4 34.4355C155.147 34.6218 153.98 33.757 153.794 32.504L153.014 27.2603Z" fill="#E2DDFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M169.368 16.1471C160.741 16.2113 153.847 17.1884 145.391 19.7068C143.254 20.3434 141.841 20.769 140.787 21.2548C139.81 21.7052 139.282 22.1476 138.881 22.756C138.051 24.016 138.107 25.2932 138.624 29.6998C139.132 34.0305 139.97 37.8548 141.117 42.1275C141.727 44.4044 142.143 45.9404 142.613 47.0854C143.058 48.1715 143.484 48.7277 144.02 49.1224C144.56 49.5202 145.212 49.7604 146.359 49.8635C147.571 49.9726 149.133 49.9154 151.453 49.825C158.955 49.5328 164.481 48.707 171.773 46.8079C174.047 46.2158 175.582 45.8123 176.728 45.3544C177.818 44.9194 178.376 44.5015 178.772 43.9781C179.16 43.4658 179.416 42.8005 179.541 41.5722C179.672 40.2906 179.643 38.6249 179.595 36.1786C179.51 31.8139 179.348 27.9937 178.751 23.8711C178.112 19.4634 177.836 18.2234 176.657 17.2104C176.087 16.7212 175.441 16.4398 174.351 16.2877C173.173 16.1234 171.657 16.13 169.368 16.1471ZM144.315 16.0917C153.123 13.4682 160.371 12.4419 169.34 12.3751L169.471 12.3741C171.594 12.3582 173.388 12.3448 174.872 12.5517C176.473 12.7751 177.858 13.2698 179.115 14.3492C181.485 16.3853 181.884 19.16 182.414 22.8464C182.437 23.006 182.46 23.1673 182.484 23.3303C183.115 27.6892 183.28 31.6966 183.366 36.1051L183.369 36.2217C183.413 38.5223 183.45 40.4181 183.294 41.9543C183.129 43.5697 182.736 44.9923 181.779 46.2558C180.83 47.5082 179.602 48.2684 178.128 48.8574C176.735 49.4136 174.968 49.8738 172.838 50.4284L172.724 50.4582C165.173 52.4248 159.377 53.2913 151.599 53.5943L151.479 53.599C149.31 53.6835 147.504 53.7539 146.021 53.6204C144.443 53.4785 143.054 53.0958 141.783 52.1595C140.507 51.22 139.729 49.9941 139.123 48.5165C138.551 47.1228 138.076 45.3524 137.504 43.2205L137.473 43.1051C136.298 38.7231 135.413 34.7097 134.877 30.139C134.858 29.9732 134.839 29.8092 134.819 29.647C134.385 25.9745 134.059 23.2197 135.731 20.6816C136.617 19.3349 137.776 18.489 139.208 17.8292C140.535 17.2172 142.21 16.7184 144.192 16.1281C144.233 16.116 144.274 16.1038 144.315 16.0917Z" fill="#E2DDFE"/>
+<path d="M143.691 33.8082L135.73 35.087C133.532 35.4401 132.036 37.5084 132.389 39.7066L133.029 43.6868C133.382 45.885 135.45 47.3808 137.648 47.0276L145.609 45.7488C147.807 45.3957 149.303 43.3274 148.95 41.1292L148.31 37.149C147.957 34.9508 145.889 33.4551 143.691 33.8082Z" stroke="#C171FF" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M156.59 37.8603C156.42 36.8047 155.836 35.8601 154.965 35.2343C154.094 34.6085 153.008 34.3528 151.945 34.5235C150.883 34.6941 149.932 35.2771 149.301 36.1442C148.669 37.0113 148.41 38.0915 148.58 39.1471" stroke="#C171FF" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M167.572 29.9718L159.612 31.2506C157.413 31.6037 155.918 33.672 156.271 35.8702L156.91 39.8505C157.263 42.0487 159.332 43.5444 161.53 43.1913L169.49 41.9125C171.688 41.5594 173.184 39.4911 172.831 37.2929L172.192 33.3126C171.838 31.1144 169.77 29.6187 167.572 29.9718Z" stroke="#C171FF" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M116.063 -31.25L228.562 -4.81252L139.688 83.4994L120 77.3125L116.063 -31.25Z" fill="url(#paint1_linear_302_6503)" fill-opacity="0.3"/>
+<path d="M130.528 97.3219L132.088 97.8457L132.297 96.2142L135.727 69.5206C135.953 67.7661 134.969 66.0796 133.331 65.412L117.713 59.0473C116.117 58.397 114.338 59.4345 114.119 61.1436L110.616 88.4035C110.456 89.6456 111.196 90.8275 112.384 91.2264L130.528 97.3219Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.7"/>
+<path d="M134.704 97.5692L133.063 97.6819L133.272 96.0504L136.702 69.3568C136.928 67.6023 138.306 66.2192 140.06 65.9874L156.779 63.7778C158.488 63.552 159.946 65.0056 159.727 66.7147L156.224 93.9745C156.065 95.2167 155.05 96.1731 153.8 96.2588L134.704 97.5692Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.7"/>
+<path d="M126.944 101.812L128.503 102.335L128.713 100.704L132.268 73.0373C132.419 71.8564 131.757 70.7212 130.655 70.2719L114.128 63.5369C112.532 62.8866 110.754 63.9242 110.534 65.6333L107.031 92.8931C106.872 94.1353 107.612 95.3172 108.799 95.716L126.944 101.812Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.7"/>
+<path d="M137.285 103.14L135.644 103.253L135.854 101.621L139.409 73.9548C139.56 72.7739 140.488 71.843 141.668 71.687L159.361 69.3488C161.069 69.123 162.528 70.5766 162.308 72.2857L158.805 99.5456C158.646 100.788 157.631 101.744 156.382 101.83L137.285 103.14Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.7"/>
+<path d="M132.461 72.0354L131.122 71.8633L130.95 73.2023L127.433 100.577C127.248 102.015 128.264 103.331 129.702 103.515L134.186 104.092C135.624 104.276 136.94 103.26 137.124 101.823L140.642 74.4476L140.814 73.1086L139.475 72.9366L132.461 72.0354Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.7"/>
+</g>
+</g>
+<defs>
+<radialGradient id="paint0_radial_302_6503" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(144.5 67) rotate(90.5405) scale(53.0024 127.206)">
+<stop stop-color="#2E3035" stop-opacity="0.95"/>
+<stop offset="0.566518" stop-color="#2E3035" stop-opacity="0"/>
+<stop offset="1" stop-color="#2E3035" stop-opacity="0.7"/>
+</radialGradient>
+<linearGradient id="paint1_linear_302_6503" x1="125.625" y1="78.4375" x2="199.875" y2="-3.12505" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CC8AFF" stop-opacity="0.9"/>
+<stop offset="1" stop-color="#CC8AFF" stop-opacity="0.1"/>
+</linearGradient>
+<clipPath id="clip0_302_6503">
+<rect width="288" height="120" rx="8" fill="white"/>
+</clipPath>
+<clipPath id="clip1_302_6503">
+<rect x="84" y="-2" width="135" height="117" rx="9" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/captain/document-popover-light.svg b/public/assets/images/dashboard/captain/document-popover-light.svg
new file mode 100644
index 000000000..23fa62a47
--- /dev/null
+++ b/public/assets/images/dashboard/captain/document-popover-light.svg
@@ -0,0 +1,570 @@
+<svg width="288" height="120" viewBox="0 0 288 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_302_8193)">
+<rect width="288" height="120" rx="8" fill="#F9F9FB"/>
+<circle cx="8" r="1" fill="#E1D9FF"/>
+<circle cx="16" r="1" fill="#E1D9FF"/>
+<circle cx="24" r="1" fill="#E1D9FF"/>
+<circle cx="32" r="1" fill="#E1D9FF"/>
+<circle cx="40" r="1" fill="#E1D9FF"/>
+<circle cx="48" r="1" fill="#E1D9FF"/>
+<circle cx="56" r="1" fill="#E1D9FF"/>
+<circle cx="64" r="1" fill="#E1D9FF"/>
+<circle cx="72" r="1" fill="#E1D9FF"/>
+<circle cx="80" r="1" fill="#E1D9FF"/>
+<circle cx="88" r="1" fill="#E1D9FF"/>
+<circle cx="96" r="1" fill="#E1D9FF"/>
+<circle cx="104" r="1" fill="#E1D9FF"/>
+<circle cx="112" r="1" fill="#E1D9FF"/>
+<circle cx="120" r="1" fill="#E1D9FF"/>
+<circle cx="128" r="1" fill="#E1D9FF"/>
+<circle cx="136" r="1" fill="#E1D9FF"/>
+<circle cx="144" r="1" fill="#E1D9FF"/>
+<circle cx="152" r="1" fill="#E1D9FF"/>
+<circle cx="160" r="1" fill="#E1D9FF"/>
+<circle cx="168" r="1" fill="#E1D9FF"/>
+<circle cx="176" r="1" fill="#E1D9FF"/>
+<circle cx="184" r="1" fill="#E1D9FF"/>
+<circle cx="192" r="1" fill="#E1D9FF"/>
+<circle cx="200" r="1" fill="#E1D9FF"/>
+<circle cx="208" r="1" fill="#E1D9FF"/>
+<circle cx="216" r="1" fill="#E1D9FF"/>
+<circle cx="224" r="1" fill="#E1D9FF"/>
+<circle cx="232" r="1" fill="#E1D9FF"/>
+<circle cx="240" r="1" fill="#E1D9FF"/>
+<circle cx="248" r="1" fill="#E1D9FF"/>
+<circle cx="256" r="1" fill="#E1D9FF"/>
+<circle cx="264" r="1" fill="#E1D9FF"/>
+<circle cx="272" r="1" fill="#E1D9FF"/>
+<circle cx="280" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="120" r="1" fill="#E1D9FF"/>
+<rect width="288" height="120" fill="url(#paint0_radial_302_8193)"/>
+<g clip-path="url(#clip1_302_8193)">
+<path d="M138.846 29.7644C138.663 28.5299 139.515 27.3803 140.749 27.1968C141.984 27.0132 143.133 27.8652 143.317 29.0997L144.085 34.2657C144.268 35.5002 143.416 36.6498 142.182 36.8333C140.947 37.0169 139.798 36.1649 139.614 34.9304L138.846 29.7644Z" fill="black"/>
+<path d="M145.999 28.7009C145.815 27.4663 146.667 26.3168 147.902 26.1332C149.136 25.9496 150.286 26.8016 150.469 28.0361L151.237 33.2021C151.421 34.4366 150.569 35.5862 149.335 35.7698C148.1 35.9533 146.95 35.1014 146.767 33.8669L145.999 28.7009Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M162.11 17.7523C153.612 17.8156 146.819 18.7782 138.489 21.2593C136.384 21.8865 134.991 22.3058 133.953 22.7843C132.99 23.2281 132.47 23.6639 132.075 24.2634C131.258 25.5047 131.313 26.7629 131.822 31.1042C132.322 35.3708 133.148 39.1384 134.278 43.3479C134.88 45.591 135.289 47.1043 135.752 48.2323C136.19 49.3023 136.61 49.8503 137.138 50.2391C137.67 50.631 138.313 50.8676 139.442 50.9692C140.637 51.0767 142.175 51.0204 144.461 50.9313C151.852 50.6434 157.296 49.8298 164.48 47.9589C166.72 47.3755 168.233 46.978 169.362 46.5269C170.435 46.0983 170.985 45.6867 171.376 45.1711C171.758 44.6663 172.01 44.0109 172.133 42.8008C172.262 41.5382 172.233 39.8971 172.186 37.487C172.102 33.187 171.943 29.4234 171.354 25.3619C170.725 21.0195 170.453 19.7979 169.291 18.7999C168.73 18.3179 168.094 18.0407 167.02 17.8908C165.859 17.729 164.366 17.7355 162.11 17.7523ZM137.428 17.6977C146.106 15.1131 153.247 14.102 162.083 14.0362L162.212 14.0352C164.304 14.0195 166.071 14.0063 167.533 14.2102C169.111 14.4303 170.475 14.9176 171.713 15.981C174.048 17.987 174.441 20.7206 174.963 24.3523C174.986 24.5096 175.009 24.6685 175.032 24.8291C175.654 29.1234 175.817 33.0715 175.901 37.4147L175.904 37.5295C175.948 39.796 175.984 41.6637 175.83 43.1772C175.668 44.7687 175.281 46.1702 174.338 47.4149C173.403 48.6488 172.193 49.3977 170.741 49.978C169.369 50.526 167.628 50.9793 165.529 51.5258L165.417 51.5551C157.977 53.4926 152.268 54.3462 144.605 54.6447L144.487 54.6493C142.35 54.7327 140.571 54.802 139.109 54.6705C137.555 54.5307 136.186 54.1537 134.934 53.2312C133.678 52.3057 132.91 51.0979 132.313 49.6421C131.75 48.2692 131.282 46.525 130.719 44.4246L130.688 44.3109C129.53 39.9939 128.659 36.0399 128.131 31.5369C128.112 31.3736 128.093 31.212 128.074 31.0522C127.646 27.4341 127.325 24.7201 128.972 22.2196C129.845 20.8929 130.987 20.0595 132.397 19.4095C133.705 18.8066 135.355 18.3152 137.308 17.7336C137.348 17.7217 137.388 17.7097 137.428 17.6977Z" fill="black"/>
+<path d="M136.814 35.1518L128.971 36.4116C126.806 36.7595 125.332 38.7972 125.68 40.9628L126.31 44.8841C126.658 47.0497 128.695 48.5233 130.861 48.1754L138.704 46.9156C140.869 46.5677 142.343 44.53 141.995 42.3644L141.365 38.4431C141.017 36.2775 138.979 34.8039 136.814 35.1518Z" stroke="#B77FFF" stroke-width="2.66" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M149.522 39.1439C149.355 38.1039 148.779 37.1733 147.921 36.5568C147.063 35.9403 145.993 35.6884 144.946 35.8565C143.9 36.0246 142.962 36.599 142.341 37.4532C141.719 38.3075 141.463 39.3717 141.63 40.4116" stroke="#B77FFF" stroke-width="2.66" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M160.341 31.3722L152.499 32.6321C150.333 32.98 148.86 35.0176 149.207 37.1832L149.837 41.1045C150.185 43.2701 152.223 44.7437 154.389 44.3958L162.231 43.136C164.397 42.7881 165.87 40.7505 165.522 38.5848L164.892 34.6635C164.545 32.4979 162.507 31.0243 160.341 31.3722Z" stroke="#B77FFF" stroke-width="2.66" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M109.588 -28.8167L220.421 -2.77083L132.863 84.2327L113.467 78.1375L109.588 -28.8167Z" fill="url(#paint1_linear_302_8193)" fill-opacity="0.3"/>
+<path d="M123.839 97.8504L125.375 98.3665L125.582 96.7592L128.961 70.4611C129.183 68.7325 128.214 67.071 126.6 66.4133L111.213 60.1429C109.641 59.5022 107.889 60.5244 107.672 62.2082L104.222 89.0642C104.064 90.2879 104.794 91.4523 105.963 91.8452L123.839 97.8504Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.66"/>
+<path d="M127.953 98.0942L126.336 98.2051L126.542 96.5978L129.922 70.2997C130.144 68.5711 131.501 67.2086 133.229 66.9802L149.701 64.8033C151.384 64.5809 152.821 66.0129 152.605 67.6967L149.154 94.5527C148.997 95.7764 147.997 96.7187 146.766 96.8032L127.953 98.0942Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.66"/>
+<path d="M120.308 102.274L121.844 102.79L122.05 101.182L125.552 73.9256C125.702 72.7622 125.05 71.6439 123.963 71.2012L107.682 64.566C106.11 63.9253 104.357 64.9475 104.141 66.6313L100.69 93.4873C100.533 94.7111 101.262 95.8755 102.432 96.2684L120.308 102.274Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.66"/>
+<path d="M130.496 103.583L128.879 103.694L129.086 102.086L132.588 74.8296C132.737 73.6662 133.651 72.7491 134.814 72.5954L152.244 70.2918C153.927 70.0694 155.364 71.5014 155.148 73.1852L151.697 100.041C151.54 101.265 150.54 102.207 149.309 102.292L130.496 103.583Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.66"/>
+<path d="M125.743 72.9385L124.424 72.769L124.255 74.0882L120.789 101.058C120.607 102.474 121.608 103.77 123.025 103.952L127.443 104.52C128.859 104.702 130.155 103.701 130.337 102.284L133.803 75.315L133.972 73.9959L132.653 73.8264L125.743 72.9385Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.66"/>
+</g>
+</g>
+<rect x="0.5" y="0.5" width="287" height="119" rx="7.5" stroke="#ECECEC"/>
+<defs>
+<radialGradient id="paint0_radial_302_8193" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(144.5 67) rotate(90.5405) scale(53.0024 127.206)">
+<stop stop-color="#F9F9FB" stop-opacity="0.95"/>
+<stop offset="0.566518" stop-color="#F9F9FB" stop-opacity="0"/>
+<stop offset="1" stop-color="#F9F9FB" stop-opacity="0.7"/>
+</radialGradient>
+<linearGradient id="paint1_linear_302_8193" x1="119.008" y1="79.2458" x2="192.158" y2="-1.10836" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CC8AFF" stop-opacity="0.9"/>
+<stop offset="1" stop-color="#CC8AFF" stop-opacity="0.1"/>
+</linearGradient>
+<clipPath id="clip0_302_8193">
+<rect width="288" height="120" rx="8" fill="white"/>
+</clipPath>
+<clipPath id="clip1_302_8193">
+<rect x="78" width="133" height="115.267" rx="8.86667" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/captain/faqs-dark.svg b/public/assets/images/dashboard/captain/faqs-dark.svg
new file mode 100644
index 000000000..cd6e11dd1
--- /dev/null
+++ b/public/assets/images/dashboard/captain/faqs-dark.svg
@@ -0,0 +1,18 @@
+<svg width="120" height="104" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="104" rx="8" fill="#1B1B1F"/>
+<path d="M35.8884 45.93C35.9931 44.8088 36.9869 43.9847 38.1081 44.0894C39.2293 44.1941 40.0534 45.1879 39.9487 46.3091L39.5107 51.001C39.4061 52.1222 38.4123 52.9463 37.2911 52.8416C36.1699 52.7369 35.3458 51.7432 35.4505 50.6219L35.8884 45.93Z" fill="#E2DDFE"/>
+<path d="M42.3841 46.5364C42.4888 45.4152 43.4825 44.5911 44.6038 44.6957C45.725 44.8004 46.5491 45.7942 46.4444 46.9154L46.0064 51.6073C45.9017 52.7285 44.908 53.5526 43.7868 53.4479C42.6655 53.3433 41.8415 52.3495 41.9461 51.2283L42.3841 46.5364Z" fill="#E2DDFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.9432 37.1464C40.4828 35.3741 34.3241 34.7567 26.4912 35.1392C24.5112 35.2359 23.2008 35.3038 22.1882 35.4998C21.2492 35.6816 20.6997 35.9516 20.2249 36.392C19.2417 37.3039 19.0193 38.4183 18.5316 42.3318C18.0522 46.1779 17.9658 49.657 18.0501 53.5884C18.095 55.6834 18.1285 57.0975 18.2912 58.1854C18.4455 59.2174 18.6954 59.7878 19.0743 60.242C19.4563 60.6999 19.9683 61.0453 20.9362 61.3773C21.96 61.7285 23.3201 62.01 25.3418 62.4235C31.8806 63.7609 36.8259 64.2189 43.5231 64.1245C45.6112 64.0951 47.0223 64.0722 48.1089 63.9198C49.1413 63.775 49.7117 63.5326 50.1648 63.1647C50.6084 62.8047 50.9703 62.2846 51.3385 61.2507C51.7227 60.172 52.0504 58.7279 52.5276 56.606C53.379 52.82 54.0487 49.4879 54.4067 45.8025C54.7894 41.8622 54.8135 40.7331 54.0102 39.6088C53.6222 39.0658 53.1244 38.686 52.2152 38.3237C51.2334 37.9323 49.9235 37.6169 47.9432 37.1464ZM26.3276 31.7902C34.4873 31.3918 40.9619 32.0416 48.7182 33.8842L48.8317 33.9112C50.6682 34.3474 52.2197 34.7159 53.4567 35.209C54.7917 35.7411 55.8824 36.4616 56.7384 37.6596C58.353 39.9196 58.1096 42.3994 57.7863 45.6941C57.7723 45.8367 57.7581 45.9809 57.7439 46.1266C57.3655 50.0233 56.6588 53.5178 55.7989 57.3416L55.7761 57.4428C55.3274 59.4383 54.9576 61.0827 54.4971 62.3757C54.0128 63.7354 53.3719 64.8801 52.2779 65.768C51.1936 66.6482 49.9723 67.0442 48.5746 67.2402C47.2547 67.4254 45.6317 67.4482 43.6754 67.4757L43.5703 67.4772C36.6351 67.5749 31.4486 67.0949 24.67 65.7085L24.5654 65.6871C22.6751 65.3005 21.1011 64.9786 19.8484 64.5489C18.5167 64.0922 17.3986 63.4675 16.4996 62.3898C15.5976 61.3086 15.185 60.0852 14.9751 58.6813C14.7771 57.3571 14.7422 55.7281 14.7002 53.7665L14.6979 53.6603C14.6114 49.6284 14.6984 45.9764 15.2043 41.9171C15.2227 41.7699 15.2407 41.6242 15.2585 41.4801C15.6617 38.2178 15.9642 35.7706 17.9448 33.9336C18.9956 32.959 20.1753 32.4743 21.5508 32.208C22.8264 31.961 24.3779 31.8853 26.2144 31.7957C26.252 31.7939 26.2898 31.792 26.3276 31.7902Z" fill="#E2DDFE"/>
+<path d="M88.3515 46.1887C85.8484 44.8972 82.7723 45.8795 81.4808 48.3826C80.9491 49.4133 81.3535 50.68 82.3842 51.2117L105.49 63.1328C106.521 63.6646 107.788 63.2601 108.319 62.2294C109.611 59.7263 108.629 56.6502 106.125 55.3587L88.3515 46.1887Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.2"/>
+<path d="M100.6 44.2402C98.0964 42.9488 95.0203 43.9311 93.7288 46.4342C93.1971 47.4649 93.6015 48.7315 94.6322 49.2633L100.745 52.4169C101.775 52.9487 103.042 52.5442 103.574 51.5135C104.865 49.0104 103.883 45.9343 101.38 44.6428L100.6 44.2402Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.2"/>
+<path d="M87.3803 25.2416C88.2628 25.301 88.8292 24.7875 88.8754 24.101C88.8781 24.0618 88.8807 24.0226 88.8833 23.9834C88.9387 23.1597 89.5039 22.6658 90.5699 22.048C92.1041 21.2055 93.3219 20.3812 93.4525 18.4397C93.6345 15.7333 91.3146 14.1982 88.6474 14.0188C85.941 13.8367 84.0745 14.9326 83.5128 16.2541C83.3963 16.5221 83.3386 16.794 83.3201 17.0686C83.2687 17.8335 83.8489 18.2862 84.4177 18.3245C85.006 18.364 85.3958 18.1341 85.7569 17.7447L86.1167 17.3749C86.8193 16.5948 87.5477 16.3089 88.391 16.3656C89.6658 16.4513 90.4786 17.2546 90.4034 18.3725C90.3335 19.4119 89.6154 19.8364 88.2407 20.6502C87.1512 21.3255 86.1936 22.0885 86.0881 23.6574C86.0868 23.677 86.0828 23.7359 86.0815 23.7555C86.0195 24.6773 86.4781 25.1809 87.3803 25.2416ZM87.0244 29.9458C87.9854 30.0104 88.8801 29.3023 88.9448 28.3412C89.0108 27.3607 88.2372 26.5601 87.2566 26.4941C86.276 26.4281 85.4009 27.1375 85.3362 28.0985C85.2729 29.04 86.0635 29.8811 87.0244 29.9458Z" fill="#C171FF"/>
+<path d="M85.5 35.5001V35.5001C84.9783 38.0607 82.7263 39.9001 80.1131 39.9001L74.189 39.9001C72.1482 39.9001 70.1922 40.7164 68.7568 42.1669V42.1669C65.1465 45.8153 66.0875 51.9146 70.6295 54.3051L70.9999 54.5001" stroke="#C171FF" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M78 57.0001L83.2819 58.1319C84.4138 58.3744 85.4796 58.8598 86.4057 59.5543L86.5548 59.6662C88.1294 60.8471 89.2134 62.5672 89.5994 64.4972L90 66.5001" stroke="#C171FF" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M85.6497 70.4532L85.8355 70.8248L86.1918 70.6111C87.3126 69.9386 88.7325 69.9746 89.913 70.4746C91.1049 70.9795 91.9389 71.9031 92.0203 72.8889C92.189 74.9307 90.2807 76.8178 87.4084 77.0551L75.9644 78.0004C74.7135 78.1037 73.6774 77.8777 72.9491 77.4335C72.2298 76.9948 71.7992 76.3391 71.7318 75.5239C71.6758 74.8455 71.8095 74.0406 72.3077 73.4701C72.7877 72.9205 73.6837 72.5018 75.3494 72.7397L75.7795 72.8012L75.7884 72.3668C75.8359 70.0589 77.6541 68.0799 80.0312 67.8835C82.5085 67.6789 84.7434 68.6406 85.6497 70.4532Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="0.769498"/>
+<circle cx="76" cy="64.0001" r="1.5" fill="#3B334A" stroke="#C9C7DD"/>
+<circle cx="72" cy="69.0001" r="0.5" fill="#3B334A" stroke="#C9C7DD"/>
+<path d="M72.9022 71.7159C71.1959 71.8576 69.9276 73.3555 70.0692 75.0617L70.8963 85.0275C71.312 90.036 75.7092 93.7593 80.7178 93.3436L96.663 92.0202C101.672 91.6045 105.395 87.2073 104.979 82.1987L104.152 72.233C104.01 70.5268 102.512 69.2584 100.806 69.4L72.9022 71.7159Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.2"/>
+<path d="M104 72.3305L106.79 72.0991C107.451 72.0444 108.031 72.5354 108.085 73.1959C108.14 73.8563 107.649 74.4362 106.989 74.4909L104.198 74.7223L104 72.3305Z" fill="#C9C7DD"/>
+<path d="M66.0992 77.5264C66.0444 76.8659 66.5354 76.2861 67.1959 76.2313L70.9829 75.9173L71.1812 78.3091L67.3942 78.6231C66.7337 78.6779 66.1539 78.1869 66.0992 77.5264Z" fill="#C9C7DD"/>
+<path d="M26.7662 26.3753C27.0191 26.2956 27.2335 26.1295 27.3621 25.9137C27.4907 25.6979 27.5231 25.45 27.452 25.2246L26.7353 22.9505L26.0186 20.6764C25.8962 20.2879 26.0939 19.8639 26.4331 19.5729C27.1359 18.972 27.5989 18.178 27.7403 17.3309C27.8816 16.4839 27.6923 15.6383 27.2057 14.9434C26.7191 14.2485 25.9665 13.749 25.0807 13.533C24.195 13.3169 23.233 13.3983 22.3645 13.7627C21.7556 13.1156 20.9394 12.6579 20.0169 12.4464C19.0943 12.2349 18.1058 12.2787 17.1737 12.5725C16.2415 12.8662 15.4066 13.3971 14.772 14.0993C14.1375 14.8016 13.7311 15.6445 13.6033 16.5239C12.6834 16.7237 11.8493 17.2087 11.248 17.8934C10.6467 18.578 10.3168 19.4184 10.3165 20.2663C10.3162 21.1142 10.6456 21.9152 11.2465 22.528C11.8473 23.1408 12.6812 23.5262 13.601 23.6161C14.046 23.6609 14.4511 23.8949 14.5733 24.2825L16.0069 28.8316C16.078 29.057 16.2466 29.2416 16.4757 29.3446C16.7048 29.4477 16.9757 29.4608 17.2286 29.3811C17.2286 29.3811 19.9917 28.043 21.8633 27.4531C23.7349 26.8633 26.7662 26.3753 26.7662 26.3753Z" stroke="#C171FF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/assets/images/dashboard/captain/faqs-light.svg b/public/assets/images/dashboard/captain/faqs-light.svg
new file mode 100644
index 000000000..68cc99e06
--- /dev/null
+++ b/public/assets/images/dashboard/captain/faqs-light.svg
@@ -0,0 +1,19 @@
+<svg width="120" height="104" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="119" height="103" rx="7.5" fill="#FCFCFD"/>
+<rect x="0.5" y="0.5" width="119" height="103" rx="7.5" stroke="#ECECEC"/>
+<path d="M35.8884 45.93C35.9931 44.8088 36.9869 43.9847 38.1081 44.0894C39.2293 44.1941 40.0534 45.1879 39.9487 46.3091L39.5107 51.001C39.4061 52.1222 38.4123 52.9463 37.2911 52.8416C36.1699 52.7369 35.3458 51.7432 35.4505 50.6219L35.8884 45.93Z" fill="black"/>
+<path d="M42.3841 46.5364C42.4888 45.4152 43.4825 44.5911 44.6038 44.6957C45.725 44.8004 46.5491 45.7942 46.4444 46.9154L46.0064 51.6073C45.9017 52.7285 44.908 53.5526 43.7868 53.4479C42.6655 53.3433 41.8415 52.3495 41.9461 51.2283L42.3841 46.5364Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.9432 37.1464C40.4828 35.3741 34.3241 34.7567 26.4912 35.1392C24.5112 35.2359 23.2008 35.3038 22.1882 35.4998C21.2492 35.6816 20.6997 35.9516 20.2249 36.392C19.2417 37.3039 19.0193 38.4183 18.5316 42.3318C18.0522 46.1779 17.9658 49.657 18.0501 53.5884C18.095 55.6834 18.1285 57.0975 18.2912 58.1854C18.4455 59.2174 18.6954 59.7878 19.0743 60.242C19.4563 60.6999 19.9683 61.0453 20.9362 61.3773C21.96 61.7285 23.3201 62.01 25.3418 62.4235C31.8806 63.7609 36.8259 64.2189 43.5231 64.1245C45.6112 64.0951 47.0223 64.0722 48.1089 63.9198C49.1413 63.775 49.7117 63.5326 50.1648 63.1647C50.6084 62.8047 50.9703 62.2846 51.3385 61.2507C51.7227 60.172 52.0504 58.7279 52.5276 56.606C53.379 52.82 54.0487 49.4879 54.4067 45.8025C54.7894 41.8622 54.8135 40.7331 54.0102 39.6088C53.6222 39.0658 53.1244 38.686 52.2152 38.3237C51.2334 37.9323 49.9235 37.6169 47.9432 37.1464ZM26.3276 31.7902C34.4873 31.3918 40.9619 32.0416 48.7182 33.8842L48.8317 33.9112C50.6682 34.3474 52.2197 34.7159 53.4567 35.209C54.7917 35.7411 55.8824 36.4616 56.7384 37.6596C58.353 39.9196 58.1096 42.3994 57.7863 45.6941C57.7723 45.8367 57.7581 45.9809 57.7439 46.1266C57.3655 50.0233 56.6588 53.5178 55.7989 57.3416L55.7761 57.4428C55.3274 59.4383 54.9576 61.0827 54.4971 62.3757C54.0128 63.7354 53.3719 64.8801 52.2779 65.768C51.1936 66.6482 49.9723 67.0442 48.5746 67.2402C47.2547 67.4254 45.6317 67.4482 43.6754 67.4757L43.5703 67.4772C36.6351 67.5749 31.4486 67.0949 24.67 65.7085L24.5654 65.6871C22.6751 65.3005 21.1011 64.9786 19.8484 64.5489C18.5167 64.0922 17.3986 63.4675 16.4996 62.3898C15.5976 61.3086 15.185 60.0852 14.9751 58.6813C14.7771 57.3571 14.7422 55.7281 14.7002 53.7665L14.6979 53.6603C14.6114 49.6284 14.6984 45.9764 15.2043 41.9171C15.2227 41.7699 15.2407 41.6242 15.2585 41.4801C15.6617 38.2178 15.9642 35.7706 17.9448 33.9336C18.9956 32.959 20.1753 32.4743 21.5508 32.208C22.8264 31.961 24.3779 31.8853 26.2144 31.7957C26.252 31.7939 26.2898 31.792 26.3276 31.7902Z" fill="black"/>
+<path d="M88.3515 46.1886C85.8484 44.8972 82.7723 45.8794 81.4808 48.3826C80.9491 49.4133 81.3535 50.6799 82.3842 51.2117L105.49 63.1328C106.521 63.6645 107.788 63.2601 108.319 62.2294C109.611 59.7262 108.629 56.6501 106.125 55.3587L88.3515 46.1886Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.2"/>
+<path d="M100.6 44.2402C98.0964 42.9487 95.0203 43.931 93.7288 46.4341C93.1971 47.4648 93.6015 48.7315 94.6322 49.2633L100.745 52.4169C101.775 52.9486 103.042 52.5442 103.574 51.5135C104.865 49.0103 103.883 45.9342 101.38 44.6428L100.6 44.2402Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.2"/>
+<path d="M87.3803 25.2415C88.2628 25.3009 88.8292 24.7874 88.8754 24.101C88.8781 24.0617 88.8807 24.0225 88.8833 23.9833C88.9387 23.1596 89.5039 22.6657 90.5699 22.0479C92.1041 21.2055 93.3219 20.3812 93.4525 18.4396C93.6345 15.7332 91.3146 14.1981 88.6474 14.0187C85.941 13.8367 84.0745 14.9325 83.5128 16.2541C83.3963 16.5221 83.3386 16.794 83.3201 17.0685C83.2687 17.8334 83.8489 18.2861 84.4177 18.3244C85.006 18.364 85.3958 18.1341 85.7569 17.7447L86.1167 17.3748C86.8193 16.5947 87.5477 16.3088 88.391 16.3655C89.6658 16.4513 90.4786 17.2546 90.4034 18.3724C90.3335 19.4118 89.6154 19.8363 88.2407 20.6501C87.1512 21.3254 86.1936 22.0884 86.0881 23.6574C86.0868 23.677 86.0828 23.7358 86.0815 23.7554C86.0195 24.6773 86.4781 25.1808 87.3803 25.2415ZM87.0244 29.9457C87.9854 30.0103 88.8801 29.3023 88.9448 28.3411C89.0108 27.3606 88.2372 26.56 87.2566 26.494C86.276 26.4281 85.4009 27.1375 85.3362 28.0984C85.2729 29.0399 86.0635 29.8811 87.0244 29.9457Z" fill="#AC6BFF"/>
+<path d="M85.5 35.5V35.5C84.9783 38.0605 82.7263 39.9 80.1131 39.9L74.189 39.9C72.1482 39.9 70.1922 40.7162 68.7568 42.1668V42.1668C65.1465 45.8152 66.0875 51.9144 70.6295 54.305L70.9999 54.5" stroke="#AC6BFF" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M78 57L83.2819 58.1318C84.4138 58.3744 85.4796 58.8597 86.4057 59.5543L86.5548 59.6661C88.1294 60.8471 89.2134 62.5671 89.5994 64.4972L90 66.5" stroke="#AC6BFF" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M85.6497 70.4531L85.8355 70.8248L86.1918 70.611C87.3126 69.9385 88.7325 69.9745 89.913 70.4746C91.1049 70.9794 91.9389 71.903 92.0203 72.8889C92.189 74.9307 90.2807 76.8177 87.4084 77.055L75.9644 78.0003C74.7135 78.1037 73.6774 77.8776 72.9491 77.4334C72.2298 76.9947 71.7992 76.3391 71.7318 75.5239C71.6758 74.8454 71.8095 74.0406 72.3077 73.47C72.7877 72.9204 73.6837 72.5017 75.3494 72.7397L75.7795 72.8011L75.7884 72.3667C75.8359 70.0588 77.6541 68.0798 80.0312 67.8834C82.5085 67.6788 84.7434 68.6406 85.6497 70.4531Z" fill="#E1D9FF" stroke="#2F265F" stroke-width="0.769498"/>
+<circle cx="76" cy="64" r="1.5" fill="#E1D9FF" stroke="#2F265F"/>
+<circle cx="72" cy="69" r="0.5" fill="#E1D9FF" stroke="#2F265F"/>
+<path d="M72.9022 71.7159C71.1959 71.8576 69.9276 73.3555 70.0692 75.0617L70.8963 85.0275C71.312 90.036 75.7092 93.7593 80.7178 93.3436L96.663 92.0202C101.672 91.6045 105.395 87.2073 104.979 82.1987L104.152 72.233C104.01 70.5268 102.512 69.2584 100.806 69.4L72.9022 71.7159Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.2"/>
+<path d="M104 72.3305L106.79 72.0991C107.451 72.0444 108.031 72.5354 108.085 73.1959C108.14 73.8563 107.649 74.4362 106.989 74.4909L104.198 74.7223L104 72.3305Z" fill="#2F265F"/>
+<path d="M66.0992 77.5264C66.0444 76.8659 66.5354 76.2861 67.1959 76.2313L70.9829 75.9173L71.1812 78.3091L67.3942 78.6231C66.7337 78.6779 66.1539 78.1869 66.0992 77.5264Z" fill="#2F265F"/>
+<path d="M26.7662 26.3752C27.0191 26.2955 27.2335 26.1295 27.3621 25.9137C27.4907 25.6979 27.5231 25.45 27.452 25.2245L26.7353 22.9504L26.0186 20.6763C25.8962 20.2878 26.0939 19.8638 26.4331 19.5728C27.1359 18.9719 27.5989 18.1779 27.7403 17.3309C27.8816 16.4839 27.6923 15.6383 27.2057 14.9434C26.7191 14.2485 25.9665 13.7489 25.0807 13.5329C24.195 13.3169 23.233 13.3982 22.3645 13.7627C21.7556 13.1155 20.9394 12.6579 20.0169 12.4463C19.0943 12.2348 18.1058 12.2786 17.1737 12.5724C16.2415 12.8662 15.4066 13.397 14.772 14.0993C14.1375 14.8016 13.7311 15.6445 13.6033 16.5238C12.6834 16.7236 11.8493 17.2086 11.248 17.8933C10.6467 18.578 10.3168 19.4184 10.3165 20.2662C10.3162 21.1141 10.6456 21.9151 11.2465 22.5279C11.8473 23.1408 12.6812 23.5261 13.601 23.616C14.046 23.6608 14.4511 23.8948 14.5733 24.2825L16.0069 28.8315C16.078 29.057 16.2466 29.2415 16.4757 29.3446C16.7048 29.4476 16.9757 29.4608 17.2286 29.381C17.2286 29.381 19.9917 28.0429 21.8633 27.4531C23.7349 26.8632 26.7662 26.3752 26.7662 26.3752Z" stroke="#AC6BFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/assets/images/dashboard/captain/faqs-popover-dark.svg b/public/assets/images/dashboard/captain/faqs-popover-dark.svg
new file mode 100644
index 000000000..bff626616
--- /dev/null
+++ b/public/assets/images/dashboard/captain/faqs-popover-dark.svg
@@ -0,0 +1,563 @@
+<svg width="288" height="120" viewBox="0 0 288 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_302_7053)">
+<rect width="288" height="120" rx="8" fill="#2E3035"/>
+<circle cx="8" r="1" fill="#473876"/>
+<circle cx="16" r="1" fill="#473876"/>
+<circle cx="24" r="1" fill="#473876"/>
+<circle cx="32" r="1" fill="#473876"/>
+<circle cx="40" r="1" fill="#473876"/>
+<circle cx="48" r="1" fill="#473876"/>
+<circle cx="56" r="1" fill="#473876"/>
+<circle cx="64" r="1" fill="#473876"/>
+<circle cx="72" r="1" fill="#473876"/>
+<circle cx="80" r="1" fill="#473876"/>
+<circle cx="88" r="1" fill="#473876"/>
+<circle cx="96" r="1" fill="#473876"/>
+<circle cx="104" r="1" fill="#473876"/>
+<circle cx="112" r="1" fill="#473876"/>
+<circle cx="120" r="1" fill="#473876"/>
+<circle cx="128" r="1" fill="#473876"/>
+<circle cx="136" r="1" fill="#473876"/>
+<circle cx="144" r="1" fill="#473876"/>
+<circle cx="152" r="1" fill="#473876"/>
+<circle cx="160" r="1" fill="#473876"/>
+<circle cx="168" r="1" fill="#473876"/>
+<circle cx="176" r="1" fill="#473876"/>
+<circle cx="184" r="1" fill="#473876"/>
+<circle cx="192" r="1" fill="#473876"/>
+<circle cx="200" r="1" fill="#473876"/>
+<circle cx="208" r="1" fill="#473876"/>
+<circle cx="216" r="1" fill="#473876"/>
+<circle cx="224" r="1" fill="#473876"/>
+<circle cx="232" r="1" fill="#473876"/>
+<circle cx="240" r="1" fill="#473876"/>
+<circle cx="248" r="1" fill="#473876"/>
+<circle cx="256" r="1" fill="#473876"/>
+<circle cx="264" r="1" fill="#473876"/>
+<circle cx="272" r="1" fill="#473876"/>
+<circle cx="280" r="1" fill="#473876"/>
+<circle cx="8" cy="8" r="1" fill="#473876"/>
+<circle cx="16" cy="8" r="1" fill="#473876"/>
+<circle cx="24" cy="8" r="1" fill="#473876"/>
+<circle cx="32" cy="8" r="1" fill="#473876"/>
+<circle cx="40" cy="8" r="1" fill="#473876"/>
+<circle cx="48" cy="8" r="1" fill="#473876"/>
+<circle cx="56" cy="8" r="1" fill="#473876"/>
+<circle cx="64" cy="8" r="1" fill="#473876"/>
+<circle cx="72" cy="8" r="1" fill="#473876"/>
+<circle cx="80" cy="8" r="1" fill="#473876"/>
+<circle cx="88" cy="8" r="1" fill="#473876"/>
+<circle cx="96" cy="8" r="1" fill="#473876"/>
+<circle cx="104" cy="8" r="1" fill="#473876"/>
+<circle cx="112" cy="8" r="1" fill="#473876"/>
+<circle cx="120" cy="8" r="1" fill="#473876"/>
+<circle cx="128" cy="8" r="1" fill="#473876"/>
+<circle cx="136" cy="8" r="1" fill="#473876"/>
+<circle cx="144" cy="8" r="1" fill="#473876"/>
+<circle cx="152" cy="8" r="1" fill="#473876"/>
+<circle cx="160" cy="8" r="1" fill="#473876"/>
+<circle cx="168" cy="8" r="1" fill="#473876"/>
+<circle cx="176" cy="8" r="1" fill="#473876"/>
+<circle cx="184" cy="8" r="1" fill="#473876"/>
+<circle cx="192" cy="8" r="1" fill="#473876"/>
+<circle cx="200" cy="8" r="1" fill="#473876"/>
+<circle cx="208" cy="8" r="1" fill="#473876"/>
+<circle cx="216" cy="8" r="1" fill="#473876"/>
+<circle cx="224" cy="8" r="1" fill="#473876"/>
+<circle cx="232" cy="8" r="1" fill="#473876"/>
+<circle cx="240" cy="8" r="1" fill="#473876"/>
+<circle cx="248" cy="8" r="1" fill="#473876"/>
+<circle cx="256" cy="8" r="1" fill="#473876"/>
+<circle cx="264" cy="8" r="1" fill="#473876"/>
+<circle cx="272" cy="8" r="1" fill="#473876"/>
+<circle cx="280" cy="8" r="1" fill="#473876"/>
+<circle cx="8" cy="16" r="1" fill="#473876"/>
+<circle cx="16" cy="16" r="1" fill="#473876"/>
+<circle cx="24" cy="16" r="1" fill="#473876"/>
+<circle cx="32" cy="16" r="1" fill="#473876"/>
+<circle cx="40" cy="16" r="1" fill="#473876"/>
+<circle cx="48" cy="16" r="1" fill="#473876"/>
+<circle cx="56" cy="16" r="1" fill="#473876"/>
+<circle cx="64" cy="16" r="1" fill="#473876"/>
+<circle cx="72" cy="16" r="1" fill="#473876"/>
+<circle cx="80" cy="16" r="1" fill="#473876"/>
+<circle cx="88" cy="16" r="1" fill="#473876"/>
+<circle cx="96" cy="16" r="1" fill="#473876"/>
+<circle cx="104" cy="16" r="1" fill="#473876"/>
+<circle cx="112" cy="16" r="1" fill="#473876"/>
+<circle cx="120" cy="16" r="1" fill="#473876"/>
+<circle cx="128" cy="16" r="1" fill="#473876"/>
+<circle cx="136" cy="16" r="1" fill="#473876"/>
+<circle cx="144" cy="16" r="1" fill="#473876"/>
+<circle cx="152" cy="16" r="1" fill="#473876"/>
+<circle cx="160" cy="16" r="1" fill="#473876"/>
+<circle cx="168" cy="16" r="1" fill="#473876"/>
+<circle cx="176" cy="16" r="1" fill="#473876"/>
+<circle cx="184" cy="16" r="1" fill="#473876"/>
+<circle cx="192" cy="16" r="1" fill="#473876"/>
+<circle cx="200" cy="16" r="1" fill="#473876"/>
+<circle cx="208" cy="16" r="1" fill="#473876"/>
+<circle cx="216" cy="16" r="1" fill="#473876"/>
+<circle cx="224" cy="16" r="1" fill="#473876"/>
+<circle cx="232" cy="16" r="1" fill="#473876"/>
+<circle cx="240" cy="16" r="1" fill="#473876"/>
+<circle cx="248" cy="16" r="1" fill="#473876"/>
+<circle cx="256" cy="16" r="1" fill="#473876"/>
+<circle cx="264" cy="16" r="1" fill="#473876"/>
+<circle cx="272" cy="16" r="1" fill="#473876"/>
+<circle cx="280" cy="16" r="1" fill="#473876"/>
+<circle cx="8" cy="24" r="1" fill="#473876"/>
+<circle cx="16" cy="24" r="1" fill="#473876"/>
+<circle cx="24" cy="24" r="1" fill="#473876"/>
+<circle cx="32" cy="24" r="1" fill="#473876"/>
+<circle cx="40" cy="24" r="1" fill="#473876"/>
+<circle cx="48" cy="24" r="1" fill="#473876"/>
+<circle cx="56" cy="24" r="1" fill="#473876"/>
+<circle cx="64" cy="24" r="1" fill="#473876"/>
+<circle cx="72" cy="24" r="1" fill="#473876"/>
+<circle cx="80" cy="24" r="1" fill="#473876"/>
+<circle cx="88" cy="24" r="1" fill="#473876"/>
+<circle cx="96" cy="24" r="1" fill="#473876"/>
+<circle cx="104" cy="24" r="1" fill="#473876"/>
+<circle cx="112" cy="24" r="1" fill="#473876"/>
+<circle cx="120" cy="24" r="1" fill="#473876"/>
+<circle cx="128" cy="24" r="1" fill="#473876"/>
+<circle cx="136" cy="24" r="1" fill="#473876"/>
+<circle cx="144" cy="24" r="1" fill="#473876"/>
+<circle cx="152" cy="24" r="1" fill="#473876"/>
+<circle cx="160" cy="24" r="1" fill="#473876"/>
+<circle cx="168" cy="24" r="1" fill="#473876"/>
+<circle cx="176" cy="24" r="1" fill="#473876"/>
+<circle cx="184" cy="24" r="1" fill="#473876"/>
+<circle cx="192" cy="24" r="1" fill="#473876"/>
+<circle cx="200" cy="24" r="1" fill="#473876"/>
+<circle cx="208" cy="24" r="1" fill="#473876"/>
+<circle cx="216" cy="24" r="1" fill="#473876"/>
+<circle cx="224" cy="24" r="1" fill="#473876"/>
+<circle cx="232" cy="24" r="1" fill="#473876"/>
+<circle cx="240" cy="24" r="1" fill="#473876"/>
+<circle cx="248" cy="24" r="1" fill="#473876"/>
+<circle cx="256" cy="24" r="1" fill="#473876"/>
+<circle cx="264" cy="24" r="1" fill="#473876"/>
+<circle cx="272" cy="24" r="1" fill="#473876"/>
+<circle cx="280" cy="24" r="1" fill="#473876"/>
+<circle cx="8" cy="32" r="1" fill="#473876"/>
+<circle cx="16" cy="32" r="1" fill="#473876"/>
+<circle cx="24" cy="32" r="1" fill="#473876"/>
+<circle cx="32" cy="32" r="1" fill="#473876"/>
+<circle cx="40" cy="32" r="1" fill="#473876"/>
+<circle cx="48" cy="32" r="1" fill="#473876"/>
+<circle cx="56" cy="32" r="1" fill="#473876"/>
+<circle cx="64" cy="32" r="1" fill="#473876"/>
+<circle cx="72" cy="32" r="1" fill="#473876"/>
+<circle cx="80" cy="32" r="1" fill="#473876"/>
+<circle cx="88" cy="32" r="1" fill="#473876"/>
+<circle cx="96" cy="32" r="1" fill="#473876"/>
+<circle cx="104" cy="32" r="1" fill="#473876"/>
+<circle cx="112" cy="32" r="1" fill="#473876"/>
+<circle cx="120" cy="32" r="1" fill="#473876"/>
+<circle cx="128" cy="32" r="1" fill="#473876"/>
+<circle cx="136" cy="32" r="1" fill="#473876"/>
+<circle cx="144" cy="32" r="1" fill="#473876"/>
+<circle cx="152" cy="32" r="1" fill="#473876"/>
+<circle cx="160" cy="32" r="1" fill="#473876"/>
+<circle cx="168" cy="32" r="1" fill="#473876"/>
+<circle cx="176" cy="32" r="1" fill="#473876"/>
+<circle cx="184" cy="32" r="1" fill="#473876"/>
+<circle cx="192" cy="32" r="1" fill="#473876"/>
+<circle cx="200" cy="32" r="1" fill="#473876"/>
+<circle cx="208" cy="32" r="1" fill="#473876"/>
+<circle cx="216" cy="32" r="1" fill="#473876"/>
+<circle cx="224" cy="32" r="1" fill="#473876"/>
+<circle cx="232" cy="32" r="1" fill="#473876"/>
+<circle cx="240" cy="32" r="1" fill="#473876"/>
+<circle cx="248" cy="32" r="1" fill="#473876"/>
+<circle cx="256" cy="32" r="1" fill="#473876"/>
+<circle cx="264" cy="32" r="1" fill="#473876"/>
+<circle cx="272" cy="32" r="1" fill="#473876"/>
+<circle cx="280" cy="32" r="1" fill="#473876"/>
+<circle cx="8" cy="40" r="1" fill="#473876"/>
+<circle cx="16" cy="40" r="1" fill="#473876"/>
+<circle cx="24" cy="40" r="1" fill="#473876"/>
+<circle cx="32" cy="40" r="1" fill="#473876"/>
+<circle cx="40" cy="40" r="1" fill="#473876"/>
+<circle cx="48" cy="40" r="1" fill="#473876"/>
+<circle cx="56" cy="40" r="1" fill="#473876"/>
+<circle cx="64" cy="40" r="1" fill="#473876"/>
+<circle cx="72" cy="40" r="1" fill="#473876"/>
+<circle cx="80" cy="40" r="1" fill="#473876"/>
+<circle cx="88" cy="40" r="1" fill="#473876"/>
+<circle cx="96" cy="40" r="1" fill="#473876"/>
+<circle cx="104" cy="40" r="1" fill="#473876"/>
+<circle cx="112" cy="40" r="1" fill="#473876"/>
+<circle cx="120" cy="40" r="1" fill="#473876"/>
+<circle cx="128" cy="40" r="1" fill="#473876"/>
+<circle cx="136" cy="40" r="1" fill="#473876"/>
+<circle cx="144" cy="40" r="1" fill="#473876"/>
+<circle cx="152" cy="40" r="1" fill="#473876"/>
+<circle cx="160" cy="40" r="1" fill="#473876"/>
+<circle cx="168" cy="40" r="1" fill="#473876"/>
+<circle cx="176" cy="40" r="1" fill="#473876"/>
+<circle cx="184" cy="40" r="1" fill="#473876"/>
+<circle cx="192" cy="40" r="1" fill="#473876"/>
+<circle cx="200" cy="40" r="1" fill="#473876"/>
+<circle cx="208" cy="40" r="1" fill="#473876"/>
+<circle cx="216" cy="40" r="1" fill="#473876"/>
+<circle cx="224" cy="40" r="1" fill="#473876"/>
+<circle cx="232" cy="40" r="1" fill="#473876"/>
+<circle cx="240" cy="40" r="1" fill="#473876"/>
+<circle cx="248" cy="40" r="1" fill="#473876"/>
+<circle cx="256" cy="40" r="1" fill="#473876"/>
+<circle cx="264" cy="40" r="1" fill="#473876"/>
+<circle cx="272" cy="40" r="1" fill="#473876"/>
+<circle cx="280" cy="40" r="1" fill="#473876"/>
+<circle cx="8" cy="48" r="1" fill="#473876"/>
+<circle cx="16" cy="48" r="1" fill="#473876"/>
+<circle cx="24" cy="48" r="1" fill="#473876"/>
+<circle cx="32" cy="48" r="1" fill="#473876"/>
+<circle cx="40" cy="48" r="1" fill="#473876"/>
+<circle cx="48" cy="48" r="1" fill="#473876"/>
+<circle cx="56" cy="48" r="1" fill="#473876"/>
+<circle cx="64" cy="48" r="1" fill="#473876"/>
+<circle cx="72" cy="48" r="1" fill="#473876"/>
+<circle cx="80" cy="48" r="1" fill="#473876"/>
+<circle cx="88" cy="48" r="1" fill="#473876"/>
+<circle cx="96" cy="48" r="1" fill="#473876"/>
+<circle cx="104" cy="48" r="1" fill="#473876"/>
+<circle cx="112" cy="48" r="1" fill="#473876"/>
+<circle cx="120" cy="48" r="1" fill="#473876"/>
+<circle cx="128" cy="48" r="1" fill="#473876"/>
+<circle cx="136" cy="48" r="1" fill="#473876"/>
+<circle cx="144" cy="48" r="1" fill="#473876"/>
+<circle cx="152" cy="48" r="1" fill="#473876"/>
+<circle cx="160" cy="48" r="1" fill="#473876"/>
+<circle cx="168" cy="48" r="1" fill="#473876"/>
+<circle cx="176" cy="48" r="1" fill="#473876"/>
+<circle cx="184" cy="48" r="1" fill="#473876"/>
+<circle cx="192" cy="48" r="1" fill="#473876"/>
+<circle cx="200" cy="48" r="1" fill="#473876"/>
+<circle cx="208" cy="48" r="1" fill="#473876"/>
+<circle cx="216" cy="48" r="1" fill="#473876"/>
+<circle cx="224" cy="48" r="1" fill="#473876"/>
+<circle cx="232" cy="48" r="1" fill="#473876"/>
+<circle cx="240" cy="48" r="1" fill="#473876"/>
+<circle cx="248" cy="48" r="1" fill="#473876"/>
+<circle cx="256" cy="48" r="1" fill="#473876"/>
+<circle cx="264" cy="48" r="1" fill="#473876"/>
+<circle cx="272" cy="48" r="1" fill="#473876"/>
+<circle cx="280" cy="48" r="1" fill="#473876"/>
+<circle cx="8" cy="56" r="1" fill="#473876"/>
+<circle cx="16" cy="56" r="1" fill="#473876"/>
+<circle cx="24" cy="56" r="1" fill="#473876"/>
+<circle cx="32" cy="56" r="1" fill="#473876"/>
+<circle cx="40" cy="56" r="1" fill="#473876"/>
+<circle cx="48" cy="56" r="1" fill="#473876"/>
+<circle cx="56" cy="56" r="1" fill="#473876"/>
+<circle cx="64" cy="56" r="1" fill="#473876"/>
+<circle cx="72" cy="56" r="1" fill="#473876"/>
+<circle cx="80" cy="56" r="1" fill="#473876"/>
+<circle cx="88" cy="56" r="1" fill="#473876"/>
+<circle cx="96" cy="56" r="1" fill="#473876"/>
+<circle cx="104" cy="56" r="1" fill="#473876"/>
+<circle cx="112" cy="56" r="1" fill="#473876"/>
+<circle cx="120" cy="56" r="1" fill="#473876"/>
+<circle cx="128" cy="56" r="1" fill="#473876"/>
+<circle cx="136" cy="56" r="1" fill="#473876"/>
+<circle cx="144" cy="56" r="1" fill="#473876"/>
+<circle cx="152" cy="56" r="1" fill="#473876"/>
+<circle cx="160" cy="56" r="1" fill="#473876"/>
+<circle cx="168" cy="56" r="1" fill="#473876"/>
+<circle cx="176" cy="56" r="1" fill="#473876"/>
+<circle cx="184" cy="56" r="1" fill="#473876"/>
+<circle cx="192" cy="56" r="1" fill="#473876"/>
+<circle cx="200" cy="56" r="1" fill="#473876"/>
+<circle cx="208" cy="56" r="1" fill="#473876"/>
+<circle cx="216" cy="56" r="1" fill="#473876"/>
+<circle cx="224" cy="56" r="1" fill="#473876"/>
+<circle cx="232" cy="56" r="1" fill="#473876"/>
+<circle cx="240" cy="56" r="1" fill="#473876"/>
+<circle cx="248" cy="56" r="1" fill="#473876"/>
+<circle cx="256" cy="56" r="1" fill="#473876"/>
+<circle cx="264" cy="56" r="1" fill="#473876"/>
+<circle cx="272" cy="56" r="1" fill="#473876"/>
+<circle cx="280" cy="56" r="1" fill="#473876"/>
+<circle cx="8" cy="64" r="1" fill="#473876"/>
+<circle cx="16" cy="64" r="1" fill="#473876"/>
+<circle cx="24" cy="64" r="1" fill="#473876"/>
+<circle cx="32" cy="64" r="1" fill="#473876"/>
+<circle cx="40" cy="64" r="1" fill="#473876"/>
+<circle cx="48" cy="64" r="1" fill="#473876"/>
+<circle cx="56" cy="64" r="1" fill="#473876"/>
+<circle cx="64" cy="64" r="1" fill="#473876"/>
+<circle cx="72" cy="64" r="1" fill="#473876"/>
+<circle cx="80" cy="64" r="1" fill="#473876"/>
+<circle cx="88" cy="64" r="1" fill="#473876"/>
+<circle cx="96" cy="64" r="1" fill="#473876"/>
+<circle cx="104" cy="64" r="1" fill="#473876"/>
+<circle cx="112" cy="64" r="1" fill="#473876"/>
+<circle cx="120" cy="64" r="1" fill="#473876"/>
+<circle cx="128" cy="64" r="1" fill="#473876"/>
+<circle cx="136" cy="64" r="1" fill="#473876"/>
+<circle cx="144" cy="64" r="1" fill="#473876"/>
+<circle cx="152" cy="64" r="1" fill="#473876"/>
+<circle cx="160" cy="64" r="1" fill="#473876"/>
+<circle cx="168" cy="64" r="1" fill="#473876"/>
+<circle cx="176" cy="64" r="1" fill="#473876"/>
+<circle cx="184" cy="64" r="1" fill="#473876"/>
+<circle cx="192" cy="64" r="1" fill="#473876"/>
+<circle cx="200" cy="64" r="1" fill="#473876"/>
+<circle cx="208" cy="64" r="1" fill="#473876"/>
+<circle cx="216" cy="64" r="1" fill="#473876"/>
+<circle cx="224" cy="64" r="1" fill="#473876"/>
+<circle cx="232" cy="64" r="1" fill="#473876"/>
+<circle cx="240" cy="64" r="1" fill="#473876"/>
+<circle cx="248" cy="64" r="1" fill="#473876"/>
+<circle cx="256" cy="64" r="1" fill="#473876"/>
+<circle cx="264" cy="64" r="1" fill="#473876"/>
+<circle cx="272" cy="64" r="1" fill="#473876"/>
+<circle cx="280" cy="64" r="1" fill="#473876"/>
+<circle cx="8" cy="72" r="1" fill="#473876"/>
+<circle cx="16" cy="72" r="1" fill="#473876"/>
+<circle cx="24" cy="72" r="1" fill="#473876"/>
+<circle cx="32" cy="72" r="1" fill="#473876"/>
+<circle cx="40" cy="72" r="1" fill="#473876"/>
+<circle cx="48" cy="72" r="1" fill="#473876"/>
+<circle cx="56" cy="72" r="1" fill="#473876"/>
+<circle cx="64" cy="72" r="1" fill="#473876"/>
+<circle cx="72" cy="72" r="1" fill="#473876"/>
+<circle cx="80" cy="72" r="1" fill="#473876"/>
+<circle cx="88" cy="72" r="1" fill="#473876"/>
+<circle cx="96" cy="72" r="1" fill="#473876"/>
+<circle cx="104" cy="72" r="1" fill="#473876"/>
+<circle cx="112" cy="72" r="1" fill="#473876"/>
+<circle cx="120" cy="72" r="1" fill="#473876"/>
+<circle cx="128" cy="72" r="1" fill="#473876"/>
+<circle cx="136" cy="72" r="1" fill="#473876"/>
+<circle cx="144" cy="72" r="1" fill="#473876"/>
+<circle cx="152" cy="72" r="1" fill="#473876"/>
+<circle cx="160" cy="72" r="1" fill="#473876"/>
+<circle cx="168" cy="72" r="1" fill="#473876"/>
+<circle cx="176" cy="72" r="1" fill="#473876"/>
+<circle cx="184" cy="72" r="1" fill="#473876"/>
+<circle cx="192" cy="72" r="1" fill="#473876"/>
+<circle cx="200" cy="72" r="1" fill="#473876"/>
+<circle cx="208" cy="72" r="1" fill="#473876"/>
+<circle cx="216" cy="72" r="1" fill="#473876"/>
+<circle cx="224" cy="72" r="1" fill="#473876"/>
+<circle cx="232" cy="72" r="1" fill="#473876"/>
+<circle cx="240" cy="72" r="1" fill="#473876"/>
+<circle cx="248" cy="72" r="1" fill="#473876"/>
+<circle cx="256" cy="72" r="1" fill="#473876"/>
+<circle cx="264" cy="72" r="1" fill="#473876"/>
+<circle cx="272" cy="72" r="1" fill="#473876"/>
+<circle cx="280" cy="72" r="1" fill="#473876"/>
+<circle cx="8" cy="80" r="1" fill="#473876"/>
+<circle cx="16" cy="80" r="1" fill="#473876"/>
+<circle cx="24" cy="80" r="1" fill="#473876"/>
+<circle cx="32" cy="80" r="1" fill="#473876"/>
+<circle cx="40" cy="80" r="1" fill="#473876"/>
+<circle cx="48" cy="80" r="1" fill="#473876"/>
+<circle cx="56" cy="80" r="1" fill="#473876"/>
+<circle cx="64" cy="80" r="1" fill="#473876"/>
+<circle cx="72" cy="80" r="1" fill="#473876"/>
+<circle cx="80" cy="80" r="1" fill="#473876"/>
+<circle cx="88" cy="80" r="1" fill="#473876"/>
+<circle cx="96" cy="80" r="1" fill="#473876"/>
+<circle cx="104" cy="80" r="1" fill="#473876"/>
+<circle cx="112" cy="80" r="1" fill="#473876"/>
+<circle cx="120" cy="80" r="1" fill="#473876"/>
+<circle cx="128" cy="80" r="1" fill="#473876"/>
+<circle cx="136" cy="80" r="1" fill="#473876"/>
+<circle cx="144" cy="80" r="1" fill="#473876"/>
+<circle cx="152" cy="80" r="1" fill="#473876"/>
+<circle cx="160" cy="80" r="1" fill="#473876"/>
+<circle cx="168" cy="80" r="1" fill="#473876"/>
+<circle cx="176" cy="80" r="1" fill="#473876"/>
+<circle cx="184" cy="80" r="1" fill="#473876"/>
+<circle cx="192" cy="80" r="1" fill="#473876"/>
+<circle cx="200" cy="80" r="1" fill="#473876"/>
+<circle cx="208" cy="80" r="1" fill="#473876"/>
+<circle cx="216" cy="80" r="1" fill="#473876"/>
+<circle cx="224" cy="80" r="1" fill="#473876"/>
+<circle cx="232" cy="80" r="1" fill="#473876"/>
+<circle cx="240" cy="80" r="1" fill="#473876"/>
+<circle cx="248" cy="80" r="1" fill="#473876"/>
+<circle cx="256" cy="80" r="1" fill="#473876"/>
+<circle cx="264" cy="80" r="1" fill="#473876"/>
+<circle cx="272" cy="80" r="1" fill="#473876"/>
+<circle cx="280" cy="80" r="1" fill="#473876"/>
+<circle cx="8" cy="88" r="1" fill="#473876"/>
+<circle cx="16" cy="88" r="1" fill="#473876"/>
+<circle cx="24" cy="88" r="1" fill="#473876"/>
+<circle cx="32" cy="88" r="1" fill="#473876"/>
+<circle cx="40" cy="88" r="1" fill="#473876"/>
+<circle cx="48" cy="88" r="1" fill="#473876"/>
+<circle cx="56" cy="88" r="1" fill="#473876"/>
+<circle cx="64" cy="88" r="1" fill="#473876"/>
+<circle cx="72" cy="88" r="1" fill="#473876"/>
+<circle cx="80" cy="88" r="1" fill="#473876"/>
+<circle cx="88" cy="88" r="1" fill="#473876"/>
+<circle cx="96" cy="88" r="1" fill="#473876"/>
+<circle cx="104" cy="88" r="1" fill="#473876"/>
+<circle cx="112" cy="88" r="1" fill="#473876"/>
+<circle cx="120" cy="88" r="1" fill="#473876"/>
+<circle cx="128" cy="88" r="1" fill="#473876"/>
+<circle cx="136" cy="88" r="1" fill="#473876"/>
+<circle cx="144" cy="88" r="1" fill="#473876"/>
+<circle cx="152" cy="88" r="1" fill="#473876"/>
+<circle cx="160" cy="88" r="1" fill="#473876"/>
+<circle cx="168" cy="88" r="1" fill="#473876"/>
+<circle cx="176" cy="88" r="1" fill="#473876"/>
+<circle cx="184" cy="88" r="1" fill="#473876"/>
+<circle cx="192" cy="88" r="1" fill="#473876"/>
+<circle cx="200" cy="88" r="1" fill="#473876"/>
+<circle cx="208" cy="88" r="1" fill="#473876"/>
+<circle cx="216" cy="88" r="1" fill="#473876"/>
+<circle cx="224" cy="88" r="1" fill="#473876"/>
+<circle cx="232" cy="88" r="1" fill="#473876"/>
+<circle cx="240" cy="88" r="1" fill="#473876"/>
+<circle cx="248" cy="88" r="1" fill="#473876"/>
+<circle cx="256" cy="88" r="1" fill="#473876"/>
+<circle cx="264" cy="88" r="1" fill="#473876"/>
+<circle cx="272" cy="88" r="1" fill="#473876"/>
+<circle cx="280" cy="88" r="1" fill="#473876"/>
+<circle cx="8" cy="96" r="1" fill="#473876"/>
+<circle cx="16" cy="96" r="1" fill="#473876"/>
+<circle cx="24" cy="96" r="1" fill="#473876"/>
+<circle cx="32" cy="96" r="1" fill="#473876"/>
+<circle cx="40" cy="96" r="1" fill="#473876"/>
+<circle cx="48" cy="96" r="1" fill="#473876"/>
+<circle cx="56" cy="96" r="1" fill="#473876"/>
+<circle cx="64" cy="96" r="1" fill="#473876"/>
+<circle cx="72" cy="96" r="1" fill="#473876"/>
+<circle cx="80" cy="96" r="1" fill="#473876"/>
+<circle cx="88" cy="96" r="1" fill="#473876"/>
+<circle cx="96" cy="96" r="1" fill="#473876"/>
+<circle cx="104" cy="96" r="1" fill="#473876"/>
+<circle cx="112" cy="96" r="1" fill="#473876"/>
+<circle cx="120" cy="96" r="1" fill="#473876"/>
+<circle cx="128" cy="96" r="1" fill="#473876"/>
+<circle cx="136" cy="96" r="1" fill="#473876"/>
+<circle cx="144" cy="96" r="1" fill="#473876"/>
+<circle cx="152" cy="96" r="1" fill="#473876"/>
+<circle cx="160" cy="96" r="1" fill="#473876"/>
+<circle cx="168" cy="96" r="1" fill="#473876"/>
+<circle cx="176" cy="96" r="1" fill="#473876"/>
+<circle cx="184" cy="96" r="1" fill="#473876"/>
+<circle cx="192" cy="96" r="1" fill="#473876"/>
+<circle cx="200" cy="96" r="1" fill="#473876"/>
+<circle cx="208" cy="96" r="1" fill="#473876"/>
+<circle cx="216" cy="96" r="1" fill="#473876"/>
+<circle cx="224" cy="96" r="1" fill="#473876"/>
+<circle cx="232" cy="96" r="1" fill="#473876"/>
+<circle cx="240" cy="96" r="1" fill="#473876"/>
+<circle cx="248" cy="96" r="1" fill="#473876"/>
+<circle cx="256" cy="96" r="1" fill="#473876"/>
+<circle cx="264" cy="96" r="1" fill="#473876"/>
+<circle cx="272" cy="96" r="1" fill="#473876"/>
+<circle cx="280" cy="96" r="1" fill="#473876"/>
+<circle cx="8" cy="104" r="1" fill="#473876"/>
+<circle cx="16" cy="104" r="1" fill="#473876"/>
+<circle cx="24" cy="104" r="1" fill="#473876"/>
+<circle cx="32" cy="104" r="1" fill="#473876"/>
+<circle cx="40" cy="104" r="1" fill="#473876"/>
+<circle cx="48" cy="104" r="1" fill="#473876"/>
+<circle cx="56" cy="104" r="1" fill="#473876"/>
+<circle cx="64" cy="104" r="1" fill="#473876"/>
+<circle cx="72" cy="104" r="1" fill="#473876"/>
+<circle cx="80" cy="104" r="1" fill="#473876"/>
+<circle cx="88" cy="104" r="1" fill="#473876"/>
+<circle cx="96" cy="104" r="1" fill="#473876"/>
+<circle cx="104" cy="104" r="1" fill="#473876"/>
+<circle cx="112" cy="104" r="1" fill="#473876"/>
+<circle cx="120" cy="104" r="1" fill="#473876"/>
+<circle cx="128" cy="104" r="1" fill="#473876"/>
+<circle cx="136" cy="104" r="1" fill="#473876"/>
+<circle cx="144" cy="104" r="1" fill="#473876"/>
+<circle cx="152" cy="104" r="1" fill="#473876"/>
+<circle cx="160" cy="104" r="1" fill="#473876"/>
+<circle cx="168" cy="104" r="1" fill="#473876"/>
+<circle cx="176" cy="104" r="1" fill="#473876"/>
+<circle cx="184" cy="104" r="1" fill="#473876"/>
+<circle cx="192" cy="104" r="1" fill="#473876"/>
+<circle cx="200" cy="104" r="1" fill="#473876"/>
+<circle cx="208" cy="104" r="1" fill="#473876"/>
+<circle cx="216" cy="104" r="1" fill="#473876"/>
+<circle cx="224" cy="104" r="1" fill="#473876"/>
+<circle cx="232" cy="104" r="1" fill="#473876"/>
+<circle cx="240" cy="104" r="1" fill="#473876"/>
+<circle cx="248" cy="104" r="1" fill="#473876"/>
+<circle cx="256" cy="104" r="1" fill="#473876"/>
+<circle cx="264" cy="104" r="1" fill="#473876"/>
+<circle cx="272" cy="104" r="1" fill="#473876"/>
+<circle cx="280" cy="104" r="1" fill="#473876"/>
+<circle cx="8" cy="112" r="1" fill="#473876"/>
+<circle cx="16" cy="112" r="1" fill="#473876"/>
+<circle cx="24" cy="112" r="1" fill="#473876"/>
+<circle cx="32" cy="112" r="1" fill="#473876"/>
+<circle cx="40" cy="112" r="1" fill="#473876"/>
+<circle cx="48" cy="112" r="1" fill="#473876"/>
+<circle cx="56" cy="112" r="1" fill="#473876"/>
+<circle cx="64" cy="112" r="1" fill="#473876"/>
+<circle cx="72" cy="112" r="1" fill="#473876"/>
+<circle cx="80" cy="112" r="1" fill="#473876"/>
+<circle cx="88" cy="112" r="1" fill="#473876"/>
+<circle cx="96" cy="112" r="1" fill="#473876"/>
+<circle cx="104" cy="112" r="1" fill="#473876"/>
+<circle cx="112" cy="112" r="1" fill="#473876"/>
+<circle cx="120" cy="112" r="1" fill="#473876"/>
+<circle cx="128" cy="112" r="1" fill="#473876"/>
+<circle cx="136" cy="112" r="1" fill="#473876"/>
+<circle cx="144" cy="112" r="1" fill="#473876"/>
+<circle cx="152" cy="112" r="1" fill="#473876"/>
+<circle cx="160" cy="112" r="1" fill="#473876"/>
+<circle cx="168" cy="112" r="1" fill="#473876"/>
+<circle cx="176" cy="112" r="1" fill="#473876"/>
+<circle cx="184" cy="112" r="1" fill="#473876"/>
+<circle cx="192" cy="112" r="1" fill="#473876"/>
+<circle cx="200" cy="112" r="1" fill="#473876"/>
+<circle cx="208" cy="112" r="1" fill="#473876"/>
+<circle cx="216" cy="112" r="1" fill="#473876"/>
+<circle cx="224" cy="112" r="1" fill="#473876"/>
+<circle cx="232" cy="112" r="1" fill="#473876"/>
+<circle cx="240" cy="112" r="1" fill="#473876"/>
+<circle cx="248" cy="112" r="1" fill="#473876"/>
+<circle cx="256" cy="112" r="1" fill="#473876"/>
+<circle cx="264" cy="112" r="1" fill="#473876"/>
+<circle cx="272" cy="112" r="1" fill="#473876"/>
+<circle cx="280" cy="112" r="1" fill="#473876"/>
+<circle cx="120" cy="120" r="1" fill="#473876"/>
+<circle cx="128" cy="120" r="1" fill="#473876"/>
+<circle cx="136" cy="120" r="1" fill="#473876"/>
+<circle cx="144" cy="120" r="1" fill="#473876"/>
+<circle cx="152" cy="120" r="1" fill="#473876"/>
+<circle cx="160" cy="120" r="1" fill="#473876"/>
+<circle cx="168" cy="120" r="1" fill="#473876"/>
+<rect width="288" height="120" fill="url(#paint0_radial_302_7053)"/>
+<path d="M119.888 53.93C119.993 52.8088 120.987 51.9847 122.108 52.0894C123.229 52.194 124.053 53.1878 123.949 54.309L123.511 59.0009C123.406 60.1222 122.412 60.9462 121.291 60.8416C120.17 60.7369 119.346 59.7431 119.451 58.6219L119.888 53.93Z" fill="#E2DDFE"/>
+<path d="M126.384 54.5364C126.489 53.4152 127.483 52.5911 128.604 52.6957C129.725 52.8004 130.549 53.7942 130.444 54.9154L130.006 59.6073C129.902 60.7285 128.908 61.5526 127.787 61.4479C126.666 61.3433 125.841 60.3495 125.946 59.2283L126.384 54.5364Z" fill="#E2DDFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M131.943 45.1464C124.483 43.3741 118.324 42.7567 110.491 43.1392C108.511 43.2359 107.201 43.3038 106.188 43.4998C105.249 43.6816 104.7 43.9516 104.225 44.392C103.242 45.3039 103.019 46.4183 102.532 50.3318C102.052 54.1779 101.966 57.657 102.05 61.5884C102.095 63.6834 102.129 65.0975 102.291 66.1854C102.446 67.2174 102.695 67.7878 103.074 68.242C103.456 68.6999 103.968 69.0453 104.936 69.3773C105.96 69.7285 107.32 70.01 109.342 70.4235C115.881 71.7609 120.826 72.2189 127.523 72.1245C129.611 72.0951 131.022 72.0722 132.109 71.9198C133.141 71.775 133.712 71.5326 134.165 71.1647C134.608 70.8047 134.97 70.2846 135.338 69.2507C135.723 68.172 136.05 66.7279 136.528 64.606C137.379 60.82 138.049 57.4879 138.407 53.8025C138.789 49.8622 138.813 48.7331 138.01 47.6088C137.622 47.0658 137.124 46.686 136.215 46.3237C135.233 45.9323 133.924 45.6169 131.943 45.1464ZM110.328 39.7902C118.487 39.3918 124.962 40.0416 132.718 41.8842L132.832 41.9112C134.668 42.3474 136.22 42.7159 137.457 43.209C138.792 43.7411 139.882 44.4616 140.738 45.6596C142.353 47.9196 142.11 50.3994 141.786 53.6941C141.772 53.8367 141.758 53.9809 141.744 54.1266C141.365 58.0233 140.659 61.5178 139.799 65.3416L139.776 65.4428C139.327 67.4383 138.958 69.0827 138.497 70.3757C138.013 71.7354 137.372 72.8801 136.278 73.768C135.194 74.6482 133.972 75.0442 132.575 75.2402C131.255 75.4254 129.632 75.4482 127.675 75.4757L127.57 75.4772C120.635 75.5749 115.449 75.0949 108.67 73.7085L108.565 73.6871C106.675 73.3005 105.101 72.9786 103.848 72.5489C102.517 72.0922 101.399 71.4675 100.5 70.3898C99.5976 69.3086 99.185 68.0852 98.9751 66.6813C98.7771 65.3571 98.7422 63.7281 98.7002 61.7665L98.6979 61.6603C98.6114 57.6284 98.6984 53.9764 99.2043 49.9171C99.2227 49.7699 99.2407 49.6242 99.2585 49.4801C99.6617 46.2178 99.9642 43.7706 101.945 41.9336C102.996 40.959 104.175 40.4743 105.551 40.208C106.826 39.961 108.378 39.8853 110.214 39.7957C110.252 39.7939 110.29 39.792 110.328 39.7902Z" fill="#E2DDFE"/>
+<path d="M172.351 54.1886C169.848 52.8972 166.772 53.8794 165.481 56.3826C164.949 57.4133 165.353 58.6799 166.384 59.2117L189.49 71.1328C190.521 71.6645 191.788 71.2601 192.319 70.2294C193.611 67.7262 192.628 64.6501 190.125 63.3587L172.351 54.1886Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.2"/>
+<path d="M184.599 52.2402C182.096 50.9487 179.02 51.931 177.729 54.4341C177.197 55.4648 177.601 56.7315 178.632 57.2633L184.745 60.4169C185.775 60.9486 187.042 60.5442 187.574 59.5135C188.865 57.0103 187.883 53.9342 185.38 52.6428L184.599 52.2402Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.2"/>
+<path d="M171.38 33.2415C172.263 33.3009 172.829 32.7874 172.875 32.101C172.878 32.0617 172.881 32.0225 172.883 31.9833C172.939 31.1596 173.504 30.6657 174.57 30.0479C176.104 29.2055 177.322 28.3812 177.452 26.4396C177.635 23.7332 175.315 22.1981 172.647 22.0187C169.941 21.8367 168.075 22.9325 167.513 24.2541C167.396 24.5221 167.339 24.794 167.32 25.0685C167.269 25.8334 167.849 26.2861 168.418 26.3244C169.006 26.364 169.396 26.1341 169.757 25.7447L170.117 25.3748C170.819 24.5947 171.548 24.3088 172.391 24.3655C173.666 24.4513 174.479 25.2546 174.403 26.3724C174.333 27.4118 173.615 27.8363 172.241 28.6501C171.151 29.3254 170.194 30.0884 170.088 31.6574C170.087 31.677 170.083 31.7358 170.081 31.7554C170.019 32.6773 170.478 33.1808 171.38 33.2415ZM171.024 37.9457C171.985 38.0103 172.88 37.3023 172.945 36.3411C173.011 35.3606 172.237 34.56 171.257 34.494C170.276 34.4281 169.401 35.1375 169.336 36.0984C169.273 37.0399 170.063 37.8811 171.024 37.9457Z" fill="#C171FF"/>
+<path d="M169.5 43.5V43.5C168.978 46.0605 166.726 47.9 164.113 47.9L158.189 47.9C156.148 47.9 154.192 48.7162 152.757 50.1668V50.1668C149.147 53.8152 150.088 59.9144 154.63 62.305L155 62.5" stroke="#C171FF" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M162 65L167.282 66.1318C168.414 66.3744 169.48 66.8597 170.406 67.5543L170.555 67.6661C172.129 68.8471 173.213 70.5671 173.599 72.4972L174 74.5" stroke="#C171FF" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M169.65 78.4531L169.836 78.8248L170.192 78.611C171.313 77.9385 172.732 77.9745 173.913 78.4746C175.105 78.9794 175.939 79.903 176.02 80.8889C176.189 82.9307 174.281 84.8177 171.408 85.055L159.964 86.0003C158.714 86.1037 157.677 85.8776 156.949 85.4334C156.23 84.9947 155.799 84.3391 155.732 83.5239C155.676 82.8454 155.81 82.0406 156.308 81.47C156.788 80.9204 157.684 80.5017 159.349 80.7397L159.78 80.8011L159.788 80.3667C159.836 78.0588 161.654 76.0798 164.031 75.8834C166.508 75.6788 168.743 76.6406 169.65 78.4531Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="0.769498"/>
+<circle cx="160" cy="72" r="1.5" fill="#3B334A" stroke="#C9C7DD"/>
+<circle cx="156" cy="77" r="0.5" fill="#3B334A" stroke="#C9C7DD"/>
+<path d="M156.902 79.7159C155.196 79.8576 153.928 81.3555 154.069 83.0617L154.896 93.0275C155.312 98.036 159.709 101.759 164.718 101.344L180.663 100.02C185.672 99.6045 189.395 95.2073 188.979 90.1987L188.152 80.233C188.01 78.5268 186.512 77.2584 184.806 77.4L156.902 79.7159Z" fill="#3B334A" stroke="#C9C7DD" stroke-width="2.2"/>
+<path d="M188 80.3305L190.79 80.0992C191.451 80.0444 192.031 80.5354 192.085 81.1959C192.14 81.8564 191.649 82.4362 190.989 82.491L188.198 82.7223L188 80.3305Z" fill="#C9C7DD"/>
+<path d="M150.099 85.5264C150.044 84.866 150.535 84.2861 151.196 84.2314L154.983 83.9174L155.181 86.3092L151.394 86.6232C150.734 86.6779 150.154 86.1869 150.099 85.5264Z" fill="#C9C7DD"/>
+<path d="M110.766 34.3752C111.019 34.2955 111.233 34.1295 111.362 33.9137C111.491 33.6979 111.523 33.45 111.452 33.2245L110.735 30.9504L110.019 28.6763C109.896 28.2878 110.094 27.8638 110.433 27.5728C111.136 26.9719 111.599 26.1779 111.74 25.3309C111.882 24.4839 111.692 23.6383 111.206 22.9434C110.719 22.2485 109.967 21.7489 109.081 21.5329C108.195 21.3169 107.233 21.3982 106.365 21.7627C105.756 21.1155 104.939 20.6579 104.017 20.4463C103.094 20.2348 102.106 20.2786 101.174 20.5724C100.242 20.8662 99.4066 21.397 98.772 22.0993C98.1375 22.8016 97.7311 23.6445 97.6033 24.5238C96.6834 24.7236 95.8493 25.2086 95.248 25.8933C94.6467 26.578 94.3168 27.4184 94.3165 28.2662C94.3162 29.1141 94.6456 29.9151 95.2465 30.5279C95.8473 31.1408 96.6812 31.5261 97.601 31.616C98.046 31.6608 98.4511 31.8948 98.5733 32.2825L100.007 36.8315C100.078 37.057 100.247 37.2415 100.476 37.3446C100.705 37.4476 100.976 37.4608 101.229 37.381C101.229 37.381 103.992 36.0429 105.863 35.4531C107.735 34.8632 110.766 34.3752 110.766 34.3752Z" stroke="#C171FF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_302_7053" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(144.5 67) rotate(90.5405) scale(53.0024 127.206)">
+<stop stop-color="#2E3035" stop-opacity="0.95"/>
+<stop offset="0.566518" stop-color="#2E3035" stop-opacity="0"/>
+<stop offset="1" stop-color="#2E3035" stop-opacity="0.7"/>
+</radialGradient>
+<clipPath id="clip0_302_7053">
+<rect width="288" height="120" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/captain/faqs-popover-light.svg b/public/assets/images/dashboard/captain/faqs-popover-light.svg
new file mode 100644
index 000000000..2a72b382e
--- /dev/null
+++ b/public/assets/images/dashboard/captain/faqs-popover-light.svg
@@ -0,0 +1,564 @@
+<svg width="288" height="120" viewBox="0 0 288 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_302_8733)">
+<rect width="288" height="120" rx="8" fill="#F9F9FB"/>
+<circle cx="8" r="1" fill="#E1D9FF"/>
+<circle cx="16" r="1" fill="#E1D9FF"/>
+<circle cx="24" r="1" fill="#E1D9FF"/>
+<circle cx="32" r="1" fill="#E1D9FF"/>
+<circle cx="40" r="1" fill="#E1D9FF"/>
+<circle cx="48" r="1" fill="#E1D9FF"/>
+<circle cx="56" r="1" fill="#E1D9FF"/>
+<circle cx="64" r="1" fill="#E1D9FF"/>
+<circle cx="72" r="1" fill="#E1D9FF"/>
+<circle cx="80" r="1" fill="#E1D9FF"/>
+<circle cx="88" r="1" fill="#E1D9FF"/>
+<circle cx="96" r="1" fill="#E1D9FF"/>
+<circle cx="104" r="1" fill="#E1D9FF"/>
+<circle cx="112" r="1" fill="#E1D9FF"/>
+<circle cx="120" r="1" fill="#E1D9FF"/>
+<circle cx="128" r="1" fill="#E1D9FF"/>
+<circle cx="136" r="1" fill="#E1D9FF"/>
+<circle cx="144" r="1" fill="#E1D9FF"/>
+<circle cx="152" r="1" fill="#E1D9FF"/>
+<circle cx="160" r="1" fill="#E1D9FF"/>
+<circle cx="168" r="1" fill="#E1D9FF"/>
+<circle cx="176" r="1" fill="#E1D9FF"/>
+<circle cx="184" r="1" fill="#E1D9FF"/>
+<circle cx="192" r="1" fill="#E1D9FF"/>
+<circle cx="200" r="1" fill="#E1D9FF"/>
+<circle cx="208" r="1" fill="#E1D9FF"/>
+<circle cx="216" r="1" fill="#E1D9FF"/>
+<circle cx="224" r="1" fill="#E1D9FF"/>
+<circle cx="232" r="1" fill="#E1D9FF"/>
+<circle cx="240" r="1" fill="#E1D9FF"/>
+<circle cx="248" r="1" fill="#E1D9FF"/>
+<circle cx="256" r="1" fill="#E1D9FF"/>
+<circle cx="264" r="1" fill="#E1D9FF"/>
+<circle cx="272" r="1" fill="#E1D9FF"/>
+<circle cx="280" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="8" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="16" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="24" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="32" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="40" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="48" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="56" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="64" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="72" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="80" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="88" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="96" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="104" r="1" fill="#E1D9FF"/>
+<circle cx="8" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="16" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="24" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="32" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="40" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="48" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="56" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="64" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="72" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="80" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="88" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="96" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="104" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="112" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="176" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="184" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="192" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="200" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="208" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="216" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="224" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="232" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="240" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="248" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="256" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="264" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="272" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="280" cy="112" r="1" fill="#E1D9FF"/>
+<circle cx="120" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="128" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="136" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="144" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="152" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="160" cy="120" r="1" fill="#E1D9FF"/>
+<circle cx="168" cy="120" r="1" fill="#E1D9FF"/>
+<rect width="288" height="120" fill="url(#paint0_radial_302_8733)"/>
+<path d="M119.888 53.93C119.993 52.8088 120.987 51.9847 122.108 52.0894C123.229 52.194 124.053 53.1878 123.949 54.309L123.511 59.0009C123.406 60.1222 122.412 60.9462 121.291 60.8416C120.17 60.7369 119.346 59.7431 119.451 58.6219L119.888 53.93Z" fill="black"/>
+<path d="M126.384 54.5364C126.489 53.4152 127.483 52.5911 128.604 52.6957C129.725 52.8004 130.549 53.7942 130.444 54.9154L130.006 59.6073C129.902 60.7285 128.908 61.5526 127.787 61.4479C126.666 61.3433 125.841 60.3495 125.946 59.2283L126.384 54.5364Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M131.943 45.1464C124.483 43.3741 118.324 42.7567 110.491 43.1392C108.511 43.2359 107.201 43.3038 106.188 43.4998C105.249 43.6816 104.7 43.9516 104.225 44.392C103.242 45.3039 103.019 46.4183 102.532 50.3318C102.052 54.1779 101.966 57.657 102.05 61.5884C102.095 63.6834 102.129 65.0975 102.291 66.1854C102.446 67.2174 102.695 67.7878 103.074 68.242C103.456 68.6999 103.968 69.0453 104.936 69.3773C105.96 69.7285 107.32 70.01 109.342 70.4235C115.881 71.7609 120.826 72.2189 127.523 72.1245C129.611 72.0951 131.022 72.0722 132.109 71.9198C133.141 71.775 133.712 71.5326 134.165 71.1647C134.608 70.8047 134.97 70.2846 135.338 69.2507C135.723 68.172 136.05 66.7279 136.528 64.606C137.379 60.82 138.049 57.4879 138.407 53.8025C138.789 49.8622 138.813 48.7331 138.01 47.6088C137.622 47.0658 137.124 46.686 136.215 46.3237C135.233 45.9323 133.924 45.6169 131.943 45.1464ZM110.328 39.7902C118.487 39.3918 124.962 40.0416 132.718 41.8842L132.832 41.9112C134.668 42.3474 136.22 42.7159 137.457 43.209C138.792 43.7411 139.882 44.4616 140.738 45.6596C142.353 47.9196 142.11 50.3994 141.786 53.6941C141.772 53.8367 141.758 53.9809 141.744 54.1266C141.365 58.0233 140.659 61.5178 139.799 65.3416L139.776 65.4428C139.327 67.4383 138.958 69.0827 138.497 70.3757C138.013 71.7354 137.372 72.8801 136.278 73.768C135.194 74.6482 133.972 75.0442 132.575 75.2402C131.255 75.4254 129.632 75.4482 127.675 75.4757L127.57 75.4772C120.635 75.5749 115.449 75.0949 108.67 73.7085L108.565 73.6871C106.675 73.3005 105.101 72.9786 103.848 72.5489C102.517 72.0922 101.399 71.4675 100.5 70.3898C99.5976 69.3086 99.185 68.0852 98.9751 66.6813C98.7771 65.3571 98.7422 63.7281 98.7002 61.7665L98.6979 61.6603C98.6114 57.6284 98.6984 53.9764 99.2043 49.9171C99.2227 49.7699 99.2407 49.6242 99.2585 49.4801C99.6617 46.2178 99.9642 43.7706 101.945 41.9336C102.996 40.959 104.175 40.4743 105.551 40.208C106.826 39.961 108.378 39.8853 110.214 39.7957C110.252 39.7939 110.29 39.792 110.328 39.7902Z" fill="black"/>
+<path d="M172.351 54.1886C169.848 52.8972 166.772 53.8794 165.481 56.3826C164.949 57.4133 165.353 58.6799 166.384 59.2117L189.49 71.1328C190.521 71.6645 191.788 71.2601 192.319 70.2294C193.611 67.7262 192.628 64.6501 190.125 63.3587L172.351 54.1886Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.2"/>
+<path d="M184.599 52.2402C182.096 50.9487 179.02 51.931 177.729 54.4341C177.197 55.4648 177.601 56.7315 178.632 57.2633L184.745 60.4169C185.775 60.9486 187.042 60.5442 187.574 59.5135C188.865 57.0103 187.883 53.9342 185.38 52.6428L184.599 52.2402Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.2"/>
+<path d="M171.38 33.2415C172.263 33.3009 172.829 32.7874 172.875 32.101C172.878 32.0617 172.881 32.0225 172.883 31.9833C172.939 31.1596 173.504 30.6657 174.57 30.0479C176.104 29.2055 177.322 28.3812 177.452 26.4396C177.635 23.7332 175.315 22.1981 172.647 22.0187C169.941 21.8367 168.075 22.9325 167.513 24.2541C167.396 24.5221 167.339 24.794 167.32 25.0685C167.269 25.8334 167.849 26.2861 168.418 26.3244C169.006 26.364 169.396 26.1341 169.757 25.7447L170.117 25.3748C170.819 24.5947 171.548 24.3088 172.391 24.3655C173.666 24.4513 174.479 25.2546 174.403 26.3724C174.333 27.4118 173.615 27.8363 172.241 28.6501C171.151 29.3254 170.194 30.0884 170.088 31.6574C170.087 31.677 170.083 31.7358 170.081 31.7554C170.019 32.6773 170.478 33.1808 171.38 33.2415ZM171.024 37.9457C171.985 38.0103 172.88 37.3023 172.945 36.3411C173.011 35.3606 172.237 34.56 171.257 34.494C170.276 34.4281 169.401 35.1375 169.336 36.0984C169.273 37.0399 170.063 37.8811 171.024 37.9457Z" fill="#AC6BFF"/>
+<path d="M169.5 43.5V43.5C168.978 46.0606 166.726 47.9001 164.113 47.9001L158.189 47.9001C156.148 47.9001 154.192 48.7163 152.757 50.1669V50.1669C149.147 53.8152 150.088 59.9145 154.63 62.3051L155 62.5" stroke="#AC6BFF" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M162 65L167.282 66.1318C168.414 66.3744 169.48 66.8597 170.406 67.5543L170.555 67.6661C172.129 68.8471 173.213 70.5671 173.599 72.4972L174 74.5" stroke="#AC6BFF" stroke-width="2.4" stroke-linecap="round"/>
+<path d="M169.65 78.4531L169.836 78.8248L170.192 78.611C171.313 77.9385 172.732 77.9745 173.913 78.4746C175.105 78.9794 175.939 79.903 176.02 80.8889C176.189 82.9307 174.281 84.8177 171.408 85.055L159.964 86.0003C158.714 86.1037 157.677 85.8776 156.949 85.4334C156.23 84.9947 155.799 84.3391 155.732 83.5239C155.676 82.8454 155.81 82.0406 156.308 81.47C156.788 80.9204 157.684 80.5017 159.349 80.7397L159.78 80.8011L159.788 80.3667C159.836 78.0588 161.654 76.0798 164.031 75.8834C166.508 75.6788 168.743 76.6406 169.65 78.4531Z" fill="#E1D9FF" stroke="#2F265F" stroke-width="0.769498"/>
+<circle cx="160" cy="72" r="1.5" fill="#E1D9FF" stroke="#2F265F"/>
+<circle cx="156" cy="77" r="0.5" fill="#E1D9FF" stroke="#2F265F"/>
+<path d="M156.902 79.7159C155.196 79.8576 153.928 81.3555 154.069 83.0617L154.896 93.0275C155.312 98.036 159.709 101.759 164.718 101.344L180.663 100.02C185.672 99.6045 189.395 95.2073 188.979 90.1987L188.152 80.233C188.01 78.5268 186.512 77.2584 184.806 77.4L156.902 79.7159Z" fill="#E1D9FF" stroke="#473896" stroke-width="2.2"/>
+<path d="M188 80.3305L190.79 80.0992C191.451 80.0444 192.031 80.5354 192.085 81.1959C192.14 81.8564 191.649 82.4362 190.989 82.491L188.198 82.7223L188 80.3305Z" fill="#2F265F"/>
+<path d="M150.099 85.5264C150.044 84.866 150.535 84.2861 151.196 84.2314L154.983 83.9174L155.181 86.3092L151.394 86.6232C150.734 86.6779 150.154 86.1869 150.099 85.5264Z" fill="#2F265F"/>
+<path d="M110.766 34.3752C111.019 34.2955 111.233 34.1295 111.362 33.9137C111.491 33.6979 111.523 33.45 111.452 33.2245L110.735 30.9504L110.019 28.6763C109.896 28.2878 110.094 27.8638 110.433 27.5728C111.136 26.9719 111.599 26.1779 111.74 25.3309C111.882 24.4839 111.692 23.6383 111.206 22.9434C110.719 22.2485 109.967 21.7489 109.081 21.5329C108.195 21.3169 107.233 21.3982 106.365 21.7627C105.756 21.1155 104.939 20.6579 104.017 20.4463C103.094 20.2348 102.106 20.2786 101.174 20.5724C100.242 20.8662 99.4066 21.397 98.772 22.0993C98.1375 22.8016 97.7311 23.6445 97.6033 24.5238C96.6834 24.7236 95.8493 25.2086 95.248 25.8933C94.6467 26.578 94.3168 27.4184 94.3165 28.2662C94.3162 29.1141 94.6456 29.9151 95.2465 30.5279C95.8473 31.1408 96.6812 31.5261 97.601 31.616C98.046 31.6608 98.4511 31.8948 98.5733 32.2825L100.007 36.8315C100.078 37.057 100.247 37.2415 100.476 37.3446C100.705 37.4476 100.976 37.4608 101.229 37.381C101.229 37.381 103.992 36.0429 105.863 35.4531C107.735 34.8632 110.766 34.3752 110.766 34.3752Z" stroke="#AC6BFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<rect x="0.5" y="0.5" width="287" height="119" rx="7.5" stroke="#ECECEC"/>
+<defs>
+<radialGradient id="paint0_radial_302_8733" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(144.5 67) rotate(90.5405) scale(53.0024 127.206)">
+<stop stop-color="#F9F9FB" stop-opacity="0.95"/>
+<stop offset="0.566518" stop-color="#F9F9FB" stop-opacity="0"/>
+<stop offset="1" stop-color="#F9F9FB" stop-opacity="0.7"/>
+</radialGradient>
+<clipPath id="clip0_302_8733">
+<rect width="288" height="120" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From 8066b36ebffcfd4d16a7ff4dfee4837584890c55 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 19 Mar 2025 03:10:02 +0530
Subject: [PATCH 11/16] chore: Update styles in settings pages (#11070)

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../administrate/components/_buttons.scss     |   2 +-
 .../dashboard/assets/scss/_date-picker.scss   |   2 +-
 .../assets/scss/plugins/_multiselect.scss     |  88 +-
 .../dashboard/assets/scss/widgets/_base.scss  | 119 ++-
 .../assets/scss/widgets/_buttons.scss         |  32 +-
 .../Contacts/ContactsForm/ContactsForm.vue    |  11 +-
 .../ContactCustomAttributes.vue               |   2 +-
 .../ArticleEditorProperties.vue               |   4 +-
 .../Pages/LocalePage/AddLocaleDialog.vue      |   2 +-
 .../PortalSettingsPage/PortalBaseSettings.vue |   2 +-
 .../components/WhatsAppOptions.vue            |   2 +-
 .../components-next/banner/Banner.vue         |  10 +-
 .../components-next/button/Button.vue         |  58 +-
 .../components-next/combobox/ComboBox.vue     |   2 +-
 .../combobox/ComboBoxDropdown.vue             |   2 +-
 .../dropdown-menu/DropdownMenu.vue            |   2 +-
 .../inline-input/InlineInput.vue              |   4 +-
 .../dashboard/components-next/input/Input.vue |  10 +-
 .../phonenumberinput/PhoneNumberInput.vue     |  14 +-
 .../components-next/textarea/TextArea.vue     |   2 +-
 .../dashboard/components/SettingsSection.vue  |   6 +-
 .../dashboard/components/ui/Wizard.vue        |   2 +-
 .../widgets/AutomationActionInput.vue         |  15 +-
 .../AutomationActionTeamMessageInput.vue      |   2 +-
 .../components/widgets/EmptyState.vue         |   4 +-
 .../components/widgets/FilterInput/Index.vue  |  23 +-
 .../components/widgets/LabelSelector.vue      |  90 --
 .../components/widgets/SettingIntroBanner.vue |  24 +-
 .../components/widgets/WootWriter/Editor.vue  |  10 +-
 .../widgets/conversation/ReplyBox.vue         |   2 +-
 .../widgets/conversation/ReplyEmailHead.vue   |   6 +-
 .../components/widgets/forms/Input.vue        |   3 +-
 .../components/widgets/forms/PhoneInput.vue   |  34 +-
 .../settings/SettingsSubPageHeader.vue        |   2 +-
 .../routes/dashboard/settings/Wrapper.vue     |   7 +-
 .../dashboard/settings/auditlogs/Index.vue    |   6 +-
 .../settings/automation/AddAutomationRule.vue |  36 +-
 .../dashboard/settings/automation/Index.vue   |   2 +-
 .../dashboard/settings/canned/Index.vue       |   6 +-
 .../components/BaseSettingsListItem.vue       |   2 +-
 .../dashboard/settings/customRoles/Index.vue  |   2 +-
 .../customRoles/component/CustomRoleModal.vue |   6 +-
 .../component/CustomRolePaywall.vue           |   2 +-
 .../component/CustomRoleTableBody.vue         |  10 +-
 .../dashboard/settings/inbox/AddAgents.vue    |  17 +-
 .../dashboard/settings/inbox/ChannelList.vue  |   2 +-
 .../dashboard/settings/inbox/FinishSetup.vue  |  18 +-
 .../dashboard/settings/inbox/ImapSettings.vue |   9 +-
 .../settings/inbox/InboxChannels.vue          |   8 +-
 .../routes/dashboard/settings/inbox/Index.vue |  29 +-
 .../settings/inbox/PreChatForm/Settings.vue   |  16 +-
 .../dashboard/settings/inbox/Settings.vue     | 767 +++++++++---------
 .../dashboard/settings/inbox/SmtpSettings.vue |   9 +-
 .../settings/inbox/WidgetBuilder.vue          |  11 +-
 .../inbox/channels/360DialogWhatsapp.vue      |   8 +-
 .../dashboard/settings/inbox/channels/Api.vue |  24 +-
 .../settings/inbox/channels/BandwidthSms.vue  |  30 +-
 .../settings/inbox/channels/CloudWhatsapp.vue |  28 +-
 .../settings/inbox/channels/Email.vue         |   2 +-
 .../settings/inbox/channels/Facebook.vue      |   4 +-
 .../settings/inbox/channels/Line.vue          |  28 +-
 .../dashboard/settings/inbox/channels/Sms.vue |   4 +-
 .../settings/inbox/channels/Telegram.vue      |  22 +-
 .../settings/inbox/channels/Twilio.vue        |  32 +-
 .../settings/inbox/channels/Twitter.vue       |   2 +-
 .../settings/inbox/channels/Website.vue       |  17 +-
 .../settings/inbox/channels/Whatsapp.vue      |   4 +-
 .../emailChannels/ForwardToOption.vue         |  30 +-
 .../channels/emailChannels/OAuthChannel.vue   |  12 +-
 .../inbox/components/BotConfiguration.vue     |  30 +-
 .../settings/inbox/components/BusinessDay.vue |   2 +-
 .../components/InboxReconnectionRequired.vue  |  15 +-
 .../inbox/components/WeeklyAvailability.vue   |  18 +-
 .../dashboard/settings/inbox/inbox.routes.js  |   2 +
 .../inbox/settingsPage/CollaboratorsPage.vue  |  16 +-
 .../inbox/settingsPage/ConfigurationPage.vue  |   6 +-
 .../DashboardApps/DashboardAppsRow.vue        |   9 +-
 .../integrations/DashboardApps/Index.vue      |   2 +-
 .../settings/integrations/Integration.vue     |  35 +-
 .../settings/integrations/Webhooks/Index.vue  |   2 +-
 .../dashboard/settings/macros/MacroForm.vue   |   2 +-
 .../dashboard/settings/macros/MacroNode.vue   |  31 +-
 .../dashboard/settings/macros/MacroNodes.vue  |  36 +-
 .../settings/macros/MacroProperties.vue       |  18 +-
 .../reports/components/ReportFilters.vue      | 329 ++++----
 .../reports/components/ReportsWrapper.vue     |   2 +-
 .../routes/dashboard/settings/sla/SlaForm.vue |   2 +-
 .../dashboard/settings/sla/SlaTimeInput.vue   |   2 +-
 .../settings/sla/components/SLAHeader.vue     |   2 +-
 .../settings/teams/Create/CreateTeam.vue      |   2 +-
 .../settings/teams/Edit/EditAgents.vue        |   2 +-
 .../settings/teams/Edit/EditTeam.vue          |   2 +-
 .../dashboard/settings/teams/FinishSetup.vue  |   2 +-
 .../routes/dashboard/settings/teams/Index.vue |   2 +-
 .../shared/components/GreetingsEditor.vue     |   5 +-
 .../components/ui/MultiselectDropdown.vue     |  66 +-
 .../ui/MultiselectDropdownItems.vue           |  52 +-
 .../components/ui/label/LabelDropdown.vue     |   2 +-
 .../components/ui/label/LabelDropdownItem.vue |  84 +-
 app/javascript/v3/components/Form/Input.vue   |   6 +-
 .../v3/components/Form/WithLabel.vue          |   2 +-
 101 files changed, 1320 insertions(+), 1273 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/widgets/LabelSelector.vue

diff --git a/app/assets/stylesheets/administrate/components/_buttons.scss b/app/assets/stylesheets/administrate/components/_buttons.scss
index a0c3699ba..1fceddc1f 100644
--- a/app/assets/stylesheets/administrate/components/_buttons.scss
+++ b/app/assets/stylesheets/administrate/components/_buttons.scss
@@ -9,7 +9,7 @@ input[type='submit']:not(.reset-base),
   border-radius: $base-border-radius;
   color: $white;
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
   font-size: $font-size-small;
   -webkit-font-smoothing: antialiased;
   font-weight: $font-weight-medium;
diff --git a/app/javascript/dashboard/assets/scss/_date-picker.scss b/app/javascript/dashboard/assets/scss/_date-picker.scss
index 2fa577673..b22381ea0 100644
--- a/app/javascript/dashboard/assets/scss/_date-picker.scss
+++ b/app/javascript/dashboard/assets/scss/_date-picker.scss
@@ -10,7 +10,7 @@
 
   &.no-margin {
     .mx-input {
-      @apply mb-0;
+      margin-bottom: 0 !important;
     }
   }
 
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index 2f9c35c51..ffcfca545 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -1,13 +1,13 @@
 @mixin label-multiselect-hover {
   &::after {
-    @apply text-woot-600 dark:text-woot-600;
+    @apply text-n-brand;
   }
 
   &:hover {
-    @apply bg-slate-50 dark:bg-slate-700;
+    @apply bg-n-slate-3;
 
     &::after {
-      @apply text-woot-500 dark:text-woot-500;
+      @apply text-n-blue-text;
     }
   }
 }
@@ -18,20 +18,16 @@
   }
 
   &.multiselect--disabled {
-    @apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
+    @apply opacity-50  rounded-lg cursor-not-allowed pointer-events-auto;
 
     .multiselect__select {
-      @apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
-    }
-
-    .multiselect__tags {
-      @apply border-0;
+      @apply cursor-not-allowed bg-transparent rounded-lg;
     }
   }
 
   .multiselect--active {
     > .multiselect__tags {
-      @apply border-woot-500 dark:border-woot-500;
+      @apply outline-n-blue-border;
     }
   }
 
@@ -44,7 +40,7 @@
   }
 
   .multiselect__content-wrapper {
-    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
+    @apply bg-n-alpha-black2 text-n-slate-12 backdrop-blur-[100px] border-0 border-none outline outline-1 outline-n-weak rounded-b-lg;
   }
 
   .multiselect__content {
@@ -61,15 +57,19 @@
         @apply mb-0;
       }
 
+      &::after {
+        @apply bottom-0 flex items-center justify-center text-center;
+      }
+
       &.multiselect__option--highlight {
-        @apply bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100;
+        @apply bg-n-alpha-black2 text-n-slate-12;
       }
 
       &.multiselect__option--highlight:hover {
-        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
+        @apply bg-n-brand/10 text-n-slate-12;
 
         &::after {
-          @apply bg-woot-50 dark:bg-woot-600 text-slate-600 dark:text-slate-200;
+          @apply bg-transparent text-center text-n-slate-12;
         }
       }
 
@@ -78,17 +78,17 @@
       }
 
       &.multiselect__option--selected {
-        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
+        @apply bg-n-brand/20 text-n-slate-12;
+
+        &::after {
+          @apply bg-transparent;
+        }
 
         &.multiselect__option--highlight:hover {
-          @apply bg-woot-75 dark:bg-woot-600;
-
-          &::after {
-            @apply bg-transparent;
-          }
+          @apply bg-transparent;
 
           &::after:hover {
-            @apply text-slate-800 dark:text-slate-100;
+            @apply text-n-slate-12 bg-transparent;
           }
         }
       }
@@ -96,23 +96,27 @@
   }
 
   .multiselect__tags {
-    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
+    @apply bg-n-alpha-black2 border-0 grid items-center w-full border-none outline-1 outline outline-n-weak hover:outline-n-slate-6 m-0 min-h-[2.875rem] rounded-lg pt-0;
 
     input {
-      @apply border-0 border-none;
+      @apply border-0 border-none bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-10;
     }
   }
 
+  .multiselect__spinner {
+    background-color: transparent;
+  }
+
   .multiselect__tags-wrap {
     @apply inline-block leading-none mt-1;
   }
 
   .multiselect__placeholder {
-    @apply text-slate-400 dark:text-slate-400 font-normal pt-3;
+    @apply text-n-slate-10 font-normal pt-3;
   }
 
   .multiselect__tag {
-    @apply bg-slate-50 dark:bg-slate-800 mt-1 text-slate-800 dark:text-slate-100 pr-6 pl-2.5 py-1.5;
+    @apply bg-n-alpha-white mt-1 text-n-slate-12 pr-6 pl-2.5 py-1.5;
   }
 
   .multiselect__tag-icon {
@@ -125,7 +129,7 @@
   }
 
   .multiselect__single {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply bg-transparent text-n-slate-12 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
   }
 }
 
@@ -143,11 +147,11 @@
     }
 
     > .multiselect__tags {
-      @apply border-transparent;
+      @apply outline-transparent;
     }
 
     &.multiselect--active > .multiselect__tags {
-      @apply border-woot-500 dark:border-woot-500;
+      @apply outline-n-blue-border;
     }
   }
 }
@@ -179,7 +183,7 @@
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm  min-h-[2.5rem];
+    @apply text-n-slate-12 rounded-lg text-sm  min-h-[2.5rem];
   }
 
   .multiselect__input {
@@ -187,7 +191,7 @@
   }
 
   .multiselect__single {
-    @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-3 px-0.5;
+    @apply items-center flex m-0 text-sm max-h-[2.375rem] bg-transparent text-n-slate-12 py-3 px-0.5;
   }
 
   .multiselect__placeholder {
@@ -208,6 +212,24 @@
   }
 }
 
+.multiselect--disabled {
+  background-color: rgba(var(--black-alpha-2)) !important;
+
+  .multiselect__tags {
+    @apply hover:outline-n-weak;
+  }
+}
+
+.multiselect--active {
+  .multiselect__select::before {
+    @apply top-[62%];
+  }
+}
+
+.multiselect__select::before {
+  top: 60% !important;
+}
+
 .multiselect-wrap--medium {
   .multiselect__tags,
   .multiselect__input {
@@ -217,16 +239,16 @@
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 text-sm h-12 min-h-[3rem];
+    @apply bg-n-alpha-black2 text-n-slate-12 text-sm h-12 min-h-[3rem];
   }
 
   .multiselect__input {
     @apply h-[2.875rem] min-h-[2.875rem];
-    margin-bottom: 0px !important;
+    margin-bottom: 0 !important;
   }
 
   .multiselect__single {
-    @apply items-center flex m-0 text-sm py-1 px-0.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900;
+    @apply items-center flex m-0 text-sm py-1 px-0.5 bg-transparent text-n-slate-12;
   }
 
   .multiselect__placeholder {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index a8da23f3b..da3cf2e6d 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -1,22 +1,22 @@
 // scss-lint:disable QualifyingElement
 
 // Base typography
+// -------------------------
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  @apply font-medium text-slate-800 dark:text-slate-50;
+  @apply font-medium text-n-slate-12;
 }
 
 p {
   text-rendering: optimizeLegibility;
-
   @apply mb-2 leading-[1.65] text-sm;
 
   a {
-    @apply text-woot-500 dark:text-woot-500 cursor-pointer;
+    @apply text-n-brand dark:text-n-brand cursor-pointer;
   }
 }
 
@@ -41,64 +41,82 @@ dl:not(.reset-base) {
 }
 
 // Form elements
+// -------------------------
 label {
-  @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium;
-
-  &.error {
-    input {
-      @apply mb-1;
-    }
-  }
+  @apply text-n-slate-12 block m-0 leading-7 text-sm font-medium;
 }
 
 .input-wrap,
 .help-text {
-  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
-
-  .help-text {
-    @apply font-normal text-slate-600 dark:text-slate-400;
-  }
+  @apply text-n-slate-11 text-sm font-medium;
 }
 
 // Focus outline removal
 .button,
-textarea,
-input:focus {
+textarea {
   outline: none;
 }
 
-// Inputs
-input[type='text']:not(.reset-base),
-input[type='number']:not(.reset-base),
-input[type='password']:not(.reset-base),
-input[type='date']:not(.reset-base),
-input[type='email']:not(.reset-base),
-input[type='url']:not(.reset-base) {
-  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+// Field base styles (Input, TextArea, Select)
+@layer components {
+  .field-base {
+    @apply block box-border w-full transition-colors duration-[0.25s] ease-[ease-in-out] focus:outline-n-brand dark:focus:outline-n-brand appearance-none mx-0 mt-0 mb-4 py-2 px-3 rounded-lg text-base font-normal bg-n-alpha-black2 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 border-none outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6;
+  }
 
-  &[disabled] {
-    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
+  .field-disabled {
+    @apply opacity-50 outline-n-weak dark:outline-n-weak cursor-not-allowed;
+  }
+
+  .field-error {
+    @apply outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8;
   }
 }
 
-input[type='file'] {
-  @apply bg-n-background leading-[1.15] mb-4;
+$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset']):not(.reset-base):not(.multiselect__input):not(.no-margin)";
+
+#{$form-input-selector} {
+  @apply field-base h-10;
+
+  &[disabled] {
+    @apply field-disabled;
+  }
+
+  &.error {
+    @apply field-error mb-1;
+  }
+}
+
+input[type='file']:not(.multiselect__input) {
+  @apply leading-[1.15] mb-4 border-0 bg-transparent text-sm;
 }
 
 // Select
 select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
-  background-position: right -1rem center;
   background-size: 9px 6px;
-  @apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2 rounded-md w-full text-base font-normal appearance-none transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+
+  @apply field-base h-10 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
+
+  &[disabled] {
+    @apply field-disabled;
+  }
 }
 
 // Textarea
 textarea {
-  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-16 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+  @apply field-base h-16;
 
   &[disabled] {
-    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
+    @apply field-disabled;
+  }
+}
+
+// Add mb-1 when .help-text exists within the same label container
+label:has(.help-text) {
+  input,
+  textarea,
+  select {
+    margin-bottom: 0.25rem !important;
   }
 }
 
@@ -109,18 +127,41 @@ textarea {
   }
 }
 
+// FormKit support
+.formkit-outer[data-invalid='true'] {
+  #{$form-input-selector},
+  textarea,
+  select {
+    @apply field-error;
+  }
+
+  .formkit-message {
+    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
+  }
+}
+
 .error {
-  input,
+  #{$form-input-selector},
   input:not([type]),
   textarea,
   select,
   .multiselect > .multiselect__tags,
   .multiselect:not(.no-margin) {
-    @apply border border-solid border-red-400 dark:border-red-400 mb-1;
+    @apply field-error;
+  }
+
+  // Only add mb-1 when .message exists within the same .error container
+  // And exclude no-margin from the margin-bottom
+  &:has(.message) {
+    input:not(.no-margin),
+    textarea,
+    select {
+      margin-bottom: 0.25rem !important;
+    }
   }
 
   .message {
-    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
+    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
   }
 }
 
@@ -130,7 +171,7 @@ textarea {
   }
 
   .error {
-    @apply border-red-400 dark:border-red-400;
+    @apply text-n-ruby-9 dark:text-n-ruby-9;
   }
 }
 
@@ -141,11 +182,11 @@ code {
   @apply text-xs border-0;
 
   &.hljs {
-    @apply bg-n-slate-3 dark:bg-n-solid-3 text-slate-800 dark:text-slate-50 rounded-lg p-5;
+    @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12 rounded-lg p-5;
 
     .hljs-number,
     .hljs-string {
-      @apply text-red-800 dark:text-red-400;
+      @apply text-n-ruby-9 dark:text-n-ruby-9;
     }
 
     .hljs-name,
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 1213e7c26..133e07bd1 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -42,7 +42,7 @@ button {
     }
   }
 
-  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(
+  &:hover:not(:disabled):not(.success):not(.alert):not(.warning):not(
       .clear
     ):not(.smooth):not(.hollow) {
     @apply bg-n-brand/80 dark:bg-n-brand/80;
@@ -117,63 +117,63 @@ button {
   }
 
   &.hollow {
-    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:bg-n-brand/20;
+    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:enabled:bg-n-brand/20;
 
     &.secondary {
-      @apply text-n-slate-12 border-n-slate-5 hover:bg-n-slate-5;
+      @apply text-n-slate-12 border-n-slate-5 hover:enabled:bg-n-slate-5;
     }
 
     &.success {
-      @apply text-n-teal-9 border-n-teal-8 hover:bg-n-teal-5;
+      @apply text-n-teal-9 border-n-teal-8 hover:enabled:bg-n-teal-5;
     }
 
     &.alert {
-      @apply text-n-ruby-9 border-n-ruby-8 hover:bg-n-ruby-5;
+      @apply text-n-ruby-9 border-n-ruby-8 hover:enabled:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply text-n-amber-9 border-n-amber-8 hover:bg-n-amber-5;
+      @apply text-n-amber-9 border-n-amber-8 hover:enabled:bg-n-amber-5;
     }
   }
 
   // Smooth style
   &.smooth {
-    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/40;
+    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:enabled:bg-n-brand/20 dark:hover:enabled:bg-n-brand/40;
 
     &.secondary {
-      @apply bg-n-slate-4 text-n-slate-11 hover:text-n-slate-11 hover:bg-n-slate-5;
+      @apply bg-n-slate-4 text-n-slate-11 hover:enabled:text-n-slate-11 hover:enabled:bg-n-slate-5;
     }
 
     &.success {
-      @apply bg-n-teal-4 text-n-teal-11 hover:text-n-teal-11 hover:bg-n-teal-5;
+      @apply bg-n-teal-4 text-n-teal-11 hover:enabled:text-n-teal-11 hover:enabled:bg-n-teal-5;
     }
 
     &.alert {
-      @apply bg-n-ruby-4 text-n-ruby-11 hover:text-n-ruby-11 hover:bg-n-ruby-5;
+      @apply bg-n-ruby-4 text-n-ruby-11 hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply bg-n-amber-4 text-n-amber-11 hover:text-n-amber-11 hover:bg-n-amber-5;
+      @apply bg-n-amber-4 text-n-amber-11 hover:enabled:text-n-amber-11 hover:enabled:bg-n-amber-5;
     }
   }
 
   &.clear {
-    @apply text-n-blue-text hover:bg-n-brand/10 dark:hover:bg-n-brand/30;
+    @apply text-n-blue-text hover:enabled:bg-n-brand/10 dark:hover:enabled:bg-n-brand/30;
 
     &.secondary {
-      @apply text-n-slate-12 hover:bg-n-slate-4;
+      @apply text-n-slate-12 hover:enabled:bg-n-slate-4;
     }
 
     &.success {
-      @apply text-n-teal-10 hover:bg-n-teal-4;
+      @apply text-n-teal-10 hover:enabled:bg-n-teal-4;
     }
 
     &.alert {
-      @apply text-n-ruby-11 hover:bg-n-ruby-4;
+      @apply text-n-ruby-11 hover:enabled:bg-n-ruby-4;
     }
 
     &.warning {
-      @apply text-n-amber-11 hover:bg-n-amber-4;
+      @apply text-n-amber-11 hover:enabled:bg-n-amber-4;
     }
 
     &:active {
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 4afca6269..cd8c767b8 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -247,10 +247,9 @@ defineExpose({
             :placeholder="item.placeholder"
             class="[&>div>button]:h-8"
             :class="{
-              '[&>div>button]:bg-n-alpha-black2 [&>div>button]:!outline-transparent':
+              '[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:!outline-transparent':
                 !isDetailsView,
-              '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
-                isDetailsView,
+              '[&>div>button]:!bg-n-alpha-black2': isDetailsView,
             }"
             @update:model-value="handleCountrySelection"
           />
@@ -266,7 +265,9 @@ defineExpose({
             :placeholder="item.placeholder"
             :message-type="getMessageType(item.key)"
             :custom-input-class="`h-8 !pt-1 !pb-1 ${
-              !isDetailsView ? '[&:not(.error,.focus)]:!border-transparent' : ''
+              !isDetailsView
+                ? '[&:not(.error,.focus)]:!outline-transparent'
+                : ''
             }`"
             class="w-full"
             @input="
@@ -303,7 +304,7 @@ defineExpose({
             v-model="
               state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
             "
-            class="w-auto min-w-[100px] text-sm bg-transparent reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
+            class="w-auto min-w-[100px] text-sm bg-transparent outline-none reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
             :placeholder="item.placeholder"
             :size="item.placeholder.length"
             @input="emit('update', state)"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
index 4964668df..039d2c709 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue
@@ -135,7 +135,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
           :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"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div
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 b5862f33f..aa04ba56a 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -75,7 +75,7 @@ onMounted(() => {
       <div>
         <div class="flex justify-between w-full gap-4 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-n-slate-12"
           >
             {{
               t(
@@ -113,7 +113,7 @@ onMounted(() => {
         </div>
         <div class="flex justify-between w-full gap-3 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-n-slate-12"
           >
             {{
               t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
index 8636093b2..696cc837a 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
@@ -95,7 +95,7 @@ defineExpose({ dialogRef });
         :placeholder="
           t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
         "
-        class="[&>div>button]:!border-n-slate-5 [&>div>button]:dark:!border-n-slate-5"
+        class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
       />
     </div>
   </Dialog>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
index 7a066c265..5a60fefdc 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -303,7 +303,7 @@ const handleAvatarDelete = () => {
           :message="
             t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.HELP_TEXT')
           "
-          class="[&>div>button]:!outline-n-weak"
+          class="[&>div>button:not(.focused)]:!outline-n-weak"
         />
       </div>
       <div class="flex items-start justify-between w-full gap-2">
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
index b8fd1429a..3980c6b30 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
@@ -96,7 +96,7 @@ const handleSendMessage = template => {
               '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"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div
diff --git a/app/javascript/dashboard/components-next/banner/Banner.vue b/app/javascript/dashboard/components-next/banner/Banner.vue
index cc5af3272..ed038d4bb 100644
--- a/app/javascript/dashboard/components-next/banner/Banner.vue
+++ b/app/javascript/dashboard/components-next/banner/Banner.vue
@@ -30,11 +30,11 @@ const bannerClass = computed(() => {
 
 const buttonClass = computed(() => {
   const classMap = {
-    slate: 'bg-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-4 text-n-blue-11',
+    slate: 'bg-n-slate-4 hover:bg-n-slate-5 text-n-slate-11',
+    amber: 'bg-n-amber-4 hover:bg-n-amber-5 text-n-amber-11',
+    teal: 'bg-n-teal-4 hover:bg-n-teal-5 text-n-teal-11',
+    ruby: 'bg-n-ruby-4 hover:bg-n-ruby-5 text-n-ruby-11',
+    blue: 'bg-n-blue-4 hover:bg-n-blue-5 text-n-blue-11',
   };
 
   return classMap[props.color];
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 81a74eec4..93622ad64 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -100,49 +100,57 @@ const STYLE_CONFIG = {
   colors: {
     blue: {
       solid:
-        'bg-n-brand text-white hover:enabled:brightness-110 outline-transparent',
+        'bg-n-brand text-white hover:enabled:brightness-110 focus-visible:brightness-110 outline-transparent',
       faded:
-        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-text outline-n-blue-border',
-      ghost: 'text-n-blue-text hover:enabled:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-blue-text hover:enabled:underline outline-transparent',
+        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
+      outline: 'text-n-blue-text outline-n-brand',
+      ghost:
+        'text-n-blue-text hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-blue-text hover:enabled:underline focus-visible:underline outline-transparent',
     },
     ruby: {
       solid:
-        'bg-n-ruby-9 text-white hover:enabled:bg-n-ruby-10 outline-transparent',
+        'bg-n-ruby-9 text-white hover:enabled:bg-n-ruby-10 focus-visible:bg-n-ruby-10 outline-transparent',
       faded:
-        'bg-n-ruby-9/10 text-n-ruby-11 hover:enabled:bg-n-ruby-9/20 outline-transparent',
-      outline: 'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 outline-n-ruby-8',
-      ghost: 'text-n-ruby-11 hover:enabled:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-ruby-9 hover:enabled:underline outline-transparent',
+        'bg-n-ruby-9/10 text-n-ruby-11 hover:enabled:bg-n-ruby-9/20 focus-visible:bg-n-ruby-9/20 outline-transparent',
+      outline:
+        'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 focus-visible:bg-n-ruby-9/10 outline-n-ruby-8',
+      ghost:
+        'text-n-ruby-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-ruby-9 hover:enabled:underline focus-visible:underline outline-transparent',
     },
     amber: {
       solid:
-        'bg-n-amber-9 text-white hover:enabled:bg-n-amber-10 outline-transparent',
+        'bg-n-amber-9 text-white hover:enabled:bg-n-amber-10 focus-visible:bg-n-amber-10 outline-transparent',
       faded:
-        'bg-n-amber-9/10 text-n-slate-12 hover:enabled:bg-n-amber-9/20 outline-transparent',
+        'bg-n-amber-9/10 text-n-slate-12 hover:enabled:bg-n-amber-9/20 focus-visible:bg-n-amber-9/20 outline-transparent',
       outline:
-        'text-n-amber-11 hover:enabled:bg-n-amber-9/10 outline-n-amber-9',
-      link: 'text-n-amber-9 hover:enabled:underline outline-transparent',
-      ghost: 'text-n-amber-9 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'text-n-amber-11 hover:enabled:bg-n-amber-9/10 focus-visible:bg-n-amber-9/10 outline-n-amber-9',
+      link: 'text-n-amber-9 hover:enabled:underline focus-visible:underline outline-transparent',
+      ghost:
+        'text-n-amber-9 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
     },
     slate: {
       solid:
-        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 hover:enabled:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
       faded:
-        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 outline-transparent',
-      outline: 'text-n-slate-11 outline-n-strong hover:enabled:bg-n-slate-9/10',
-      link: 'text-n-slate-11 hover:enabled:text-n-slate-12 hover:enabled:underline outline-transparent',
-      ghost: 'text-n-slate-12 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 focus-visible:bg-n-slate-9/20 outline-transparent',
+      outline:
+        'text-n-slate-11 outline-n-strong hover:enabled:bg-n-slate-9/10 focus-visible:bg-n-slate-9/10',
+      link: 'text-n-slate-11 hover:enabled:text-n-slate-12 focus-visible:text-n-slate-12 hover:enabled:underline focus-visible:underline outline-transparent',
+      ghost:
+        'text-n-slate-12 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
     },
     teal: {
       solid:
-        'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 outline-transparent',
+        'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 focus-visible:bg-n-teal-10 outline-transparent',
       faded:
-        'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 outline-transparent',
-      outline: 'text-n-teal-11 hover:enabled:bg-n-teal-9/10 outline-n-teal-9',
-      link: 'text-n-teal-9 hover:enabled:underline outline-transparent',
-      ghost: 'text-n-teal-9 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 focus-visible:bg-n-teal-9/20 outline-transparent',
+      outline:
+        'text-n-teal-11 hover:enabled:bg-n-teal-9/10 focus-visible:bg-n-teal-9/10 outline-n-teal-9',
+      link: 'text-n-teal-9 hover:enabled:underline focus-visible:underline outline-transparent',
+      ghost:
+        'text-n-teal-9 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
     },
   },
   sizes: {
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
index 8dbd00388..026a63a70 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -96,7 +96,7 @@ watch(
         :label="selectedLabel"
         trailing-icon
         :disabled="disabled"
-        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
+        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:outline-n-weak focus:outline-n-brand"
         :class="{ focused: open }"
         :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
         @click="toggleDropdown"
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
index e1cd8a086..e24a366e2 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
@@ -69,7 +69,7 @@ defineExpose({
         :value="searchValue"
         type="search"
         :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-        class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
+        class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
         @input="onInputSearch"
       />
     </div>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index 4e3b96259..c8e69b049 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -75,7 +75,7 @@ onMounted(() => {
         :placeholder="
           searchPlaceholder || t('DROPDOWN_MENU.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"
+        class="reset-base w-full h-8 py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
       />
     </div>
     <button
diff --git a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
index f63662745..81d7719cf 100644
--- a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
@@ -83,7 +83,7 @@ defineExpose({
       v-if="label"
       :for="id"
       :class="customLabelClass"
-      class="mb-0.5 text-sm font-medium text-n-slate-11"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
     </label>
@@ -97,7 +97,7 @@ defineExpose({
       :placeholder="placeholder"
       :disabled="disabled"
       :class="customInputClass"
-      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"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none outline-none outline-0 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"
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index 5bfdd5c71..ea6eb0417 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -70,12 +70,12 @@ const messageClass = computed(() => {
   }
 });
 
-const inputBorderClass = computed(() => {
+const inputOutlineClass = computed(() => {
   switch (props.messageType) {
     case 'error':
-      return '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';
+      return 'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8';
     default:
-      return '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 focus:border-n-brand dark:focus:border-n-brand';
+      return 'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak focus:outline-n-brand dark:focus:outline-n-brand';
   }
 });
 
@@ -124,7 +124,7 @@ onMounted(() => {
       :value="modelValue"
       :class="[
         customInputClass,
-        inputBorderClass,
+        inputOutlineClass,
         {
           error: messageType === 'error',
           focus: isFocused,
@@ -134,7 +134,7 @@ onMounted(() => {
       :placeholder="placeholder"
       :disabled="disabled"
       :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
diff --git a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
index bb39c1502..16f14e760 100644
--- a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
+++ b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
@@ -90,19 +90,19 @@ 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';
+    'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8';
   const focusClass =
-    'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand';
+    'has-[:focus]:outline-n-brand dark:has-[:focus]:outline-n-brand';
 
   if (!props.showBorder) {
     if (hasError.value) return errorClass;
-    return `border-transparent ${focusClass}`;
+    return `outline-transparent ${focusClass}`;
   }
 
   if (hasError.value) {
     return errorClass;
   }
-  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`;
+  return `${focusClass} outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak`;
 });
 
 const phoneNumberError = computed(() => {
@@ -163,7 +163,7 @@ watch(
   <div>
     <div
       v-on-clickaway="() => closeCountryDropdown()"
-      class="relative flex items-center h-8 transition-all duration-500 ease-in-out border rounded-lg bg-n-alpha-black2"
+      class="relative flex items-center h-8 transition-all duration-500 ease-in-out outline outline-1 outline-offset-[-1px] rounded-lg bg-n-alpha-black2"
       :class="[inputBorderClass, { 'cursor-not-allowed opacity-50': disabled }]"
     >
       <Input
@@ -171,7 +171,7 @@ watch(
         type="tel"
         :placeholder="placeholder"
         :disabled="disabled"
-        custom-input-class="!border-0 h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
+        custom-input-class="!border-0 !outline-none h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
         class="w-full !flex-row"
       >
         <template #prefix>
@@ -185,7 +185,7 @@ watch(
               "
               trailing-icon
               :disabled="disabled"
-              class="!h-[1.875rem] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+              class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
               @click="toggleCountryDropdown"
             >
               <span
diff --git a/app/javascript/dashboard/components-next/textarea/TextArea.vue b/app/javascript/dashboard/components-next/textarea/TextArea.vue
index 80ab8e3df..66cb5f7f4 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-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"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !outline-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/SettingsSection.vue b/app/javascript/dashboard/components/SettingsSection.vue
index c8c1fd007..e3933a6f4 100644
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -28,8 +28,8 @@ export default {
       'border-b border-solid border-n-weak/60 dark:border-n-weak': showBorder,
     }"
   >
-    <div class="grid grid-cols-1 lg:grid-cols-6 gap-6">
-      <div class="col-span-2 xl:col-span-1">
+    <div class="grid grid-cols-1 lg:grid-cols-8 gap-6">
+      <div class="col-span-2">
         <p
           v-if="title"
           class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
@@ -48,7 +48,7 @@ export default {
           {{ note }}
         </p>
       </div>
-      <div class="col-span-4 lg:col-span-4 2xl:col-span-3">
+      <div class="col-span-6 xl:col-span-5">
         <slot />
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index b974e68f3..cef85b193 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -68,7 +68,7 @@ export default {
 <style lang="scss" scoped>
 .wizard-box {
   .item {
-    @apply cursor-pointer after:bg-slate-75 before:bg-slate-75 dark:after:bg-slate-600 dark:before:bg-slate-600 py-4 pr-4 pl-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5;
+    @apply cursor-pointer after:bg-slate-75 before:bg-slate-75 dark:after:bg-slate-600 dark:before:bg-slate-600 py-4 ltr:pr-4 rtl:pl-4 ltr:pl-6 rtl:pr-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5 rtl:after:left-6 rtl:before:left-6;
 
     &.active {
       h3 {
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 8d7a2289d..634ae7858 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -177,6 +177,7 @@ export default {
         icon="dismiss"
         variant="clear"
         color-scheme="secondary"
+        class="flex-shrink-0"
         @click="removeAction"
       />
     </div>
@@ -201,10 +202,10 @@ export default {
 
 <style lang="scss" scoped>
 .filter {
-  @apply bg-n-slate-3 dark:bg-n-solid-3 p-2 border border-solid border-n-strong dark:border-n-strong rounded-md mb-2;
+  @apply bg-n-background p-2 border border-solid border-n-strong dark:border-n-strong rounded-lg mb-2;
 
   &.is-a-macro {
-    @apply mb-0 bg-n-slate-2 dark:bg-n-solid-3 p-0 border-0 rounded-none;
+    @apply mb-0 bg-n-background dark:bg-n-solid-1 p-0 border-0 rounded-none;
   }
 }
 
@@ -213,15 +214,19 @@ export default {
 }
 
 .filter.has-error {
-  @apply bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50;
+  @apply bg-n-ruby-8/20 border-n-ruby-5 dark:border-n-ruby-5;
+
+  &.is-a-macro {
+    @apply bg-transparent;
+  }
 }
 
 .filter-inputs {
-  @apply flex;
+  @apply flex gap-1;
 }
 
 .filter-error {
-  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
+  @apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
 }
 
 .action__question,
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
index d3c4e1b32..f5de79044 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -29,7 +29,7 @@ export default {
 
 <template>
   <div>
-    <div class="multiselect-wrap--small">
+    <div class="multiselect-wrap--small flex flex-col gap-1 mt-1">
       <multiselect
         v-model="selectedTeams"
         track-by="id"
diff --git a/app/javascript/dashboard/components/widgets/EmptyState.vue b/app/javascript/dashboard/components/widgets/EmptyState.vue
index 6e2101917..810704131 100644
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -11,13 +11,13 @@ export default {
   <div class="empty-state py-16 px-1 ml-0 mr-0">
     <h3
       v-if="title"
-      class="text-slate-700 dark:text-slate-200 block text-center w-full text-xl font-thin"
+      class="text-n-slate-12 block text-center w-full text-xl font-medium"
     >
       {{ title }}
     </h3>
     <p
       v-if="message"
-      class="block text-center text-slate-500 dark:text-slate-400 my-4 mx-auto w-[90%]"
+      class="block text-center text-n-slate-11 dark:text-slate-400 my-4 mx-auto w-[90%]"
     >
       {{ message }}
     </p>
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
index 75177b509..0f5a045b1 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -127,8 +127,8 @@ export default {
     },
     getInputErrorClass(errorMessage) {
       return errorMessage
-        ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
-        : 'bg-n-slate-3 dark:bg-n-solid-3 border-n-strong dark:border-n-strong';
+        ? 'bg-n-ruby-8/20 border-n-ruby-5 dark:border-n-ruby-5'
+        : 'bg-n-background border-n-weak dark:border-n-weak';
     },
   },
 };
@@ -138,14 +138,14 @@ export default {
 <template>
   <div>
     <div
-      class="p-2 border border-solid rounded-md"
+      class="p-2 border border-solid rounded-lg"
       :class="getInputErrorClass(errorMessage)"
     >
-      <div class="flex">
+      <div class="flex gap-1">
         <select
           v-if="groupedFilters"
           v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          class="max-w-[30%] mb-0 mr-1"
           @change="resetFilter()"
         >
           <optgroup
@@ -166,7 +166,7 @@ export default {
         <select
           v-else
           v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          class="max-w-[30%] mb-0 mr-1"
           @change="resetFilter()"
         >
           <option
@@ -179,10 +179,7 @@ export default {
           </option>
         </select>
 
-        <select
-          v-model="filterOperator"
-          class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-        >
+        <select v-model="filterOperator" class="max-w-[20%] mb-0 mr-1">
           <option
             v-for="(operator, o) in operators"
             :key="o"
@@ -234,14 +231,14 @@ export default {
               v-model="values"
               type="date"
               :editable="false"
-              class="mb-0 datepicker"
+              class="!mb-0 datepicker"
             />
           </div>
           <input
             v-else
             v-model="values"
             type="text"
-            class="mb-0"
+            class="!mb-0"
             :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
           />
         </div>
@@ -287,7 +284,7 @@ export default {
 }
 
 .filter-error {
-  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
+  @apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
 }
 
 .multiselect {
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
deleted file mode 100644
index dd3d0b0a0..000000000
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
-
-const props = defineProps({
-  allLabels: {
-    type: Array,
-    default: () => [],
-  },
-  savedLabels: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['add', 'remove']);
-
-const { isAdmin } = useAdmin();
-
-const showSearchDropdownLabel = ref(false);
-
-const selectedLabels = computed(() => {
-  return props.savedLabels.map(label => label.title);
-});
-
-const addItem = label => {
-  emit('add', label);
-};
-
-const removeItem = label => {
-  emit('remove', label);
-};
-
-const toggleLabels = () => {
-  showSearchDropdownLabel.value = !showSearchDropdownLabel.value;
-};
-
-const closeDropdownLabel = () => {
-  showSearchDropdownLabel.value = false;
-};
-
-const keyboardEvents = {
-  KeyL: {
-    action: e => {
-      toggleLabels();
-      e.preventDefault();
-    },
-  },
-  Escape: {
-    action: () => closeDropdownLabel(),
-    allowOnFocusedInput: true,
-  },
-};
-
-useKeyboardEvents(keyboardEvents);
-</script>
-
-<template>
-  <div v-on-clickaway="closeDropdownLabel" class="relative leading-6">
-    <AddLabel @add="toggleLabels" />
-    <woot-label
-      v-for="label in savedLabels"
-      :key="label.id"
-      :title="label.title"
-      :description="label.description"
-      show-close
-      :color="label.color"
-      variant="smooth"
-      @remove="removeItem"
-    />
-    <div class="absolute w-full top-7">
-      <div
-        :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-        class="!box-border !w-full dropdown-pane"
-      >
-        <LabelDropdown
-          v-if="showSearchDropdownLabel"
-          :account-labels="allLabels"
-          :selected-labels="selectedLabels"
-          :allow-creation="isAdmin"
-          @add="addItem"
-          @remove="removeItem"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index 33725bae8..60a22353f 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -14,16 +14,18 @@ export default {
 </script>
 
 <template>
-  <div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak/60">
-    <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
-      {{ headerTitle }}
-    </h2>
-    <p
-      v-if="headerContent"
-      class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
-    >
-      {{ headerContent }}
-    </p>
-    <slot />
+  <div class="border-b border-solid border-n-weak/60">
+    <div class="max-w-6xl w-full mx-auto pt-4 pb-0 px-8">
+      <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
+        {{ headerTitle }}
+      </h2>
+      <p
+        v-if="headerContent"
+        class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
+      >
+        {{ headerContent }}
+      </p>
+      <slot />
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 74f981c95..f614190ea 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -783,15 +783,15 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 
 .is-private {
   .prosemirror-mention-node {
-    @apply font-medium bg-n-amber-2/80 dark:bg-n-amber-2/80 text-slate-900 dark:text-slate-25 py-0 px-1;
+    @apply font-medium bg-n-amber-2/80 dark:bg-n-amber-2/80 text-n-slate-12 py-0 px-1;
   }
 
   .ProseMirror-menubar-wrapper {
     > .ProseMirror {
-      @apply text-slate-800 dark:text-slate-25;
+      @apply text-n-slate-12;
 
       p {
-        @apply text-slate-800 dark:text-slate-25;
+        @apply text-n-slate-12;
       }
     }
   }
@@ -802,11 +802,11 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .message-editor {
-  @apply border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md py-0 px-1 mb-0;
+  @apply rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 bg-n-alpha-black2 py-0 px-1 mb-0;
 }
 
 .editor_warning {
-  @apply border border-solid border-red-400 dark:border-red-400;
+  @apply outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9;
 }
 
 .editor-warning__message {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 174414973..d9b1de5e9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1253,7 +1253,7 @@ export default {
   @apply relative py-0 px-4 -mt-px;
 
   textarea {
-    @apply shadow-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
+    @apply shadow-none outline-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
index 740ad5f29..63cb18ada 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -97,7 +97,7 @@ export default {
           <woot-input
             v-model="v$.toEmailsVal.$model"
             type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:!outline-none [&>input]:h-8 [&>input]:!text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
             :class="{ error: v$.toEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
@@ -113,7 +113,7 @@ export default {
         <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.ccEmailsVal.$model"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:!outline-none [&>input]:h-8 [&>input]:!text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
             type="text"
             :class="{ error: v$.ccEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@@ -142,7 +142,7 @@ export default {
           <woot-input
             v-model="v$.bccEmailsVal.$model"
             type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:!outline-none [&>input]:h-8 [&>input]:!text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
             :class="{ error: v$.bccEmailsVal.$error }"
             :placeholder="
               $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
diff --git a/app/javascript/dashboard/components/widgets/forms/Input.vue b/app/javascript/dashboard/components/widgets/forms/Input.vue
index bd6d49470..b6ee69ec8 100644
--- a/app/javascript/dashboard/components/widgets/forms/Input.vue
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -63,7 +63,6 @@ export default {
   <label class="input-container">
     <span v-if="label">{{ label }}</span>
     <input
-      class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
       :value="modelValue"
       :type="type"
       :placeholder="placeholder"
@@ -82,7 +81,7 @@ export default {
 
 <style scoped lang="scss">
 .help-text {
-  @apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
+  @apply mt-0.5 text-xs not-italic text-n-slate-11;
 }
 
 .message {
diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index 8c7a4351e..bf85ae712 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -175,15 +175,15 @@ export default {
 <template>
   <div class="relative phone-input--wrap">
     <div
-      class="flex items-center justify-start border border-solid rounded-md dark:bg-slate-900"
+      class="flex items-center justify-start border-none outline outline-1 rounded-lg bg-n-alpha-black2"
       :class="
         error
-          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
-          : 'mb-4 border-slate-200 dark:border-slate-600'
+          ? 'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 mb-1'
+          : 'mb-4 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6'
       "
     >
       <div
-        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
+        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-lg rounded-bl-lg flex items-center justify-center gap-1.5 bg-n-solid-3 h-10 w-14"
         @click.prevent="toggleCountryDropdown"
       >
         <h5 v-if="activeCountry" class="mb-0">
@@ -194,7 +194,7 @@ export default {
       </div>
       <span
         v-if="activeDialCode"
-        class="flex py-2 pl-2 pr-0 text-base font-normal leading-normal bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100"
+        class="flex py-2 pl-2 pr-0 text-base font-normal leading-normal text-n-slate-12"
       >
         {{ activeDialCode }}
       </span>
@@ -202,7 +202,7 @@ export default {
         ref="phoneNumberInput"
         :value="phoneNumber"
         type="tel"
-        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
+        class="no-margin !rounded-tl-none !rounded-bl-none !outline-none !border-0 font-normal !w-full !bg-transparent text-base !px-1.5 placeholder:font-normal"
         :placeholder="placeholder"
         :readonly="readonly"
         :style="styles"
@@ -215,20 +215,22 @@ export default {
       ref="dropdown"
       v-on-clickaway="onOutsideClick"
       tabindex="0"
-      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
+      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded-lg px-0 pt-0 pb-1 bg-n-alpha-3 backdrop-blur-[100px]"
       @keydown.prevent.up="moveUp"
       @keydown.prevent.down="moveDown"
       @keydown.prevent.enter="
         onSelectCountry(filteredCountriesBySearch[selectedIndex])
       "
     >
-      <div class="sticky top-0 p-1 bg-white dark:bg-slate-900">
+      <div
+        class="sticky top-0 p-1 bg-white dark:bg-transparent backdrop-blur-[100px]"
+      >
         <input
           ref="searchbar"
           v-model="searchCountry"
           type="text"
           :placeholder="$t('GENERAL.PHONE_INPUT.PLACEHOLDER')"
-          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-2000 dark:!border-slate-6000"
+          class="!h-8 !mb-0 !text-sm !outline-n-brand dark:!outline-n-brand"
           @input="onSearchCountry"
         />
       </div>
@@ -236,10 +238,10 @@ export default {
         v-for="(country, index) in filteredCountriesBySearch"
         ref="dropdownItem"
         :key="index"
-        class="flex items-center px-1 py-0 cursor-pointer h-7 hover:bg-slate-50 dark:hover:bg-slate-700"
+        class="flex items-center px-1 py-0 cursor-pointer h-7 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2"
         :class="{
-          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
-          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
+          'bg-n-alpha-1 dark:bg-n-alpha-2': country.id === activeCountryCode,
+          'bg-n-alpha-1 dark:bg-n-alpha-2': index === selectedIndex,
         }"
         @click="onSelectCountry(country)"
       >
@@ -250,13 +252,13 @@ export default {
         >
           {{ country.name }}
         </span>
-        <span class="ml-1 text-xs text-slate-300 dark:text-slate-300">{{
-          country.dial_code
-        }}</span>
+        <span class="ml-1 text-xs text-n-slate-11">
+          {{ country.dial_code }}
+        </span>
       </div>
       <div v-if="filteredCountriesBySearch.length === 0">
         <span
-          class="flex items-center justify-center mt-4 text-sm text-slate-500 dark:text-slate-300"
+          class="flex items-center justify-center mt-4 text-sm text-n-slate-10"
         >
           {{ $t('GENERAL.PHONE_INPUT.EMPTY_STATE') }}
         </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
index d67d96eb5..ab84902b3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -8,7 +8,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col w-full items-start">
+  <div class="flex flex-col w-full items-start mb-4">
     <h2
       class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100 break-words"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 59cf178ba..7bd67b8ab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -12,6 +12,7 @@ const props = defineProps({
   showBackButton: { type: Boolean, default: false },
   backUrl: { type: [String, Object], default: '' },
   showSidemenuIcon: { type: Boolean, default: true },
+  fullWidth: { type: Boolean, default: false },
 });
 
 const { t } = useI18n();
@@ -31,7 +32,10 @@ const showSettingsHeader = computed(
 
 <template>
   <div class="flex flex-1 flex-col m-0 bg-n-background overflow-auto">
-    <div class="max-w-6xl mx-auto w-full flex flex-col flex-1">
+    <div
+      class="mx-auto w-full flex flex-col flex-1"
+      :class="{ 'max-w-6xl': !fullWidth }"
+    >
       <SettingsHeader
         v-if="showSettingsHeader"
         button-route="new"
@@ -43,6 +47,7 @@ const showSettingsHeader = computed(
         :show-new-button="showNewButton"
         :show-sidemenu-icon="showSidemenuIcon"
         class="sticky top-0 z-20"
+        :class="{ 'max-w-6xl w-full mx-auto': fullWidth }"
       />
 
       <router-view v-slot="{ Component }" class="px-5 flex-1 overflow-hidden">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index cbba4de05..13c7521d4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -100,17 +100,17 @@ const tableHeaders = computed(() => {
             <th
               v-for="thHeader in tableHeaders"
               :key="thHeader"
-              class="py-4 pr-4 text-left font-semibold text-n-slate-11"
+              class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11"
             >
               {{ thHeader }}
             </th>
           </thead>
           <tbody class="divide-y divide-n-weak text-n-slate-11">
             <tr v-for="auditLogItem in records" :key="auditLogItem.id">
-              <td class="py-4 pr-4 break-all whitespace-nowrap">
+              <td class="py-4 ltr:pr-4 rtl:pl-4 break-all whitespace-nowrap">
                 {{ generateLogText(auditLogItem) }}
               </td>
-              <td class="py-4 pr-4 break-all whitespace-nowrap">
+              <td class="py-4 ltr:pr-4 rtl:pl-4 break-all whitespace-nowrap">
                 {{
                   messageTimestamp(
                     auditLogItem.created_at,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index 21a35bb72..0cd79364d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { useAutomation } from 'dashboard/composables/useAutomation';
 import { validateAutomation } from 'dashboard/helper/validations';
 import {
@@ -39,6 +40,7 @@ export default {
   components: {
     FilterInputBox,
     AutomationActionInput,
+    NextButton,
   },
   props: {
     onClose: {
@@ -184,7 +186,7 @@ export default {
           </label>
           <p
             v-if="hasAutomationMutated"
-            class="text-xs text-right text-green-500 dark:text-green-500"
+            class="text-xs text-right text-green-500 pt-1 dark:text-green-500"
           >
             {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
           </p>
@@ -243,15 +245,15 @@ export default {
               @remove-filter="removeFilter(i)"
             />
             <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
+              <NextButton
+                icon="i-lucide-plus"
+                blue
+                faded
+                sm
                 @click="appendNewCondition"
               >
                 {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
-              </woot-button>
+              </NextButton>
             </div>
           </div>
         </section>
@@ -287,27 +289,27 @@ export default {
               @remove-action="removeAction(i)"
             />
             <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
+              <NextButton
+                icon="i-lucide-plus"
+                blue
+                faded
+                sm
                 @click="appendNewAction"
               >
                 {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
-              </woot-button>
+              </NextButton>
             </div>
           </div>
         </section>
         <!-- // Actions End -->
         <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">
+            <NextButton ghost blue @click.prevent="onClose">
               {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
-            </woot-button>
-            <woot-button @click="emitSaveAutomation">
+            </NextButton>
+            <NextButton solid blue @click="emitSaveAutomation">
               {{ $t('AUTOMATION.ADD.SUBMIT') }}
-            </woot-button>
+            </NextButton>
           </div>
         </div>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index f38c528b0..079afc3ae 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -201,7 +201,7 @@ const tableHeaders = computed(() => {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-n-slate-11"
+            class="py-4 ltr:pr-4 rtl:pl-4 rtl:text-right ltr:text-left font-semibold text-n-slate-11"
           >
             {{ thHeader }}
           </th>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 4ac8d16c3..46c8203e8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -153,7 +153,7 @@ const tableHeaders = computed(() => {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11 last:text-right"
           >
             <span v-if="thHeader !== tableHeaders[0]">
               {{ thHeader }}
@@ -179,12 +179,12 @@ const tableHeaders = computed(() => {
             :key="cannedItem.short_code"
           >
             <td
-              class="py-4 pr-4 truncate max-w-xs font-medium"
+              class="py-4 ltr:pr-4 rtl:pl-4 truncate max-w-xs font-medium"
               :title="cannedItem.short_code"
             >
               {{ cannedItem.short_code }}
             </td>
-            <td class="py-4 pr-4 md:break-all whitespace-normal">
+            <td class="py-4 ltr:pr-4 rtl:pl-4 md:break-all whitespace-normal">
               {{ cannedItem.content }}
             </td>
             <td class="py-4 flex justify-end gap-1">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
index ebdb90f35..3f86b0727 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
@@ -13,7 +13,7 @@ defineProps({
 
 <template>
   <div
-    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between group outline outline-n-container outline-1 bg-n-alpha-3 rounded-2xl shadow w-full"
+    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between group outline outline-n-container outline-1 bg-n-solid-2 rounded-2xl shadow w-full"
   >
     <slot name="leftSection">
       <div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
index a9715418e..96a5764a2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
@@ -156,7 +156,7 @@ const confirmDeletion = () => {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+            class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
           >
             <span class="mb-0">
               {{ thHeader }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
index 89778dbd0..e1715f1cb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
@@ -160,13 +160,13 @@ const isSubmitDisabled = computed(
     />
     <form class="flex flex-col w-full" @submit.prevent="handleCustomRole">
       <div class="w-full">
-        <label :class="{ 'text-red-500': v$.name.$error }">
+        <label>
           {{ $t('CUSTOM_ROLE.FORM.NAME.LABEL') }}
           <input
             ref="nameInput"
             v-model.trim="name"
             type="text"
-            :class="{ '!border-red-500': v$.name.$error }"
+            :class="{ error: v$.name.$error }"
             :placeholder="$t('CUSTOM_ROLE.FORM.NAME.PLACEHOLDER')"
             @blur="v$.name.$touch"
           />
@@ -174,7 +174,7 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="w-full">
-        <label :class="{ 'text-red-500': v$.description.$error }">
+        <label>
           {{ $t('CUSTOM_ROLE.FORM.DESCRIPTION.LABEL') }}
 
           <textarea
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue
index e3380c0e2..aefe281ff 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue
@@ -79,7 +79,7 @@ const tableHeaders = computed(() => {
         <th
           v-for="thHeader in tableHeaders"
           :key="thHeader"
-          class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+          class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
         >
           <span class="mb-0">
             {{ thHeader }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
index f8cbf1cf8..891adce40 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
@@ -28,15 +28,19 @@ const getFormattedPermissions = role => {
   <tbody class="divide-y divide-n-weak text-n-slate-11">
     <tr v-for="(customRole, index) in roles" :key="index">
       <td
-        class="max-w-xs py-4 pr-4 font-medium truncate align-baseline"
+        class="max-w-xs py-4 ltr:pr-4 rtl:pl-4 font-medium truncate align-baseline"
         :title="customRole.name"
       >
         {{ customRole.name }}
       </td>
-      <td class="py-4 pr-4 whitespace-normal align-baseline md:break-words">
+      <td
+        class="py-4 ltr:pr-4 rtl:pl-4 whitespace-normal align-baseline md:break-words"
+      >
         {{ customRole.description }}
       </td>
-      <td class="py-4 pr-4 whitespace-normal align-baseline md:break-words">
+      <td
+        class="py-4 ltr:pr-4 rtl:pl-4 whitespace-normal align-baseline md:break-words"
+      >
         {{ getFormattedPermissions(customRole) }}
       </td>
       <td class="flex justify-end gap-1 py-4">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
index 2985a34a9..17752dfd2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -4,6 +4,7 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 
 import InboxMembersAPI from '../../../../api/inboxMembers';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -11,6 +12,7 @@ import { useVuelidate } from '@vuelidate/core';
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   validations: {
     selectedAgents: {
@@ -62,16 +64,16 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
-    <form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
+    <form class="flex flex-wrap flex-col mx-0" @submit.prevent="addAgents()">
       <div class="w-full">
         <PageHeader
           :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
           :header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
         />
       </div>
-      <div class="w-3/5">
+      <div>
         <div class="w-full">
           <label :class="{ error: v$.selectedAgents.$error }">
             {{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
@@ -96,9 +98,12 @@ export default {
           </label>
         </div>
         <div class="w-full">
-          <woot-submit-button
-            :button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
-            :loading="isCreating"
+          <NextButton
+            type="submit"
+            :is-loading="isCreating"
+            solid
+            blue
+            :label="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
           />
         </div>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 39b9b3aa6..9e91f0b72 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -62,7 +62,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       class="max-w-4xl"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
index c01f9443a..f40329256 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -1,9 +1,11 @@
 <script>
 import EmptyState from '../../../../components/widgets/EmptyState.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     EmptyState,
+    NextButton,
   },
   computed: {
     currentInbox() {
@@ -70,7 +72,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <EmptyState
       :title="$t('INBOX_MGMT.FINISH.TITLE')"
@@ -130,22 +132,28 @@ export default {
         </div>
         <div class="flex justify-center gap-2 mt-4">
           <router-link
-            class="rounded button hollow primary"
             :to="{
               name: 'settings_inbox_show',
               params: { inboxId: $route.params.inbox_id },
             }"
           >
-            {{ $t('INBOX_MGMT.FINISH.MORE_SETTINGS') }}
+            <NextButton
+              outline
+              slate
+              :label="$t('INBOX_MGMT.FINISH.MORE_SETTINGS')"
+            />
           </router-link>
           <router-link
-            class="rounded button success"
             :to="{
               name: 'inbox_dashboard',
               params: { inboxId: $route.params.inbox_id },
             }"
           >
-            {{ $t('INBOX_MGMT.FINISH.BUTTON_TEXT') }}
+            <NextButton
+              solid
+              teal
+              :label="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
+            />
           </router-link>
         </div>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
index fdb0173e0..1eae2dd6f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
@@ -4,10 +4,12 @@ import { useAlert } from 'dashboard/composables';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     SettingsSection,
+    NextButton,
   },
   props: {
     inbox: {
@@ -155,9 +157,10 @@ export default {
             {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
           </label>
         </div>
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
-          :loading="uiFlags.isUpdatingIMAP"
+        <NextButton
+          type="submit"
+          :label="$t('INBOX_MGMT.IMAP.UPDATE')"
+          :is-loading="uiFlags.isUpdatingIMAP"
           :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
         />
       </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index 7f1268dc2..446b6a9cc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -40,12 +40,14 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-row overflow-auto h-full">
+  <div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full">
     <woot-wizard
-      class="hidden md:block w-1/4"
+      class="hidden md:block col-span-2"
       :global-config="globalConfig"
       :items="items"
     />
-    <router-view />
+    <div class="col-span-6">
+      <router-view />
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 99a64081b..fb1f40ecb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -8,6 +8,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import ChannelName from './components/ChannelName.vue';
+import ChannelIcon from 'next/icon/ChannelIcon.vue';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -87,43 +88,25 @@ const openDelete = inbox => {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
-      >
+      <table class="min-w-full overflow-x-auto">
         <tbody
-          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
+          class="divide-y divide-n-weak flex-1 text-slate-700 dark:text-slate-100"
         >
           <tr v-for="inbox in inboxesList" :key="inbox.id">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
               <div class="flex items-center flex-row gap-4">
                 <Thumbnail
                   v-if="inbox.avatar_url"
-                  class="bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
+                  class="bg-n-alpha-3 rounded-full p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
                   :src="inbox.avatar_url"
                   :username="inbox.name"
                   size="48px"
                 />
                 <div
                   v-else
-                  class="w-[48px] h-[48px] flex justify-center items-center bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
+                  class="w-[48px] h-[48px] flex justify-center items-center bg-n-alpha-3 rounded-full p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="32"
-                    height="32"
-                    viewBox="0 0 24 24"
-                    class="opacity-80 p-1 flex-shrink-0"
-                  >
-                    <path
-                      fill="currentColor"
-                      d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12"
-                      opacity=".35"
-                    />
-                    <path
-                      fill="currentColor"
-                      d="M2.61 21.389c1.612 1.61 4.205 1.61 9.39 1.61s7.778 0 9.39-1.61c1.492-1.493 1.601-3.829 1.61-8.29h-3.476c-.996 0-1.494 0-1.931.202c-.438.201-.762.58-1.41 1.335l-.666.777c-.648.756-.972 1.134-1.41 1.335s-.935.202-1.93.202h-.353c-.996 0-1.494 0-1.931-.202c-.438-.2-.762-.579-1.41-1.335l-.666-.777c-.648-.756-.972-1.134-1.41-1.335s-.935-.201-1.93-.201H1c.008 4.46.118 6.796 1.61 8.289"
-                    />
-                  </svg>
+                  <ChannelIcon class="size-5" :inbox="inbox" />
                 </div>
                 <div>
                   <span class="block font-medium capitalize">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index 8c685c577..0d0e49567 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -4,10 +4,13 @@ import { useAlert } from 'dashboard/composables';
 import PreChatFields from './PreChatFields.vue';
 import { getPreChatFields, standardFieldKeys } from 'dashboard/helper/preChat';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     PreChatFields,
     WootMessageEditor,
+    NextButton,
   },
   props: {
     inbox: {
@@ -110,7 +113,7 @@ export default {
         </select>
       </label>
       <div v-if="preChatFormEnabled">
-        <div class="w-[70%]">
+        <div>
           <label>
             {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
           </label>
@@ -122,7 +125,7 @@ export default {
             "
           />
         </div>
-        <div class="w-[70%] mt-4">
+        <div class="mt-4">
           <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
           <table class="table w-full table-striped woot-table">
             <thead class="thead-dark">
@@ -161,11 +164,10 @@ export default {
         </div>
       </div>
       <div class="w-auto my-4">
-        <woot-submit-button
-          :button-text="
-            $t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
-          "
-          :loading="uiFlags.isUpdating"
+        <NextButton
+          type="submit"
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')"
+          :is-loading="uiFlags.isUpdating"
         />
       </div>
     </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 1018ec6dd..bbfbf3ab8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -18,6 +18,7 @@ import WidgetBuilder from './WidgetBuilder.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
@@ -34,6 +35,7 @@ export default {
     SenderNameExamplePreview,
     MicrosoftReauthorize,
     GoogleReauthorize,
+    NextButton,
   },
   mixins: [inboxMixin],
   setup() {
@@ -381,406 +383,417 @@ export default {
         />
       </woot-tabs>
     </SettingIntroBanner>
-    <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
-    <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
-    <GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
-
-    <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
-      <SettingsSection
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
-        :show-border="false"
-      >
-        <woot-avatar-uploader
-          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
-          :src="avatarUrl"
-          class="pb-4"
-          delete-avatar
-          @on-avatar-select="handleImageUpload"
-          @on-avatar-delete="handleAvatarDelete"
-        />
-        <woot-input
-          v-model="selectedInboxName"
-          class="w-3/4 pb-4"
-          :class="{ error: v$.selectedInboxName.$error }"
-          :label="inboxNameLabel"
-          :placeholder="inboxNamePlaceHolder"
-          :error="
-            v$.selectedInboxName.$error
-              ? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
-              : ''
-          "
-          @blur="v$.selectedInboxName.$touch"
-        />
-        <woot-input
-          v-if="isAPIInbox"
-          v-model="webhookUrl"
-          class="w-3/4 pb-4"
-          :class="{ error: v$.webhookUrl.$error }"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
-          "
-          :placeholder="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
-          "
-          :error="
-            v$.webhookUrl.$error
-              ? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
-              : ''
-          "
-          @blur="v$.webhookUrl.$touch"
-        />
-        <woot-input
-          v-if="isAWebWidgetInbox"
-          v-model="channelWebsiteUrl"
-          class="w-3/4 pb-4"
-          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
-          :placeholder="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
-          "
-        />
-        <woot-input
-          v-if="isAWebWidgetInbox"
-          v-model="channelWelcomeTitle"
-          class="w-3/4 pb-4"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
-          "
-          :placeholder="
-            $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
-            )
-          "
-        />
-
-        <woot-input
-          v-if="isAWebWidgetInbox"
-          v-model="channelWelcomeTagline"
-          class="w-3/4 pb-4"
-          :label="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
-          "
-          :placeholder="
-            $t(
-              'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
-            )
-          "
-        />
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
-          <woot-color-picker v-model="inbox.widget_color" />
-        </label>
-
-        <label v-if="isAWhatsAppChannel" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
-          <input v-model="whatsAppAPIProviderName" type="text" disabled />
-        </label>
-
-        <label class="w-3/4 pb-4">
-          {{
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
-          }}
-          <select v-model="greetingEnabled">
-            <option :value="true">
-              {{
-                $t(
-                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
-                )
-              }}
-            </option>
-            <option :value="false">
-              {{
-                $t(
-                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
-                )
-              }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
-              )
-            }}
-          </p>
-        </label>
-        <div v-if="greetingEnabled" class="pb-4">
-          <GreetingsEditor
-            v-model="greetingMessage"
+    <section class="max-w-6xl mx-auto w-full">
+      <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
+      <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
+      <GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
+      <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
+        <SettingsSection
+          :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
+          :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
+          :show-border="false"
+        >
+          <woot-avatar-uploader
+            :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
+            :src="avatarUrl"
+            class="pb-4"
+            delete-avatar
+            @on-avatar-select="handleImageUpload"
+            @on-avatar-delete="handleAvatarDelete"
+          />
+          <woot-input
+            v-model="selectedInboxName"
+            class="pb-4"
+            :class="{ error: v$.selectedInboxName.$error }"
+            :label="inboxNameLabel"
+            :placeholder="inboxNamePlaceHolder"
+            :error="
+              v$.selectedInboxName.$error
+                ? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
+                : ''
+            "
+            @blur="v$.selectedInboxName.$touch"
+          />
+          <woot-input
+            v-if="isAPIInbox"
+            v-model="webhookUrl"
+            class="pb-4"
+            :class="{ error: v$.webhookUrl.$error }"
             :label="
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
-              )
+              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
             "
             :placeholder="
               $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER'
               )
             "
-            :richtext="!textAreaChannels"
+            :error="
+              v$.webhookUrl.$error
+                ? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
+                : ''
+            "
+            @blur="v$.webhookUrl.$touch"
           />
-        </div>
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
-          <select v-model="replyTime">
-            <option key="in_a_few_minutes" value="in_a_few_minutes">
-              {{
-                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES')
-              }}
-            </option>
-            <option key="in_a_few_hours" value="in_a_few_hours">
-              {{
-                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS')
-              }}
-            </option>
-            <option key="in_a_day" value="in_a_day">
-              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY') }}
-            </option>
-          </select>
-
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
-          <select v-model="emailCollectEnabled">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT')
-            }}
-          </p>
-        </label>
-
-        <label class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
-          <select v-model="csatSurveyEnabled">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
-          </p>
-        </label>
-
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
-          <select v-model="allowMessagesAfterResolved">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
+          <woot-input
+            v-if="isAWebWidgetInbox"
+            v-model="channelWebsiteUrl"
+            class="pb-4"
+            :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
+            "
+          />
+          <woot-input
+            v-if="isAWebWidgetInbox"
+            v-model="channelWelcomeTitle"
+            class="pb-4"
+            :label="
+              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
+            "
+            :placeholder="
               $t(
-                'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
               )
-            }}
-          </p>
-        </label>
+            "
+          />
 
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
-          <select v-model="continuityViaEmail">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
+          <woot-input
+            v-if="isAWebWidgetInbox"
+            v-model="channelWelcomeTagline"
+            class="pb-4"
+            :label="
+              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
+            "
+            :placeholder="
               $t(
-                'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
               )
-            }}
-          </p>
-        </label>
-        <div class="w-3/4 pb-4">
-          <label>
-            {{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
-          </label>
-          <select v-model="selectedPortalSlug" class="filter__question">
-            <option value="">
-              {{ $t('INBOX_MGMT.HELP_CENTER.PLACEHOLDER') }}
-            </option>
-            <option v-for="p in portals" :key="p.slug" :value="p.slug">
-              {{ p.name }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
-          </p>
-        </div>
-        <label v-if="canLocktoSingleConversation" class="w-3/4 pb-4">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
-          <select v-model="locktoSingleConversation">
-            <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.ENABLED') }}
-            </option>
-            <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
-            </option>
-          </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
-            {{
-              $t(
-                'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
-              )
-            }}
-          </p>
-        </label>
+            "
+          />
 
-        <label v-if="isAWebWidgetInbox">
-          {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
-        </label>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="attachments"
-            @input="handleFeatureFlag"
-          />
-          <label for="attachments">
-            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
+          <label v-if="isAWebWidgetInbox" class="pb-4">
+            {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
+            <woot-color-picker v-model="inbox.widget_color" />
           </label>
-        </div>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="emoji_picker"
-            @input="handleFeatureFlag"
-          />
-          <label for="emoji_picker">
-            {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
+
+          <label v-if="isAWhatsAppChannel" class="pb-4">
+            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
+            <input v-model="whatsAppAPIProviderName" type="text" disabled />
           </label>
-        </div>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="end_conversation"
-            @input="handleFeatureFlag"
-          />
-          <label for="end_conversation">
-            {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
-          </label>
-        </div>
-        <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
-          <input
-            v-model="selectedFeatureFlags"
-            type="checkbox"
-            value="use_inbox_avatar_for_bot"
-            @input="handleFeatureFlag"
-          />
-          <label for="use_inbox_avatar_for_bot">
-            {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
-          </label>
-        </div>
-      </SettingsSection>
-      <SettingsSection
-        v-if="isAWebWidgetInbox || isAnEmailChannel"
-        :title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
-        :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
-        :show-border="false"
-      >
-        <div class="w-3/4 pb-4">
-          <SenderNameExamplePreview
-            :sender-name-type="senderNameType"
-            :business-name="businessName"
-            @update="toggleSenderNameType"
-          />
-          <div class="flex flex-col items-start gap-2 mt-2">
-            <woot-button
-              variant="clear"
-              color-scheme="primary"
-              @click="onClickShowBusinessNameInput"
-            >
-              {{
-                $t(
-                  'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
-                )
-              }}
-            </woot-button>
-            <div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
-              <input
-                ref="businessNameInput"
-                v-model="businessName"
-                :placeholder="
-                  $t(
-                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
-                  )
-                "
-                class="mb-0"
-                type="text"
-              />
-              <woot-button color-scheme="primary" @click="updateInbox">
+
+          <label class="pb-4">
+            {{
+              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
+            }}
+            <select v-model="greetingEnabled">
+              <option :value="true">
                 {{
                   $t(
-                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
+                  )
+                }}
+              </option>
+              <option :value="false">
+                {{
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
+                  )
+                }}
+              </option>
+            </select>
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
+              {{
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
+                )
+              }}
+            </p>
+          </label>
+          <div v-if="greetingEnabled" class="pb-4">
+            <GreetingsEditor
+              v-model="greetingMessage"
+              :label="
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
+                )
+              "
+              :placeholder="
+                $t(
+                  'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
+                )
+              "
+              :richtext="!textAreaChannels"
+            />
+          </div>
+          <label v-if="isAWebWidgetInbox" class="pb-4">
+            {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
+            <select v-model="replyTime">
+              <option key="in_a_few_minutes" value="in_a_few_minutes">
+                {{
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES'
+                  )
+                }}
+              </option>
+              <option key="in_a_few_hours" value="in_a_few_hours">
+                {{
+                  $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS')
+                }}
+              </option>
+              <option key="in_a_day" value="in_a_day">
+                {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY') }}
+              </option>
+            </select>
+
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
+              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
+            </p>
+          </label>
+
+          <label v-if="isAWebWidgetInbox" class="pb-4">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
+            <select v-model="emailCollectEnabled">
+              <option :value="true">
+                {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.ENABLED') }}
+              </option>
+              <option :value="false">
+                {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
+              </option>
+            </select>
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
+              {{
+                $t(
+                  'INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT'
+                )
+              }}
+            </p>
+          </label>
+
+          <label class="pb-4">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
+            <select v-model="csatSurveyEnabled">
+              <option :value="true">
+                {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.ENABLED') }}
+              </option>
+              <option :value="false">
+                {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
+              </option>
+            </select>
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
+              {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
+            </p>
+          </label>
+
+          <label v-if="isAWebWidgetInbox" class="pb-4">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
+            <select v-model="allowMessagesAfterResolved">
+              <option :value="true">
+                {{
+                  $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED')
+                }}
+              </option>
+              <option :value="false">
+                {{
+                  $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED')
+                }}
+              </option>
+            </select>
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
+              {{
+                $t(
+                  'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
+                )
+              }}
+            </p>
+          </label>
+
+          <label v-if="isAWebWidgetInbox" class="pb-4">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
+            <select v-model="continuityViaEmail">
+              <option :value="true">
+                {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.ENABLED') }}
+              </option>
+              <option :value="false">
+                {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
+              </option>
+            </select>
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
+              {{
+                $t(
+                  'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
+                )
+              }}
+            </p>
+          </label>
+          <div class="pb-4">
+            <label>
+              {{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
+            </label>
+            <select v-model="selectedPortalSlug" class="filter__question">
+              <option value="">
+                {{ $t('INBOX_MGMT.HELP_CENTER.PLACEHOLDER') }}
+              </option>
+              <option v-for="p in portals" :key="p.slug" :value="p.slug">
+                {{ p.name }}
+              </option>
+            </select>
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
+              {{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
+            </p>
+          </div>
+          <label v-if="canLocktoSingleConversation" class="pb-4">
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
+            <select v-model="locktoSingleConversation">
+              <option :value="true">
+                {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.ENABLED') }}
+              </option>
+              <option :value="false">
+                {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
+              </option>
+            </select>
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
+              {{
+                $t(
+                  'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
+                )
+              }}
+            </p>
+          </label>
+
+          <label v-if="isAWebWidgetInbox">
+            {{ $t('INBOX_MGMT.FEATURES.LABEL') }}
+          </label>
+          <div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
+            <input
+              v-model="selectedFeatureFlags"
+              type="checkbox"
+              value="attachments"
+              @input="handleFeatureFlag"
+            />
+            <label for="attachments">
+              {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
+            </label>
+          </div>
+          <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
+            <input
+              v-model="selectedFeatureFlags"
+              type="checkbox"
+              value="emoji_picker"
+              @input="handleFeatureFlag"
+            />
+            <label for="emoji_picker">
+              {{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
+            </label>
+          </div>
+          <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
+            <input
+              v-model="selectedFeatureFlags"
+              type="checkbox"
+              value="end_conversation"
+              @input="handleFeatureFlag"
+            />
+            <label for="end_conversation">
+              {{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
+            </label>
+          </div>
+          <div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
+            <input
+              v-model="selectedFeatureFlags"
+              type="checkbox"
+              value="use_inbox_avatar_for_bot"
+              @input="handleFeatureFlag"
+            />
+            <label for="use_inbox_avatar_for_bot">
+              {{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
+            </label>
+          </div>
+        </SettingsSection>
+        <SettingsSection
+          v-if="isAWebWidgetInbox || isAnEmailChannel"
+          :title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
+          :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
+          :show-border="false"
+        >
+          <div class="pb-4">
+            <SenderNameExamplePreview
+              :sender-name-type="senderNameType"
+              :business-name="businessName"
+              @update="toggleSenderNameType"
+            />
+            <div class="flex flex-col items-start gap-2 mt-2">
+              <woot-button
+                variant="clear"
+                color-scheme="primary"
+                @click="onClickShowBusinessNameInput"
+              >
+                {{
+                  $t(
+                    'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
                   )
                 }}
               </woot-button>
+              <div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
+                <input
+                  ref="businessNameInput"
+                  v-model="businessName"
+                  :placeholder="
+                    $t(
+                      'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
+                    )
+                  "
+                  class="mb-0"
+                  type="text"
+                />
+                <woot-button color-scheme="primary" @click="updateInbox">
+                  {{
+                    $t(
+                      'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
+                    )
+                  }}
+                </woot-button>
+              </div>
             </div>
           </div>
-        </div>
-      </SettingsSection>
-      <SettingsSection :show-border="false">
-        <woot-submit-button
-          v-if="isAPIInbox"
-          type="submit"
-          :disabled="v$.webhookUrl.$invalid"
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdating"
-          @click="updateInbox"
-        />
-        <woot-submit-button
-          v-else
-          type="submit"
-          :disabled="v$.$invalid"
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdating"
-          @click="updateInbox"
-        />
-      </SettingsSection>
-    </div>
+        </SettingsSection>
+        <SettingsSection :show-border="false">
+          <NextButton
+            v-if="isAPIInbox"
+            type="submit"
+            :disabled="v$.webhookUrl.$invalid"
+            :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+            :is-loading="uiFlags.isUpdating"
+            @click="updateInbox"
+          />
+          <NextButton
+            v-else
+            type="submit"
+            :disabled="v$.$invalid"
+            :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+            :is-loading="uiFlags.isUpdating"
+            @click="updateInbox"
+          />
+        </SettingsSection>
+      </div>
 
-    <div v-if="selectedTabKey === 'collaborators'" class="mx-8">
-      <CollaboratorsPage :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'configuration'">
-      <ConfigurationPage :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'preChatForm'">
-      <PreChatFormSettings :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'businesshours'">
-      <WeeklyAvailability :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'widgetBuilder'">
-      <WidgetBuilder :inbox="inbox" />
-    </div>
-    <div v-if="selectedTabKey === 'botConfiguration'">
-      <BotConfiguration :inbox="inbox" />
-    </div>
+      <div v-if="selectedTabKey === 'collaborators'" class="mx-8">
+        <CollaboratorsPage :inbox="inbox" />
+      </div>
+      <div v-if="selectedTabKey === 'configuration'">
+        <ConfigurationPage :inbox="inbox" />
+      </div>
+      <div v-if="selectedTabKey === 'preChatForm'">
+        <PreChatFormSettings :inbox="inbox" />
+      </div>
+      <div v-if="selectedTabKey === 'businesshours'">
+        <WeeklyAvailability :inbox="inbox" />
+      </div>
+      <div v-if="selectedTabKey === 'widgetBuilder'">
+        <WidgetBuilder :inbox="inbox" />
+      </div>
+      <div v-if="selectedTabKey === 'botConfiguration'">
+        <BotConfiguration :inbox="inbox" />
+      </div>
+    </section>
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index 0ec61f266..ddf8ee5fc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -6,12 +6,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import InputRadioGroup from './components/InputRadioGroup.vue';
 import SingleSelectDropdown from './components/SingleSelectDropdown.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     SettingsSection,
     InputRadioGroup,
     SingleSelectDropdown,
+    NextButton,
   },
   props: {
     inbox: {
@@ -231,9 +233,10 @@ export default {
             :action="handleAuthMechanismChange"
           />
         </div>
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
-          :loading="uiFlags.isUpdatingSMTP"
+        <NextButton
+          type="submit"
+          :label="$t('INBOX_MGMT.SMTP.UPDATE')"
+          :is-loading="uiFlags.isUpdatingSMTP"
           :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
         />
       </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index 04423ba14..10395bd81 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -7,11 +7,13 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     Widget,
     InputRadioGroup,
+    NextButton,
   },
   props: {
     inbox: {
@@ -268,7 +270,7 @@ export default {
   <div class="mx-8">
     <div class="flex p-2.5">
       <div class="w-100 lg:w-[40%]">
-        <div class="min-h-full py-4 overflow-y-scroll">
+        <div class="min-h-full py-4 overflow-y-scroll px-px">
           <form @submit.prevent="updateWidget">
             <woot-avatar-uploader
               :label="
@@ -376,14 +378,15 @@ export default {
                 )
               "
             />
-            <woot-submit-button
+            <NextButton
+              type="submit"
               class="mt-4"
-              :button-text="
+              :label="
                 $t(
                   'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
                 )
               "
-              :loading="uiFlags.isUpdating"
+              :is-loading="uiFlags.isUpdating"
               :disabled="v$.$invalid || uiFlags.isUpdating"
             />
           </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
index 4cc3405b9..c5415ba9f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
@@ -66,8 +66,8 @@ export default {
 </script>
 
 <template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+  <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
         <input
@@ -82,7 +82,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
         <input
@@ -97,7 +97,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiKey.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
index e939b35ce..281394a3d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
@@ -5,6 +5,7 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const shouldBeWebhookUrl = (value = '') =>
   value ? value.startsWith('http') : true;
@@ -12,6 +13,7 @@ const shouldBeWebhookUrl = (value = '') =>
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -64,14 +66,17 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
     />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <form
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
@@ -88,7 +93,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.webhookUrl.$error }">
           {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
           <input
@@ -105,10 +110,13 @@ export default {
         </p>
       </div>
 
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
+      <div class="w-full mt-4">
+        <NextButton
+          :is-loading="uiFlags.isCreating"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
         />
       </div>
     </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
index d5b999632..157f58f12 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
@@ -5,9 +5,14 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
 
 export default {
+  components: {
+    NextButton,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -72,8 +77,8 @@ export default {
 </script>
 
 <template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+  <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
         <input
@@ -90,7 +95,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
         <input
@@ -107,7 +112,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.accountId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
         <input
@@ -124,7 +129,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.applicationId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
         <input
@@ -141,7 +146,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiKey.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.LABEL') }}
         <input
@@ -156,7 +161,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiSecret.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
         <input
@@ -173,10 +178,13 @@ export default {
       </label>
     </div>
 
-    <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.SUBMIT_BUTTON')"
+    <div class="w-full mt-4">
+      <NextButton
+        :is-loading="uiFlags.isCreating"
+        type="submit"
+        solid
+        blue
+        :label="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.SUBMIT_BUTTON')"
       />
     </div>
   </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
index 935abd38e..1161da5af 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
@@ -6,7 +6,12 @@ import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -72,8 +77,8 @@ export default {
 </script>
 
 <template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+  <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
         <input
@@ -88,7 +93,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
         <input
@@ -103,7 +108,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.phoneNumberId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
@@ -122,7 +127,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.businessAccountId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
@@ -141,7 +146,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiKey.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
@@ -158,10 +163,13 @@ export default {
       </label>
     </div>
 
-    <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+    <div class="w-full mt-4">
+      <NextButton
+        :is-loading="uiFlags.isCreating"
+        type="submit"
+        solid
+        blue
+        :label="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
       />
     </div>
   </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
index c356f7bbc..fe4d7acf3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
@@ -55,7 +55,7 @@ function onClick(emailProvider) {
 <template>
   <div
     v-if="!provider"
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       class="max-w-4xl"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index a0fdc4524..8201fa14f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -207,7 +207,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <div
       v-if="!hasLoginStarted"
@@ -240,7 +240,7 @@ export default {
       <LoadingState v-else-if="showLoader" :message="emptyStateMessage" />
       <form
         v-else
-        class="flex flex-wrap mx-0"
+        class="flex flex-wrap flex-col mx-0"
         @submit.prevent="createChannel()"
       >
         <div class="w-full">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
index 23b9ab2ff..f48415d33 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
@@ -5,10 +5,12 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -70,14 +72,17 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"
     />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <form
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
@@ -94,7 +99,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.lineChannelId.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
           <input
@@ -108,7 +113,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.lineChannelSecret.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
           <input
@@ -122,7 +127,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.lineChannelToken.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
           <input
@@ -136,10 +141,13 @@ export default {
         </label>
       </div>
 
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.LINE_CHANNEL.SUBMIT_BUTTON')"
+      <div class="w-full mt-4">
+        <NextButton
+          :is-loading="uiFlags.isCreating"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.LINE_CHANNEL.SUBMIT_BUTTON')"
         />
       </div>
     </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
index 4f9eb4fc6..72d957100 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -19,13 +19,13 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
     />
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label>
         {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
         <select v-model="provider">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
index a82701d83..3bea45511 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
@@ -5,10 +5,12 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -64,14 +66,17 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
     />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <form
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.botToken.$error }">
           {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
           <input
@@ -88,10 +93,13 @@ export default {
         </p>
       </div>
 
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
+      <div class="w-full mt-4">
+        <NextButton
+          :is-loading="uiFlags.isCreating"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
         />
       </div>
     </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
index 81840be32..844392f49 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
@@ -5,10 +5,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     type: {
       type: String,
@@ -113,8 +117,8 @@ export default {
 </script>
 
 <template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+  <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.channelName.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
         <input
@@ -129,7 +133,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label
         v-if="useMessagingService"
         :class="{ error: v$.messagingServiceSID.$error }"
@@ -149,10 +153,7 @@ export default {
       </label>
     </div>
 
-    <div
-      v-if="!useMessagingService"
-      class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
-    >
+    <div v-if="!useMessagingService" class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
         <input
@@ -183,7 +184,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.accountSID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
         <input
@@ -208,7 +209,7 @@ export default {
         {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.USE_API_KEY') }}
       </label>
     </div>
-    <div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div v-if="useAPIKey" class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiKeySID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.LABEL') }}
         <input
@@ -222,7 +223,7 @@ export default {
         }}</span>
       </label>
     </div>
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.authToken.$error }">
         {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
         <input
@@ -239,10 +240,13 @@ export default {
       </label>
     </div>
 
-    <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
+    <div class="w-full mt-4">
+      <NextButton
+        :is-loading="uiFlags.isCreating"
+        type="submit"
+        solid
+        blue
+        :label="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
       />
     </div>
   </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
index 216c822f0..d4da535ae 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -27,7 +27,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <div class="login-init h-full text-center">
       <form @submit.prevent="requestAuthorization">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
index d7635a92c..7174c535c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import router from '../../../../index';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 
@@ -9,6 +10,7 @@ export default {
   components: {
     PageHeader,
     GreetingsEditor,
+    NextButton,
   },
   data() {
     return {
@@ -73,7 +75,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
@@ -85,7 +87,7 @@ export default {
     />
     <form
       v-if="!uiFlags.isCreating"
-      class="flex flex-wrap mx-0"
+      class="flex flex-wrap flex-col mx-0"
       @submit.prevent="createChannel"
     >
       <div class="w-full">
@@ -188,12 +190,15 @@ export default {
         "
         :richtext="!textAreaChannels"
       />
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2 mt-4">
         <div class="w-full">
-          <woot-submit-button
-            :loading="uiFlags.isCreating"
+          <NextButton
+            type="submit"
+            :is-loading="uiFlags.isCreating"
             :disabled="!channelWebsiteUrl || !inboxName"
-            :button-text="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
+            solid
+            blue
+            :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
           />
         </div>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
index d361e0f78..68a9d8bcd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -21,13 +21,13 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
     />
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label>
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
         <select v-model="provider">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
index dc62a49ad..dcde3be96 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
@@ -5,10 +5,12 @@ import { useAlert } from 'dashboard/composables';
 import { required, email } from '@vuelidate/validators';
 import router from '../../../../../index';
 import PageHeader from '../../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -69,14 +71,17 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
     />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <form
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
@@ -93,7 +98,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0 mb-4">
         <label :class="{ error: v$.email.$error }">
           {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
           <input
@@ -102,16 +107,19 @@ export default {
             :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
             @blur="v$.email.$touch"
           />
+          <p class="help-text">
+            {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
+          </p>
         </label>
-        <p class="help-text">
-          {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
-        </p>
       </div>
 
-      <div class="w-full">
-        <woot-submit-button
-          :loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
+      <div class="w-full mt-4">
+        <NextButton
+          :is-loading="uiFlags.isCreating"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
         />
       </div>
     </form>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
index fce007ca0..eb109c6f2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
@@ -4,6 +4,7 @@ import { ref, computed } from 'vue';
 import microsoftClient from 'dashboard/api/channel/microsoftClient';
 import googleClient from 'dashboard/api/channel/googleClient';
 import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 import { useAlert } from 'dashboard/composables';
 
@@ -67,7 +68,7 @@ async function requestAuthorization() {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <SettingsSubPageHeader
       :header-title="title"
@@ -79,11 +80,12 @@ async function requestAuthorization() {
         type="email"
         :placeholder="inputPlaceholder"
       />
-      <woot-submit-button
-        icon="brand-twitter"
+      <NextButton
+        :is-loading="isRequestingAuthorization"
         type="submit"
-        :button-text="submitButtonText"
-        :loading="isRequestingAuthorization"
+        solid
+        blue
+        :label="submitButtonText"
       />
     </form>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
index e662d3f72..6cd318d9b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     LoadingState,
     SettingsSection,
+    NextButton,
   },
   props: {
     inbox: {
@@ -83,7 +85,7 @@ export default {
         :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
         :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
       >
-        <div class="w-3/5">
+        <div>
           <label>
             <select v-model="selectedAgentBotId">
               <option value="" disabled selected>
@@ -98,31 +100,25 @@ export default {
               </option>
             </select>
           </label>
-          <div class="button-container">
-            <woot-submit-button
-              :button-text="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
-              :loading="uiFlags.isSettingAgentBot"
+          <div class="button-container space-x-2">
+            <NextButton
+              type="submit"
+              :label="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
+              :is-loading="uiFlags.isSettingAgentBot"
             />
-            <woot-button
+            <NextButton
               type="button"
               :disabled="!selectedAgentBotId"
-              :loading="uiFlags.isDisconnecting"
-              variant="smooth"
-              color-scheme="alert"
-              class="button--disconnect"
+              :is-loading="uiFlags.isDisconnecting"
+              faded
+              ruby
               @click="disconnectBot"
             >
               {{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
-            </woot-button>
+            </NextButton>
           </div>
         </div>
       </SettingsSection>
     </form>
   </div>
 </template>
-
-<style scoped lang="scss">
-.button--disconnect {
-  @apply ml-2;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
index c4b0b8ed4..ad131afd9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -135,7 +135,7 @@ export default {
 
 <template>
   <div
-    class="day-wrap flex py-2 px-0 min-h-[3rem] box-content border-b border-solid border-slate-50 dark:border-slate-600"
+    class="day-wrap flex py-2 gap-1 items-center px-0 min-h-[3rem] box-content border-b border-solid border-n-weak"
   >
     <div class="checkbox-wrap flex items-center">
       <input
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
index f9e6008d9..ac84065e9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
@@ -1,16 +1,15 @@
 <script setup>
-import Banner from 'dashboard/components/ui/Banner.vue';
+import Banner from 'dashboard/components-next/banner/Banner.vue';
 
 const emit = defineEmits(['reauthorize']);
 </script>
 
 <template>
   <Banner
-    color-scheme="alert"
-    class="justify-start rounded-md"
-    :banner-message="$t('INBOX_MGMT.RECONNECTION_REQUIRED')"
-    :action-button-label="$t('INBOX_MGMT.CLICK_TO_RECONNECT')"
-    has-action-button
-    @primary-action="emit('reauthorize')"
-  />
+    color="ruby"
+    :action-label="$t('INBOX_MGMT.CLICK_TO_RECONNECT')"
+    @action="emit('reauthorize')"
+  >
+    {{ $t('INBOX_MGMT.RECONNECTION_REQUIRED') }}
+  </Banner>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
index 43cc5bedf..758dfa1ff 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -11,6 +11,7 @@ import {
   defaultTimeSlot,
   timeZoneOptions,
 } from '../helpers/businessHour';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const DEFAULT_TIMEZONE = {
   label: 'Pacific Time (US & Canada) (GMT-07:00)',
@@ -21,6 +22,7 @@ export default {
   components: {
     SettingsSection,
     BusinessDay,
+    NextButton,
     WootMessageEditor,
   },
   mixins: [inboxMixin],
@@ -138,19 +140,18 @@ export default {
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
         </p>
         <div v-if="isBusinessHoursEnabled" class="mb-6">
-          <div class="max-w-[37.5rem]">
+          <div>
             <label class="unavailable-input-wrap">
               {{ $t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_LABEL') }}
             </label>
             <div
               v-if="isRichEditorEnabled"
-              class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
+              class="px-4 py-0 mx-0 mt-0 mb-4 rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 bg-n-alpha-black2"
             >
               <WootMessageEditor
                 v-model="unavailableMessage"
                 enable-variables
                 is-format-mode
-                class="message-editor"
                 :min-height="4"
               />
             </div>
@@ -185,9 +186,10 @@ export default {
             @update="data => onSlotUpdate(timeSlot.day, data)"
           />
         </div>
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
-          :loading="uiFlags.isUpdating"
+        <NextButton
+          type="submit"
+          :label="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
+          :is-loading="uiFlags.isUpdating"
           :disabled="hasError"
         />
       </form>
@@ -197,8 +199,6 @@ export default {
 
 <style lang="scss" scoped>
 .timezone-input-wrap {
-  @apply max-w-[37.5rem];
-
   &::v-deep .multiselect {
     @apply mt-2;
   }
@@ -209,8 +209,6 @@ export default {
 }
 
 .unavailable-input-wrap {
-  @apply max-w-[37.5rem];
-
   textarea {
     @apply min-h-[4rem] mt-2;
   }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
index e837c68de..119156700 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -39,12 +39,14 @@ export default {
       component: SettingsContent,
       props: params => {
         const showBackButton = params.name !== 'settings_inbox_list';
+        const fullWidth = params.name === 'settings_inbox_show';
         return {
           headerTitle: 'INBOX_MGMT.HEADER',
           headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
           icon: 'mail-inbox-all',
           newButtonRoutes: ['settings_inbox_list'],
           showBackButton,
+          fullWidth,
         };
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
index 518c0c800..8f72894c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -5,10 +5,12 @@ import { minValue } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import { useConfig } from 'dashboard/composables/useConfig';
 import SettingsSection from '../../../../../components/SettingsSection.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     SettingsSection,
+    NextButton,
   },
   props: {
     inbox: {
@@ -139,9 +141,9 @@ export default {
         @select="v$.selectedAgents.$touch"
       />
 
-      <woot-submit-button
-        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :loading="isAgentListUpdating"
+      <NextButton
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        :is-loading="isAgentListUpdating"
         @click="updateAgents"
       />
     </SettingsSection>
@@ -163,7 +165,7 @@ export default {
           </label>
         </div>
 
-        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+        <p class="pb-1 text-sm not-italic text-n-slate-11">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
         </p>
       </label>
@@ -181,12 +183,12 @@ export default {
           @blur="v$.maxAssignmentLimit.$touch"
         />
 
-        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+        <p class="pb-1 text-sm not-italic text-n-slate-11">
           {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
         </p>
 
-        <woot-submit-button
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        <NextButton
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
           :disabled="v$.maxAssignmentLimit.$invalid"
           @click="updateInbox"
         />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
index 10213560b..bc5355c3c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -6,12 +6,14 @@ import ImapSettings from '../ImapSettings.vue';
 import SmtpSettings from '../SmtpSettings.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     SettingsSection,
     ImapSettings,
     SmtpSettings,
+    NextButton,
   },
   mixins: [inboxMixin],
   props: {
@@ -225,12 +227,12 @@ export default {
               )
             "
           />
-          <woot-button
+          <NextButton
             :disabled="v$.whatsAppInboxAPIKey.$invalid"
             @click="updateWhatsAppInboxAPIKey"
           >
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
-          </woot-button>
+          </NextButton>
         </div>
       </SettingsSection>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
index 1a95cacba..35520b93c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
@@ -12,15 +12,18 @@ defineEmits(['edit', 'delete']);
 <template>
   <tr class="max-w-full py-1">
     <td
-      class="py-4 pr-4 text-sm w-40 max-w-[10rem] truncate"
+      class="py-4 ltr:pr-4 rtl:pl-4 text-sm w-40 max-w-[10rem] truncate"
       :title="app.title"
     >
       {{ app.title }}
     </td>
-    <td class="max-w-lg py-4 pr-4 text-sm truncate" :title="app.content[0].url">
+    <td
+      class="max-w-lg py-4 ltr:pr-4 rtl:pl-4 text-sm truncate"
+      :title="app.content[0].url"
+    >
       {{ app.content[0].url }}
     </td>
-    <td class="flex gap-1 py-4 pr-4 text-sm sm:pr-0 justify-end">
+    <td class="flex gap-1 py-4 ltr:pr-4 rtl:pl-4 text-sm sm:pr-0 justify-end">
       <woot-button
         v-tooltip.top="
           $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.EDIT_TOOLTIP')
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
index 19b8e01a3..930cc78fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -121,7 +121,7 @@ export default {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+            class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
           >
             {{ thHeader }}
           </th>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index aeb7c0df4..bf3974a68 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -2,9 +2,11 @@
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { frontendURL } from '../../../../helper/URLHelper';
 import { useAlert } from 'dashboard/composables';
 import { useInstallationName } from 'shared/mixins/globalConfigMixin';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   integrationId: {
@@ -19,6 +21,7 @@ const props = defineProps({
   deleteConfirmationText: { type: Object, default: () => ({}) },
 });
 
+const { t } = useI18n();
 const store = useStore();
 const router = useRouter();
 
@@ -38,9 +41,9 @@ const closeDeletePopup = () => {
 const deleteIntegration = async () => {
   try {
     await store.dispatch('integrations/deleteIntegration', props.integrationId);
-    useAlert('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE');
+    useAlert(t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
   } catch (error) {
-    useAlert('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE');
+    useAlert(t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE'));
   }
 };
 
@@ -90,26 +93,28 @@ const confirmDeletion = () => {
       >
         <div v-if="integrationEnabled">
           <div v-if="integrationAction === 'disconnect'">
-            <div @click="openDeletePopup">
-              <woot-submit-button
-                :button-text="
-                  actionButtonText ||
-                  $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
-                "
-                button-class="smooth alert"
-              />
-            </div>
+            <NextButton
+              :label="
+                actionButtonText ||
+                $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
+              "
+              faded
+              ruby
+              @click="openDeletePopup"
+            />
           </div>
           <div v-else>
-            <button class="button nice">
+            <NextButton faded blue>
               {{ $t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE') }}
-            </button>
+            </NextButton>
           </div>
         </div>
       </router-link>
       <div v-if="!integrationEnabled">
-        <a :href="integrationAction" class="rounded button success nice">
-          {{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
+        <a :href="integrationAction">
+          <NextButton faded blue>
+            {{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
+          </NextButton>
         </a>
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
index c1c02de5e..ab62b9e7b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -119,7 +119,7 @@ export default {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right last:pr-4"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11 last:text-right last:pr-4"
           >
             {{ thHeader }}
           </th>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
index db35cf5d6..7bd918b77 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
@@ -121,7 +121,7 @@ export default {
         @reset-action="resetNode"
       />
     </div>
-    <div class="w-full md:w-1/3">
+    <div class="w-full md:w-1/3 pb-4">
       <MacroProperties
         :macro-name="macro.name"
         :macro-visibility="macro.visibility"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index 3682c14a7..e1fc2d2e7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -3,6 +3,7 @@ import { computed, inject, defineModel } from 'vue';
 import { useMacros } from 'dashboard/composables/useMacros';
 import { useI18n } from 'vue-i18n';
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   singleNode: {
@@ -53,21 +54,21 @@ const dropdownValues = () => {
 </script>
 
 <template>
-  <div class="relative flex items-center w-full min-w-0 basis-full">
-    <woot-button
+  <div class="relative flex items-start w-full min-w-0 basis-full">
+    <NextButton
       v-if="!singleNode"
-      size="small"
-      variant="clear"
-      color-scheme="secondary"
-      icon="navigation"
-      class="absolute cursor-move -left-8 macros__node-drag-handle"
+      ghost
+      sm
+      slate
+      icon="i-lucide-menu"
+      class="absolute cursor-move -left-10 mr-2 macros__node-drag-handle"
     />
     <div
-      class="flex-grow p-2 mr-2 rounded-md shadow-sm"
+      class="flex-grow p-2 mr-2 rounded-md shadow-sm outline outline-1 outline-n-weak"
       :class="
         errorKey
-          ? 'bg-red-50 animate-shake dark:bg-red-800'
-          : 'bg-n-slate-2 dark:bg-n-solid-3'
+          ? 'animate-shake bg-n-ruby-8/20 outline-n-ruby-5 dark:outline-n-ruby-5'
+          : 'bg-n-background dark:bg-n-solid-1'
       "
     >
       <ActionInput
@@ -82,13 +83,13 @@ const dropdownValues = () => {
         @reset-action="$emit('resetAction')"
       />
     </div>
-    <woot-button
+    <NextButton
       v-if="!singleNode"
       v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
-      icon="delete"
-      size="small"
-      variant="smooth"
-      color-scheme="alert"
+      icon="i-lucide-trash-2"
+      sm
+      faded
+      ruby
       class="flex-shrink-0"
       @click="$emit('deleteNode')"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index 91a201050..855aae9d3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -1,12 +1,14 @@
 <script>
 import Draggable from 'vuedraggable';
 import MacroNode from './MacroNode.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { getFileName } from './macroHelper';
 
 export default {
   components: {
     Draggable,
     MacroNode,
+    NextButton,
   },
   props: {
     errors: {
@@ -45,10 +47,11 @@ export default {
   <div class="macros__nodes">
     <div class="macro__node">
       <div>
-        <woot-label
-          :title="$t('MACROS.EDITOR.START_FLOW')"
-          color-scheme="primary"
-        />
+        <span
+          class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
+        >
+          {{ $t('MACROS.EDITOR.START_FLOW') }}
+        </span>
       </div>
     </div>
     <Draggable
@@ -84,24 +87,25 @@ export default {
     </Draggable>
     <div class="macro__node">
       <div>
-        <woot-button
+        <NextButton
           :title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
-          class="macros__action-button"
-          color-scheme="success"
-          variant="smooth"
-          icon="add-circle"
+          class="shadow-sm"
+          solid
+          teal
+          icon="i-lucide-plus-circle"
           @click="$emit('addNewNode')"
         >
           {{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
-        </woot-button>
+        </NextButton>
       </div>
     </div>
     <div class="macro__node">
       <div>
-        <woot-label
-          :title="$t('MACROS.EDITOR.END_FLOW')"
-          color-scheme="primary"
-        />
+        <span
+          class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
+        >
+          {{ $t('MACROS.EDITOR.END_FLOW') }}
+        </span>
       </div>
     </div>
   </div>
@@ -133,10 +137,6 @@ export default {
   padding-bottom: var(--space-large);
 }
 
-.macros__action-button {
-  box-shadow: var(--shadow);
-}
-
 .macros__node-action-container {
   position: relative;
   .drag-handle {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index 4fde45403..657bfcea9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   inject: ['v$'],
   props: {
     macroName: {
@@ -29,7 +34,9 @@ export default {
 </script>
 
 <template>
-  <div class="p-3 bg-n-background h-full flex flex-col">
+  <div
+    class="p-4 bg-n-solid-2 border border-n-weak rounded-lg shadow-sm h-full flex flex-col"
+  >
     <div>
       <woot-input
         :model-value="macroName"
@@ -100,14 +107,9 @@ export default {
       </div>
     </div>
     <div class="mt-auto w-full">
-      <woot-button
-        size="expanded"
-        color-scheme="success"
-        class="w-full"
-        @click="$emit('submit')"
-      >
+      <NextButton blue solid class="w-full" @click="$emit('submit')">
         {{ $t('MACROS.HEADER_BTN_TXT_SAVE') }}
-      </woot-button>
+      </NextButton>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index 5950edfd9..c1d805081 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -165,179 +165,176 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col md:flex-row">
-    <div class="flex flex-col items-center w-full md:flex-row">
-      <div
-        v-if="type === 'agent'"
-        class="md:w-[240px] w-full multiselect-wrap--small"
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-y-0.5 gap-x-2">
+    <div v-if="type === 'agent'" class="multiselect-wrap--small">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
+      </p>
+      <multiselect
+        v-model="currentSelectedFilter"
+        :placeholder="multiselectLabel"
+        label="name"
+        track-by="id"
+        :options="filterItemsList"
+        :option-height="24"
+        :show-labels="false"
+        @update:model-value="changeFilterSelection"
       >
-        <p class="mb-2 text-xs font-medium">
-          {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentSelectedFilter"
-          :placeholder="multiselectLabel"
-          label="name"
-          track-by="id"
-          :options="filterItemsList"
-          :option-height="24"
-          :show-labels="false"
-          @update:model-value="changeFilterSelection"
-        >
-          <template #singleLabel="props">
-            <div class="flex min-w-0 items-center gap-2">
-              <Thumbnail
-                :src="props.option.thumbnail"
-                :status="props.option.availability_status"
-                :username="props.option.name"
-                size="22px"
-              />
-              <span class="my-0 text-slate-800 truncate dark:text-slate-75">{{
-                props.option.name
-              }}</span>
-            </div>
-          </template>
-          <template #options="props">
-            <div class="flex items-center gap-2">
-              <Thumbnail
-                :src="props.option.thumbnail"
-                :status="props.option.availability_status"
-                :username="props.option.name"
-                size="22px"
-              />
-              <p class="my-0 text-slate-800 dark:text-slate-75">
-                {{ props.option.name }}
-              </p>
-            </div>
-          </template>
-        </multiselect>
-      </div>
-      <div
-        v-else-if="type === 'label'"
-        class="md:w-[240px] w-full multiselect-wrap--small"
-      >
-        <p class="mb-2 text-xs font-medium">
-          {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentSelectedFilter"
-          :placeholder="multiselectLabel"
-          label="title"
-          track-by="id"
-          :options="filterItemsList"
-          :option-height="24"
-          :show-labels="false"
-          @update:model-value="changeFilterSelection"
-        >
-          <template #singleLabel="props">
-            <div class="flex items-center min-w-0 gap-2">
-              <div
-                :style="{ backgroundColor: props.option.color }"
-                class="w-5 h-5 rounded-full"
-              />
-
-              <span class="my-0 text-slate-800 truncate dark:text-slate-75">
-                {{ props.option.title }}
-              </span>
-            </div>
-          </template>
-          <template #option="props">
-            <div class="flex items-center min-w-0 gap-2">
-              <div
-                :style="{ backgroundColor: props.option.color }"
-                class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
-              />
-
-              <span class="my-0 text-slate-800 truncate dark:text-slate-75">
-                {{ props.option.title }}
-              </span>
-            </div>
-          </template>
-        </multiselect>
-      </div>
-      <div v-else class="md:w-[240px] w-full multiselect-wrap--small">
-        <p class="mb-2 text-xs font-medium">
-          <template v-if="type === 'inbox'">
-            {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
-          </template>
-          <template v-else-if="type === 'team'">
-            {{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
-          </template>
-          <!-- handle default condition because the prop is not limited to the given 4 values -->
-          <template v-else>
-            {{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
-          </template>
-        </p>
-        <multiselect
-          v-model="currentSelectedFilter"
-          track-by="id"
-          label="name"
-          :placeholder="multiselectLabel"
-          selected-label
-          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-          deselect-label=""
-          :options="filterItemsList"
-          :searchable="false"
-          :allow-empty="false"
-          @update:model-value="changeFilterSelection"
-        />
-      </div>
-      <div class="mx-1 md:w-[240px] w-full multiselect-wrap--small">
-        <p class="mb-2 text-xs font-medium">
-          {{ $t('REPORT.DURATION_FILTER_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentDateRangeSelection"
-          track-by="name"
-          label="name"
-          :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-          selected-label
-          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-          deselect-label=""
-          :options="dateRange"
-          :searchable="false"
-          :allow-empty="false"
-          @select="changeDateSelection"
-        />
-      </div>
-      <div v-if="isDateRangeSelected" class="">
-        <p class="mb-2 text-xs font-medium">
-          {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
-        </p>
-        <WootDateRangePicker
-          show-range
-          :value="customDateRange"
-          :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-          :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-          @change="onChange"
-        />
-      </div>
-      <div
-        v-if="notLast7Days"
-        class="mx-1 md:w-[240px] w-full multiselect-wrap--small"
-      >
-        <p class="mb-2 text-xs font-medium">
-          {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
-        </p>
-        <multiselect
-          v-model="currentSelectedGroupByFilter"
-          track-by="id"
-          label="groupBy"
-          :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
-          :options="groupByFilterItemsList"
-          :allow-empty="false"
-          :show-labels="false"
-          @update:model-value="changeGroupByFilterSelection"
-        />
-      </div>
+        <template #singleLabel="props">
+          <div class="flex min-w-0 items-center gap-2">
+            <Thumbnail
+              :src="props.option.thumbnail"
+              :status="props.option.availability_status"
+              :username="props.option.name"
+              size="22px"
+            />
+            <span class="my-0 text-slate-800 truncate dark:text-slate-75">{{
+              props.option.name
+            }}</span>
+          </div>
+        </template>
+        <template #options="props">
+          <div class="flex items-center gap-2">
+            <Thumbnail
+              :src="props.option.thumbnail"
+              :status="props.option.availability_status"
+              :username="props.option.name"
+              size="22px"
+            />
+            <p class="my-0 text-slate-800 dark:text-slate-75">
+              {{ props.option.name }}
+            </p>
+          </div>
+        </template>
+      </multiselect>
     </div>
-    <div class="flex items-center my-2">
-      <span class="mx-2 text-sm whitespace-nowrap">
+
+    <div v-else-if="type === 'label'" class="multiselect-wrap--small">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
+      </p>
+      <multiselect
+        v-model="currentSelectedFilter"
+        :placeholder="multiselectLabel"
+        label="title"
+        track-by="id"
+        :options="filterItemsList"
+        :option-height="24"
+        :show-labels="false"
+        @update:model-value="changeFilterSelection"
+      >
+        <template #singleLabel="props">
+          <div class="flex items-center min-w-0 gap-2">
+            <div
+              :style="{ backgroundColor: props.option.color }"
+              class="w-5 h-5 rounded-full"
+            />
+
+            <span class="my-0 text-slate-800 truncate dark:text-slate-75">
+              {{ props.option.title }}
+            </span>
+          </div>
+        </template>
+        <template #option="props">
+          <div class="flex items-center min-w-0 gap-2">
+            <div
+              :style="{ backgroundColor: props.option.color }"
+              class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
+            />
+
+            <span class="my-0 text-slate-800 truncate dark:text-slate-75">
+              {{ props.option.title }}
+            </span>
+          </div>
+        </template>
+      </multiselect>
+    </div>
+
+    <div v-else class="multiselect-wrap--small">
+      <p class="mb-2 text-xs font-medium">
+        <template v-if="type === 'inbox'">
+          {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
+        </template>
+        <template v-else-if="type === 'team'">
+          {{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
+        </template>
+        <template v-else>
+          {{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
+        </template>
+      </p>
+      <multiselect
+        v-model="currentSelectedFilter"
+        track-by="id"
+        label="name"
+        :placeholder="multiselectLabel"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        deselect-label=""
+        :options="filterItemsList"
+        :searchable="false"
+        :allow-empty="false"
+        @update:model-value="changeFilterSelection"
+      />
+    </div>
+
+    <div class="multiselect-wrap--small">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('REPORT.DURATION_FILTER_LABEL') }}
+      </p>
+      <multiselect
+        v-model="currentDateRangeSelection"
+        track-by="name"
+        label="name"
+        :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        deselect-label=""
+        :options="dateRange"
+        :searchable="false"
+        :allow-empty="false"
+        @select="changeDateSelection"
+      />
+    </div>
+
+    <div
+      class="flex items-center h-10 self-center order-5 md:order-2 md:justify-self-end"
+    >
+      <span class="mr-2 text-sm whitespace-nowrap">
         {{ $t('REPORT.BUSINESS_HOURS') }}
       </span>
       <span>
         <woot-switch v-model="businessHoursSelected" />
       </span>
     </div>
+
+    <div v-if="isDateRangeSelected" class="order-3 md:order-4">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
+      </p>
+      <WootDateRangePicker
+        show-range
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        class="auto-width"
+        @change="onChange"
+      />
+    </div>
+
+    <div v-if="notLast7Days" class="multiselect-wrap--small order-4 md:order-5">
+      <p class="mb-2 text-xs font-medium">
+        {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+      </p>
+      <multiselect
+        v-model="currentSelectedGroupByFilter"
+        track-by="id"
+        label="groupBy"
+        :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+        :options="groupByFilterItemsList"
+        :allow-empty="false"
+        :show-labels="false"
+        @update:model-value="changeGroupByFilterSelection"
+      />
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
index eda443c0e..dc9941246 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
@@ -63,7 +63,7 @@
 
     .mx-datepicker {
       .mx-input {
-        @apply bg-n-alpha-3;
+        background-color: transparent !important;
       }
 
       .mx-input-wrapper input::placeholder {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index 9df7582b6..eba59b6b8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -196,7 +196,7 @@ export default {
       />
 
       <div
-        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
+        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-n-strong px-3 py-1.5 rounded-xl justify-between"
       >
         <span for="sla_bh" class="text-slate-700 dark:text-slate-200">
           {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
index d7532d9bf..3eb2392fd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
@@ -104,7 +104,7 @@ export default {
     <div class="mt-7">
       <select
         v-model="thresholdUnitValue"
-        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
+        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 rounded-xl hover:cursor-pointer pr-7"
         @change="onThresholdUnitChange"
       >
         <option
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
index a81eed361..b972ecb6c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
@@ -22,7 +22,7 @@ defineEmits(['add']);
       <woot-button
         color-scheme="primary"
         icon="plus-sign"
-        class="rounded-xl"
+        class="rounded-md"
         @click="$emit('add')"
       >
         {{ $t('SLA.ADD_ACTION') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
index 52e235c48..dac3be031 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
@@ -38,7 +38,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
index c22ab0ed4..0358b9f3b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -104,7 +104,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 overflow-x-auto dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
   >
     <form
       class="flex flex-wrap mx-0 overflow-x-auto"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
index ebe1e9c96..7b33f246e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
@@ -58,7 +58,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-slate-25 dark:border-slate-800/60 bg-n-background h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
index b68652314..b8f7802be 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
@@ -10,7 +10,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
   >
     <EmptyState
       :title="$t('TEAMS_SETTINGS.FINISH.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index 0dd4816d8..179b8b068 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -104,7 +104,7 @@ const confirmPlaceHolderText = computed(() =>
       >
         <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
           <tr v-for="team in teamsList" :key="team.id">
-            <td class="py-4 pr-4">
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
               <span class="block font-medium capitalize">{{ team.name }}</span>
               <p class="mb-0">{{ team.description }}</p>
             </td>
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index 4d43119dc..a94b4caef 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -19,16 +19,15 @@ const greetingsMessage = computed({
 </script>
 
 <template>
-  <section class="w-3/4">
+  <section>
     <div
       v-if="richtext"
-      class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
+      class="px-4 py-0 mx-0 mt-0 mb-4 rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 bg-n-alpha-black2"
     >
       <WootMessageEditor
         v-model="greetingsMessage"
         is-format-mode
         enable-variables
-        class="bg-white input dark:bg-slate-900"
         :placeholder="placeholder"
         :min-height="4"
       />
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 37e2b41ff..3c066e691 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -3,6 +3,7 @@ import { computed, defineEmits } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useToggle } from '@vueuse/core';
 
+import Button from 'dashboard/components-next/button/Button.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
 
@@ -57,41 +58,38 @@ const hasValue = computed(() => {
 <template>
   <OnClickOutside @trigger="onCloseDropdown">
     <div class="relative w-full mb-2" @keyup.esc="onCloseDropdown">
-      <woot-button
-        variant="hollow"
-        color-scheme="secondary"
-        class="w-full px-2 border border-solid !border-n-weak dark:!border-n-weak hover:!border-n-strong dark:hover:!border-n-strong"
+      <Button
+        slate
+        outline
+        trailing-icon
+        :icon="
+          showSearchDropdown ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
+        "
+        class="w-full !px-2"
         @click="
           () => toggleDropdown() // ensure that the event is not passed to the button
         "
       >
-        <div class="flex gap-1">
-          <Thumbnail
-            v-if="hasValue && hasThumbnail"
-            :src="selectedItem.thumbnail"
-            size="24px"
-            :status="selectedItem.availability_status"
-            :username="selectedItem.name"
-          />
-          <div class="flex items-center justify-between w-full min-w-0">
-            <h4 v-if="!hasValue" class="text-sm text-ellipsis text-n-slate-12">
-              {{ multiselectorPlaceholder }}
-            </h4>
-            <h4
-              v-else
-              class="items-center overflow-hidden text-sm leading-tight whitespace-nowrap text-ellipsis text-n-slate-12"
-              :title="selectedItem.name"
-            >
-              {{ selectedItem.name }}
-            </h4>
-            <i
-              v-if="showSearchDropdown"
-              class="mr-1 icon i-lucide-chevron-up text-n-slate-10"
-            />
-            <i v-else class="mr-1 icon i-lucide-chevron-down text-n-slate-10" />
-          </div>
+        <div class="flex items-center justify-between w-full min-w-0">
+          <h4 v-if="!hasValue" class="text-sm text-ellipsis text-n-slate-12">
+            {{ multiselectorPlaceholder }}
+          </h4>
+          <h4
+            v-else
+            class="items-center overflow-hidden text-sm leading-tight whitespace-nowrap text-ellipsis text-n-slate-12"
+            :title="selectedItem.name"
+          >
+            {{ selectedItem.name }}
+          </h4>
         </div>
-      </woot-button>
+        <Thumbnail
+          v-if="hasValue && hasThumbnail"
+          :src="selectedItem.thumbnail"
+          size="24px"
+          :status="selectedItem.availability_status"
+          :username="selectedItem.name"
+        />
+      </Button>
       <div
         :class="{ 'dropdown-pane--open': showSearchDropdown }"
         class="dropdown-pane"
@@ -102,13 +100,7 @@ const hasValue = computed(() => {
           >
             {{ multiselectorTitle }}
           </h4>
-          <woot-button
-            icon="dismiss"
-            size="tiny"
-            color-scheme="secondary"
-            variant="clear"
-            @click="onCloseDropdown"
-          />
+          <Button ghost slate xs icon="i-lucide-x" @click="onCloseDropdown" />
         </div>
         <MultiselectDropdownItems
           v-if="showSearchDropdown"
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index ef1d5d8b2..20f9cf05d 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -2,12 +2,14 @@
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     WootDropdownItem,
     WootDropdownMenu,
     Thumbnail,
+    NextButton,
   },
 
   props: {
@@ -85,37 +87,33 @@ export default {
       <div class="w-full max-h-[10rem]">
         <WootDropdownMenu>
           <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
-            <woot-button
-              class="multiselect-dropdown--item"
-              :variant="isActive(option) ? 'hollow' : 'clear'"
-              color-scheme="secondary"
-              :class="{
-                active: isActive(option),
-              }"
+            <NextButton
+              slate
+              :variant="isActive(option) ? 'faded' : 'ghost'"
+              trailing-icon
+              :icon="isActive(option) ? 'i-lucide-check' : ''"
+              class="w-full !px-2.5"
               @click="() => onclick(option)"
             >
-              <div class="flex items-center gap-1.5">
-                <Thumbnail
-                  v-if="hasThumbnail"
-                  :src="option.thumbnail"
-                  size="24px"
-                  :username="option.name"
-                  :status="option.availability_status"
-                  has-border
-                />
-                <div
-                  class="flex items-center justify-between w-full min-w-0 gap-2"
+              <div
+                class="flex items-center justify-between w-full min-w-0 gap-2"
+              >
+                <span
+                  class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
+                  :title="option.name"
                 >
-                  <span
-                    class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
-                    :title="option.name"
-                  >
-                    {{ option.name }}
-                  </span>
-                  <fluent-icon v-if="isActive(option)" icon="checkmark" />
-                </div>
+                  {{ option.name }}
+                </span>
               </div>
-            </woot-button>
+              <Thumbnail
+                v-if="hasThumbnail"
+                :src="option.thumbnail"
+                size="24px"
+                :username="option.name"
+                :status="option.availability_status"
+                has-border
+              />
+            </NextButton>
           </WootDropdownItem>
         </WootDropdownMenu>
         <h4
diff --git a/app/javascript/shared/components/ui/label/LabelDropdown.vue b/app/javascript/shared/components/ui/label/LabelDropdown.vue
index c07b3a10e..16233d34a 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdown.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdown.vue
@@ -135,7 +135,7 @@ export default {
     <div
       class="flex items-start justify-start flex-auto flex-grow flex-shrink overflow-auto"
     >
-      <div class="w-full">
+      <div class="w-full my-1">
         <woot-dropdown-menu>
           <LabelDropdownItem
             v-for="label in filteredActiveLabels"
diff --git a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
index 409925e8d..333ba793f 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdownItem.vue
@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     title: {
       type: String,
@@ -26,60 +31,29 @@ export default {
 
 <template>
   <woot-dropdown-item>
-    <div class="item-wrap">
-      <woot-button variant="clear" @click="onClick">
-        <div class="button-wrap">
-          <div class="name-label-wrap">
-            <div
-              v-if="color"
-              class="label-color--display"
-              :style="{ backgroundColor: color }"
-            />
-            <span class="label-text" :title="title">{{ title }}</span>
-          </div>
-          <div>
-            <i v-if="selected" class="i-lucide-circle-check" />
-          </div>
-        </div>
-      </woot-button>
-    </div>
+    <NextButton
+      slate
+      ghost
+      blue
+      trailing-icon
+      :icon="selected ? 'i-lucide-circle-check' : ''"
+      class="w-full !px-2.5 justify-between"
+      :class="{ '!flex-row': !selected }"
+      @click="onClick"
+    >
+      <div class="flex items-center min-w-0 gap-2">
+        <div
+          v-if="color"
+          class="size-3 flex-shrink-0 rounded-full outline outline-1 outline-n-weak"
+          :style="{ backgroundColor: color }"
+        />
+        <span
+          class="overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1]"
+          :title="title"
+        >
+          {{ title }}
+        </span>
+      </div>
+    </NextButton>
   </woot-dropdown-item>
 </template>
-
-<style lang="scss" scoped>
-.item-wrap {
-  @apply flex;
-
-  ::v-deep .button__content {
-    @apply w-full;
-  }
-
-  .button-wrap {
-    @apply flex justify-between w-full;
-
-    &.active {
-      @apply flex font-semibold text-woot-700 dark:text-woot-600;
-    }
-
-    .name-label-wrap {
-      @apply flex min-w-0 w-full;
-
-      .label-color--display {
-        @apply mr-2 rtl:mr-0 rtl:ml-2;
-      }
-
-      .label-text {
-        @apply overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1] pr-2;
-      }
-
-      .icon {
-        @apply text-sm;
-      }
-    }
-  }
-
-  .label-color--display {
-    @apply rounded-md h-3 mr-1 rtl:mr-0 rtl:ml-1 mt-0.5 min-w-[0.75rem] w-3 border border-solid border-slate-50 dark:border-slate-600;
-  }
-}
-</style>
diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index 1fccd6d16..737801603 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -51,11 +51,9 @@ const model = defineModel({
     <input
       v-bind="$attrs"
       v-model="model"
-      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-1 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
+      type="text"
       :class="{
-        'focus:outline-red-600 outline-red-600': hasError,
-        'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
-          !hasError,
+        error: hasError,
         'px-3 py-3': spacing === 'base',
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,
diff --git a/app/javascript/v3/components/Form/WithLabel.vue b/app/javascript/v3/components/Form/WithLabel.vue
index 68840604b..9008479d9 100644
--- a/app/javascript/v3/components/Form/WithLabel.vue
+++ b/app/javascript/v3/components/Form/WithLabel.vue
@@ -50,7 +50,7 @@ export default {
       </div>
       <span
         v-if="errorMessage && hasError"
-        class="text-xs text-red-400 leading-2"
+        class="text-xs text-n-ruby-9 dark:text-n-ruby-9 leading-2"
       >
         {{ errorMessage }}
       </span>

From e2e4da8b1ee76a2389423486b98afc376edbfea6 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 18 Mar 2025 20:14:19 -0700
Subject: [PATCH 12/16] chore: Ignore notification when assignee is nil
 (#11105)

The issue was that when a team change results in an assignee being set
to nil, the system was still trying to create a notification about the
assignment change, but there was no assignee to notify, causing
potential issues in the notification system.
---
 app/listeners/notification_listener.rb       |  6 +++++
 spec/listeners/notification_listener_spec.rb | 24 ++++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/app/listeners/notification_listener.rb b/app/listeners/notification_listener.rb
index 666bc4d13..461f1c211 100644
--- a/app/listeners/notification_listener.rb
+++ b/app/listeners/notification_listener.rb
@@ -30,6 +30,12 @@ class NotificationListener < BaseListener
   def assignee_changed(event)
     conversation, account = extract_conversation_and_account(event)
     assignee = conversation.assignee
+
+    # NOTE:  The issue was that when a team change results in an assignee being set to nil,
+    # the system was still trying to create a notification about the assignment change,
+    # but there was no assignee to notify, causing potential issues in the notification system.
+    # We need to debug this properly, but for now no need to pollute the jobs
+    return if assignee.blank?
     return if event.data[:notifiable_assignee_change].blank?
     return if conversation.pending?
 
diff --git a/spec/listeners/notification_listener_spec.rb b/spec/listeners/notification_listener_spec.rb
index 2291c401a..76e458b8e 100644
--- a/spec/listeners/notification_listener_spec.rb
+++ b/spec/listeners/notification_listener_spec.rb
@@ -200,4 +200,28 @@ describe NotificationListener do
       end
     end
   end
+
+  describe 'assignee_changed' do
+    let(:event_name) { :'conversation.assignee_changed' }
+
+    context 'when notifiable_assignee_change is true but assignee is nil' do
+      it 'does not create a notification' do
+        conversation_with_nil_assignee = create(:conversation, account: account, inbox: inbox, assignee: nil)
+
+        notification_builder_mock = instance_double(NotificationBuilder)
+        allow(NotificationBuilder).to receive(:new).and_return(notification_builder_mock)
+
+        event = Events::Base.new(
+          event_name,
+          Time.zone.now,
+          conversation: conversation_with_nil_assignee,
+          data: { notifiable_assignee_change: true }
+        )
+
+        expect(notification_builder_mock).not_to receive(:perform)
+
+        listener.assignee_changed(event)
+      end
+    end
+  end
 end

From 064ab0a7a28537191990fc3a12c3c1f2d6cdb11b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 19 Mar 2025 08:46:37 +0530
Subject: [PATCH 13/16] fix: Update audio player input styles (#11106)

# Pull Request Template

## Description

This PR fixes styling inconsistencies by excluding specific more input
types (range, color, image, hidden) from receiving the default text
input styles.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshots

**Before**
<img width="464" alt="image"
src="https://github.com/user-attachments/assets/6c629600-67d4-41cd-a244-bb45d222d0ca"
/>
<img width="943" alt="image"
src="https://github.com/user-attachments/assets/9037cf52-1791-4680-9b9e-8647c14e2800"
/>



After
<img width="464" alt="image"
src="https://github.com/user-attachments/assets/bf745e33-c58a-4584-8283-855c5ea8fd4e"
/>
<img width="943" alt="image"
src="https://github.com/user-attachments/assets/200e36ee-ab26-48a8-bda4-b69d9ed143f8"
/>




## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 app/javascript/dashboard/assets/scss/widgets/_base.scss         | 2 +-
 .../dashboard/modules/search/components/SearchHeader.vue        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index da3cf2e6d..b2c271173 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -72,7 +72,7 @@ textarea {
   }
 }
 
-$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset']):not(.reset-base):not(.multiselect__input):not(.no-margin)";
+$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.multiselect__input):not(.no-margin)";
 
 #{$form-input-selector} {
   @apply field-base h-10;
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index 9f2302f45..a1c4ac66d 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -70,7 +70,7 @@ onUnmounted(() => {
     <input
       ref="searchInput"
       type="search"
-      class="w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none"
+      class="reset-base outline-none w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none"
       :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
       :value="searchQuery"
       @focus="onFocus"

From 4c26fe5d57a223470a44d7d6026d6ddbdf2b2fbd Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 19 Mar 2025 12:56:23 +0530
Subject: [PATCH 14/16] feat: use gin index for message search (#11107)

This PR updates the search implementation to better utilize the GIN
indexes. The option is toggled behind a feature flag for us to test it
internally before making it available publicly
---
 app/services/search_service.rb       | 66 +++++++++++++++++++++++++---
 config/features.yml                  |  3 ++
 spec/services/search_service_spec.rb | 66 +++++++++++++++++++++++++++-
 3 files changed, 128 insertions(+), 7 deletions(-)

diff --git a/app/services/search_service.rb b/app/services/search_service.rb
index 9c7a6ceef..b44b79107 100644
--- a/app/services/search_service.rb
+++ b/app/services/search_service.rb
@@ -35,12 +35,66 @@ class SearchService
   end
 
   def filter_messages
-    @messages = current_account.messages.where(inbox_id: accessable_inbox_ids)
-                               .where('messages.content ILIKE :search', search: "%#{search_query}%")
-                               .where('created_at >= ?', 3.months.ago)
-                               .reorder('created_at DESC')
-                               .page(params[:page])
-                               .per(15)
+    start_time = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+
+    @messages = if use_gin_search
+                  filter_messages_with_gin
+                else
+                  filter_messages_with_like
+                end
+
+    log_search_performance(start_time)
+    @messages
+  end
+
+  def filter_messages_with_gin
+    base_query = message_base_query
+
+    if search_query.present?
+      # Use the @@ operator with to_tsquery for better GIN index utilization
+      # Convert search query to tsquery format with prefix matching
+
+      # Use this if we wanna match splitting the words
+      # split_query = search_query.split.map { |term| "#{term} | #{term}:*" }.join(' & ')
+
+      # This will do entire sentence matching using phrase distance operator
+      tsquery = search_query.split.join(' <-> ')
+
+      # Apply the text search using the GIN index
+      base_query.where('content @@ to_tsquery(?)', tsquery)
+                .reorder('created_at DESC')
+                .page(params[:page])
+                .per(15)
+    else
+      base_query.reorder('created_at DESC')
+                .page(params[:page])
+                .per(15)
+    end
+  end
+
+  def filter_messages_with_like
+    message_base_query
+      .where('messages.content ILIKE :search', search: "%#{search_query}%")
+      .reorder('created_at DESC')
+      .page(params[:page])
+      .per(15)
+  end
+
+  def message_base_query
+    current_account.messages.where(inbox_id: accessable_inbox_ids)
+                   .where('created_at >= ?', 3.months.ago)
+  end
+
+  def log_search_performance(start_time)
+    end_time = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+    search_type = use_gin_search ? 'GIN' : 'ILIKE'
+    duration_ms = (end_time - start_time) * 1000
+
+    Rails.logger.info "[SearchService][#{current_account.id}] #{search_type} search query time: #{duration_ms}ms for #{search_query}"
+  end
+
+  def use_gin_search
+    current_account.feature_enabled?('search_with_gin')
   end
 
   def filter_contacts
diff --git a/config/features.yml b/config/features.yml
index 0441bea43..dda797fce 100644
--- a/config/features.yml
+++ b/config/features.yml
@@ -154,3 +154,6 @@
   display_name: Contact Chatwoot Support Team
   enabled: true
   chatwoot_internal: true
+- name: search_with_gin
+  display_name: Search messages with GIN
+  enabled: false
diff --git a/spec/services/search_service_spec.rb b/spec/services/search_service_spec.rb
index 5242d893e..af097a2c9 100644
--- a/spec/services/search_service_spec.rb
+++ b/spec/services/search_service_spec.rb
@@ -67,16 +67,61 @@ describe SearchService do
     end
 
     context 'when message search' do
+      let!(:message2) { create(:message, account: account, inbox: inbox, content: 'harry is cool') }
+
       it 'searches across message content and return in created_at desc' do
         # random messages in another account
         create(:message, content: 'Harry Potter is a wizard')
         # random messsage in inbox with out access
         create(:message, account: account, inbox: create(:inbox, account: account), content: 'Harry Potter is a wizard')
-        message2 = create(:message, account: account, inbox: inbox, content: 'harry is cool')
         params = { q: 'Harry' }
         search = described_class.new(current_user: user, current_account: account, params: params, search_type: 'Message')
         expect(search.perform[:messages].map(&:id)).to eq([message2.id, message.id])
       end
+
+      context 'with feature flag for search type' do
+        let(:params) { { q: 'Harry' } }
+        let(:search_type) { 'Message' }
+
+        it 'uses LIKE search when search_with_gin feature is disabled' do
+          allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
+          search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
+
+          expect(search_service).to receive(:filter_messages_with_like).and_call_original
+          expect(search_service).not_to receive(:filter_messages_with_gin)
+
+          search_service.perform
+        end
+
+        it 'uses GIN search when search_with_gin feature is enabled' do
+          allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(true)
+          search_service = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
+
+          expect(search_service).to receive(:filter_messages_with_gin).and_call_original
+          expect(search_service).not_to receive(:filter_messages_with_like)
+
+          search_service.perform
+        end
+
+        it 'returns same results regardless of search type' do
+          # Create test messages
+          message3 = create(:message, account: account, inbox: inbox, content: 'Harry is a wizard apprentice')
+
+          # Test with GIN search
+          allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(true)
+          gin_search = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
+          gin_results = gin_search.perform[:messages].map(&:id)
+
+          # Test with LIKE search
+          allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
+          like_search = described_class.new(current_user: user, current_account: account, params: params, search_type: search_type)
+          like_results = like_search.perform[:messages].map(&:id)
+
+          # Both search types should return the same messages
+          expect(gin_results).to match_array(like_results)
+          expect(gin_results).to include(message.id, message2.id, message3.id)
+        end
+      end
     end
 
     context 'when conversation search' do
@@ -99,4 +144,23 @@ describe SearchService do
       end
     end
   end
+
+  describe '#use_gin_search' do
+    let(:params) { { q: 'test' } }
+
+    it 'checks if the account has the search_with_gin feature enabled' do
+      expect(account).to receive(:feature_enabled?).with('search_with_gin')
+      search.send(:use_gin_search)
+    end
+
+    it 'returns true when search_with_gin feature is enabled' do
+      allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(true)
+      expect(search.send(:use_gin_search)).to be true
+    end
+
+    it 'returns false when search_with_gin feature is disabled' do
+      allow(account).to receive(:feature_enabled?).with('search_with_gin').and_return(false)
+      expect(search.send(:use_gin_search)).to be false
+    end
+  end
 end

From c89a2cd672ff3a7a3709abb74745ada70a1485d5 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 19 Mar 2025 15:19:32 +0530
Subject: [PATCH 15/16] feat: Update auth screens (#11108)

# Pull Request Template

## Description

This PR includes style updates for auth screens

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../dashboard/assets/scss/_next-colors.scss   | 208 +++++++++++++++++
 .../dashboard/assets/scss/_woot.scss          | 209 +-----------------
 .../settings/teams/Create/AddAgents.vue       |   2 +-
 .../settings/teams/Create/CreateTeam.vue      |   2 +-
 .../dashboard/settings/teams/Create/Index.vue |   6 +-
 .../settings/teams/Edit/EditAgents.vue        |   2 +-
 .../settings/teams/Edit/EditTeam.vue          |   2 +-
 .../dashboard/settings/teams/Edit/Index.vue   |   6 +-
 .../dashboard/settings/teams/FinishSetup.vue  |   2 +-
 .../dashboard/settings/teams/TeamForm.vue     |   2 +-
 app/javascript/v3/App.vue                     |   1 +
 .../v3/components/Divider/SimpleDivider.vue   |   6 +-
 app/javascript/v3/components/Form/Input.vue   |  12 +-
 .../v3/components/GoogleOauth/Button.vue      |   4 +-
 .../v3/views/auth/confirmation/Index.vue      |   6 +-
 .../v3/views/auth/password/Edit.vue           |   6 +-
 .../v3/views/auth/reset/password/Index.vue    |  12 +-
 app/javascript/v3/views/auth/signup/Index.vue |  10 +-
 .../Testimonials/TestimonialCard.vue          |   6 +-
 app/javascript/v3/views/login/Index.vue       |  15 +-
 20 files changed, 262 insertions(+), 257 deletions(-)
 create mode 100644 app/javascript/dashboard/assets/scss/_next-colors.scss

diff --git a/app/javascript/dashboard/assets/scss/_next-colors.scss b/app/javascript/dashboard/assets/scss/_next-colors.scss
new file mode 100644
index 000000000..48cfce921
--- /dev/null
+++ b/app/javascript/dashboard/assets/scss/_next-colors.scss
@@ -0,0 +1,208 @@
+// scss-lint:disable PropertySortOrder
+@layer base {
+  // NEXT COLORS START
+  :root {
+    // slate
+    --slate-1: 252 252 253;
+    --slate-2: 249 249 251;
+    --slate-3: 240 240 243;
+    --slate-4: 232 232 236;
+    --slate-5: 224 225 230;
+    --slate-6: 217 217 224;
+    --slate-7: 205 206 214;
+    --slate-8: 185 187 198;
+    --slate-9: 139 141 152;
+    --slate-10: 128 131 141;
+    --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;
+    --ruby-4: 255 220 225;
+    --ruby-5: 255 206 214;
+    --ruby-6: 248 191 200;
+    --ruby-7: 239 172 184;
+    --ruby-8: 229 146 163;
+    --ruby-9: 229 70 102;
+    --ruby-10: 220 59 93;
+    --ruby-11: 202 36 77;
+    --ruby-12: 100 23 43;
+
+    --amber-1: 254 253 251;
+    --amber-2: 254 251 233;
+    --amber-3: 255 247 194;
+    --amber-4: 255 238 156;
+    --amber-5: 251 229 119;
+    --amber-6: 243 214 115;
+    --amber-7: 233 193 98;
+    --amber-8: 226 163 54;
+    --amber-9: 255 197 61;
+    --amber-10: 255 186 24;
+    --amber-11: 171 100 0;
+    --amber-12: 79 52 34;
+
+    --teal-1: 250 254 253;
+    --teal-2: 243 251 249;
+    --teal-3: 224 248 243;
+    --teal-4: 204 243 234;
+    --teal-5: 184 234 224;
+    --teal-6: 161 222 210;
+    --teal-7: 131 205 193;
+    --teal-8: 83 185 171;
+    --teal-9: 18 165 148;
+    --teal-10: 13 155 138;
+    --teal-11: 0 133 115;
+    --teal-12: 13 61 56;
+
+    --gray-1: 252 252 252;
+    --gray-2: 249 249 249;
+    --gray-3: 240 240 240;
+    --gray-4: 232 232 232;
+    --gray-5: 224 224 224;
+    --gray-6: 217 217 217;
+    --gray-7: 206 206 206;
+    --gray-8: 187 187 187;
+    --gray-9: 141 141 141;
+    --gray-10: 131 131 131;
+    --gray-11: 100 100 100;
+    --gray-12: 32 32 32;
+
+    --background-color: 253 253 253;
+    --text-blue: 8 109 224;
+    --border-container: 236 236 236;
+    --border-strong: 235 235 235;
+    --border-weak: 234 234 234;
+    --solid-1: 255 255 255;
+    --solid-2: 255 255 255;
+    --solid-3: 255 255 255;
+    --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;
+    --alpha-3: 255, 255, 255, 0.96;
+    --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.8;
+  }
+
+  .dark {
+    // slate
+    --slate-1: 17 17 19;
+    --slate-2: 24 25 27;
+    --slate-3: 33 34 37;
+    --slate-4: 39 42 45;
+    --slate-5: 46 49 53;
+    --slate-6: 54 58 63;
+    --slate-7: 67 72 78;
+    --slate-8: 90 97 105;
+    --slate-9: 105 110 119;
+    --slate-10: 119 123 132;
+    --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;
+    --ruby-4: 78 19 37;
+    --ruby-5: 94 26 46;
+    --ruby-6: 111 37 57;
+    --ruby-7: 136 52 71;
+    --ruby-8: 179 68 90;
+    --ruby-9: 229 70 102;
+    --ruby-10: 236 90 114;
+    --ruby-11: 255 148 157;
+    --ruby-12: 254 210 225;
+
+    --amber-1: 22 18 12;
+    --amber-2: 29 24 15;
+    --amber-3: 48 32 8;
+    --amber-4: 63 39 0;
+    --amber-5: 77 48 0;
+    --amber-6: 92 61 5;
+    --amber-7: 113 79 25;
+    --amber-8: 143 100 36;
+    --amber-9: 255 197 61;
+    --amber-10: 255 214 10;
+    --amber-11: 255 202 22;
+    --amber-12: 255 231 179;
+
+    --teal-1: 13 21 20;
+    --teal-2: 17 28 27;
+    --teal-3: 13 45 42;
+    --teal-4: 2 59 55;
+    --teal-5: 8 72 67;
+    --teal-6: 20 87 80;
+    --teal-7: 28 105 97;
+    --teal-8: 32 126 115;
+    --teal-9: 18 165 148;
+    --teal-10: 14 179 158;
+    --teal-11: 11 216 182;
+    --teal-12: 173 240 221;
+
+    --gray-1: 17 17 17;
+    --gray-2: 25 25 25;
+    --gray-3: 34 34 34;
+    --gray-4: 42 42 42;
+    --gray-5: 49 49 49;
+    --gray-6: 58 58 58;
+    --gray-7: 72 72 72;
+    --gray-8: 96 96 96;
+    --gray-9: 110 110 110;
+    --gray-10: 123 123 123;
+    --gray-11: 180 180 180;
+    --gray-12: 238 238 238;
+
+    --background-color: 18 18 19;
+    --border-strong: 52 52 52;
+    --border-weak: 38 38 42;
+    --solid-1: 23 23 26;
+    --solid-2: 29 30 36;
+    --solid-3: 44 45 54;
+    --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;
+    --alpha-2: 139, 147, 182, 0.15;
+    --alpha-3: 36, 38, 45, 0.9;
+    --black-alpha-1: 0, 0, 0, 0.3;
+    --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;
+  }
+}
+// NEXT COLORS END
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index f62227d72..004d8bf59 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -5,6 +5,9 @@
 @import 'shared/assets/fonts/InterDisplay/inter-display';
 @import 'shared/assets/fonts/inter';
 
+// Next Colors
+@import 'next-colors';
+
 @import 'shared/assets/stylesheets/animations';
 @import 'shared/assets/stylesheets/colors';
 @import 'shared/assets/stylesheets/spacing';
@@ -67,212 +70,6 @@
 
 // scss-lint:disable PropertySortOrder
 @layer base {
-  /* NEXT COLORS START */
-  :root {
-    /* slate */
-    --slate-1: 252 252 253;
-    --slate-2: 249 249 251;
-    --slate-3: 240 240 243;
-    --slate-4: 232 232 236;
-    --slate-5: 224 225 230;
-    --slate-6: 217 217 224;
-    --slate-7: 205 206 214;
-    --slate-8: 185 187 198;
-    --slate-9: 139 141 152;
-    --slate-10: 128 131 141;
-    --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;
-    --ruby-4: 255 220 225;
-    --ruby-5: 255 206 214;
-    --ruby-6: 248 191 200;
-    --ruby-7: 239 172 184;
-    --ruby-8: 229 146 163;
-    --ruby-9: 229 70 102;
-    --ruby-10: 220 59 93;
-    --ruby-11: 202 36 77;
-    --ruby-12: 100 23 43;
-
-    --amber-1: 254 253 251;
-    --amber-2: 254 251 233;
-    --amber-3: 255 247 194;
-    --amber-4: 255 238 156;
-    --amber-5: 251 229 119;
-    --amber-6: 243 214 115;
-    --amber-7: 233 193 98;
-    --amber-8: 226 163 54;
-    --amber-9: 255 197 61;
-    --amber-10: 255 186 24;
-    --amber-11: 171 100 0;
-    --amber-12: 79 52 34;
-
-    --teal-1: 250 254 253;
-    --teal-2: 243 251 249;
-    --teal-3: 224 248 243;
-    --teal-4: 204 243 234;
-    --teal-5: 184 234 224;
-    --teal-6: 161 222 210;
-    --teal-7: 131 205 193;
-    --teal-8: 83 185 171;
-    --teal-9: 18 165 148;
-    --teal-10: 13 155 138;
-    --teal-11: 0 133 115;
-    --teal-12: 13 61 56;
-
-    --gray-1: 252 252 252;
-    --gray-2: 249 249 249;
-    --gray-3: 240 240 240;
-    --gray-4: 232 232 232;
-    --gray-5: 224 224 224;
-    --gray-6: 217 217 217;
-    --gray-7: 206 206 206;
-    --gray-8: 187 187 187;
-    --gray-9: 141 141 141;
-    --gray-10: 131 131 131;
-    --gray-11: 100 100 100;
-    --gray-12: 32 32 32;
-
-    --background-color: 253 253 253;
-    --text-blue: 8 109 224;
-    --border-container: 236 236 236;
-    --border-strong: 235 235 235;
-    --border-weak: 234 234 234;
-    --solid-1: 255 255 255;
-    --solid-2: 255 255 255;
-    --solid-3: 255 255 255;
-    --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;
-    --alpha-3: 255, 255, 255, 0.96;
-    --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.8;
-  }
-
-  .dark {
-    /* slate */
-    --slate-1: 17 17 19;
-    --slate-2: 24 25 27;
-    --slate-3: 33 34 37;
-    --slate-4: 39 42 45;
-    --slate-5: 46 49 53;
-    --slate-6: 54 58 63;
-    --slate-7: 67 72 78;
-    --slate-8: 90 97 105;
-    --slate-9: 105 110 119;
-    --slate-10: 119 123 132;
-    --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;
-    --ruby-4: 78 19 37;
-    --ruby-5: 94 26 46;
-    --ruby-6: 111 37 57;
-    --ruby-7: 136 52 71;
-    --ruby-8: 179 68 90;
-    --ruby-9: 229 70 102;
-    --ruby-10: 236 90 114;
-    --ruby-11: 255 148 157;
-    --ruby-12: 254 210 225;
-
-    --amber-1: 22 18 12;
-    --amber-2: 29 24 15;
-    --amber-3: 48 32 8;
-    --amber-4: 63 39 0;
-    --amber-5: 77 48 0;
-    --amber-6: 92 61 5;
-    --amber-7: 113 79 25;
-    --amber-8: 143 100 36;
-    --amber-9: 255 197 61;
-    --amber-10: 255 214 10;
-    --amber-11: 255 202 22;
-    --amber-12: 255 231 179;
-
-    --teal-1: 13 21 20;
-    --teal-2: 17 28 27;
-    --teal-3: 13 45 42;
-    --teal-4: 2 59 55;
-    --teal-5: 8 72 67;
-    --teal-6: 20 87 80;
-    --teal-7: 28 105 97;
-    --teal-8: 32 126 115;
-    --teal-9: 18 165 148;
-    --teal-10: 14 179 158;
-    --teal-11: 11 216 182;
-    --teal-12: 173 240 221;
-
-    --gray-1: 17 17 17;
-    --gray-2: 25 25 25;
-    --gray-3: 34 34 34;
-    --gray-4: 42 42 42;
-    --gray-5: 49 49 49;
-    --gray-6: 58 58 58;
-    --gray-7: 72 72 72;
-    --gray-8: 96 96 96;
-    --gray-9: 110 110 110;
-    --gray-10: 123 123 123;
-    --gray-11: 180 180 180;
-    --gray-12: 238 238 238;
-
-    --background-color: 18 18 19;
-    --border-strong: 52 52 52;
-    --border-weak: 38 38 42;
-    --solid-1: 23 23 26;
-    --solid-2: 29 30 36;
-    --solid-3: 44 45 54;
-    --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;
-    --alpha-2: 139, 147, 182, 0.15;
-    --alpha-3: 36, 38, 45, 0.9;
-    --black-alpha-1: 0, 0, 0, 0.3;
-    --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;
-  }
-  /* NEXT COLORS END */
-
   :root {
     --color-amber-25: 254 253 251;
     --color-amber-50: 255 249 237;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
index 5fe7ae531..7f3eb9694 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -89,7 +89,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 overflow-x-auto bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <form
       class="flex flex-wrap mx-0 overflow-x-auto"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
index dac3be031..17cb714e5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
@@ -38,7 +38,7 @@ export default {
 
 <template>
   <div
-    class="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
index 9b94403d3..85f85af94 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -23,10 +23,8 @@ export default {
 </script>
 
 <template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+  <div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full px-5 flex-1">
+    <woot-wizard class="hidden md:block col-span-2" :items="items" />
     <router-view />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
index 0358b9f3b..66df8ea12 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -104,7 +104,7 @@ export default {
 
 <template>
   <div
-    class="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <form
       class="flex flex-wrap mx-0 overflow-x-auto"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
index 7b33f246e..8fc86c4bf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
@@ -58,7 +58,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-n-background h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
index f9fb4a012..613dee401 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -27,10 +27,8 @@ export default {
 </script>
 
 <template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+  <div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full px-5 flex-1">
+    <woot-wizard class="hidden md:block col-span-2" :items="items" />
     <router-view />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
index b8f7802be..0599d208a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
@@ -10,7 +10,7 @@ export default {
 
 <template>
   <div
-    class="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <EmptyState
       :title="$t('TEAMS_SETTINGS.FINISH.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
index e3647f809..b774951d2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
@@ -63,7 +63,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex-shrink-0 w-full max-w-lg">
+  <div class="flex-shrink-0 w-full">
     <form class="mx-0 grid gap-4" @submit.prevent="handleSubmit">
       <FormInput
         v-model="state.title"
diff --git a/app/javascript/v3/App.vue b/app/javascript/v3/App.vue
index 1bf3d561b..718828665 100644
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -49,6 +49,7 @@ export default {
 @tailwind components;
 @tailwind utilities;
 
+@import '../dashboard/assets/scss/next-colors';
 @import 'shared/assets/stylesheets/colors';
 @import 'shared/assets/stylesheets/spacing';
 @import 'shared/assets/stylesheets/font-size';
diff --git a/app/javascript/v3/components/Divider/SimpleDivider.vue b/app/javascript/v3/components/Divider/SimpleDivider.vue
index 9413aeacc..8cc3f0cd6 100644
--- a/app/javascript/v3/components/Divider/SimpleDivider.vue
+++ b/app/javascript/v3/components/Divider/SimpleDivider.vue
@@ -12,12 +12,10 @@ export default {
 <template>
   <div class="relative my-4 section-separator">
     <div class="absolute inset-0 flex items-center" aria-hidden="true">
-      <div class="w-full border-t border-slate-200 dark:border-slate-600" />
+      <div class="w-full border-t border-n-strong" />
     </div>
     <div v-if="label" class="relative flex justify-center text-sm">
-      <span
-        class="bg-white dark:bg-slate-800 px-2 text-slate-500 dark:text-white"
-      >
+      <span class="bg-white dark:bg-n-solid-2 px-2 text-n-slate-10">
         {{ label }}
       </span>
     </div>
diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index 737801603..674b1a59a 100644
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -7,6 +7,10 @@ defineProps({
     type: String,
     required: true,
   },
+  type: {
+    type: String,
+    default: 'text',
+  },
   icon: {
     type: String,
     default: '',
@@ -51,9 +55,13 @@ const model = defineModel({
     <input
       v-bind="$attrs"
       v-model="model"
-      type="text"
+      :type="type"
+      class="block w-full border-none rounded-md shadow-sm bg-n-alpha-black2 appearance-none outline outline-1 focus:outline focus:outline-1 text-n-slate-12 placeholder:text-n-slate-10 sm:text-sm sm:leading-6 px-3 py-3"
       :class="{
-        error: hasError,
+        'error outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8':
+          hasError,
+        'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus:outline-n-brand dark:focus:outline-n-brand':
+          !hasError,
         'px-3 py-3': spacing === 'base',
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,
diff --git a/app/javascript/v3/components/GoogleOauth/Button.vue b/app/javascript/v3/components/GoogleOauth/Button.vue
index cc7070ddc..475ad4841 100644
--- a/app/javascript/v3/components/GoogleOauth/Button.vue
+++ b/app/javascript/v3/components/GoogleOauth/Button.vue
@@ -45,10 +45,10 @@ export default {
   <div class="flex flex-col">
     <a
       :href="getGoogleAuthUrl()"
-      class="inline-flex justify-center w-full px-4 py-3 bg-white rounded-md shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+      class="inline-flex justify-center w-full px-4 py-3 bg-n-background dark:bg-n-solid-3 rounded-md shadow-sm ring-1 ring-inset ring-n-container dark:ring-n-container focus:outline-offset-0 hover:bg-n-alpha-2 dark:hover:bg-n-alpha-2"
     >
       <span class="i-logos-google-icon h-6" />
-      <span class="ml-2 text-base font-medium text-slate-600 dark:text-white">
+      <span class="ml-2 text-base font-medium text-n-slate-12">
         {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
       </span>
     </a>
diff --git a/app/javascript/v3/views/auth/confirmation/Index.vue b/app/javascript/v3/views/auth/confirmation/Index.vue
index 906009883..1c617e79e 100644
--- a/app/javascript/v3/views/auth/confirmation/Index.vue
+++ b/app/javascript/v3/views/auth/confirmation/Index.vue
@@ -30,8 +30,10 @@ export default {
 </script>
 
 <template>
-  <div class="flex items-center justify-center h-full w-full">
+  <div
+    class="flex items-center justify-center min-h-screen h-full bg-n-background w-full"
+  >
     <Spinner color-scheme="primary" size="" />
-    <div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
+    <div class="ml-2 text-n-slate-11">{{ $t('CONFIRM_EMAIL') }}</div>
   </div>
 </template>
diff --git a/app/javascript/v3/views/auth/password/Edit.vue b/app/javascript/v3/views/auth/password/Edit.vue
index 244b8bd6a..34405d76e 100644
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -87,14 +87,14 @@ export default {
 
 <template>
   <div
-    class="flex flex-col justify-center w-full min-h-screen py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
   >
     <form
-      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
       @submit.prevent="submitForm"
     >
       <h1
-        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-n-slate-12"
       >
         {{ $t('SET_NEW_PASSWORD.TITLE') }}
       </h1>
diff --git a/app/javascript/v3/views/auth/reset/password/Index.vue b/app/javascript/v3/views/auth/reset/password/Index.vue
index 876a4af69..a1fecacde 100644
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -68,19 +68,19 @@ export default {
 
 <template>
   <div
-    class="flex flex-col justify-center w-full min-h-screen py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
   >
     <form
-      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
       @submit.prevent="submit"
     >
       <h1
-        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-n-slate-12"
       >
         {{ $t('RESET_PASSWORD.TITLE') }}
       </h1>
       <p
-        class="mb-4 text-sm font-normal leading-6 tracking-normal text-slate-600 dark:text-woot-50"
+        class="mb-4 text-sm font-normal leading-6 tracking-normal text-n-slate-11"
       >
         {{
           useInstallationName(
@@ -104,9 +104,9 @@ export default {
           :loading="resetPassword.showLoading"
         />
       </div>
-      <p class="mt-4 -mb-1 text-sm text-slate-600 dark:text-woot-50">
+      <p class="mt-4 -mb-1 text-sm text-n-slate-11">
         {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
-        <router-link to="/auth/login" class="text-link">
+        <router-link to="/auth/login" class="text-link text-n-brand">
           {{ $t('COMMON.CLICK_HERE') }}.
         </router-link>
       </p>
diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
index da89ac5a3..74783deea 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <template>
-  <div class="w-full h-full dark:bg-slate-900">
+  <div class="w-full h-full bg-n-background">
     <div v-show="!isLoading" class="flex h-full min-h-screen items-center">
       <div
         class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
@@ -52,15 +52,15 @@ export default {
               class="hidden w-auto h-8 dark:block"
             />
             <h2
-              class="mt-6 text-3xl font-medium text-left mb-7 text-slate-900 dark:text-woot-50"
+              class="mt-6 text-3xl font-medium text-left mb-7 text-n-slate-12"
             >
               {{ $t('REGISTER.TRY_WOOT') }}
             </h2>
           </div>
           <SignupForm />
-          <div class="px-1 text-sm text-slate-800 dark:text-woot-50">
+          <div class="px-1 text-sm text-n-slate-12">
             <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
-            <router-link class="text-link" to="/app/login">
+            <router-link class="text-link text-n-brand" to="/app/login">
               {{
                 useInstallationName(
                   $t('LOGIN.TITLE'),
@@ -79,7 +79,7 @@ export default {
     </div>
     <div
       v-show="isLoading"
-      class="flex items-center justify-center w-full h-full"
+      class="flex items-center min-h-screen justify-center w-full h-full"
     >
       <Spinner color-scheme="primary" size="" />
     </div>
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
index c68ce53f5..6ebd8e92c 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
@@ -23,12 +23,12 @@ export default {
 
 <template>
   <div
-    class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
+    class="flex flex-col items-start justify-center p-6 w-80 bg-n-background rounded-lg drop-shadow-md"
   >
-    <p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
+    <p class="text-sm text-n-slate-12 tracking-normal">
       {{ reviewContent }}
     </p>
-    <div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
+    <div class="flex items-center mt-4 text-n-slate-12">
       <div class="bg-white rounded-full p-1">
         <img :src="authorImage" class="h-8 w-8 rounded-full" />
       </div>
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index 3bb2a40ac..7a6fff3a8 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -155,7 +155,7 @@ export default {
 
 <template>
   <main
-    class="flex flex-col w-full min-h-screen py-20 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+    class="flex flex-col w-full min-h-screen py-20 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
   >
     <section class="max-w-5xl mx-auto">
       <img
@@ -169,25 +169,20 @@ export default {
         :alt="globalConfig.installationName"
         class="hidden w-auto h-8 mx-auto dark:block"
       />
-      <h2
-        class="mt-6 text-3xl font-medium text-center text-slate-900 dark:text-woot-50"
-      >
+      <h2 class="mt-6 text-3xl font-medium text-center text-n-slate-12">
         {{
           useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
         }}
       </h2>
-      <p
-        v-if="showSignupLink"
-        class="mt-3 text-sm text-center text-slate-600 dark:text-slate-400"
-      >
+      <p v-if="showSignupLink" class="mt-3 text-sm text-center text-n-slate-11">
         {{ $t('COMMON.OR') }}
-        <router-link to="auth/signup" class="lowercase text-link">
+        <router-link to="auth/signup" class="lowercase text-link text-n-brand">
           {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
         </router-link>
       </p>
     </section>
     <section
-      class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
       :class="{
         'mb-8 mt-15': !showGoogleOAuth,
         'animate-wiggle': loginApi.hasErrored,

From ff9545d03c74db1358158eb033248490aacf6a7b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 19 Mar 2025 16:45:59 +0530
Subject: [PATCH 16/16] feat: Add per-page support for agent and team overview
 report pagination (#11110)

# Pull Request Template

## Description

This PR includes per-page support for table pagination in agent and team
overview reports.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/8c9668fe129c452986d8813a156dd3b8?sid=d637f4fe-ad0c-4f18-ad90-65e50247b3c6

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../dashboard/components/table/Pagination.vue | 183 ++++++++++++------
 .../dashboard/i18n/locale/en/report.json      |   3 +-
 .../components/overview/AgentTable.vue        |  27 ++-
 .../reports/components/overview/TeamTable.vue |  27 ++-
 4 files changed, 177 insertions(+), 63 deletions(-)

diff --git a/app/javascript/dashboard/components/table/Pagination.vue b/app/javascript/dashboard/components/table/Pagination.vue
index 6de3d851c..cea8e0e90 100644
--- a/app/javascript/dashboard/components/table/Pagination.vue
+++ b/app/javascript/dashboard/components/table/Pagination.vue
@@ -1,12 +1,47 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import FilterSelect from 'dashboard/components-next/filter/inputs/FilterSelect.vue';
+
 const props = defineProps({
   table: {
     type: Object,
     required: true,
   },
+  defaultPageSize: {
+    type: Number,
+    default: 10,
+  },
+  showPageSizeSelector: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const emit = defineEmits(['pageSizeChange']);
+const { t } = useI18n();
+
+const pageSizeOptions = [
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 10 })}`,
+    value: 10,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 20 })}`,
+    value: 20,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 50 })}`,
+    value: 50,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 100 })}`,
+    value: 100,
+  },
+];
+
 const getFormattedPages = (start, end) => {
   const formatter = new Intl.NumberFormat(navigator.language);
   return Array.from({ length: end - start + 1 }, (_, i) =>
@@ -48,70 +83,98 @@ const end = computed(() => {
     total.value
   );
 });
+
+const currentPageSize = computed({
+  get() {
+    return props.table.getState().pagination.pageSize;
+  },
+  set(newValue) {
+    props.table.setPageSize(Number(newValue));
+    emit('pageSizeChange', Number(newValue));
+  },
+});
+
+onMounted(() => {
+  if (
+    props.showPageSizeSelector &&
+    props.defaultPageSize &&
+    props.defaultPageSize !== 10
+  ) {
+    props.table.setPageSize(props.defaultPageSize);
+  }
+});
 </script>
 
 <template>
   <div class="flex items-center justify-between">
-    <div class="flex flex-1 items-center justify-between">
-      <div>
-        <p class="text-sm text-n-slate-11 mb-0">
-          {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
-        </p>
-      </div>
-      <nav class="isolate inline-flex gap-1">
-        <woot-button
-          :disabled="!table.getCanPreviousPage()"
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
-          @click="table.setPageIndex(0)"
-        >
-          <span class="i-lucide-chevrons-left size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
-          :disabled="!table.getCanPreviousPage()"
-          @click="table.previousPage()"
-        >
-          <span class="i-lucide-chevron-left size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          v-for="page in visiblePages"
-          :key="page"
-          variant="clear"
-          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)"
-        >
-          <span
-            class="text-center"
-            :class="{ 'text-n-brand': page == currentPage }"
+    <div class="flex flex-1 items-center gap-2 justify-between">
+      <p class="text-sm truncate text-n-slate-11 mb-0">
+        {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
+      </p>
+      <div class="flex items-center gap-2">
+        <FilterSelect
+          v-if="showPageSizeSelector"
+          v-model="currentPageSize"
+          variant="outline"
+          hide-icon
+          class="[&>button]:text-n-slate-11 [&>button]:hover:text-n-slate-12 [&>button]:h-6"
+          :options="pageSizeOptions"
+        />
+        <nav class="isolate inline-flex items-center gap-1.5">
+          <Button
+            icon="i-lucide-chevrons-left"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.setPageIndex(0)"
+          />
+          <Button
+            icon="i-lucide-chevron-left"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.previousPage()"
+          />
+          <Button
+            v-for="page in visiblePages"
+            :key="page"
+            xs
+            outline
+            :color="page == currentPage ? 'blue' : 'slate'"
+            class="!h-6 min-w-6"
+            @click="table.setPageIndex(page - 1)"
           >
-            {{ page }}
-          </span>
-        </woot-button>
-        <woot-button
-          :disabled="!table.getCanNextPage()"
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
-          @click="table.nextPage()"
-        >
-          <span class="i-lucide-chevron-right size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          :disabled="!table.getCanNextPage()"
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
-          @click="table.setPageIndex(table.getPageCount() - 1)"
-        >
-          <span class="i-lucide-chevrons-right size-3" aria-hidden="true" />
-        </woot-button>
-      </nav>
+            <span
+              class="text-center"
+              :class="{ 'text-n-brand': page == currentPage }"
+            >
+              {{ page }}
+            </span>
+          </Button>
+          <Button
+            icon="i-lucide-chevron-right"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanNextPage()"
+            @click="table.nextPage()"
+          />
+          <Button
+            icon="i-lucide-chevrons-right"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanNextPage()"
+            @click="table.setPageIndex(table.getPageCount() - 1)"
+          />
+        </nav>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 3156115c9..294ca2e7b 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -119,7 +119,8 @@
       "EMPTY_LIST": "No results found"
     },
     "PAGINATION": {
-      "RESULTS": "Showing {start} to {end} of {total} results"
+      "RESULTS": "Showing {start} to {end} of {total} results",
+      "PER_PAGE_TEMPLATE": "{size} / page"
     }
   },
   "AGENT_REPORTS": {
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 42ca08582..483ea914d 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
@@ -7,6 +7,7 @@ import {
   getPaginationRowModel,
 } from '@tanstack/vue-table';
 import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -30,6 +31,19 @@ const { agents, agentMetrics } = defineProps({
 });
 
 const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+// UI Settings key for agent table page size
+const AGENT_TABLE_PAGE_SIZE_KEY = 'report_overview_agent_table_page_size';
+
+// Get the saved page size from UI settings or default to 10
+const getPageSize = () => {
+  return uiSettings.value[AGENT_TABLE_PAGE_SIZE_KEY] || 10;
+};
+
+const handlePageSizeChange = pageSize => {
+  updateUISettings({ [AGENT_TABLE_PAGE_SIZE_KEY]: pageSize });
+};
 
 const getAgentMetrics = id =>
   agentMetrics.find(metrics => metrics.assignee_id === Number(id)) || {};
@@ -98,13 +112,24 @@ const table = useVueTable({
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),
   getPaginationRowModel: getPaginationRowModel(),
+  initialState: {
+    pagination: {
+      pageSize: getPageSize(),
+    },
+  },
 });
 </script>
 
 <template>
   <div class="flex flex-col flex-1">
     <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
-    <Pagination class="mt-2" :table="table" />
+    <Pagination
+      class="mt-2"
+      :table="table"
+      show-page-size-selector
+      :default-page-size="getPageSize()"
+      @page-size-change="handlePageSizeChange"
+    />
     <div
       v-if="isLoading"
       class="items-center flex text-base justify-center p-8"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue
index 290b8a01d..626e67110 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue
@@ -7,6 +7,7 @@ import {
   getPaginationRowModel,
 } from '@tanstack/vue-table';
 import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -29,6 +30,19 @@ const { teams, teamMetrics } = defineProps({
 });
 
 const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+// UI Settings key for team table page size
+const TEAM_TABLE_PAGE_SIZE_KEY = 'report_overview_team_table_page_size';
+
+// Get the saved page size from UI settings or default to 10
+const getPageSize = () => {
+  return uiSettings.value[TEAM_TABLE_PAGE_SIZE_KEY] || 10;
+};
+
+const handlePageSizeChange = pageSize => {
+  updateUISettings({ [TEAM_TABLE_PAGE_SIZE_KEY]: pageSize });
+};
 
 const getTeamMetrics = id =>
   teamMetrics.find(metrics => metrics.team_id === Number(id)) || {};
@@ -92,13 +106,24 @@ const table = useVueTable({
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),
   getPaginationRowModel: getPaginationRowModel(),
+  initialState: {
+    pagination: {
+      pageSize: getPageSize(),
+    },
+  },
 });
 </script>
 
 <template>
   <div class="flex flex-col flex-1">
     <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
-    <Pagination class="mt-2" :table="table" />
+    <Pagination
+      class="mt-2"
+      :table="table"
+      show-page-size-selector
+      :default-page-size="getPageSize()"
+      @page-size-change="handlePageSizeChange"
+    />
     <div
       v-if="isLoading"
       class="items-center flex text-base justify-center p-8"