diff --git a/.eslintrc.js b/.eslintrc.js
index 6c867f557..6b5205ad7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -103,6 +103,7 @@ module.exports = {
           '⌘',
           '📄',
           '🎉',
+          '🚀',
           '💬',
           '👥',
           '📥',
diff --git a/Gemfile.lock b/Gemfile.lock
index a1d8c079c..ca4871a87 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -174,6 +174,8 @@ GEM
       bundler (>= 1.2.0, < 3)
       thor (~> 1.0)
     byebug (11.1.3)
+    childprocess (5.1.0)
+      logger (~> 1.5)
     climate_control (1.2.0)
     coderay (1.1.3)
     commonmarker (0.23.10)
@@ -436,10 +438,12 @@ GEM
       json (>= 1.8)
       rexml
     language_server-protocol (3.17.0.5)
-    launchy (2.5.2)
+    launchy (3.1.1)
       addressable (~> 2.8)
-    letter_opener (1.8.1)
-      launchy (>= 2.2, < 3)
+      childprocess (~> 5.0)
+      logger (~> 1.6)
+    letter_opener (1.10.0)
+      launchy (>= 2.2, < 4)
     line-bot-api (1.28.0)
     lint_roller (1.1.0)
     liquid (5.4.0)
@@ -572,7 +576,7 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (6.0.0)
+    public_suffix (6.0.2)
     puma (6.4.3)
       nio4r (~> 2.0)
     pundit (2.3.0)
diff --git a/app/controllers/api/v1/accounts/inboxes_controller.rb b/app/controllers/api/v1/accounts/inboxes_controller.rb
index 61d16b2ca..e7b3b197b 100644
--- a/app/controllers/api/v1/accounts/inboxes_controller.rb
+++ b/app/controllers/api/v1/accounts/inboxes_controller.rb
@@ -81,11 +81,15 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def create_channel
-    return unless %w[web_widget api email line telegram whatsapp sms].include?(permitted_params[:channel][:type])
+    return unless allowed_channel_types.include?(permitted_params[:channel][:type])
 
     account_channels_method.create!(permitted_params(channel_type_from_params::EDITABLE_ATTRS)[:channel].except(:type))
   end
 
+  def allowed_channel_types
+    %w[web_widget api email line telegram whatsapp sms]
+  end
+
   def update_inbox_working_hours
     @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
   end
diff --git a/app/controllers/api/v1/accounts/integrations/linear_controller.rb b/app/controllers/api/v1/accounts/integrations/linear_controller.rb
index bfdfff058..eb6525bb1 100644
--- a/app/controllers/api/v1/accounts/integrations/linear_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/linear_controller.rb
@@ -3,6 +3,7 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
   before_action :fetch_hook, only: [:destroy]
 
   def destroy
+    revoke_linear_token
     @hook.destroy!
     head :ok
   end
@@ -27,7 +28,7 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
   end
 
   def create_issue
-    issue = linear_processor_service.create_issue(permitted_params)
+    issue = linear_processor_service.create_issue(permitted_params, Current.user)
     if issue[:error]
       render json: { error: issue[:error] }, status: :unprocessable_entity
     else
@@ -44,7 +45,7 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
   def link_issue
     issue_id = permitted_params[:issue_id]
     title = permitted_params[:title]
-    issue = linear_processor_service.link_issue(conversation_link, issue_id, title)
+    issue = linear_processor_service.link_issue(conversation_link, issue_id, title, Current.user)
     if issue[:error]
       render json: { error: issue[:error] }, status: :unprocessable_entity
     else
@@ -120,4 +121,15 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
   def fetch_hook
     @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'linear')
   end
+
+  def revoke_linear_token
+    return unless @hook&.access_token
+
+    begin
+      linear_client = Linear.new(@hook.access_token)
+      linear_client.revoke_token
+    rescue StandardError => e
+      Rails.logger.error "Failed to revoke Linear token: #{e.message}"
+    end
+  end
 end
diff --git a/app/controllers/api/v1/accounts/integrations/notion_controller.rb b/app/controllers/api/v1/accounts/integrations/notion_controller.rb
new file mode 100644
index 000000000..dff6ccece
--- /dev/null
+++ b/app/controllers/api/v1/accounts/integrations/notion_controller.rb
@@ -0,0 +1,14 @@
+class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::BaseController
+  before_action :fetch_hook, only: [:destroy]
+
+  def destroy
+    @hook.destroy!
+    head :ok
+  end
+
+  private
+
+  def fetch_hook
+    @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'notion')
+  end
+end
\ No newline at end of file
diff --git a/app/controllers/api/v1/accounts/notion/authorizations_controller.rb b/app/controllers/api/v1/accounts/notion/authorizations_controller.rb
new file mode 100644
index 000000000..bb9b2f858
--- /dev/null
+++ b/app/controllers/api/v1/accounts/notion/authorizations_controller.rb
@@ -0,0 +1,21 @@
+class Api::V1::Accounts::Notion::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
+  include NotionConcern
+
+  def create
+    redirect_url = notion_client.auth_code.authorize_url(
+      {
+        redirect_uri: "#{base_url}/notion/callback",
+        response_type: 'code',
+        owner: 'user',
+        state: state,
+        client_id: GlobalConfigService.load('NOTION_CLIENT_ID', nil)
+      }
+    )
+
+    if redirect_url
+      render json: { success: true, url: redirect_url }
+    else
+      render json: { success: false }, status: :unprocessable_entity
+    end
+  end
+end
\ No newline at end of file
diff --git a/app/controllers/concerns/notion_concern.rb b/app/controllers/concerns/notion_concern.rb
new file mode 100644
index 000000000..2b94fe63b
--- /dev/null
+++ b/app/controllers/concerns/notion_concern.rb
@@ -0,0 +1,21 @@
+module NotionConcern
+  extend ActiveSupport::Concern
+
+  def notion_client
+    app_id = GlobalConfigService.load('NOTION_CLIENT_ID', nil)
+    app_secret = GlobalConfigService.load('NOTION_CLIENT_SECRET', nil)
+
+    ::OAuth2::Client.new(app_id, app_secret, {
+                           site: 'https://api.notion.com',
+                           authorize_url: 'https://api.notion.com/v1/oauth/authorize',
+                           token_url: 'https://api.notion.com/v1/oauth/token',
+                           auth_scheme: :basic_auth
+                         })
+  end
+
+  private
+
+  def scope
+    ''
+  end
+end
diff --git a/app/controllers/notion/callbacks_controller.rb b/app/controllers/notion/callbacks_controller.rb
new file mode 100644
index 000000000..94030fc8e
--- /dev/null
+++ b/app/controllers/notion/callbacks_controller.rb
@@ -0,0 +1,36 @@
+class Notion::CallbacksController < OauthCallbackController
+  include NotionConcern
+
+  private
+
+  def provider_name
+    'notion'
+  end
+
+  def oauth_client
+    notion_client
+  end
+
+  def handle_response
+    hook = account.hooks.new(
+      access_token: parsed_body['access_token'],
+      status: 'enabled',
+      app_id: 'notion',
+      settings: {
+        token_type: parsed_body['token_type'],
+        workspace_name: parsed_body['workspace_name'],
+        workspace_id: parsed_body['workspace_id'],
+        workspace_icon: parsed_body['workspace_icon'],
+        bot_id: parsed_body['bot_id'],
+        owner: parsed_body['owner']
+      }
+    )
+
+    hook.save!
+    redirect_to notion_redirect_uri
+  end
+
+  def notion_redirect_uri
+    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{account.id}/settings/integrations/notion"
+  end
+end
\ No newline at end of file
diff --git a/app/controllers/super_admin/app_configs_controller.rb b/app/controllers/super_admin/app_configs_controller.rb
index 204bfc95b..771f9f28c 100644
--- a/app/controllers/super_admin/app_configs_controller.rb
+++ b/app/controllers/super_admin/app_configs_controller.rb
@@ -39,6 +39,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       'email' => ['MAILER_INBOUND_EMAIL_DOMAIN'],
       'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
       'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
+      'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
       'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
     }
 
diff --git a/app/controllers/twilio/callback_controller.rb b/app/controllers/twilio/callback_controller.rb
index ff16e9386..455828228 100644
--- a/app/controllers/twilio/callback_controller.rb
+++ b/app/controllers/twilio/callback_controller.rb
@@ -27,7 +27,10 @@ class Twilio::CallbackController < ApplicationController
       *Array.new(10) { |i| :"MediaUrl#{i}" },
       *Array.new(10) { |i| :"MediaContentType#{i}" },
       :MessagingServiceSid,
-      :NumMedia
+      :NumMedia,
+      :Latitude,
+      :Longitude,
+      :MessageType
     )
   end
 end
diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index e51958e9e..675f6ea67 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
+import AddAccountModal from './components/app/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
diff --git a/app/javascript/dashboard/api/captain/document.js b/app/javascript/dashboard/api/captain/document.js
index dc22b0c32..a4ec6b23e 100644
--- a/app/javascript/dashboard/api/captain/document.js
+++ b/app/javascript/dashboard/api/captain/document.js
@@ -15,6 +15,14 @@ class CaptainDocument extends ApiClient {
       },
     });
   }
+
+  uploadPdf(formData) {
+    return axios.post(`${this.url}/upload_pdf`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  }
 }
 
 export default new CaptainDocument();
diff --git a/app/javascript/dashboard/api/notion_auth.js b/app/javascript/dashboard/api/notion_auth.js
new file mode 100644
index 000000000..8a0027f9b
--- /dev/null
+++ b/app/javascript/dashboard/api/notion_auth.js
@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class NotionOAuthClient extends ApiClient {
+  constructor() {
+    super('notion', { accountScoped: true });
+  }
+
+  generateAuthorization() {
+    return axios.post(`${this.url}/authorization`);
+  }
+}
+
+export default new NotionOAuthClient();
diff --git a/app/javascript/dashboard/assets/scss/_animations.scss b/app/javascript/dashboard/assets/scss/_animations.scss
deleted file mode 100644
index da162951b..000000000
--- a/app/javascript/dashboard/assets/scss/_animations.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-.slide-fade-enter-active {
-  transition: all 0.3s var(--ease-in-cubic);
-}
-
-.slide-fade-leave-active {
-  transition: all 0.3s var(--ease-out-cubic);
-}
-
-.slide-fade-enter,
-.slide-fade-leave-to {
-  opacity: 0;
-  transform: translateX(10px);
-}
-
-.slide-fade-enter {
-  transform: translateX($space-micro);
-}
-
-.slide-fade-leave-to {
-  transform: translateX($space-medium);
-}
-
-.conversations-list-enter-active,
-.conversations-list-leave-active {
-  transition: all 0.25s var(--ease-out-cubic);
-}
-
-.conversations-list-enter,
-.conversations-list-leave-to {
-  opacity: 0;
-  transform: translateX($space-medium);
-}
-
-.slide-up-enter-active {
-  transition: all 0.3s var(--ease-in-cubic);
-}
-
-.slide-up-leave-active {
-  transition: all 0.3s var(--ease-out-cubic);
-}
-
-.slide-up-enter,
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translateY(-$space-medium);
-}
-
-.menu-slide-enter-active,
-.menu-slide-leave-active {
-  transform: translateY(0);
-  transition:
-    transform 0.25s var(--ease-in-cubic),
-    opacity 0.15s var(--ease-in-cubic);
-}
-
-.menu-slide-enter,
-.menu-slide-leave-to {
-  opacity: 0;
-  transform: translateY($space-small);
-}
-
-.toast-fade-enter-active {
-  transition: all 0.3s var(--ease-in-sine);
-}
-
-.toast-fade-leave-active {
-  transition: all 0.1s var(--ease-out-sine);
-}
-
-.toast-fade-enter,
-.toast-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-$space-small);
-}
-
-.modal-fade-enter-active {
-  transition: all 0.3s var(--ease-in-sine);
-}
-
-.modal-fade-leave-active {
-  transition: all 0.1s var(--ease-out-sine);
-}
-
-.modal-fade-enter,
-.modal-fade-leave-to {
-  opacity: 0;
-}
-
-.network-notification-fade-enter-active {
-  transition: all 0.1s var(--ease-in-sine);
-}
-
-.network-notification-fade-leave-active {
-  transition: all 0.1s var(--ease-out-sine);
-}
-
-.network-notification-fade-enter,
-.network-notification-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-$space-small);
-}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/_base.scss
similarity index 98%
rename from app/javascript/dashboard/assets/scss/widgets/_base.scss
rename to app/javascript/dashboard/assets/scss/_base.scss
index afaaf91c8..14ae2a9d4 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/_base.scss
@@ -201,3 +201,8 @@ code {
     }
   }
 }
+
+// Table
+table {
+  @apply border-spacing-0 text-sm w-full;
+}
diff --git a/app/javascript/dashboard/assets/scss/_formulate.scss b/app/javascript/dashboard/assets/scss/_formulate.scss
deleted file mode 100644
index 37690a8de..000000000
--- a/app/javascript/dashboard/assets/scss/_formulate.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import 'dashboard/assets/scss/variables';
-
-.formulate-input {
-  .formulate-input-errors {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .formulate-input-error {
-    color: var(--r-400);
-    display: block;
-    font-size: var(--font-size-small);
-    font-weight: $font-weight-normal;
-    margin-bottom: $space-one;
-    width: 100%;
-  }
-}
-
-.integration-hooks {
-  .formulate-input[data-type='checkbox'] {
-    .formulate-input-wrapper {
-      @apply flex;
-
-      .formulate-input-element {
-        @apply pr-2;
-
-        input {
-          @apply mb-0;
-        }
-      }
-    }
-
-    .formulate-input-element-decorator {
-      @apply hidden;
-    }
-  }
-}
diff --git a/app/javascript/dashboard/assets/scss/_helper-classes.scss b/app/javascript/dashboard/assets/scss/_helper-classes.scss
deleted file mode 100644
index 229606254..000000000
--- a/app/javascript/dashboard/assets/scss/_helper-classes.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// loader class
-.spinner {
-  @include color-spinner();
-  @apply inline-block h-6 py-0 px-6 relative align-middle w-6;
-
-  &.message {
-    @apply bg-white dark:bg-slate-800 rounded-full left-0 my-3 mx-auto p-4 top-0;
-
-    &::before {
-      @apply -ml-3 -mt-3;
-    }
-  }
-
-  &.small {
-    @apply h-4 w-4;
-
-    &::before {
-      @apply h-4 -mt-2 w-4;
-    }
-  }
-}
diff --git a/app/javascript/dashboard/assets/scss/_layout.scss b/app/javascript/dashboard/assets/scss/_layout.scss
deleted file mode 100644
index 825b1e2bc..000000000
--- a/app/javascript/dashboard/assets/scss/_layout.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-// scss-lint:disable SpaceAfterPropertyColon
-@import 'shared/assets/fonts/inter';
-
-// Inter,
-html,
-body {
-  font-family:
-    'Inter',
-    -apple-system,
-    system-ui,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Tahoma,
-    Arial,
-    sans-serif !important;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.app-wrapper {
-  @apply h-screen flex-grow-0 min-h-0 w-full;
-
-  .button--fixed-top {
-    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
-  }
-}
-
-.banner + .app-wrapper {
-  // Reduce the height of the dashboard to make room for the banner.
-  // And causing the top right green-action button to be pushed down when scrolling.
-  @apply h-[calc(100%-48px)];
-
-  .button--fixed-top {
-    @apply top-14;
-  }
-
-  .off-canvas-content {
-    .button--fixed-top {
-      @apply top-2;
-    }
-  }
-}
diff --git a/app/javascript/dashboard/assets/scss/_mixins.scss b/app/javascript/dashboard/assets/scss/_mixins.scss
deleted file mode 100644
index fc742d24f..000000000
--- a/app/javascript/dashboard/assets/scss/_mixins.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-@import 'dashboard/assets/scss/variables';
-
-$spinner-before-border-color: rgba(255, 255, 255, 0.7);
-
-// input form
-@mixin ghost-input() {
-  box-shadow: none;
-  border-color: transparent;
-
-  &:active,
-  &:hover,
-  &:focus {
-    border-color: transparent;
-    box-shadow: none;
-  }
-}
-
-@mixin color-spinner() {
-  @keyframes spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  &::before {
-    animation: spinner .9s linear infinite;
-    border: 2px solid $spinner-before-border-color;
-    border-radius: 50%;
-    border-top-color: lighten($color-woot, 10%);
-    box-sizing: border-box;
-    content: '';
-    height: $space-medium;
-    left: 50%;
-    margin-left: -$space-one;
-    margin-top: -$space-one;
-    position: absolute;
-    top: 50%;
-    width: $space-medium;
-  }
-}
-
-// --------------------------------------------------------
-// arrows
-// --------------------------------------------------------
-// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
-// $color: hex, rgb or rbga
-// $size: px or em
-// @example
-// .element{
-//     @include arrow(top, #000, 50px);
-// }
-@mixin arrow($direction, $color, $size) {
-  display: block;
-  height: 0;
-  width: 0;
-  content: '';
-
-  @if $direction == 'top' {
-    border-bottom: $size solid $color;
-    border-left: $size solid transparent;
-    border-right: $size solid transparent;
-  }
-
-  @else if $direction == 'right' {
-    border-bottom: $size solid transparent;
-    border-left: $size solid $color;
-    border-top: $size solid transparent;
-  }
-
-  @else if $direction == 'bottom' {
-    border-left: $size solid transparent;
-    border-right: $size solid transparent;
-    border-top: $size solid $color;
-  }
-
-  @else if $direction == 'left' {
-    border-bottom: $size solid transparent;
-    border-right: $size solid $color;
-    border-top: $size solid transparent;
-  }
-
-  @else if $direction == 'top-left' {
-    border-right: $size solid transparent;
-    border-top: $size solid $color;
-  }
-
-  @else if $direction == 'top-right' {
-    border-left: $size solid transparent;
-    border-top: $size solid $color;
-  }
-
-  @else if $direction == 'bottom-left' {
-    border-bottom: $size solid $color;
-    border-right: $size solid transparent;
-  }
-
-  @else if $direction == 'bottom-right' {
-    border-bottom: $size solid $color;
-    border-left: $size solid transparent;
-  }
-}
diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss
deleted file mode 100644
index 4f5f4b843..000000000
--- a/app/javascript/dashboard/assets/scss/_rtl.scss
+++ /dev/null
@@ -1,204 +0,0 @@
-.app-rtl--wrapper {
-  direction: rtl;
-
-  // Woot Tabs
-  .tabs-title {
-    &:first-child {
-      margin-left: var(--space-small);
-      margin-right: unset;
-    }
-
-    &:last-child {
-      margin-left: unset;
-      margin-right: var(--space-small);
-    }
-  }
-
-  // woot tables
-  table,
-  thead,
-  th {
-    text-align: right;
-  }
-
-  // Table footer
-  .footer {
-    .page-meta {
-      direction: initial;
-    }
-  }
-
-  // Wizard box
-  .wizard-box {
-    direction: initial;
-  }
-
-  // Conversation details
-  .conversation-details-wrap {
-    .conversation-panel {
-      // Message text
-      .text-content {
-        p {
-          unicode-bidi: plaintext;
-        }
-
-        ul {
-          padding-left: unset;
-          padding-right: var(--space-two);
-        }
-
-        li {
-          text-align: right;
-        }
-      }
-
-      // Message items and actions
-      li {
-        &.right {
-          .sender--info {
-            padding: var(--space-small) var(--space-smaller)
-              var(--space-smaller) 0;
-          }
-
-          .context-menu-wrap {
-            margin-left: 0;
-            margin-right: auto;
-          }
-        }
-      }
-    }
-
-    // Conversation footer
-    .conversation-footer {
-      .preview-item {
-        direction: initial;
-      }
-    }
-
-    // Custom attributes section in conversation sidebar
-    .conversation-sidebar-wrap .checkbox-wrap {
-      .checkbox {
-        margin-left: var(--space-small);
-      }
-    }
-  }
-
-  // Conversation list
-  .conversations-list-wrap {
-    border-right: 0;
-
-    .conversation {
-      .conversation--meta {
-        left: $space-normal;
-        right: unset;
-
-        .unread {
-          margin-left: unset;
-          margin-right: auto;
-        }
-      }
-
-      .assignee-label {
-        margin-left: 0;
-        margin-right: var(--space-one);
-      }
-
-      .show-more--button {
-        margin: unset;
-        transform: rotate(180deg);
-      }
-    }
-
-    // Basic filter dropdown
-    .basic-filter {
-      left: 0;
-      right: unset;
-    }
-
-    // Bulk actions
-    .bulk-action__container {
-      .triangle {
-        left: var(--triangle-position);
-        right: unset;
-      }
-
-      .bulk-action__agents {
-        left: var(--space-small);
-        right: unset;
-      }
-
-      .labels-container {
-        left: var(--space-small);
-        right: unset;
-
-        .label-checkbox {
-          margin: 0 0 0 var(--space-one);
-        }
-      }
-
-      .actions-container {
-        left: var(--space-small);
-        right: unset;
-      }
-
-      .bulk-action__teams {
-        left: var(--space-small);
-        right: unset;
-      }
-    }
-  }
-
-  // Contact notes
-  .card.note-wrap {
-    .time-stamp {
-      unicode-bidi: plaintext;
-    }
-  }
-
-  // Toggle switch
-  .toggle-button {
-    &.small {
-      span {
-        &.active {
-          transform: translate(var(--space-minus-small), var(--space-zero));
-        }
-      }
-    }
-
-    span {
-      --minus-space-one-point-five: -0.9375rem;
-
-      &.active {
-        transform: translate(
-          var(--minus-space-one-point-five),
-          var(--space-zero)
-        );
-      }
-    }
-  }
-
-  // Modal
-  .modal-container {
-    text-align: right;
-
-    .modal-footer {
-      button {
-        margin-left: 0;
-        margin-right: var(--space-small);
-      }
-    }
-  }
-
-  // Other changes
-  .colorpicker--chrome {
-    direction: initial;
-  }
-
-  .mention--box {
-    direction: initial;
-  }
-
-  .contact--form .input-group {
-    direction: initial;
-  }
-}
diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss
deleted file mode 100644
index 063c6383b..000000000
--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-// Font sizes
-$font-size-nano: 0.5rem;
-$font-size-micro: 0.675rem;
-$font-size-mini: 0.75rem;
-$font-size-small: 0.875rem;
-$font-size-default: 1rem;
-$font-size-medium: 1.125rem;
-$font-size-large: 1.375rem;
-$font-size-big: 1.5rem;
-$font-size-bigger: 1.75rem;
-$font-size-mega: 2.125rem;
-$font-size-giga: 2.5rem;
-
-// spaces
-$zero: 0;
-$space-micro: 0.125rem;
-$space-smaller: 0.25rem;
-$space-small: 0.5rem;
-$space-one: 0.675rem;
-$space-slab: 0.75rem;
-$space-normal: 1rem;
-$space-two: 1.25rem;
-$space-medium: 1.5rem;
-$space-large: 2rem;
-$space-larger: 3rem;
-$space-jumbo: 4rem;
-$space-mega: 6.25rem;
-
-// font-weight
-$font-weight-feather: 100;
-$font-weight-light: 300;
-$font-weight-normal: 400;
-$font-weight-medium: 500;
-$font-weight-bold: 600;
-$font-weight-black: 700;
-
-//Navbar
-$nav-bar-width: 14.375rem;
-$header-height: 3.5rem;
-
-$woot-logo-padding: $space-large $space-two;
-
-// Colors
-$color-woot: #1f93ff;
-$color-gray: #6e6f73;
-$color-light-gray: #999a9b;
-
-$color-border: var(--s-75);
-$color-border-light: var(--s-50);
-$color-border-dark: var(--s-100);
-
-$color-background: var(--s-50);
-$color-background-light: var(--s-25);
-
-$color-white: #fff;
-$color-body: #3c4858;
-$color-heading: #1f2d3d;
-$color-extra-light-blue: #f5f7f9;
-
-$primary-color: $color-woot;
-$secondary-color: #5d7592;
-$success-color: #44ce4b;
-$warning-color: #ffc532;
-$alert-color: #ff382d;
-
-$masked-bg: rgba(0, 0, 0, .4);
-
-// Color-palettes
-
-$color-primary-light: #c7e3ff;
-$color-primary-dark: darken($color-woot, 20%);
-
-// Thumbnail
-$thumbnail-radius: 2.5rem;
-
-// chat-header
-$conv-header-height: 2.5rem;
-
-// Inbox List
-
-$inbox-thumb-size: 3rem;
-
-
-// Snackbar default
-$woot-snackbar-bg: #323232;
-$woot-snackbar-button: #ffeb3b;
-
-$swift-ease-out-duration: .4s !default;
-$swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default;
-$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
-
-// Transitions
-$transition-ease-in: all 0.250s ease-in;
-
-:root {
-  --dashboard-app-tabs-height: 2.4375rem;
-}
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 622eb4085..66416c64c 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -1,3 +1,4 @@
+// scss-lint:disable SpaceAfterPropertyColon
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
@@ -8,54 +9,66 @@
 // Next Colors
 @import 'next-colors';
 
-@import 'shared/assets/stylesheets/animations';
-@import 'shared/assets/stylesheets/colors';
-@import 'shared/assets/stylesheets/spacing';
-@import 'shared/assets/stylesheets/font-size';
-@import 'shared/assets/stylesheets/font-weights';
-@import 'shared/assets/stylesheets/shadows';
-@import 'shared/assets/stylesheets/border-radius';
-@import 'shared/assets/stylesheets/z-index';
-
-@import 'variables';
-
-@import 'mixins';
-@import 'helper-classes';
-@import 'formulate';
-@import 'date-picker';
-
-@import 'layout';
-@import 'animations';
-@import 'rtl';
-
-@import 'widgets/base';
-@import 'widgets/conversation-view';
-@import 'widgets/tabs';
-@import 'widgets/woot-tables';
+// Base styles for elements
+@import 'base';
 
+// Plugins
 @import 'plugins/multiselect';
-@import 'plugins/dropdown';
+@import 'plugins/date-picker';
+
+html,
+body {
+  font-family:
+    'Inter',
+    -apple-system,
+    system-ui,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Tahoma,
+    Arial,
+    sans-serif !important;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.app-wrapper {
+  @apply h-screen flex-grow-0 min-h-0 w-full;
+
+  .button--fixed-top {
+    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
+  }
+}
+
+.banner + .app-wrapper {
+  // Reduce the height of the dashboard to make room for the banner.
+  // And causing the top right green-action button to be pushed down when scrolling.
+  @apply h-[calc(100%-48px)];
+
+  .button--fixed-top {
+    @apply top-14;
+  }
+
+  .off-canvas-content {
+    .button--fixed-top {
+      @apply top-2;
+    }
+  }
+}
 
 .tooltip {
-  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900 max-w-96;
+  @apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md max-w-96;
 }
 
 #app {
   @apply h-full w-full;
 }
 
-.hide {
-  @apply hidden;
-}
-
-.n-blue-border {
-  @apply border-n-blue-border;
-}
-
-.n-blue-text {
-  @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;
@@ -67,351 +80,6 @@
   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 {
-  :root {
-    --color-amber-25: 254 253 251;
-    --color-amber-50: 255 249 237;
-    --color-amber-75: 255 243 208;
-    --color-amber-100: 255 236 183;
-    --color-amber-200: 255 224 161;
-    --color-amber-300: 245 208 140;
-    --color-amber-400: 228 187 120;
-    --color-amber-500: 214 163 92;
-    --color-amber-600: 214 163 92;
-    --color-amber-700: 255 186 26;
-    --color-amber-800: 145 89 48;
-    --color-amber-900: 79 52 34;
-
-    --color-ash-100: 235 235 239;
-    --color-ash-200: 228 228 233;
-    --color-ash-25: 252 252 253;
-    --color-ash-300: 221 221 227;
-    --color-ash-400: 211 212 219;
-    --color-ash-50: 249 249 251;
-    --color-ash-500: 185 187 198;
-    --color-ash-600: 139 141 152;
-    --color-ash-700: 126 128 138;
-    --color-ash-75: 242 242 245;
-    --color-ash-800: 96 100 108;
-    --color-ash-900: 28 32 36;
-
-    --color-primary-25: 251 253 255;
-    --color-primary-50: 245 249 255;
-    --color-primary-75: 233 243 255;
-    --color-primary-100: 218 236 255;
-    --color-primary-200: 201 226 255;
-    --color-primary-300: 181 213 255;
-    --color-primary-400: 155 195 252;
-    --color-primary-500: 117 171 247;
-    --color-primary-600: 39 129 246;
-    --color-primary-700: 16 115 233;
-    --color-primary-800: 8 109 224;
-    --color-primary-900: 11 50 101;
-
-    --color-ruby-100: 255 220 225;
-    --color-ruby-200: 255 206 214;
-    --color-ruby-25: 255 252 253;
-    --color-ruby-300: 248 191 200;
-    --color-ruby-400: 239 172 184;
-    --color-ruby-50: 255 247 248;
-    --color-ruby-500: 229 146 163;
-    --color-ruby-600: 229 70 102;
-    --color-ruby-700: 220 59 93;
-    --color-ruby-75: 254 234 237;
-    --color-ruby-800: 202 36 77;
-    --color-ruby-900: 100 23 43;
-
-    --color-teal-100: 224 248 243;
-    --color-teal-200: 204 243 234;
-    --color-teal-25: 250 254 253;
-    --color-teal-300: 184 234 224;
-    --color-teal-400: 161 222 210;
-    --color-teal-50: 243 251 249;
-    --color-teal-500: 83 185 171;
-    --color-teal-600: 18 165 148;
-    --color-teal-700: 13 155 138;
-    --color-teal-75: 236 249 255;
-    --color-teal-800: 0 133 115;
-    --color-teal-900: 13 61 56;
-
-    --color-green-25: 251 254 252;
-    --color-green-50: 244 251 246;
-    --color-green-75: 230 246 235;
-    --color-green-100: 214 241 223;
-    --color-green-200: 196 232 209;
-    --color-green-300: 173 221 192;
-    --color-green-400: 142 206 170;
-    --color-green-500: 91 185 139;
-    --color-green-600: 48 164 108;
-    --color-green-700: 43 154 102;
-    --color-green-800: 33 131 88;
-    --color-green-900: 25 59 45;
-
-    --color-mint-25: 249 254 253;
-    --color-mint-50: 242 251 249;
-    --color-mint-75: 221 249 242;
-    --color-mint-100: 200 244 233;
-    --color-mint-200: 179 236 222;
-    --color-mint-300: 156 224 208;
-    --color-mint-400: 126 207 189;
-    --color-mint-500: 76 187 165;
-    --color-mint-600: 134 234 212;
-    --color-mint-700: 125 224 203;
-    --color-mint-800: 2 120 100;
-    --color-mint-900: 22 67 60;
-
-    --color-sky-25: 249 254 255;
-    --color-sky-50: 241 250 253;
-    --color-sky-75: 225 246 253;
-    --color-sky-100: 209 240 250;
-    --color-sky-200: 190 231 245;
-    --color-sky-300: 169 218 237;
-    --color-sky-400: 141 202 227;
-    --color-sky-500: 96 179 215;
-    --color-sky-600: 124 226 254;
-    --color-sky-700: 116 218 248;
-    --color-sky-800: 0 116 158;
-    --color-sky-900: 29 62 86;
-
-    --color-indigo-25: 253 253 254;
-    --color-indigo-50: 247 249 255;
-    --color-indigo-75: 237 242 254;
-    --color-indigo-100: 225 233 255;
-    --color-indigo-200: 210 222 255;
-    --color-indigo-300: 193 208 255;
-    --color-indigo-400: 171 189 249;
-    --color-indigo-500: 141 164 239;
-    --color-indigo-600: 62 99 221;
-    --color-indigo-700: 51 88 212;
-    --color-indigo-800: 58 91 199;
-    --color-indigo-900: 31 45 92;
-
-    --color-iris-25: 253 253 255;
-    --color-iris-50: 248 248 255;
-    --color-iris-75: 240 241 254;
-    --color-iris-100: 230 231 255;
-    --color-iris-200: 218 220 255;
-    --color-iris-300: 203 205 255;
-    --color-iris-400: 184 186 248;
-    --color-iris-500: 155 158 240;
-    --color-iris-600: 91 91 214;
-    --color-iris-700: 81 81 205;
-    --color-iris-800: 87 83 198;
-    --color-iris-900: 39 41 98;
-
-    --color-violet-25: 253 252 254;
-    --color-violet-50: 250 248 255;
-    --color-violet-75: 244 240 254;
-    --color-violet-100: 235 228 255;
-    --color-violet-200: 225 217 255;
-    --color-violet-300: 212 202 254;
-    --color-violet-400: 194 181 245;
-    --color-violet-500: 170 153 236;
-    --color-violet-600: 110 86 207;
-    --color-violet-700: 101 77 196;
-    --color-violet-800: 101 80 185;
-    --color-violet-900: 47 38 95;
-
-    --color-pink-25: 255 252 254;
-    --color-pink-50: 254 247 251;
-    --color-pink-75: 254 233 245;
-    --color-pink-100: 251 220 239;
-    --color-pink-200: 246 206 231;
-    --color-pink-300: 239 191 221;
-    --color-pink-400: 231 172 208;
-    --color-pink-500: 221 147 194;
-    --color-pink-600: 214 64 159;
-    --color-pink-700: 207 56 151;
-    --color-pink-800: 194 41 138;
-    --color-pink-900: 101 18 73;
-
-    --color-orange-25: 254 252 251;
-    --color-orange-50: 255 247 237;
-    --color-orange-75: 255 239 214;
-    --color-orange-100: 255 223 181;
-    --color-orange-200: 255 209 154;
-    --color-orange-300: 255 193 130;
-    --color-orange-400: 245 174 115;
-    --color-orange-500: 236 148 85;
-    --color-orange-600: 247 107 21;
-    --color-orange-700: 239 95 0;
-    --color-orange-800: 204 78 0;
-    --color-orange-900: 88 45 29;
-  }
-
-  // scss-lint:disable QualifyingElement
-  body.dark {
-    --color-amber-25: 31 19 0;
-    --color-amber-50: 37 24 4;
-    --color-amber-75: 48 32 11;
-    --color-amber-100: 57 39 15;
-    --color-amber-200: 67 46 18;
-    --color-amber-300: 83 57 22;
-    --color-amber-400: 111 77 29;
-    --color-amber-500: 169 118 42;
-    --color-amber-600: 169 118 42;
-    --color-amber-700: 255 203 71;
-    --color-amber-800: 255 204 77;
-    --color-amber-900: 255 231 179;
-
-    --color-ash-100: 46 48 53;
-    --color-ash-200: 53 55 60;
-    --color-ash-25: 24 24 26;
-    --color-ash-300: 60 63 68;
-    --color-ash-400: 70 75 80;
-    --color-ash-50: 27 27 31;
-    --color-ash-500: 90 97 101;
-    --color-ash-600: 105 110 119;
-    --color-ash-700: 120 127 133;
-    --color-ash-75: 39 40 45;
-    --color-ash-800: 173 177 184;
-    --color-ash-900: 237 238 240;
-
-    --color-primary-25: 10 17 28;
-    --color-primary-50: 15 24 38;
-    --color-primary-75: 15 39 72;
-    --color-primary-100: 10 49 99;
-    --color-primary-200: 18 61 117;
-    --color-primary-300: 29 74 134;
-    --color-primary-400: 40 89 156;
-    --color-primary-500: 48 106 186;
-    --color-primary-600: 39 129 246;
-    --color-primary-700: 21 116 231;
-    --color-primary-800: 126 182 255;
-    --color-primary-900: 205 227 255;
-
-    --color-ruby-100: 78 19 37;
-    --color-ruby-200: 94 26 46;
-    --color-ruby-25: 25 17 19;
-    --color-ruby-300: 111 37 57;
-    --color-ruby-400: 136 52 71;
-    --color-ruby-50: 30 21 23;
-    --color-ruby-500: 179 68 90;
-    --color-ruby-600: 229 70 102;
-    --color-ruby-700: 236 90 114;
-    --color-ruby-75: 58 20 30;
-    --color-ruby-800: 255 148 157;
-    --color-ruby-900: 254 210 225;
-
-    --color-teal-100: 2 59 55;
-    --color-teal-200: 8 72 67;
-    --color-teal-25: 13 21 20;
-    --color-teal-300: 28 105 97;
-    --color-teal-400: 28 105 97;
-    --color-teal-50: 17 28 27;
-    --color-teal-500: 32 126 115;
-    --color-teal-600: 41 163 131;
-    --color-teal-700: 14 179 158;
-    --color-teal-75: 13 45 42;
-    --color-teal-800: 11 216 182;
-    --color-teal-900: 173 240 221;
-
-    --color-green-25: 14 21 18;
-    --color-green-50: 18 27 23;
-    --color-green-75: 19 45 33;
-    --color-green-100: 17 59 41;
-    --color-green-200: 23 73 51;
-    --color-green-300: 32 87 62;
-    --color-green-400: 40 104 74;
-    --color-green-500: 47 124 87;
-    --color-green-600: 48 164 108;
-    --color-green-700: 51 176 116;
-    --color-green-800: 61 214 140;
-    --color-green-900: 177 241 203;
-
-    --color-mint-25: 14 21 21;
-    --color-mint-50: 15 27 27;
-    --color-mint-75: 9 44 43;
-    --color-mint-100: 0 58 56;
-    --color-mint-200: 0 71 68;
-    --color-mint-300: 16 86 80;
-    --color-mint-400: 30 104 95;
-    --color-mint-500: 39 127 112;
-    --color-mint-600: 134 234 212;
-    --color-mint-700: 168 245 229;
-    --color-mint-800: 88 213 186;
-    --color-mint-900: 196 245 225;
-
-    --color-sky-25: 14 21 21;
-    --color-sky-50: 15 27 27;
-    --color-sky-75: 9 44 43;
-    --color-sky-100: 0 58 56;
-    --color-sky-200: 0 71 68;
-    --color-sky-300: 16 86 80;
-    --color-sky-400: 30 104 95;
-    --color-sky-500: 39 127 112;
-    --color-sky-600: 134 234 212;
-    --color-sky-700: 168 245 229;
-    --color-sky-800: 88 213 186;
-    --color-sky-900: 196 245 225;
-
-    --color-indigo-25: 17 19 31;
-    --color-indigo-50: 20 23 38;
-    --color-indigo-75: 24 36 73;
-    --color-indigo-100: 29 46 98;
-    --color-indigo-200: 37 57 116;
-    --color-indigo-300: 48 67 132;
-    --color-indigo-400: 58 79 151;
-    --color-indigo-500: 67 93 177;
-    --color-indigo-600: 62 99 221;
-    --color-indigo-700: 84 114 228;
-    --color-indigo-800: 158 177 255;
-    --color-indigo-900: 214 225 255;
-
-    --color-iris-25: 19 19 30;
-    --color-iris-50: 23 22 37;
-    --color-iris-75: 32 34 72;
-    --color-iris-100: 38 42 101;
-    --color-iris-200: 48 51 116;
-    --color-iris-300: 61 62 130;
-    --color-iris-400: 74 74 149;
-    --color-iris-500: 89 88 177;
-    --color-iris-600: 91 91 214;
-    --color-iris-700: 110 106 222;
-    --color-iris-800: 177 169 255;
-    --color-iris-900: 224 223 254;
-
-    --color-violet-25: 20 18 31;
-    --color-violet-50: 27 21 37;
-    --color-violet-75: 41 31 67;
-    --color-violet-100: 51 37 91;
-    --color-violet-200: 60 46 105;
-    --color-violet-300: 71 56 118;
-    --color-violet-400: 86 70 139;
-    --color-violet-500: 105 88 173;
-    --color-violet-600: 110 86 207;
-    --color-violet-700: 125 102 217;
-    --color-violet-800: 186 167 255;
-    --color-violet-900: 226 221 254;
-
-    --color-pink-25: 25 17 23;
-    --color-pink-50: 33 18 29;
-    --color-pink-75: 55 23 47;
-    --color-pink-100: 75 20 61;
-    --color-pink-200: 89 28 71;
-    --color-pink-300: 105 41 85;
-    --color-pink-400: 131 56 105;
-    --color-pink-500: 168 72 133;
-    --color-pink-600: 214 64 159;
-    --color-pink-700: 222 81 168;
-    --color-pink-800: 255 141 204;
-    --color-pink-900: 253 209 234;
-    --color-orange-25: 23 18 14;
-    --color-orange-50: 30 22 15;
-    --color-orange-75: 51 30 11;
-    --color-orange-100: 70 33 0;
-    --color-orange-200: 86 40 0;
-    --color-orange-300: 102 53 12;
-    --color-orange-400: 126 69 29;
-    --color-orange-500: 163 88 41;
-    --color-orange-600: 247 107 21;
-    --color-orange-700: 255 128 31;
-    --color-orange-800: 255 160 87;
-    --color-orange-900: 255 224 194;
-  }
-}
-
 @layer utilities {
   /* Hide scrollbar for Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
diff --git a/app/javascript/dashboard/assets/scss/_date-picker.scss b/app/javascript/dashboard/assets/scss/plugins/_date-picker.scss
similarity index 73%
rename from app/javascript/dashboard/assets/scss/_date-picker.scss
rename to app/javascript/dashboard/assets/scss/plugins/_date-picker.scss
index b22381ea0..353e696d4 100644
--- a/app/javascript/dashboard/assets/scss/_date-picker.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_date-picker.scss
@@ -30,11 +30,11 @@
 
   .mx-input:disabled,
   .mx-input[readonly] {
-    @apply bg-white dark:bg-slate-900 cursor-pointer;
+    @apply bg-n-background cursor-pointer;
   }
 
   .mx-icon-calendar {
-    @apply dark:text-slate-500;
+    @apply text-n-slate-10;
   }
 }
 
@@ -43,17 +43,17 @@
 
   .cell {
     &.disabled {
-      @apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
+      @apply bg-n-slate-2 dark:bg-n-background text-n-slate-10;
     }
 
     &:hover,
     &.hover-in-range,
     &.in-range {
-      @apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
+      @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12;
     }
   }
 
-  .mx-calendar+.mx-calendar {
+  .mx-calendar + .mx-calendar {
     @apply border-l border-n-weak;
   }
 
@@ -62,7 +62,7 @@
   }
 
   .mx-time {
-    @apply border-0 bg-white dark:bg-slate-800;
+    @apply border-0 bg-n-background dark:bg-n-solid-2;
 
     .mx-time-header {
       @apply border-0;
@@ -70,11 +70,11 @@
 
     .mx-time-item {
       &.disabled {
-        @apply bg-slate-25 dark:bg-slate-900;
+        @apply bg-n-slate-2 dark:bg-n-background;
       }
 
       &:hover {
-        @apply bg-slate-75 dark:bg-slate-700;
+        @apply bg-n-slate-3 dark:bg-n-solid-3;
       }
     }
   }
diff --git a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
deleted file mode 100644
index 9ab51d12a..000000000
--- a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.dropdown-pane {
-  @apply border rounded-lg hidden relative invisible shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-[9999];
-
-  &.dropdown-pane--open {
-    @apply bg-n-alpha-3 backdrop-blur-[100px] absolute  block visible;
-  }
-}
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index 1280eb069..b4154e4d8 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -17,6 +17,10 @@
     @apply mb-4;
   }
 
+  &.invalid .multiselect__tags {
+    @apply border-0 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;
+  }
+
   &.multiselect--disabled {
     @apply opacity-50  rounded-lg cursor-not-allowed pointer-events-auto;
 
@@ -124,8 +128,7 @@
   }
 
   .multiselect__input {
-    @include ghost-input;
-    @apply text-sm h-[2.875rem] mb-0 p-0;
+    @apply text-sm h-[2.875rem] mb-0 p-0 shadow-none border-transparent hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none active:border-transparent active:shadow-none;
   }
 
   .multiselect__single {
diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
deleted file mode 100644
index 8a118b906..000000000
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ /dev/null
@@ -1 +0,0 @@
-// to be removed
diff --git a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss b/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
deleted file mode 100644
index 8a118b906..000000000
--- a/app/javascript/dashboard/assets/scss/views/settings/integrations.scss
+++ /dev/null
@@ -1 +0,0 @@
-// to be removed
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
deleted file mode 100644
index b51cbe07d..000000000
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ /dev/null
@@ -1,261 +0,0 @@
-// scss-lint:disable MergeableSelector
-
-@tailwind utilities;
-@layer utilities {
-  .custom-gradient {
-    background-image: linear-gradient(
-      -180deg,
-      transparent 3%,
-      rgb(76 81 85) 130%
-    );
-  }
-
-  .bubble-with-types {
-    @apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
-
-    .message-text__wrap {
-      @apply relative;
-
-      .link {
-        @apply text-white dark:text-white underline;
-      }
-    }
-
-    .image,
-    .video {
-      @apply cursor-pointer relative;
-
-      .modal-container {
-        @apply text-center;
-      }
-
-      .modal-image {
-        @apply max-h-[76vh] max-w-[76vw];
-      }
-
-      .modal-video {
-        @apply max-h-[76vh] max-w-[76vw];
-      }
-
-      &::before {
-        @apply custom-gradient bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
-      }
-    }
-  }
-}
-
-.conversation-panel {
-  @apply flex-shrink flex-grow basis-px flex flex-col overflow-y-auto relative h-full m-0 pb-4;
-}
-
-.conversation-panel > li {
-  @apply flex flex-shrink-0 flex-grow-0 flex-auto max-w-full mt-0 mr-0 mb-1 ml-0 relative first:mt-auto last:mb-0;
-
-  &.unread--toast {
-    + .right {
-      @apply mb-1;
-    }
-
-    + .left {
-      @apply mb-0;
-    }
-
-    span {
-      @apply shadow-lg rounded-full bg-woot-500 dark:bg-woot-500 text-white dark:text-white text-xs font-medium my-2.5 mx-auto px-2.5 py-1.5;
-    }
-  }
-
-  .bubble {
-    @apply bubble-with-types text-left break-words;
-
-    .aplayer {
-      @apply shadow-none;
-      font-family: inherit;
-    }
-  }
-
-  &.left {
-    .bubble {
-      @apply rounded-r-lg rounded-l mr-auto break-words;
-
-      &:not(.is-unsupported) {
-        @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50;
-      }
-
-      &.is-image {
-        @apply rounded-lg;
-      }
-
-      .link {
-        @apply text-woot-600 dark:text-woot-600;
-      }
-
-      .file {
-        .attachment-name {
-          @apply text-slate-700 dark:text-woot-300;
-        }
-
-        .icon-wrap {
-          @apply text-woot-600 dark:text-woot-600;
-        }
-
-        .download {
-          @apply text-woot-600 dark:text-woot-600;
-        }
-      }
-    }
-
-    + .right {
-      @apply mt-2.5;
-
-      .bubble {
-        @apply rounded-tr-lg;
-      }
-    }
-
-    + .unread--toast {
-      + .right {
-        @apply mt-2.5;
-
-        .bubble {
-          @apply rounded-tr-lg;
-        }
-      }
-
-      + .left {
-        @apply mt-0;
-      }
-    }
-  }
-
-  &.right {
-    @apply justify-end;
-
-    .wrap {
-      @apply flex items-end mr-4 text-right;
-
-      .sender--info {
-        @apply pt-2 pb-1 pr-0 pl-2;
-      }
-    }
-
-    .bubble {
-      @apply ml-auto break-words rounded-l-lg rounded-r;
-
-      &.is-private {
-        @apply text-black-900 dark:text-white relative border border-solid bg-yellow-100 dark:bg-yellow-700 border-yellow-200 dark:border-yellow-600/25;
-
-        blockquote {
-          @apply border-slate-400 dark:border-slate-400 text-slate-800 dark:text-slate-300;
-
-          p {
-            @apply text-slate-600 dark:text-slate-300;
-          }
-        }
-      }
-
-      &.is-image {
-        @apply rounded-lg;
-
-        .message__mail-head {
-          @apply px-4 py-2;
-        }
-      }
-    }
-
-    + .left {
-      @apply mt-2.5;
-
-      .bubble {
-        @apply rounded-tl-lg;
-      }
-    }
-
-    + .unread--toast {
-      + .left {
-        @apply rounded-lg;
-
-        .bubble {
-          @apply rounded-tl-lg;
-        }
-      }
-
-      + .right {
-        @apply mt-0;
-      }
-    }
-  }
-
-  &.center {
-    @apply items-center justify-center;
-  }
-
-  .wrap {
-    max-width: Min(31rem, 84%);
-    @apply my-0 mx-4;
-
-    .sender--name {
-      @apply text-xs mb-1;
-    }
-  }
-
-  .sender--thumbnail {
-    @apply h-3 mr-3 mt-0.5 w-3 rounded-full;
-  }
-
-  .activity-wrap {
-    @apply flex justify-center text-sm my-1 mx-0 py-1 pr-0.5 pl-2.5 bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100 rounded-md border border-slate-100 dark:border-slate-600 border-solid;
-
-    .is-text {
-      @apply inline-flex items-center text-start 2xl:flex;
-    }
-  }
-}
-
-.activity-wrap .message-text__wrap {
-  .text-content p {
-    @apply mb-0;
-  }
-}
-
-.conversation-footer {
-  @apply flex relative flex-col;
-}
-
-.left .bubble .text-content {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply text-slate-800 dark:text-slate-100;
-  }
-
-  a {
-    @apply text-woot-500 dark:text-woot-500 underline;
-  }
-
-  p:last-child {
-    @apply mb-0;
-  }
-}
-
-.right .bubble .text-content {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply text-white dark:text-white;
-  }
-
-  a {
-    @apply text-white dark:text-white underline;
-  }
-
-  p:last-child {
-    @apply mb-0;
-  }
-}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
deleted file mode 100644
index 72773de7f..000000000
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-.tabs--container {
-  @apply flex;
-}
-
-.tabs--container--with-border {
-  @apply border-b border-b-n-weak;
-}
-
-.tabs--container--compact.tab--chat-type {
-  .tabs-title {
-    a {
-      @apply py-2 text-sm;
-    }
-  }
-}
-
-.tabs {
-  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
-}
-
-.tabs--with-scroll {
-  @apply overflow-hidden py-0 px-1;
-  max-width: calc(100% - 64px);
-}
-
-.tabs--scroll-button {
-  @apply items-center rounded-none cursor-pointer flex h-auto justify-center min-w-[2rem];
-}
-
-// Tab chat type
-.tab--chat-type {
-  @apply flex;
-
-  .tabs-title {
-    a {
-      @apply text-base font-medium py-3;
-    }
-  }
-}
-
-.tabs-title {
-  @apply flex-shrink-0 my-0 mx-2;
-
-  .badge {
-    @apply bg-n-alpha-black2 dark:bg-n-solid-3 rounded-md text-n-slate-11 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
-  }
-
-  &:first-child {
-    @apply ml-0;
-  }
-
-  &:last-child {
-    @apply mr-0;
-  }
-
-  &:hover,
-  &:focus {
-    a {
-      @apply text-n-slate-12;
-    }
-  }
-
-  a {
-    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-n-slate-11 text-sm top-[1px] relative;
-    transition: border-color 0.15s $swift-ease-out-function;
-  }
-
-  &.is-active {
-    a {
-      @apply border-b border-n-brand text-n-blue-text;
-    }
-
-    .badge {
-      @apply bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text;
-    }
-  }
-}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss b/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
deleted file mode 100644
index b5182bf87..000000000
--- a/app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-table {
-  @apply border-spacing-0 text-sm w-full;
-
-
-}
-
-.woot-table {
-  thead {
-    th {
-      @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200;
-    }
-  }
-
-  tbody {
-    tr {
-      @apply border-b border-slate-50 dark:border-slate-800/30;
-    }
-
-    td {
-      @apply p-2.5 text-slate-700 dark:text-slate-100;
-    }
-  }
-
-  tr {
-    .show-if-hover {
-      transition: opacity 0.2s $swift-ease-out-function;
-      @apply opacity-0;
-    }
-
-    &:hover {
-      .show-if-hover {
-        @apply opacity-100;
-      }
-    }
-  }
-
-  .agent-name {
-    @apply block font-medium capitalize;
-  }
-
-  .woot-thumbnail {
-    @apply rounded-full h-[3.125rem] w-[3.125rem];
-  }
-
-  .button-wrapper {
-    @apply flex justify-start flex-row min-w-[12.5rem] gap-1;
-  }
-
-  .button {
-    margin: 0;
-  }
-}
-
-.ve-table {
-  .ve-table-container.ve-table-border-around {
-    @apply border-slate-200 dark:border-slate-700;
-  }
-
-  .ve-table-content {
-    .ve-table-header .ve-table-header-tr .ve-table-header-th {
-      @apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100 border-slate-100 dark:border-slate-700/50;
-    }
-
-    .ve-table-body .ve-table-body-tr .ve-table-body-td {
-      @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-75 dark:border-slate-800;
-    }
-
-    .ve-table-body.ve-table-row-hover .ve-table-body-tr:hover td {
-      @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
-    }
-  }
-}
-
-.table-pagination {
-  .ve-pagination-total {
-    @apply text-slate-600 dark:text-slate-200;
-  }
-
-  .ve-pagination-goto {
-    @apply text-slate-600 dark:text-slate-200;
-
-    .ve-pagination-goto-input {
-      @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200;
-    }
-  }
-
-  .ve-pagination-li {
-    @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 border-slate-75 dark:border-slate-700;
-  }
-}
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
index 574b06125..36cb7c7e2 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
@@ -40,9 +40,9 @@ const handleSubmit = campaignDetails => {
 
 <template>
   <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
   >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+    <h3 class="text-base font-medium text-n-slate-12">
       {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
     </h3>
     <LiveChatCampaignForm
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
index 1a9bc8cdf..7e5ca21b9 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
@@ -306,7 +306,7 @@ defineExpose({ prepareCampaignDetails, isSubmitDisabled });
         variant="faded"
         color="slate"
         :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
index d959499ee..74ec98c2c 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
@@ -39,9 +39,9 @@ const handleClose = () => emit('close');
 
 <template>
   <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
   >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+    <h3 class="text-base font-medium text-n-slate-12">
       {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
     </h3>
     <SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
index 653e58a9a..f41e1ae98 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
@@ -174,7 +174,7 @@ const handleSubmit = async () => {
         color="slate"
         type="button"
         :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
index 2a0e79931..eed5a0f52 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
@@ -130,7 +130,7 @@ const onMergeContacts = async () => {
         variant="faded"
         color="slate"
         :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
         @click="resetState"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/Editor/Editor.vue b/app/javascript/dashboard/components-next/Editor/Editor.vue
index 510ae67e2..9e5ff6ab5 100644
--- a/app/javascript/dashboard/components-next/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -35,7 +35,7 @@ const messageClass = computed(() => {
     case 'error':
       return 'text-n-ruby-9 dark:text-n-ruby-9';
     case 'success':
-      return 'text-green-500 dark:text-green-400';
+      return 'text-n-teal-10 dark:text-n-teal-10';
     default:
       return 'text-n-slate-11 dark:text-n-slate-11';
   }
diff --git a/app/javascript/dashboard/components-next/EmptyStateLayout.vue b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
index 09b8afee5..f2744dde5 100644
--- a/app/javascript/dashboard/components-next/EmptyStateLayout.vue
+++ b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
@@ -35,12 +35,12 @@ defineProps({
         <div class="flex flex-col items-center justify-center gap-6">
           <div class="flex flex-col items-center justify-center gap-3">
             <h2
-              class="text-3xl font-medium text-center text-slate-900 dark:text-white font-interDisplay"
+              class="text-3xl font-medium text-center text-n-slate-12 font-interDisplay"
             >
               {{ title }}
             </h2>
             <p
-              class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
+              class="max-w-xl text-base text-center text-n-slate-11 font-interDisplay tracking-[0.3px]"
             >
               {{ subtitle }}
             </p>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
index be0c41163..ec5fca38c 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
@@ -70,7 +70,7 @@ const category = {
       <div
         v-for="(article, index) in articles"
         :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <ArticleCard
           :id="article.id"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
index e279c8dfc..15b658b7d 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
@@ -32,7 +32,7 @@ const categories = [
       <div
         v-for="(category, index) in categories"
         :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <CategoryCard
           :id="category.id"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
index d9a82fde5..ff5b21ae2 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
@@ -121,11 +121,7 @@ const handleAction = ({ action, value }) => {
     </div>
     <span
       class="text-sm line-clamp-3"
-      :class="
-        hasDescription
-          ? 'text-slate-500 dark:text-slate-400'
-          : 'text-slate-400 dark:text-slate-700'
-      "
+      :class="hasDescription ? 'text-n-slate-11' : 'text-n-slate-9'"
     >
       {{ description }}
     </span>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue
index 4a3cb8135..9a9745cf3 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue
@@ -8,7 +8,7 @@ import ArticleEmptyState from './ArticleEmptyState.vue';
     :layout="{ type: 'single', width: '1100px' }"
   >
     <Variant title="Article Empty State">
-      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
+      <div class="w-full h-full px-20 mx-auto bg-n-background">
         <ArticleEmptyState />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue
index 56ab5edc3..72a819be6 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue
@@ -8,7 +8,7 @@ import PortalEmptyState from './PortalEmptyState.vue';
     :layout="{ type: 'single', width: '1100px' }"
   >
     <Variant title="Portal Empty State">
-      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
+      <div class="w-full h-full px-20 mx-auto bg-n-background">
         <PortalEmptyState />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.story.vue b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.story.vue
index 2bc5facbb..d51d3dc71 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.story.vue
@@ -14,7 +14,7 @@ const locales = [
     :layout="{ type: 'grid', width: '800px' }"
   >
     <Variant title="Locale Card">
-      <div class="px-10 py-4 bg-white dark:bg-slate-900">
+      <div class="px-10 py-4 bg-n-background">
         <div v-for="(locale, index) in locales" :key="index" class="px-20 py-2">
           <LocaleCard
             :locale="locale.name"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
index 0f148fd7b..04e0ab9b1 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
@@ -55,9 +55,7 @@ const handleAction = ({ action, value }) => {
   <CardLayout>
     <div class="flex justify-between gap-2">
       <div class="flex items-center justify-start gap-2">
-        <span
-          class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
-        >
+        <span class="text-sm font-medium text-n-slate-12 line-clamp-1">
           {{ locale }} ({{ localeCode }})
         </span>
         <span
@@ -69,9 +67,7 @@ const handleAction = ({ action, value }) => {
       </div>
       <div class="flex items-center justify-end gap-4">
         <div class="flex items-center gap-4">
-          <span
-            class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
-          >
+          <span class="text-sm text-n-slate-11 whitespace-nowrap">
             {{
               $t(
                 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
@@ -79,10 +75,8 @@ const handleAction = ({ action, value }) => {
               )
             }}
           </span>
-          <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
-          <span
-            class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
-          >
+          <div class="w-px h-3 bg-n-weak" />
+          <span class="text-sm text-n-slate-11 whitespace-nowrap">
             {{
               $t(
                 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 1709d0f5f..7beff200e 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -146,7 +146,7 @@ const previewArticle = () => {
 <style lang="scss" scoped>
 ::v-deep {
   .ProseMirror .empty-node::before {
-    @apply text-slate-200 dark:text-slate-500 text-base;
+    @apply text-n-slate-10 text-base;
   }
 
   .ProseMirror-menubar-wrapper {
@@ -161,7 +161,7 @@ const previewArticle = () => {
 
   .editor-root .has-selection {
     .ProseMirror-menubar {
-      @apply h-8 rounded-lg !px-2 z-50 bg-slate-50 dark:bg-slate-800 items-center gap-4 ml-0 mb-0 shadow-md border border-slate-75 dark:border-slate-700/50;
+      @apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
       display: flex;
       top: var(--selection-top, auto) !important;
       left: var(--selection-left, 0) !important;
@@ -180,6 +180,10 @@ const previewArticle = () => {
           }
         }
       }
+
+      .ProseMirror-menu-active {
+        @apply bg-n-slate-3;
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
index a910f4d8d..c93aa1afd 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -206,7 +206,7 @@ onMounted(() => {
         />
       </OnClickOutside>
     </div>
-    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
+    <div class="w-px h-3 bg-n-weak" />
     <div class="relative">
       <OnClickOutside @trigger="openCategoryList = false">
         <Button
@@ -239,7 +239,7 @@ onMounted(() => {
       </OnClickOutside>
     </div>
 
-    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
+    <div class="w-px h-3 bg-n-weak" />
     <div class="relative">
       <OnClickOutside @trigger="openProperties = false">
         <Button
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
index cfaa4ce11..2d8b219f7 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
@@ -128,7 +128,7 @@ const updateArticleStatus = async ({ value }) => {
     <div class="flex items-center gap-4">
       <span
         v-if="isUpdating || isSaved"
-        class="text-xs font-medium transition-all duration-300 text-slate-500 dark:text-slate-400"
+        class="text-xs font-medium transition-all duration-300 text-n-slate-11"
       >
         {{ statusText }}
       </span>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue
index cfb353200..58c7acee9 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue
@@ -64,7 +64,7 @@ const articles = [
 <template>
   <Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
     <Variant title="All Articles">
-      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
+      <div class="w-full min-h-screen bg-n-background">
         <ArticlesPage :articles="articles" />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
index 8fdafd86a..6165949ba 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
@@ -201,7 +201,7 @@ const categories = [
 <template>
   <Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
     <Variant title="All Categories">
-      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
+      <div class="w-full min-h-screen bg-n-background">
         <CategoriesPage :categories="categories" />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
index 62c893971..d71c17260 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
@@ -90,9 +90,9 @@ const handleCategory = async formData => {
 
 <template>
   <div
-    class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
   >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+    <h3 class="text-base font-medium text-n-slate-12">
       {{
         t(
           `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.${mode.toUpperCase()}`
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
index 18fabd2af..5c0316b7d 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
@@ -246,7 +246,7 @@ defineExpose({ state, isSubmitDisabled });
           variant="faded"
           color="slate"
           :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
-          class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+          class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
           @click="handleCancel"
         />
         <Button
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
index 9c62997ef..d4e76cf31 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
@@ -147,10 +147,8 @@ const handleBreadcrumbClick = () => {
           />
         </OnClickOutside>
       </div>
-      <div class="w-px h-3.5 rounded my-auto bg-slate-75 dark:bg-slate-800" />
-      <span
-        class="min-w-0 text-sm font-medium truncate text-slate-800 dark:text-slate-100"
-      >
+      <div class="w-px h-3.5 rounded my-auto bg-n-weak" />
+      <span class="min-w-0 text-sm font-medium truncate text-n-slate-12">
         {{
           t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.CATEGORIES_COUNT', {
             n: categoriesCount,
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue
index 630c50ca4..54adbcb3b 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue
@@ -44,7 +44,7 @@ const locales = [
 <template>
   <Story title="Pages/HelpCenter/LocalePage" :layout="{ type: 'single' }">
     <Variant title="All Locales">
-      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
+      <div class="w-full min-h-screen bg-n-background">
         <LocalesPage :locales="locales" />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
index 5b25779c7..22dd42edd 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
@@ -35,7 +35,7 @@ const localeCount = computed(() => props.locales?.length);
     <template #header-actions>
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-4">
-          <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+          <span class="text-sm font-medium text-n-slate-12">
             {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
           </span>
         </div>
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 34f1e003f..7995270b5 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -211,7 +211,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.LABEL') }}
         </label>
@@ -229,7 +229,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.LABEL') }}
         </label>
@@ -245,7 +245,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.LABEL') }}
         </label>
@@ -261,7 +261,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.LABEL') }}
         </label>
@@ -281,7 +281,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.LABEL') }}
         </label>
@@ -299,7 +299,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.LABEL') }}
         </label>
@@ -317,7 +317,7 @@ const handleAvatarDelete = () => {
       </div>
       <div class="flex items-start justify-between w-full gap-2">
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.BRAND_COLOR.LABEL') }}
         </label>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue
index 14d460a04..ab25484ad 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue
@@ -5,7 +5,7 @@ import PortalSettings from './PortalSettings.vue';
 <template>
   <Story title="Pages/HelpCenter/PortalSettings" :layout="{ type: 'single' }">
     <Variant title="Default">
-      <div class="w-[1000px] min-h-screen bg-white dark:bg-slate-900">
+      <div class="w-[1000px] min-h-screen bg-n-background">
         <PortalSettings />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
index a49493818..02b5001b9 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
@@ -81,13 +81,13 @@ const handleDeletePortal = () => {
           :is-fetching="isFetching"
           @update-portal="handleUpdatePortal"
         />
-        <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
+        <div class="w-full h-px bg-n-weak" />
         <PortalConfigurationSettings
           :active-portal="activePortal"
           :is-fetching="isFetching"
           @update-portal-configuration="handleUpdatePortalConfiguration"
         />
-        <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
+        <div class="w-full h-px bg-n-weak" />
         <div class="flex items-end justify-between w-full gap-4">
           <div class="flex flex-col gap-2">
             <h6 class="text-base font-medium text-n-slate-12">
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.story.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.story.vue
index e1a9dfa17..a26f5a8de 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.story.vue
@@ -32,7 +32,7 @@ const portals = [
     :layout="{ type: 'grid', width: '510px' }"
   >
     <Variant title="Portal Switcher">
-      <div class="h-[500px] p-4 bg-slate-100 dark:bg-slate-900">
+      <div class="h-[500px] p-4 bg-n-slate-2 dark:bg-n-background">
         <PortalSwitcher
           :portals="portals"
           header="Choose a Portal"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index 5a835f8cb..bfc173d16 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -100,7 +100,7 @@ const redirectToPortalHomePage = () => {
       <div class="flex flex-col gap-1">
         <div class="flex items-center gap-2">
           <h2
-            class="text-base font-medium cursor-pointer text-slate-900 dark:text-slate-50 w-fit hover:underline"
+            class="text-base font-medium cursor-pointer text-n-slate-12 w-fit hover:underline"
             @click="redirectToPortalHomePage"
           >
             {{ t('HELP_CENTER.PORTAL_SWITCHER.PORTALS') }}
@@ -115,7 +115,7 @@ const redirectToPortalHomePage = () => {
             @click="onClickPreviewPortal"
           />
         </div>
-        <p class="text-sm text-slate-600 dark:text-slate-300">
+        <p class="text-sm text-n-slate-11">
           {{ t('HELP_CENTER.PORTAL_SWITCHER.CREATE_PORTAL') }}
         </p>
       </div>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
index 12b804e72..cdb03edcb 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
@@ -5,7 +5,7 @@ import Avatar from './Avatar.vue';
 <template>
   <Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
     <Variant title="Default">
-      <div class="flex p-4 space-x-4 bg-white dark:bg-slate-900">
+      <div class="flex p-4 space-x-4 bg-n-background">
         <Avatar
           name=""
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
@@ -16,7 +16,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Different Shapes">
-      <div class="gap-4 p-4 bg-white dark:bg-slate-900">
+      <div class="gap-4 p-4 bg-n-background">
         <Avatar
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
           name=""
@@ -34,7 +34,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Different Sizes">
-      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <Avatar
           src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
           :size="48"
@@ -57,7 +57,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="With Status">
-      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <Avatar
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
           status="online"
@@ -77,7 +77,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="With Custom Icon">
-      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <Avatar name="Custom Icon" icon-name="i-lucide-user" :size="48" />
         <Avatar
           name="Custom Industry"
@@ -88,7 +88,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Upload States">
-      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <!-- Empty state with upload -->
         <Avatar name="Upload New" allow-upload :size="48" />
 
@@ -103,7 +103,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Name Initials">
-      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <Avatar name="Catherine" :size="48" />
         <Avatar name="John Doe" :size="48" />
         <Avatar name="Rose Doe John" :size="48" />
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
index 0c2bdf115..8fe74d7ba 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
@@ -29,32 +29,32 @@ const longBreadcrumb = ref([
     :layout="{ type: 'grid', width: '800px' }"
   >
     <Variant title="Single Item">
-      <div class="w-full p-4 bg-white dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background">
         <Breadcrumb :items="singleItem" />
       </div>
     </Variant>
 
     <Variant title="Two Items">
-      <div class="w-full p-4 bg-white dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background">
         <Breadcrumb :items="twoItems" />
       </div>
     </Variant>
 
     <Variant title="Three Items with Count">
-      <div class="w-full p-4 bg-white dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background">
         <Breadcrumb :items="threeItems" count-label="articles" />
       </div>
     </Variant>
 
     <Variant title="Long Breadcrumb">
-      <div class="w-full p-4 bg-white dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background">
         <Breadcrumb :items="longBreadcrumb" count-label="articles" />
       </div>
     </Variant>
 
     <Variant title="RTL Support">
       <div dir="rtl">
-        <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <div class="w-full p-4 bg-n-background">
           <Breadcrumb :items="threeItems" count-label="articles" />
         </div>
       </div>
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
index bb848c62b..8ca325607 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
@@ -36,9 +36,7 @@ const onClick = event => {
             icon="i-lucide-chevron-right"
             class="flex-shrink-0 mx-2 size-4 text-n-slate-11 dark:text-n-slate-11"
           />
-          <span
-            class="text-sm truncate text-slate-900 dark:text-slate-50 max-w-56"
-          >
+          <span class="text-sm truncate text-n-slate-12 max-w-56">
             {{ item.emoji ? item.emoji : '' }} {{ item.label }}
           </span>
         </template>
diff --git a/app/javascript/dashboard/components-next/button/Button.story.vue b/app/javascript/dashboard/components-next/button/Button.story.vue
index 404712b34..53d0f3e2e 100644
--- a/app/javascript/dashboard/components-next/button/Button.story.vue
+++ b/app/javascript/dashboard/components-next/button/Button.story.vue
@@ -11,7 +11,7 @@ const SIZES = ['default', 'sm', 'lg'];
   <Story title="Components/Button" :layout="{ type: 'grid', width: '800px' }">
     <!-- Basic Variants -->
     <Variant title="Basic Variants">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button
           v-for="variant in VARIANTS"
           :key="variant"
@@ -23,7 +23,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Colors -->
     <Variant title="Color Variants">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button
           v-for="color in COLORS"
           :key="color"
@@ -35,16 +35,14 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Sizes -->
     <Variant title="Size Variants">
-      <div
-        class="flex flex-wrap items-center gap-2 p-4 bg-white dark:bg-slate-900"
-      >
+      <div class="flex flex-wrap items-center gap-2 p-4 bg-n-background">
         <Button v-for="size in SIZES" :key="size" :label="size" :size="size" />
       </div>
     </Variant>
 
     <!-- Icons -->
     <Variant title="Icons">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button label="Leading Icon" icon="i-lucide-plus" />
         <Button label="Trailing Icon" icon="i-lucide-plus" trailing-icon />
         <Button icon="i-lucide-plus" />
@@ -53,7 +51,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Loading State -->
     <Variant title="Loading State">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button label="Loading" is-loading />
         <Button label="Loading" variant="outline" is-loading />
         <Button is-loading icon="i-lucide-plus" />
@@ -62,7 +60,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Disabled State -->
     <Variant title="Disabled State">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button label="Disabled" disabled />
         <Button label="Disabled Outline" variant="outline" disabled />
         <Button label="Disabled Icon" icon="delete" disabled />
@@ -78,7 +76,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Color Combinations -->
     <Variant title="Color & Variant Combinations">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <template v-for="color in COLORS" :key="color">
           <Button
             v-for="variant in VARIANTS"
@@ -93,7 +91,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Icon Positions -->
     <Variant title="Icon Positions & Sizes">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <template v-for="size in SIZES" :key="size">
           <Button
             :label="`${size} Leading`"
@@ -113,7 +111,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Ghost & Link Variants -->
     <Variant title="Ghost & Link Variants">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button label="Ghost Button" variant="ghost" color="slate" />
         <Button
           label="Ghost with Icon"
diff --git a/app/javascript/dashboard/components-next/button/ConfirmButton.story.vue b/app/javascript/dashboard/components-next/button/ConfirmButton.story.vue
index 673661a74..8e2847982 100644
--- a/app/javascript/dashboard/components-next/button/ConfirmButton.story.vue
+++ b/app/javascript/dashboard/components-next/button/ConfirmButton.story.vue
@@ -15,7 +15,7 @@ const incrementCount = () => {
     :layout="{ type: 'grid', width: '400px' }"
   >
     <Variant title="Basic">
-      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="grid gap-2 p-4 bg-n-background">
         <p>{{ count }}</p>
         <ConfirmButton
           label="Delete"
@@ -26,7 +26,7 @@ const incrementCount = () => {
     </Variant>
 
     <Variant title="Color Change">
-      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="grid gap-2 p-4 bg-n-background">
         <p>{{ count }}</p>
         <ConfirmButton
           label="Archive"
diff --git a/app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue b/app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue
index b388d067e..7557d01dd 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue
@@ -12,7 +12,7 @@ import { assistantsList } from 'dashboard/components-next/captain/pageComponents
       <div
         v-for="(assistant, index) in assistantsList"
         :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <AssistantCard
           :id="assistant.id"
diff --git a/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.story.vue b/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.story.vue
index df1ada6cc..40d2f1f04 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.story.vue
@@ -12,7 +12,7 @@ import { documentsList } from 'dashboard/components-next/captain/pageComponents/
       <div
         v-for="(doc, index) in documentsList"
         :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <DocumentCard
           :id="doc.id"
diff --git a/app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue b/app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue
index 2fd0e9756..afddce442 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue
@@ -12,7 +12,7 @@ import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyS
       <div
         v-for="inbox in inboxes"
         :key="inbox.id"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <InboxCard :id="inbox.id" :inbox="inbox" />
       </div>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue b/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue
index 1a281b799..0842422b9 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue
@@ -12,7 +12,7 @@ import { responsesList } from 'dashboard/components-next/captain/pageComponents/
       <div
         v-for="(response, index) in responsesList"
         :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <ResponseCard
           :id="response.id"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
index 3c8afec07..8c26de2f5 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
@@ -159,7 +159,7 @@ watch(
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
index 7db74f523..40ad2cc6a 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue
@@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DocumentForm from './DocumentForm.vue';
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'success']);
 const { t } = useI18n();
 const store = useStore();
 
@@ -18,12 +18,32 @@ const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
 
 const handleSubmit = async newDocument => {
   try {
-    await store.dispatch('captainDocuments/create', newDocument);
-    useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
+    if (newDocument.type === 'pdf') {
+      // Handle PDF upload
+      const formData = new FormData();
+      formData.append('pdf_document', newDocument.pdf_document);
+      formData.append('assistant_id', newDocument.assistant_id);
+
+      await store.dispatch('captainDocuments/uploadPdf', formData);
+      useAlert('PDF uploaded successfully! Processing will begin shortly.');
+    } else {
+      // Handle URL creation
+      await store.dispatch('captainDocuments/create', {
+        document: {
+          external_link: newDocument.external_link,
+          assistant_id: newDocument.assistant_id,
+        },
+      });
+      useAlert('Document created successfully!');
+    }
+    
+    // Emit success event to refresh the list
+    emit('success');
     dialogRef.value.close();
   } catch (error) {
     const errorMessage =
-      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
+      error?.response?.data?.message ||
+      'Failed to create document. Please try again.';
     useAlert(errorMessage);
   }
 };
@@ -42,8 +62,8 @@ defineExpose({ dialogRef });
 <template>
   <Dialog
     ref="dialogRef"
-    :title="$t(`${i18nKey}.TITLE`)"
-    :description="$t('CAPTAIN.DOCUMENTS.FORM_DESCRIPTION')"
+    title="Create New Document"
+    description="Add a new document from a website URL or by uploading a PDF file"
     :show-cancel-button="false"
     :show-confirm-button="false"
     @close="handleClose"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
index 2a2730e46..fbb828a28 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, computed } from 'vue';
+import { reactive, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, url } from '@vuelidate/validators';
@@ -8,6 +8,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import FileUpload from 'dashboard/components-next/fileUpload/FileUpload.vue';
 
 const emit = defineEmits(['submit', 'cancel']);
 
@@ -19,16 +20,26 @@ const formState = {
 };
 
 const initialState = {
-  name: '',
+  url: '',
   assistantId: null,
+  selectedFile: null,
+  sourceType: 'url', // 'url' or 'pdf'
 };
 
 const state = reactive({ ...initialState });
+const uploadError = ref('');
 
-const validationRules = {
-  url: { required, url, minLength: minLength(1) },
-  assistantId: { required },
-};
+const validationRules = computed(() => {
+  const rules = {
+    assistantId: { required },
+  };
+
+  if (state.sourceType === 'url') {
+    rules.url = { required, url, minLength: minLength(1) };
+  }
+
+  return rules;
+});
 
 const assistantList = computed(() =>
   formState.assistants.value.map(assistant => ({
@@ -41,70 +52,254 @@ const v$ = useVuelidate(validationRules, state);
 
 const isLoading = computed(() => formState.uiFlags.value.creatingItem);
 
-const getErrorMessage = (field, errorKey) => {
-  return v$.value[field].$error
-    ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
-    : '';
+const getErrorMessage = (field, errorMessage) => {
+  return v$.value[field]?.$error ? errorMessage : '';
 };
 
 const formErrors = computed(() => ({
-  url: getErrorMessage('url', 'URL'),
-  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
+  url: getErrorMessage('url', 'Please enter a valid URL'),
+  assistantId: getErrorMessage('assistantId', 'Please select an assistant'),
 }));
 
 const handleCancel = () => emit('cancel');
 
-const prepareDocumentDetails = () => ({
-  external_link: state.url,
-  assistant_id: state.assistantId,
-});
+const prepareDocumentDetails = () => {
+  if (state.sourceType === 'pdf') {
+    return {
+      type: 'pdf',
+      pdf_document: state.selectedFile,
+      assistant_id: state.assistantId,
+    };
+  }
+
+  return {
+    type: 'url',
+    external_link: state.url,
+    assistant_id: state.assistantId,
+  };
+};
 
 const handleSubmit = async () => {
+  uploadError.value = '';
+
+  // Validate form
   const isFormValid = await v$.value.$validate();
   if (!isFormValid) {
     return;
   }
 
+  // For PDF uploads, check if file is selected
+  if (state.sourceType === 'pdf' && !state.selectedFile) {
+    uploadError.value = 'Please select a PDF file to upload.';
+    return;
+  }
+
   emit('submit', prepareDocumentDetails());
 };
+
+// PDF Upload handlers
+const handleFileSelected = file => {
+  state.selectedFile = file;
+  uploadError.value = '';
+};
+
+const handleFileError = error => {
+  uploadError.value = error;
+  state.selectedFile = null;
+};
+
+const clearSelectedFile = () => {
+  state.selectedFile = null;
+  uploadError.value = '';
+};
+
+const handleSourceTypeChange = type => {
+  state.sourceType = type;
+  uploadError.value = '';
+  state.selectedFile = null;
+  state.url = '';
+};
 </script>
 
 <template>
   <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.url"
-      :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
-      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
-      :message="formErrors.url"
-      :message-type="formErrors.url ? 'error' : 'info'"
-    />
+    <!-- Source Type Selection -->
+    <div class="flex flex-col gap-2">
+      <label class="mb-0.5 text-sm font-medium text-n-slate-12">
+        Choose Source Type
+      </label>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="flex-1 p-3 rounded-lg bg-n-alpha-2 hover:border-n-slate-7 transition-colors focus:outline-none"
+          :class="{
+            'ring-2 ring-woot-500 text-woot-500 border-0':
+              state.sourceType === 'url',
+            'border-2 border-n-slate-7 text-n-slate-11':
+              state.sourceType !== 'url',
+          }"
+          @click="handleSourceTypeChange('url')"
+        >
+          <div class="flex items-center justify-center gap-2">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12S4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12S18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12S19.76 7 17 7Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span class="text-sm font-medium">Website URL</span>
+          </div>
+        </button>
+        <button
+          type="button"
+          class="flex-1 p-3 rounded-lg bg-n-alpha-2 hover:border-n-slate-7 transition-colors focus:outline-none"
+          :class="{
+            'ring-2 ring-woot-500 text-woot-500 border-0':
+              state.sourceType === 'pdf',
+            'border-2 border-n-slate-7 text-n-slate-11':
+              state.sourceType !== 'pdf',
+          }"
+          @click="handleSourceTypeChange('pdf')"
+        >
+          <div class="flex items-center justify-center gap-2">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span class="text-sm font-medium">PDF Upload</span>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- URL Input (when URL is selected) -->
+    <div v-if="state.sourceType === 'url'">
+      <Input
+        v-model="state.url"
+        label="Website URL"
+        placeholder="Enter the website URL to crawl"
+        :message="formErrors.url"
+        :message-type="formErrors.url ? 'error' : 'info'"
+      />
+    </div>
+
+    <!-- PDF Upload (when PDF is selected) -->
+    <div v-if="state.sourceType === 'pdf'" class="flex flex-col gap-2">
+      <label class="mb-0.5 text-sm font-medium text-n-slate-12">
+        Upload PDF Document
+      </label>
+
+      <!-- File upload area -->
+      <div v-if="!state.selectedFile">
+        <FileUpload
+          accept="application/pdf"
+          :max-size-m-b="25"
+          placeholder="Select a PDF file"
+          upload-text="Click to select PDF or drag and drop"
+          drag-text="Drop PDF file here"
+          @file-selected="handleFileSelected"
+          @file-error="handleFileError"
+        />
+      </div>
+
+      <!-- Selected file display -->
+      <div v-else class="p-3 bg-n-alpha-2 rounded-lg border border-n-slate-6">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="text-red-600"
+            >
+              <path
+                d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
+                fill="currentColor"
+              />
+            </svg>
+            <div>
+              <p class="text-sm font-medium text-n-slate-12">
+                {{ state.selectedFile.name }}
+              </p>
+              <p class="text-xs text-n-slate-8">
+                {{
+                  Math.round((state.selectedFile.size / 1024 / 1024) * 100) /
+                  100
+                }}
+                MB
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            class="p-1 rounded hover:bg-n-alpha-3 text-n-slate-8 hover:text-n-slate-10"
+            @click="clearSelectedFile"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Upload error -->
+      <p v-if="uploadError" class="text-sm text-red-600">{{ uploadError }}</p>
+    </div>
+
+    <!-- Assistant Selection -->
     <div class="flex flex-col gap-1">
       <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}
+        Select Assistant
       </label>
       <ComboBox
         id="assistant"
         v-model="state.assistantId"
         :options="assistantList"
         :has-error="!!formErrors.assistantId"
-        :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
+        placeholder="Choose an assistant"
         class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
         :message="formErrors.assistantId"
       />
     </div>
 
+    <!-- Action Buttons -->
     <div class="flex items-center justify-between w-full gap-3">
       <Button
         type="button"
         variant="faded"
         color="slate"
-        :label="t('CAPTAIN.FORM.CANCEL')"
+        label="Cancel"
         class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
         type="submit"
-        :label="t('CAPTAIN.FORM.CREATE')"
+        label="Create Document"
         class="w-full"
         :is-loading="isLoading"
         :disabled="isLoading"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue
index 23aae478f..a7acb45b1 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue
@@ -100,7 +100,7 @@ const handleSubmit = async () => {
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue
index 5582199a7..2b143fd15 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue
@@ -146,7 +146,7 @@ watch(
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
index de04b115a..0e342def2 100644
--- a/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
+++ b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
@@ -90,7 +90,7 @@ const pickerRef = ref(null);
 
     input,
     .vc-input__input {
-      @apply bg-n-background text-slate-900 dark:text-slate-50 rounded-md shadow-none;
+      @apply bg-n-background text-n-slate-12 rounded-md shadow-none;
     }
 
     .vc-input__label {
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.story.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.story.vue
index caf26ad43..8933844ce 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.story.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.story.vue
@@ -15,14 +15,14 @@ const selectedValue = ref('');
 <template>
   <Story title="Components/ComboBox" :layout="{ type: 'grid', width: '300px' }">
     <Variant title="Default">
-      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background h-80">
         <ComboBox v-model="selectedValue" :options="options" />
         <p class="mt-2">Selected value: {{ selectedValue }}</p>
       </div>
     </Variant>
 
     <Variant title="Disabled">
-      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background h-80">
         <ComboBox :options="options" disabled />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
index e24a366e2..4cb0b6718 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="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"
+        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-n-slate-12"
         @input="onInputSearch"
       />
     </div>
@@ -102,10 +102,7 @@ defineExpose({
           class="flex-shrink-0 i-lucide-check size-4 text-n-slate-11"
         />
       </li>
-      <li
-        v-if="options.length === 0"
-        class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
-      >
+      <li v-if="options.length === 0" class="px-3 py-2 text-sm text-n-slate-11">
         {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
       </li>
     </ul>
diff --git a/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue
index dc4b5b0f3..fb57e7082 100644
--- a/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue
+++ b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue
@@ -20,14 +20,14 @@ const preselectedValues = ref([1, 2]);
     :layout="{ type: 'grid', width: '300px' }"
   >
     <Variant title="Default">
-      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background h-80">
         <TagMultiSelectComboBox v-model="selectedValues" :options="options" />
         <p class="mt-2">Selected values: {{ selectedValues }}</p>
       </div>
     </Variant>
 
     <Variant title="With Preselected Values">
-      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background h-80">
         <TagMultiSelectComboBox
           v-model="preselectedValues"
           :options="options"
@@ -37,13 +37,13 @@ const preselectedValues = ref([1, 2]);
     </Variant>
 
     <Variant title="Disabled">
-      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background h-80">
         <TagMultiSelectComboBox :options="options" disabled />
       </div>
     </Variant>
 
     <Variant title="With Error">
-      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background h-80">
         <TagMultiSelectComboBox
           :options="options"
           has-error
diff --git a/app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue b/app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue
index e21c550c0..9b7ac983f 100644
--- a/app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue
+++ b/app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue
@@ -49,7 +49,10 @@ const toggleSidebar = () => {
 </script>
 
 <template>
-  <div v-if="showCopilotLauncher" class="fixed bottom-4 right-4 z-50">
+  <div
+    v-if="showCopilotLauncher"
+    class="fixed bottom-4 ltr:right-4 rtl:left-4 z-50"
+  >
     <div class="rounded-full bg-n-alpha-2 p-1">
       <Button
         icon="i-woot-captain"
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
index f1fb01af3..fa1ffb30d 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
@@ -20,7 +20,7 @@ const handleAction = () => {
 <template>
   <Story title="Components/DropdownMenu" :layout="{ type: 'grid', width: 300 }">
     <Variant title="Default">
-      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+      <div class="p-4 bg-n-background h-72">
         <div class="relative">
           <Button label="Open Menu" size="sm" @click="toggleDropdown" />
           <DropdownMenu
@@ -34,13 +34,13 @@ const handleAction = () => {
     </Variant>
 
     <Variant title="Always Open">
-      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+      <div class="p-4 bg-n-background h-72">
         <DropdownMenu :menu-items="menuItems" @action="handleAction" />
       </div>
     </Variant>
 
     <Variant title="Custom Items">
-      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+      <div class="p-4 bg-n-background h-72">
         <DropdownMenu
           :menu-items="[
             { label: 'Custom 1', action: 'custom1', icon: 'file-upload' },
@@ -53,7 +53,7 @@ const handleAction = () => {
     </Variant>
 
     <Variant title="With search">
-      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+      <div class="p-4 bg-n-background h-72">
         <DropdownMenu
           :menu-items="[
             { label: 'Custom 1', action: 'custom1', icon: 'file-upload' },
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
index 085aa0d28..a174b1eea 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
@@ -51,7 +51,7 @@ const menuItems = ref([
     :layout="{ type: 'grid', width: 400, height: 800 }"
   >
     <Variant title="Profile Menu">
-      <div class="p-4 bg-white h-[500px] dark:bg-slate-900">
+      <div class="p-4 bg-n-background h-[500px]">
         <DropdownContainer>
           <template #trigger="{ toggle }">
             <Button label="Open Menu" size="sm" @click="toggle" />
diff --git a/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
new file mode 100644
index 000000000..33765e395
--- /dev/null
+++ b/app/javascript/dashboard/components-next/fileUpload/FileUpload.vue
@@ -0,0 +1,201 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  accept: {
+    type: String,
+    default: '*',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  maxSizeMB: {
+    type: Number,
+    default: 10,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  uploadText: {
+    type: String,
+    default: '',
+  },
+  dragText: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['file-selected', 'file-error']);
+
+const { t } = useI18n();
+const fileInput = ref(null);
+const isDragOver = ref(false);
+
+const acceptTypes = computed(() => props.accept);
+const maxSize = computed(() => props.maxSizeMB * 1024 * 1024);
+
+const handleFileClick = () => {
+  if (!props.disabled) {
+    fileInput.value?.click();
+  }
+};
+
+const validateFile = file => {
+  // Check file size
+  if (file.size > maxSize.value) {
+    const errorMsg = `File "${file.name}" is too large. Maximum size is ${props.maxSizeMB}MB.`;
+    emit('file-error', errorMsg);
+    return false;
+  }
+
+  // Check file type if specified
+  if (
+    props.accept !== '*' &&
+    !file.type.match(new RegExp(props.accept.replace('*', '.*')))
+  ) {
+    const errorMsg = `File type not supported. Only ${props.accept} files are allowed.`;
+    emit('file-error', errorMsg);
+    return false;
+  }
+
+  return true;
+};
+
+const handleFileChange = event => {
+  const files = event.target.files;
+  if (files && files.length > 0) {
+    const file = files[0];
+    if (validateFile(file)) {
+      emit('file-selected', file);
+    }
+  }
+  // Reset input value to allow selecting the same file again
+  event.target.value = '';
+};
+
+const handleDragOver = event => {
+  event.preventDefault();
+  if (!props.disabled) {
+    isDragOver.value = true;
+  }
+};
+
+const handleDragLeave = event => {
+  event.preventDefault();
+  // Only set to false if we're leaving the drop zone completely
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    isDragOver.value = false;
+  }
+};
+
+const handleDrop = event => {
+  event.preventDefault();
+  isDragOver.value = false;
+
+  if (props.disabled) return;
+
+  const files = event.dataTransfer.files;
+  if (files && files.length > 0) {
+    const file = files[0];
+    if (validateFile(file)) {
+      emit('file-selected', file);
+    }
+  }
+};
+
+const displayText = computed(() => {
+  if (isDragOver.value && props.dragText) {
+    return props.dragText;
+  }
+  return props.uploadText || props.placeholder;
+});
+</script>
+
+<template>
+  <div
+    class="file-upload-zone"
+    :class="{
+      'drag-over': isDragOver,
+      disabled: disabled,
+    }"
+    @dragover="handleDragOver"
+    @dragleave="handleDragLeave"
+    @drop="handleDrop"
+    @click="handleFileClick"
+  >
+    <input
+      ref="fileInput"
+      type="file"
+      :accept="acceptTypes"
+      :multiple="multiple"
+      :disabled="disabled"
+      class="hidden"
+      @change="handleFileChange"
+    />
+
+    <div class="upload-content">
+      <div class="upload-icon">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="text-n-slate-8"
+        >
+          <path
+            d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div class="upload-text">
+        <p class="text-sm font-medium text-n-slate-11">
+          {{ displayText }}
+        </p>
+        <p class="text-xs text-n-slate-8 mt-1">
+          Maximum file size: {{ maxSizeMB }}MB
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.file-upload-zone {
+  @apply border-2 border-dashed border-n-slate-6 rounded-lg p-6;
+  @apply bg-n-alpha-2 hover:bg-n-alpha-3 cursor-pointer;
+  @apply transition-all duration-200 ease-in-out;
+  @apply flex flex-col items-center justify-center text-center;
+  min-height: 120px;
+}
+
+.file-upload-zone:hover {
+  @apply border-n-slate-7;
+}
+
+.file-upload-zone.drag-over {
+  @apply border-n-blue-9 bg-n-blue-2/50;
+}
+
+.file-upload-zone.disabled {
+  @apply opacity-50 cursor-not-allowed;
+  @apply hover:bg-n-alpha-2 hover:border-n-slate-6;
+}
+
+.upload-content {
+  @apply flex flex-col items-center gap-3;
+}
+
+.upload-icon {
+  @apply p-2 rounded-full bg-n-alpha-3;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/icon/provider.js b/app/javascript/dashboard/components-next/icon/provider.js
index 9c0a24925..36dd6216e 100644
--- a/app/javascript/dashboard/components-next/icon/provider.js
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -13,6 +13,7 @@ export function useChannelIcon(inbox) {
     'Channel::WebWidget': 'i-ri-global-fill',
     'Channel::Whatsapp': 'i-ri-whatsapp-fill',
     'Channel::Instagram': 'i-ri-instagram-fill',
+    'Channel::Voice': 'i-ri-phone-fill',
   };
 
   const providerIconMap = {
diff --git a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
index df30d7138..5860e30ea 100644
--- a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
+++ b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
@@ -19,6 +19,12 @@ describe('useChannelIcon', () => {
     expect(icon).toBe('i-ri-whatsapp-fill');
   });
 
+  it('returns correct icon for Voice channel', () => {
+    const inbox = { channel_type: 'Channel::Voice' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-phone-fill');
+  });
+
   describe('Email channel', () => {
     it('returns mail icon for generic email channel', () => {
       const inbox = { channel_type: 'Channel::Email' };
diff --git a/app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue b/app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue
index 7338d9cc9..2d013f01d 100644
--- a/app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue
@@ -8,13 +8,13 @@ import InlineInput from './InlineInput.vue';
     :layout="{ type: 'grid', width: '400' }"
   >
     <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <InlineInput id="inline-input-1" placeholder="Default InlineInput" />
       </div>
     </Variant>
 
     <Variant title="With Label">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <InlineInput
           id="inline-input-2"
           label="Username"
@@ -24,7 +24,7 @@ import InlineInput from './InlineInput.vue';
     </Variant>
 
     <Variant title="Disabled">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <InlineInput
           id="inline-input-3"
           label="Disabled InlineInput"
@@ -35,24 +35,24 @@ import InlineInput from './InlineInput.vue';
     </Variant>
 
     <Variant title="With Custom Classes">
-      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+      <div class="flex flex-col gap-4 p-4 bg-n-background">
         <InlineInput
           id="inline-input-4"
           label="Custom Input Class"
           placeholder="Custom input style"
-          custom-input-class="placeholder:text-green-200 dark:placeholder:text-green-800"
+          custom-input-class="placeholder:text-n-teal-6 dark:placeholder:text-n-teal-6"
         />
         <InlineInput
           id="inline-input-5"
           label="Custom Label Class"
           placeholder="Custom label style"
-          custom-label-class="text-green-600 dark:text-green-400"
+          custom-label-class="text-n-teal-6 dark:text-n-teal-6"
         />
       </div>
     </Variant>
 
     <Variant title="Different Types">
-      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+      <div class="flex flex-col gap-4 p-4 bg-n-background">
         <InlineInput
           id="inline-input-6"
           label="Text"
diff --git a/app/javascript/dashboard/components-next/input/Input.story.vue b/app/javascript/dashboard/components-next/input/Input.story.vue
index 579c2437a..bf190d827 100644
--- a/app/javascript/dashboard/components-next/input/Input.story.vue
+++ b/app/javascript/dashboard/components-next/input/Input.story.vue
@@ -5,25 +5,25 @@ import Input from './Input.vue';
 <template>
   <Story title="Components/Input" :layout="{ type: 'grid', width: '400' }">
     <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <Input placeholder="Default Input" />
       </div>
     </Variant>
 
     <Variant title="With Label">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <Input label="Username" placeholder="Enter your username" />
       </div>
     </Variant>
 
     <Variant title="Disabled">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <Input label="Disabled Input" placeholder="Can't type here" disabled />
       </div>
     </Variant>
 
     <Variant title="With Message">
-      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+      <div class="flex flex-col gap-4 p-4 bg-n-background">
         <Input
           label="Email"
           placeholder="Enter your email"
@@ -46,7 +46,7 @@ import Input from './Input.vue';
     </Variant>
 
     <Variant title="Different Types">
-      <div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
+      <div class="flex flex-col gap-4 p-4 bg-n-background">
         <Input label="Text" type="text" placeholder="Text input" />
         <Input label="Number" type="number" placeholder="Number input" />
         <Input label="Password" type="password" placeholder="Password input" />
@@ -56,11 +56,11 @@ import Input from './Input.vue';
     </Variant>
 
     <Variant title="Custom Input Class">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <Input
           label="Custom Style"
           placeholder="Custom input class"
-          custom-input-class="border-yellow-500 dark:border-yellow-700"
+          custom-input-class="border-n-amber-5 dark:border-n-amber-5"
         />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index ea6eb0417..6288f7452 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -1,51 +1,21 @@
 <script setup>
-import { computed, ref, onMounted, nextTick } from 'vue';
+import { computed, ref, onMounted, nextTick, getCurrentInstance } from 'vue';
 const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  type: {
-    type: String,
-    default: 'text',
-  },
-  customInputClass: {
-    type: [String, Object, Array],
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  id: {
-    type: String,
-    default: '',
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
+  modelValue: { type: [String, Number], default: '' },
+  type: { type: String, default: 'text' },
+  customInputClass: { type: [String, Object, Array], default: '' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  id: { type: String, default: '' },
+  message: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
   messageType: {
     type: String,
     default: 'info',
     validator: value => ['info', 'error', 'success'].includes(value),
   },
-  min: {
-    type: String,
-    default: '',
-  },
-  autofocus: {
-    type: Boolean,
-    default: false,
-  },
+  min: { type: String, default: '' },
+  autofocus: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -56,6 +26,10 @@ const emit = defineEmits([
   'enter',
 ]);
 
+// Generate a unique ID per component instance when `id` prop is not provided.
+const { uid } = getCurrentInstance();
+const uniqueId = computed(() => props.id || `input-${uid}`);
+
 const isFocused = ref(false);
 const inputRef = ref(null);
 
@@ -64,7 +38,7 @@ const messageClass = computed(() => {
     case 'error':
       return 'text-n-ruby-9 dark:text-n-ruby-9';
     case 'success':
-      return 'text-green-500 dark:text-green-400';
+      return 'text-n-teal-10 dark:text-n-teal-10';
     default:
       return 'text-n-slate-11 dark:text-n-slate-11';
   }
@@ -111,7 +85,7 @@ onMounted(() => {
   <div class="relative flex flex-col min-w-0 gap-1">
     <label
       v-if="label"
-      :for="id"
+      :for="uniqueId"
       class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
@@ -119,7 +93,7 @@ onMounted(() => {
     <!-- Added prefix slot to allow adding icons to the input -->
     <slot name="prefix" />
     <input
-      :id="id"
+      :id="uniqueId"
       ref="inputRef"
       :value="modelValue"
       :class="[
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue b/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue
index fb0813409..157298d73 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Dyte.vue
@@ -74,7 +74,7 @@ const action = computed(() => ({
 
 <style lang="scss">
 .join-call-button {
-  margin: var(--space-small) 0;
+  margin: 0.5rem 0;
 }
 
 .video-call--container {
@@ -83,9 +83,9 @@ const action = computed(() => ({
   right: 0;
   width: 100%;
   height: 100%;
-  z-index: var(--z-index-high);
-  padding: var(--space-smaller);
-  background: var(--b-800);
+  z-index: 1000;
+  padding: 0.25rem;
+  @apply bg-n-background;
 
   iframe {
     width: 100%;
@@ -95,7 +95,7 @@ const action = computed(() => ({
 
   button {
     position: absolute;
-    top: var(--space-smaller);
+    top: 0.25rem;
     right: 10rem;
   }
 }
diff --git a/app/javascript/dashboard/components-next/message/chips/File.vue b/app/javascript/dashboard/components-next/message/chips/File.vue
index 90472db7f..2d55065c8 100644
--- a/app/javascript/dashboard/components-next/message/chips/File.vue
+++ b/app/javascript/dashboard/components-next/message/chips/File.vue
@@ -34,7 +34,7 @@ const displayFileName = computed(() => {
 const textColorClass = computed(() => {
   const colorMap = {
     '7z': 'dark:text-[#EDEEF0] text-[#2F265F]',
-    csv: 'text-amber-12',
+    csv: 'text-n-amber-12',
     doc: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
     docx: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
     json: 'text-n-slate-12',
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.story.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.story.vue
index 255bbc8dc..b1f5ea3e2 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.story.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.story.vue
@@ -23,7 +23,7 @@ const singlePageState = createPaginationState(1, 10, 16);
     :layout="{ type: 'grid', width: '957' }"
   >
     <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="p-4 bg-n-background">
         <PaginationFooter
           :current-page="defaultState.currentPage.value"
           :total-items="defaultState.totalItems"
@@ -34,7 +34,7 @@ const singlePageState = createPaginationState(1, 10, 16);
     </Variant>
 
     <Variant title="Middle Page">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="p-4 bg-n-background">
         <PaginationFooter
           :current-page="middlePageState.currentPage.value"
           :total-items="middlePageState.totalItems"
@@ -45,7 +45,7 @@ const singlePageState = createPaginationState(1, 10, 16);
     </Variant>
 
     <Variant title="Last Page">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="p-4 bg-n-background">
         <PaginationFooter
           :current-page="lastPageState.currentPage.value"
           :total-items="lastPageState.totalItems"
@@ -56,7 +56,7 @@ const singlePageState = createPaginationState(1, 10, 16);
     </Variant>
 
     <Variant title="Custom Items Per Page">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="p-4 bg-n-background">
         <PaginationFooter
           :current-page="customItemsState.currentPage.value"
           :total-items="customItemsState.totalItems"
@@ -67,7 +67,7 @@ const singlePageState = createPaginationState(1, 10, 16);
     </Variant>
 
     <Variant title="Single Page">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="p-4 bg-n-background">
         <PaginationFooter
           :current-page="singlePageState.currentPage.value"
           :total-items="singlePageState.totalItems"
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
index 1fd1786a0..b0fd8fc69 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
@@ -23,10 +23,11 @@ const showBadge = useMapGetter(props.getterKeys.badge);
     :is="to ? 'router-link' : 'div'"
     class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8"
     role="button"
+    draggable="false"
     :to="to"
     :title="label"
     :class="{
-      'n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
+      'text-n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
       'text-n-slate-12 font-medium': hasActiveChild,
       'text-n-slate-11 hover:bg-n-alpha-2': !isActive && !hasActiveChild,
     }"
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
index f97beadee..8d8b134bd 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -33,7 +33,7 @@ const shouldRenderComponent = computed(() => {
       :title="label"
       class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[9.438rem] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
       :class="{
-        'n-blue-text bg-n-alpha-2 active': active,
+        'text-n-blue-text bg-n-alpha-2 active': active,
       }"
     >
       <component
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
index ce8017984..5f7fa0755 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -111,11 +111,7 @@ const allowedMenuItems = computed(() => {
 </script>
 
 <template>
-  <DropdownContainer
-    class="relative w-full min-w-0"
-    :class="{ 'z-20': isOpen }"
-    @close="emit('close')"
-  >
+  <DropdownContainer class="relative w-full min-w-0" @close="emit('close')">
     <template #trigger="{ toggle, isOpen }">
       <button
         class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"
diff --git a/app/javascript/dashboard/components-next/switch/Switch.vue b/app/javascript/dashboard/components-next/switch/Switch.vue
index 766442953..d20128f25 100644
--- a/app/javascript/dashboard/components-next/switch/Switch.vue
+++ b/app/javascript/dashboard/components-next/switch/Switch.vue
@@ -19,7 +19,7 @@ const updateValue = () => {
 <template>
   <button
     type="button"
-    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:ring-offset-n-slate-2 focus:ring-offset-2"
+    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2"
     :class="modelValue ? 'bg-n-brand' : 'bg-n-alpha-1 dark:bg-n-alpha-2'"
     role="switch"
     :aria-checked="modelValue"
@@ -30,8 +30,8 @@ const updateValue = () => {
       class="absolute top-0.5 left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
       :class="
         modelValue
-          ? 'translate-x-3 bg-white'
-          : 'translate-x-0 bg-white dark:bg-n-black'
+          ? 'translate-x-3 bg-n-background'
+          : 'translate-x-0 bg-n-background'
       "
     />
   </button>
diff --git a/app/javascript/dashboard/components-next/tabbar/TabBar.story.vue b/app/javascript/dashboard/components-next/tabbar/TabBar.story.vue
index 7b1946cf6..d87ea1fda 100644
--- a/app/javascript/dashboard/components-next/tabbar/TabBar.story.vue
+++ b/app/javascript/dashboard/components-next/tabbar/TabBar.story.vue
@@ -25,13 +25,13 @@ const handleTabChanged = tab => {
 <template>
   <Story title="Components/TabBar" :layout="{ type: 'grid', width: '920px' }">
     <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="p-4 bg-n-background">
         <TabBar :tabs="defaultTabs" @tab-changed="handleTabChanged" />
       </div>
     </Variant>
 
     <Variant title="Custom Tabs with Initial Tab">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="p-4 bg-n-background">
         <TabBar
           :tabs="customTabs"
           :initial-active-tab="1"
@@ -41,7 +41,7 @@ const handleTabChanged = tab => {
     </Variant>
 
     <Variant title="No Counts">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="p-4 bg-n-background">
         <TabBar
           :tabs="[{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }]"
           @tab-changed="handleTabChanged"
@@ -50,7 +50,7 @@ const handleTabChanged = tab => {
     </Variant>
 
     <Variant title="Single Tab">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="p-4 bg-n-background">
         <TabBar
           :tabs="[{ label: 'Single Tab', count: 42 }]"
           @tab-changed="handleTabChanged"
diff --git a/app/javascript/dashboard/components-next/textarea/TextArea.story.vue b/app/javascript/dashboard/components-next/textarea/TextArea.story.vue
index 0a31f76c0..f934758ec 100644
--- a/app/javascript/dashboard/components-next/textarea/TextArea.story.vue
+++ b/app/javascript/dashboard/components-next/textarea/TextArea.story.vue
@@ -9,19 +9,19 @@ const description = ref('');
 <template>
   <Story title="Components/TextArea" :layout="{ type: 'grid', width: '400' }">
     <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea placeholder="Default TextArea" />
       </div>
     </Variant>
 
     <Variant title="With Label">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea label="Description" placeholder="Enter your description" />
       </div>
     </Variant>
 
     <Variant title="Disabled">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea
           label="Disabled TextArea"
           placeholder="Can't type here"
@@ -31,7 +31,7 @@ const description = ref('');
     </Variant>
 
     <Variant title="With Character Count">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea
           v-model="bio"
           label="Bio"
@@ -43,7 +43,7 @@ const description = ref('');
     </Variant>
 
     <Variant title="Custom Max Length">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea
           v-model="description"
           label="Long Description"
@@ -55,11 +55,11 @@ const description = ref('');
     </Variant>
 
     <Variant title="Custom TextArea Class">
-      <div class="p-4 bg-white dark:bg-slate-800">
+      <div class="p-4 bg-n-background">
         <TextArea
           label="Custom Style"
           placeholder="Custom textarea class"
-          custom-text-area-class="border-yellow-500 dark:border-yellow-700"
+          custom-text-area-class="border-n-amber-5 dark:border-n-amber-5"
         />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/textarea/TextArea.vue b/app/javascript/dashboard/components-next/textarea/TextArea.vue
index 66cb5f7f4..7568341c4 100644
--- a/app/javascript/dashboard/components-next/textarea/TextArea.vue
+++ b/app/javascript/dashboard/components-next/textarea/TextArea.vue
@@ -47,7 +47,7 @@ const messageClass = computed(() => {
     case 'error':
       return 'text-n-ruby-9 dark:text-n-ruby-9';
     case 'success':
-      return 'text-green-500 dark:text-green-400';
+      return 'text-n-teal-10 dark:text-n-teal-10';
     default:
       return 'text-n-slate-11 dark:text-n-slate-11';
   }
@@ -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 !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"
+        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"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
diff --git a/app/javascript/dashboard/components/ChannelSelector.vue b/app/javascript/dashboard/components/ChannelSelector.vue
index fb3e3ddd0..236ae3ded 100644
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -9,20 +9,31 @@ export default {
       type: String,
       required: true,
     },
+    isComingSoon: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
 
 <template>
   <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="relative bg-n-background cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-n-weak hover:border-n-brand hover:shadow-md hover:z-50 disabled:opacity-60"
   >
-    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
-    <h3
-      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
-    >
+    <img :src="src" :alt="title" draggable="false" class="w-1/2 my-4 mx-auto" />
+    <h3 class="text-n-slate-12 text-base text-center capitalize">
       {{ title }}
     </h3>
+
+    <div
+      v-if="isComingSoon"
+      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-md bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95"
+    >
+      <span class="text-n-slate-12 font-medium text-base">
+        {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
+      </span>
+    </div>
   </button>
 </template>
 
@@ -33,7 +44,7 @@ export default {
   }
 
   &:hover {
-    @apply border-transparent shadow-none cursor-not-allowed;
+    @apply border-n-strong shadow-none cursor-not-allowed;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 439e7c682..3727a16c3 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -31,6 +31,7 @@ import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCust
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import IntersectionObserver from './IntersectionObserver.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAlert } from 'dashboard/composables';
@@ -953,12 +954,12 @@ watch(conversationFilters, (newVal, oldVal) => {
           </DynamicScrollerItem>
         </template>
         <template #after>
-          <div v-if="chatListLoading" class="text-center">
-            <span class="mt-4 mb-4 spinner" />
+          <div v-if="chatListLoading" class="flex justify-center my-4">
+            <Spinner class="text-n-brand" />
           </div>
           <p
             v-else-if="showEndOfListMessage"
-            class="p-4 text-center text-slate-400 dark:text-slate-300"
+            class="p-4 text-center text-n-slate-11"
           >
             {{ $t('CHAT_LIST.EOF') }}
           </p>
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index c184103c0..04a22806d 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -1,10 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useMapGetter } from 'dashboard/composables/store.js';
 import { formatNumber } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
 import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchLayout.vue';
@@ -30,11 +28,6 @@ const emit = defineEmits([
 
 const { uiSettings, updateUISettings } = useUISettings();
 
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
 const onBasicFilterChange = (value, type) => {
   emit('basicFilterChange', value, type);
 };
@@ -43,13 +36,6 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
   return props.hasAppliedFilters || props.hasActiveFolders;
 });
 
-const showV4View = computed(() => {
-  return isFeatureEnabledonAccount.value(
-    currentAccountId.value,
-    FEATURE_FLAGS.CHATWOOT_V4
-  );
-});
-
 const allCount = computed(() => props.conversationStats?.allCount || 0);
 const formattedAllCount = computed(() => formatNumber(allCount.value));
 
@@ -174,7 +160,6 @@ const toggleConversationLayout = () => {
         @change-filter="onBasicFilterChange"
       />
       <SwitchLayout
-        v-if="showV4View"
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle="toggleConversationLayout"
       />
diff --git a/app/javascript/dashboard/components/FormSection.vue b/app/javascript/dashboard/components/FormSection.vue
index 481006adb..d622d470d 100644
--- a/app/javascript/dashboard/components/FormSection.vue
+++ b/app/javascript/dashboard/components/FormSection.vue
@@ -14,13 +14,13 @@ defineProps({
 <template>
   <div class="flex flex-col items-start w-full gap-6">
     <div class="flex flex-col w-full gap-4">
-      <h4 v-if="title" class="text-lg font-medium text-ash-900">
+      <h4 v-if="title" class="text-lg font-medium text-n-slate-12">
         {{ title }}
       </h4>
       <div class="flex flex-row items-center justify-between">
-        <div class="flex-grow h-px bg-ash-200" />
+        <div class="flex-grow h-px bg-n-weak" />
       </div>
-      <p v-if="description" class="mb-0 text-sm font-normal text-ash-900">
+      <p v-if="description" class="mb-0 text-sm font-normal text-n-slate-12">
         {{ description }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index 9e2330aa4..a79c2cd6c 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -28,19 +28,19 @@ export default {
     <img v-if="headerImage" :src="headerImage" alt="No image" />
     <h2
       data-test-id="modal-header-title"
-      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
+      class="text-base font-semibold leading-6 text-n-slate-12"
     >
       {{ headerTitle }}
     </h2>
     <p
       v-if="headerContent"
       data-test-id="modal-header-content"
-      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
+      class="w-full mt-2 text-sm leading-5 break-words text-n-slate-11"
     >
       {{ headerContent }}
       <span
         v-if="headerContentValue"
-        class="text-sm font-semibold text-slate-600 dark:text-slate-300"
+        class="text-sm font-semibold text-n-slate-11"
       >
         {{ headerContentValue }}
       </span>
diff --git a/app/javascript/dashboard/components/SettingsSection.vue b/app/javascript/dashboard/components/SettingsSection.vue
index e3933a6f4..6068b6456 100644
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -30,15 +30,10 @@ export default {
   >
     <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"
-        >
+        <p v-if="title" class="text-base text-n-brand mb-0 font-medium">
           {{ title }}
         </p>
-        <p
-          class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
-        >
+        <p class="text-sm mb-2 text-n-slate-11 leading-5 tracking-normal mt-2">
           <slot v-if="subTitle" name="subTitle">
             {{ subTitle }}
           </slot>
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
deleted file mode 100644
index 50bee3f17..000000000
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { mapGetters } from 'vuex';
-import { emitter } from 'shared/helpers/mitt';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    NextButton,
-  },
-  props: {
-    size: {
-      type: String,
-      default: 'sm',
-    },
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    hasNextSidebar() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.CHATWOOT_V4
-      );
-    },
-  },
-  methods: {
-    onMenuItemClick() {
-      emitter.emit(BUS_EVENTS.TOGGLE_SIDEMENU);
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <NextButton
-    v-if="!hasNextSidebar"
-    ghost
-    slate
-    :size="size"
-    icon="i-lucide-menu"
-    class="-ml-3"
-    @click="onMenuItemClick"
-  />
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/app/AddAccountModal.vue
similarity index 100%
rename from app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
rename to app/javascript/dashboard/components/app/AddAccountModal.vue
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 0866b9a7f..a8698b4a5 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -178,7 +178,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 start-0 xl:start-auto xl:end-0 max-w-[12.5rem] min-w-[9.75rem]"
+      class="border rounded-lg shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-10 bg-n-alpha-3 backdrop-blur-[100px] absolute block left-auto top-full mt-0.5 start-0 xl:start-auto xl:end-0 max-w-[12.5rem] min-w-[9.75rem] [&_ul>li]:mb-0"
     >
       <WootDropdownMenu class="mb-0">
         <WootDropdownItem v-if="!isPending">
@@ -209,11 +209,3 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.dropdown-pane {
-  .dropdown-menu__item {
-    @apply mb-0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/copilot/CopilotContainer.vue b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
index 06cf1db11..bc55509b3 100644
--- a/app/javascript/dashboard/components/copilot/CopilotContainer.vue
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -8,7 +8,7 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 defineProps({
   conversationInboxType: {
     type: String,
-    required: true,
+    default: '',
   },
 });
 
diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js
index dffb42914..459a46963 100644
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@@ -15,7 +15,6 @@ import Label from './ui/Label.vue';
 import LoadingState from './widgets/LoadingState.vue';
 import ModalHeader from './ModalHeader.vue';
 import Modal from './Modal.vue';
-import SidemenuIcon from './SidemenuIcon.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import Tabs from './ui/Tabs/Tabs.vue';
 import TabsItem from './ui/Tabs/TabsItem.vue';
@@ -38,7 +37,6 @@ const WootUIKit = {
   LoadingState,
   Modal,
   ModalHeader,
-  SidemenuIcon,
   Spinner,
   Tabs,
   TabsItem,
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
deleted file mode 100644
index a4995aee8..000000000
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { useImpersonation } from 'dashboard/composables/useImpersonation';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
-import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
-import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge.vue';
-import wootConstants from 'dashboard/constants/globals';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-const { AVAILABILITY_STATUS_KEYS } = wootConstants;
-
-export default {
-  components: {
-    WootDropdownHeader,
-    WootDropdownDivider,
-    WootDropdownMenu,
-    WootDropdownItem,
-    AvailabilityStatusBadge,
-    NextButton,
-  },
-  setup() {
-    const { isImpersonating } = useImpersonation();
-    return { isImpersonating };
-  },
-  data() {
-    return {
-      isStatusMenuOpened: false,
-      isUpdating: false,
-    };
-  },
-
-  computed: {
-    ...mapGetters({
-      getCurrentUserAvailability: 'getCurrentUserAvailability',
-      currentAccountId: 'getCurrentAccountId',
-      currentUserAutoOffline: 'getCurrentUserAutoOffline',
-    }),
-    statusList() {
-      return [
-        this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.ONLINE'),
-        this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.BUSY'),
-        this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.OFFLINE'),
-      ];
-    },
-    availabilityDisplayLabel() {
-      const availabilityIndex = AVAILABILITY_STATUS_KEYS.findIndex(
-        key => key === this.currentUserAvailability
-      );
-      return this.statusList[availabilityIndex];
-    },
-    currentUserAvailability() {
-      return this.getCurrentUserAvailability;
-    },
-    availabilityStatuses() {
-      return this.statusList.map((statusLabel, index) => ({
-        label: statusLabel,
-        value: AVAILABILITY_STATUS_KEYS[index],
-        disabled:
-          this.currentUserAvailability === AVAILABILITY_STATUS_KEYS[index],
-      }));
-    },
-  },
-
-  methods: {
-    openStatusMenu() {
-      this.isStatusMenuOpened = true;
-    },
-    closeStatusMenu() {
-      this.isStatusMenuOpened = false;
-    },
-    updateAutoOffline(autoOffline) {
-      this.$store.dispatch('updateAutoOffline', {
-        accountId: this.currentAccountId,
-        autoOffline,
-      });
-    },
-    changeAvailabilityStatus(availability) {
-      if (this.isImpersonating) {
-        useAlert(
-          this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.IMPERSONATING_ERROR')
-        );
-        return;
-      }
-
-      if (this.isUpdating) {
-        return;
-      }
-
-      this.isUpdating = true;
-      try {
-        this.$store.dispatch('updateAvailability', {
-          availability,
-          account_id: this.currentAccountId,
-        });
-      } catch (error) {
-        useAlert(
-          this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.SET_AVAILABILITY_ERROR')
-        );
-      } finally {
-        this.isUpdating = false;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <WootDropdownMenu>
-    <WootDropdownHeader :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
-    <WootDropdownItem
-      v-for="status in availabilityStatuses"
-      :key="status.value"
-      class="flex items-baseline"
-    >
-      <NextButton
-        sm
-        :color="status.disabled ? 'blue' : 'slate'"
-        :variant="status.disabled ? 'faded' : 'ghost'"
-        class="status-change--dropdown-button !w-full !justify-start"
-        @click="changeAvailabilityStatus(status.value)"
-      >
-        <AvailabilityStatusBadge :status="status.value" />
-        <span class="min-w-0 truncate font-medium text-xs">
-          {{ status.label }}
-        </span>
-      </NextButton>
-    </WootDropdownItem>
-    <WootDropdownDivider />
-    <WootDropdownItem class="flex items-center justify-between px-3 py-2 m-0">
-      <div class="flex items-center">
-        <fluent-icon
-          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
-          icon="info"
-          size="14"
-          class="mt-px"
-        />
-
-        <span
-          class="mx-2 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
-        >
-          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
-        </span>
-      </div>
-
-      <woot-switch
-        size="small"
-        class="mx-1 mt-px mb-0"
-        :model-value="currentUserAutoOffline"
-        @input="updateAutoOffline"
-      />
-    </WootDropdownItem>
-    <WootDropdownDivider />
-  </WootDropdownMenu>
-</template>
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
deleted file mode 100644
index 4d6bfbb58..000000000
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { getSidebarItems } from './config/default-sidebar';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { useRoute, useRouter } from 'vue-router';
-
-import PrimarySidebar from './sidebarComponents/Primary.vue';
-import SecondarySidebar from './sidebarComponents/Secondary.vue';
-import { routesWithPermissions } from '../../routes';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../../helper/permissionsHelper';
-
-export default {
-  components: {
-    PrimarySidebar,
-    SecondarySidebar,
-  },
-  props: {
-    showSecondarySidebar: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: [
-    'toggleAccountModal',
-    'showAddLabelPopup',
-    'openNotificationPanel',
-    'closeKeyShortcutModal',
-    'openKeyShortcutModal',
-  ],
-  setup(props, { emit }) {
-    const route = useRoute();
-    const router = useRouter();
-    const { accountId } = useAccount();
-
-    const toggleKeyShortcutModal = () => {
-      emit('openKeyShortcutModal');
-    };
-    const closeKeyShortcutModal = () => {
-      emit('closeKeyShortcutModal');
-    };
-    const isCurrentRouteSameAsNavigation = routeName => {
-      return route.name === routeName;
-    };
-    const navigateToRoute = routeName => {
-      if (!isCurrentRouteSameAsNavigation(routeName)) {
-        router.push({ name: routeName });
-      }
-    };
-    const keyboardEvents = {
-      '$mod+Slash': {
-        action: toggleKeyShortcutModal,
-      },
-      '$mod+Escape': {
-        action: closeKeyShortcutModal,
-      },
-      'Alt+KeyC': {
-        action: () => navigateToRoute('home'),
-      },
-      'Alt+KeyV': {
-        action: () => navigateToRoute('contacts_dashboard'),
-      },
-      'Alt+KeyR': {
-        action: () => navigateToRoute('account_overview_reports'),
-      },
-      'Alt+KeyS': {
-        action: () => navigateToRoute('agent_list'),
-      },
-    };
-    useKeyboardEvents(keyboardEvents);
-
-    return {
-      toggleKeyShortcutModal,
-      accountId,
-    };
-  },
-  data() {
-    return {
-      showOptionsMenu: false,
-    };
-  },
-
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      inboxes: 'inboxes/getInboxes',
-      isACustomBrandedInstance: 'globalConfig/isACustomBrandedInstance',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
-      labels: 'labels/getLabelsOnSidebar',
-      teams: 'teams/getMyTeams',
-    }),
-    activeCustomView() {
-      if (this.activePrimaryMenu.key === 'contacts') {
-        return 'contact';
-      }
-      if (this.activePrimaryMenu.key === 'conversations') {
-        return 'conversation';
-      }
-      return '';
-    },
-    customViews() {
-      if (!this.activeCustomView) {
-        return [];
-      }
-      return this.$store.getters['customViews/getCustomViewsByFilterType'](
-        this.activeCustomView
-      );
-    },
-    isConversationOrContactActive() {
-      return (
-        this.activePrimaryMenu.key === 'contacts' ||
-        this.activePrimaryMenu.key === 'conversations'
-      );
-    },
-    sideMenuConfig() {
-      return getSidebarItems(this.accountId);
-    },
-    primaryMenuItems() {
-      const userPermissions = getUserPermissions(
-        this.currentUser,
-        this.accountId
-      );
-      const menuItems = this.sideMenuConfig.primaryMenu;
-      return menuItems.filter(menuItem => {
-        const isAvailableForTheUser = hasPermissions(
-          routesWithPermissions[menuItem.toStateName],
-          userPermissions
-        );
-
-        if (!isAvailableForTheUser) {
-          return false;
-        }
-        if (
-          menuItem.alwaysVisibleOnChatwootInstances &&
-          !this.isACustomBrandedInstance
-        ) {
-          return true;
-        }
-        if (menuItem.featureFlag) {
-          return this.isFeatureEnabledonAccount(
-            this.accountId,
-            menuItem.featureFlag
-          );
-        }
-        return true;
-      });
-    },
-    activeSecondaryMenu() {
-      const { secondaryMenu } = this.sideMenuConfig;
-      const { name: currentRoute } = this.$route;
-
-      const activeSecondaryMenu =
-        secondaryMenu.find(menuItem =>
-          menuItem.routes.includes(currentRoute)
-        ) || {};
-      return activeSecondaryMenu;
-    },
-    activePrimaryMenu() {
-      const activePrimaryMenu =
-        this.primaryMenuItems.find(
-          menuItem => menuItem.key === this.activeSecondaryMenu.parentNav
-        ) || {};
-      return activePrimaryMenu;
-    },
-    hasSecondaryMenu() {
-      return (
-        this.activeSecondaryMenu.menuItems &&
-        this.activeSecondaryMenu.menuItems.length
-      );
-    },
-    hasSecondarySidebar() {
-      // if it is explicitly stated to show and it has secondary menu items to show
-      // showSecondarySidebar corresponds to the UI settings, indicating if the user has toggled it
-      return this.showSecondarySidebar && this.hasSecondaryMenu;
-    },
-  },
-
-  watch: {
-    activeCustomView() {
-      this.fetchCustomViews();
-    },
-  },
-  mounted() {
-    this.$store.dispatch('labels/get');
-    this.$store.dispatch('inboxes/get');
-    this.$store.dispatch('notifications/unReadCount');
-    this.$store.dispatch('teams/get');
-    this.$store.dispatch('attributes/get');
-    this.fetchCustomViews();
-  },
-
-  methods: {
-    fetchCustomViews() {
-      if (this.isConversationOrContactActive) {
-        this.$store.dispatch('customViews/get', this.activeCustomView);
-      }
-    },
-    toggleSupportChatWindow() {
-      window.$chatwoot.toggle();
-    },
-    toggleAccountModal() {
-      this.$emit('toggleAccountModal');
-    },
-    showAddLabelPopup() {
-      this.$emit('showAddLabelPopup');
-    },
-    openNotificationPanel() {
-      this.$emit('openNotificationPanel');
-    },
-  },
-};
-</script>
-
-<template>
-  <aside class="flex h-full">
-    <PrimarySidebar
-      :logo-source="globalConfig.logoThumbnail"
-      :installation-name="globalConfig.installationName"
-      :is-a-custom-branded-instance="isACustomBrandedInstance"
-      :account-id="accountId"
-      :menu-items="primaryMenuItems"
-      :active-menu-item="activePrimaryMenu.key"
-      @toggle-accounts="toggleAccountModal"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @open-notification-panel="openNotificationPanel"
-    />
-    <SecondarySidebar
-      v-if="hasSecondarySidebar"
-      :account-id="accountId"
-      :inboxes="inboxes"
-      :labels="labels"
-      :teams="teams"
-      :custom-views="customViews"
-      :menu-config="activeSecondaryMenu"
-      :current-user="currentUser"
-      :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @add-label="showAddLabelPopup"
-      @toggle-accounts="toggleAccountModal"
-    />
-  </aside>
-</template>
diff --git a/app/javascript/dashboard/components/layout/config/default-sidebar.js b/app/javascript/dashboard/components/layout/config/default-sidebar.js
deleted file mode 100644
index bbe2c44cd..000000000
--- a/app/javascript/dashboard/components/layout/config/default-sidebar.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import conversations from './sidebarItems/conversations';
-import contacts from './sidebarItems/contacts';
-import reports from './sidebarItems/reports';
-import campaigns from './sidebarItems/campaigns';
-import settings from './sidebarItems/settings';
-import notifications from './sidebarItems/notifications';
-import primaryMenu from './sidebarItems/primaryMenu';
-
-export const getSidebarItems = accountId => ({
-  primaryMenu: primaryMenu(accountId),
-  secondaryMenu: [
-    conversations(accountId),
-    contacts(accountId),
-    reports(accountId),
-    campaigns(accountId),
-    settings(accountId),
-    notifications(accountId),
-  ],
-});
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js b/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
deleted file mode 100644
index 9c3196dd6..000000000
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { frontendURL } from '../../../../helper/URLHelper';
-
-const campaigns = accountId => ({
-  parentNav: 'campaigns',
-  routes: ['campaigns_sms_index', 'campaigns_livechat_index'],
-  menuItems: [
-    {
-      icon: 'arrow-swap',
-      label: 'LIVE_CHAT',
-      key: 'ongoingCampaigns',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/campaigns/live_chat`),
-      toStateName: 'campaigns_livechat_index',
-    },
-    {
-      key: 'oneOffCampaigns',
-      icon: 'sound-source',
-      label: 'SMS',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/campaigns/sms`),
-      toStateName: 'campaigns_sms_index',
-    },
-  ],
-});
-
-export default campaigns;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
deleted file mode 100644
index e5eb204ee..000000000
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { frontendURL } from '../../../../helper/URLHelper';
-
-const contacts = accountId => ({
-  parentNav: 'contacts',
-  routes: [
-    'contacts_dashboard_index',
-    'contacts_dashboard_segments_index',
-    'contacts_dashboard_labels_index',
-    'contacts_edit',
-    'contacts_edit_segment',
-    'contacts_edit_label',
-    'contacts_dashboard_active',
-  ],
-  menuItems: [
-    {
-      icon: 'contact-card-group',
-      label: 'ALL_CONTACTS',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/contacts?page=1`),
-      toStateName: 'contacts_dashboard_index',
-    },
-    {
-      icon: 'visitor-contacts',
-      label: 'ACTIVE',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/contacts/active`),
-      toStateName: 'contacts_dashboard_active',
-    },
-  ],
-});
-
-export default contacts;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js b/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
deleted file mode 100644
index a8302bd58..000000000
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { frontendURL } from '../../../../helper/URLHelper';
-
-const conversations = accountId => ({
-  parentNav: 'conversations',
-  routes: [
-    'home',
-    'inbox_dashboard',
-    'inbox_conversation',
-    'conversation_through_inbox',
-    'notifications_dashboard',
-    'label_conversations',
-    'conversations_through_label',
-    'team_conversations',
-    'conversations_through_team',
-    'conversation_mentions',
-    'conversation_through_mentions',
-    'conversation_participating',
-    'conversation_through_participating',
-    'folder_conversations',
-    'conversations_through_folders',
-    'conversation_unattended',
-    'conversation_through_unattended',
-  ],
-  menuItems: [
-    {
-      icon: 'chat',
-      label: 'ALL_CONVERSATIONS',
-      key: 'conversations',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-      toolTip: 'Conversation from all subscribed inboxes',
-      toStateName: 'home',
-    },
-    {
-      icon: 'mention',
-      label: 'MENTIONED_CONVERSATIONS',
-      key: 'conversation_mentions',
-      toState: frontendURL(`accounts/${accountId}/mentions/conversations`),
-      toStateName: 'conversation_mentions',
-    },
-    {
-      icon: 'mail-unread',
-      label: 'UNATTENDED_CONVERSATIONS',
-      key: 'conversation_unattended',
-      toState: frontendURL(`accounts/${accountId}/unattended/conversations`),
-      toStateName: 'conversation_unattended',
-    },
-  ],
-});
-
-export default conversations;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/notifications.js b/app/javascript/dashboard/components/layout/config/sidebarItems/notifications.js
deleted file mode 100644
index e3b18ebc5..000000000
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/notifications.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const notifications = () => ({
-  parentNav: 'notifications',
-  routes: ['notifications_index'],
-  menuItems: [],
-});
-
-export default notifications;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
deleted file mode 100644
index 59de35564..000000000
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { FEATURE_FLAGS } from '../../../../featureFlags';
-import { frontendURL } from '../../../../helper/URLHelper';
-
-const primaryMenuItems = accountId => [
-  {
-    icon: 'mail-inbox',
-    key: 'inboxView',
-    label: 'INBOX_VIEW',
-    featureFlag: FEATURE_FLAGS.INBOX_VIEW,
-    toState: frontendURL(`accounts/${accountId}/inbox-view`),
-    toStateName: 'inbox_view',
-  },
-  {
-    icon: 'chat',
-    key: 'conversations',
-    label: 'CONVERSATIONS',
-    toState: frontendURL(`accounts/${accountId}/dashboard`),
-    toStateName: 'home',
-  },
-  {
-    icon: 'captain',
-    key: 'captain',
-    label: 'CAPTAIN',
-    featureFlag: FEATURE_FLAGS.CAPTAIN,
-    toState: frontendURL(`accounts/${accountId}/captain/documents`),
-    toStateName: 'captain',
-  },
-  {
-    icon: 'book-contacts',
-    key: 'contacts',
-    label: 'CONTACTS',
-    featureFlag: FEATURE_FLAGS.CRM,
-    toState: frontendURL(`accounts/${accountId}/contacts`),
-    toStateName: 'contacts_dashboard_index',
-  },
-  {
-    icon: 'arrow-trending-lines',
-    key: 'reports',
-    label: 'REPORTS',
-    featureFlag: FEATURE_FLAGS.REPORTS,
-    toState: frontendURL(`accounts/${accountId}/reports`),
-    toStateName: 'account_overview_reports',
-  },
-  {
-    icon: 'megaphone',
-    key: 'campaigns',
-    label: 'CAMPAIGNS',
-    featureFlag: FEATURE_FLAGS.CAMPAIGNS,
-    toState: frontendURL(`accounts/${accountId}/campaigns`),
-    toStateName: 'campaigns_ongoing_index',
-  },
-  {
-    icon: 'library',
-    key: 'helpcenter',
-    label: 'HELP_CENTER.TITLE',
-    featureFlag: FEATURE_FLAGS.HELP_CENTER,
-    alwaysVisibleOnChatwootInstances: true,
-    toState: frontendURL(`accounts/${accountId}/portals/portal_articles_index`),
-    toStateName: 'portals_index',
-  },
-  {
-    icon: 'settings',
-    key: 'settings',
-    label: 'SETTINGS',
-    toState: frontendURL(`accounts/${accountId}/settings`),
-    toStateName: 'settings_home',
-  },
-];
-
-export default primaryMenuItems;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/profileSettings.js b/app/javascript/dashboard/components/layout/config/sidebarItems/profileSettings.js
deleted file mode 100644
index 024b4d3f6..000000000
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/profileSettings.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const profileSettings = () => ({
-  parentNav: 'profileSettings',
-  routes: ['profile_settings_index'],
-  menuItems: [],
-});
-
-export default profileSettings;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js b/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
deleted file mode 100644
index f9f00b88d..000000000
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { FEATURE_FLAGS } from '../../../../featureFlags';
-import { frontendURL } from '../../../../helper/URLHelper';
-
-const reports = accountId => ({
-  parentNav: 'reports',
-  routes: [
-    'account_overview_reports',
-    'conversation_reports',
-    'csat_reports',
-    'bot_reports',
-    'agent_reports',
-    'label_reports',
-    'inbox_reports',
-    'inbox_reports_show',
-    'team_reports',
-    'sla_reports',
-  ],
-  menuItems: [
-    {
-      icon: 'arrow-trending-lines',
-      label: 'REPORTS_OVERVIEW',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/reports/overview`),
-      toStateName: 'account_overview_reports',
-    },
-    {
-      icon: 'chat',
-      label: 'REPORTS_CONVERSATION',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/reports/conversation`),
-      toStateName: 'conversation_reports',
-    },
-    {
-      icon: 'emoji',
-      label: 'CSAT',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/reports/csat`),
-      toStateName: 'csat_reports',
-    },
-    {
-      icon: 'bot',
-      label: 'REPORTS_BOT',
-      hasSubMenu: false,
-      featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
-      toState: frontendURL(`accounts/${accountId}/reports/bot`),
-      toStateName: 'bot_reports',
-    },
-    {
-      icon: 'people',
-      label: 'REPORTS_AGENT',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/reports/agent`),
-      toStateName: 'agent_reports',
-    },
-    {
-      icon: 'tag',
-      label: 'REPORTS_LABEL',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/reports/label`),
-      toStateName: 'label_reports',
-    },
-    {
-      icon: 'mail-inbox-all',
-      label: 'REPORTS_INBOX',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/reports/inboxes`),
-      toStateName: 'inbox_reports',
-    },
-    {
-      icon: 'people-team',
-      label: 'REPORTS_TEAM',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/reports/teams`),
-      toStateName: 'team_reports',
-    },
-    {
-      icon: 'document-list-clock',
-      label: 'REPORTS_SLA',
-      hasSubMenu: false,
-      featureFlag: FEATURE_FLAGS.SLA,
-      toState: frontendURL(`accounts/${accountId}/reports/sla`),
-      toStateName: 'sla_reports',
-    },
-  ],
-});
-
-export default reports;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
deleted file mode 100644
index 08526f4d3..000000000
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
+++ /dev/null
@@ -1,220 +0,0 @@
-import { FEATURE_FLAGS } from '../../../../featureFlags';
-import { frontendURL } from '../../../../helper/URLHelper';
-
-const settings = accountId => ({
-  parentNav: 'settings',
-  routes: [
-    'agent_bots',
-    'agent_list',
-    'attributes_list',
-    'automation_list',
-    'auditlogs_list',
-    'billing_settings_index',
-    'canned_list',
-    'general_settings_index',
-    'general_settings',
-    'labels_list',
-    'macros_edit',
-    'macros_new',
-    'macros_wrapper',
-    'settings_applications_integration',
-    'settings_applications_webhook',
-    'settings_applications',
-    'settings_inbox_finish',
-    'settings_inbox_list',
-    'settings_inbox_new',
-    'settings_inbox_show',
-    'settings_inboxes_add_agents',
-    'settings_inboxes_page_channel',
-    'settings_integrations_dashboard_apps',
-    'settings_integrations_integration',
-    'settings_integrations_slack',
-    'settings_integrations_webhook',
-    'settings_integrations',
-    'settings_teams_add_agents',
-    'settings_teams_edit_finish',
-    'settings_teams_edit_members',
-    'settings_teams_edit',
-    'settings_teams_finish',
-    'settings_teams_list',
-    'settings_teams_new',
-    'sla_list',
-    'custom_roles_list',
-  ],
-  menuItems: [
-    {
-      icon: 'briefcase',
-      label: 'ACCOUNT_SETTINGS',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/general`),
-      toStateName: 'general_settings_index',
-    },
-    {
-      icon: 'people',
-      label: 'AGENTS',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
-      toStateName: 'agent_list',
-      featureFlag: FEATURE_FLAGS.AGENT_MANAGEMENT,
-    },
-    {
-      icon: 'people-team',
-      label: 'TEAMS',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
-      toStateName: 'settings_teams_list',
-      featureFlag: FEATURE_FLAGS.TEAM_MANAGEMENT,
-    },
-    {
-      icon: 'mail-inbox-all',
-      label: 'INBOXES',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
-      toStateName: 'settings_inbox_list',
-      featureFlag: FEATURE_FLAGS.INBOX_MANAGEMENT,
-    },
-    {
-      icon: 'tag',
-      label: 'LABELS',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
-      toStateName: 'labels_list',
-      featureFlag: FEATURE_FLAGS.LABELS,
-    },
-    {
-      icon: 'code',
-      label: 'CUSTOM_ATTRIBUTES',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(
-        `accounts/${accountId}/settings/custom-attributes/list`
-      ),
-      toStateName: 'attributes_list',
-      featureFlag: FEATURE_FLAGS.CUSTOM_ATTRIBUTES,
-    },
-    {
-      icon: 'automation',
-      label: 'AUTOMATION',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
-      toStateName: 'automation_list',
-      featureFlag: FEATURE_FLAGS.AUTOMATIONS,
-    },
-    {
-      icon: 'bot',
-      label: 'AGENT_BOTS',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
-      toStateName: 'agent_bots',
-      featureFlag: FEATURE_FLAGS.AGENT_BOTS,
-    },
-    {
-      icon: 'flash-settings',
-      label: 'MACROS',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator', 'agent'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/macros`),
-      toStateName: 'macros_wrapper',
-      featureFlag: FEATURE_FLAGS.MACROS,
-    },
-    {
-      icon: 'chat-multiple',
-      label: 'CANNED_RESPONSES',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator', 'agent'],
-      },
-      toState: frontendURL(
-        `accounts/${accountId}/settings/canned-response/list`
-      ),
-      toStateName: 'canned_list',
-      featureFlag: FEATURE_FLAGS.CANNED_RESPONSES,
-    },
-    {
-      icon: 'flash-on',
-      label: 'INTEGRATIONS',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/integrations`),
-      toStateName: 'settings_applications',
-      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
-    },
-    {
-      icon: 'key',
-      label: 'AUDIT_LOGS',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/audit-logs/list`),
-      toStateName: 'auditlogs_list',
-      isEnterpriseOnly: true,
-      featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
-    },
-    {
-      icon: 'scan-person',
-      label: 'CUSTOM_ROLES',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/custom-roles/list`),
-      toStateName: 'custom_roles_list',
-      isEnterpriseOnly: true,
-      beta: true,
-    },
-    {
-      icon: 'document-list-clock',
-      label: 'SLA',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
-      toStateName: 'sla_list',
-      isEnterpriseOnly: true,
-      featureFlag: FEATURE_FLAGS.SLA,
-      beta: true,
-    },
-    {
-      icon: 'credit-card-person',
-      label: 'BILLING',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/billing`),
-      toStateName: 'billing_settings_index',
-      showOnlyOnCloud: true,
-    },
-  ],
-});
-
-export default settings;
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
deleted file mode 100644
index dc00ed03d..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    NextButton,
-  },
-  emits: ['toggleAccounts'],
-  data() {
-    return { showSwitchButton: false };
-  },
-  computed: {
-    ...mapGetters({
-      account: 'getCurrentAccount',
-      userAccounts: 'getUserAccounts',
-    }),
-    showShowCurrentAccountContext() {
-      return this.userAccounts.length > 1 && this.account.name;
-    },
-  },
-  methods: {
-    setShowSwitch() {
-      this.showSwitchButton = true;
-    },
-    resetShowSwitch() {
-      this.showSwitchButton = false;
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <div
-    v-if="showShowCurrentAccountContext"
-    class="relative px-2 py-2 mt-2 text-xs border rounded-md cursor-pointer text-slate-700 dark:text-slate-200 border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800"
-    @mouseover="setShowSwitch"
-    @mouseleave="resetShowSwitch"
-  >
-    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
-    <p
-      class="mb-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap text-slate-800 dark:text-slate-100"
-    >
-      {{ account.name }}
-    </p>
-    <transition name="fade">
-      <div
-        v-if="showSwitchButton"
-        class="absolute top-0 right-0 flex items-center justify-end w-full h-full rounded-md ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark"
-      >
-        <div class="mx-2 my-0">
-          <NextButton
-            ghost
-            xs
-            icon="i-lucide-arrow-right-left"
-            :label="$t('SIDEBAR.SWITCH')"
-            @click="$emit('toggleAccounts')"
-          />
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-@tailwind components;
-@layer components {
-  .overlay-shadow {
-    background-image: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 50%
-    );
-  }
-
-  .overlay-shadow-dark {
-    background-image: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0) 0%,
-      rgb(21, 23, 24) 50%
-    );
-  }
-
-  .rtl-overlay-shadow {
-    background-image: linear-gradient(
-      to left,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 50%
-    );
-  }
-
-  .rtl-overlay-shadow-dark {
-    background-image: linear-gradient(
-      to left,
-      rgba(0, 0, 0, 0) 0%,
-      rgb(21, 23, 24) 50%
-    );
-  }
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 300ms ease;
-}
-
-.fade-enter,
-.fade-leave-to {
-  @apply opacity-0;
-}
-</style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
deleted file mode 100644
index 8ff15ecf1..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-export default {
-  props: {
-    showAccountModal: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: ['closeAccountModal', 'showCreateAccountModal'],
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-    }),
-  },
-  methods: {
-    onChangeAccount(accountId) {
-      const accountUrl = `/app/accounts/${accountId}/dashboard`;
-      window.location.href = accountUrl;
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal
-    :show="showAccountModal"
-    :on-close="() => $emit('closeAccountModal')"
-  >
-    <woot-modal-header
-      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
-      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
-    />
-    <div class="px-8 py-4">
-      <div
-        v-for="account in currentUser.accounts"
-        :id="`account-${account.id}`"
-        :key="account.id"
-        class="pt-0 pb-0"
-      >
-        <button
-          class="flex items-center justify-between w-full px-4 py-3 rounded-lg cursor-pointer expanded clear link hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
-          @click="onChangeAccount(account.id)"
-        >
-          <span class="w-full">
-            <label :for="account.name" class="text-left rtl:text-right">
-              <div
-                class="text-lg font-medium leading-5 text-slate-700 dark:text-slate-100 hover:underline-offset-4"
-              >
-                {{ account.name }}
-              </div>
-              <div
-                class="text-xs font-medium lowercase text-slate-500 dark:text-slate-500 hover:underline-offset-4"
-              >
-                {{
-                  account.custom_role_id
-                    ? account.custom_role.name
-                    : account.role
-                }}
-              </div>
-            </label>
-          </span>
-          <fluent-icon
-            v-show="account.id === accountId"
-            class="text-slate-800 dark:text-slate-100"
-            icon="checkmark-circle"
-            type="solid"
-            size="24"
-          />
-        </button>
-      </div>
-    </div>
-
-    <div
-      v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex items-center justify-end gap-2 px-8 pt-4 pb-8"
-    >
-      <button
-        class="w-full button success large expanded nice"
-        @click="$emit('showCreateAccountModal')"
-      >
-        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
-      </button>
-    </div>
-  </woot-modal>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
deleted file mode 100644
index bab54d53f..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import Thumbnail from '../../widgets/Thumbnail.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    Thumbnail,
-    NextButton,
-  },
-  emits: ['toggleMenu'],
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      currentUserAvailability: 'getCurrentUserAvailability',
-    }),
-    statusOfAgent() {
-      return this.currentUserAvailability || 'offline';
-    },
-  },
-  methods: {
-    handleClick() {
-      this.$emit('toggleMenu');
-    },
-  },
-};
-</script>
-
-<template>
-  <NextButton
-    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
-    link
-    class="rounded-full"
-    @click="handleClick"
-  >
-    <Thumbnail
-      :src="currentUser.avatar_url"
-      :username="currentUser.name"
-      :status="statusOfAgent"
-      should-show-status-always
-      size="32px"
-      class="flex-shrink-0"
-    />
-  </NextButton>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
deleted file mode 100644
index 38615fff0..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-import { frontendURL } from 'dashboard/helper/URLHelper';
-
-export default {
-  props: {
-    source: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      default: '',
-    },
-    accountId: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    dashboardPath() {
-      return frontendURL(`accounts/${this.accountId}/dashboard`);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="w-8 h-8">
-    <router-link :to="dashboardPath" replace>
-      <img :src="source" :alt="name" />
-    </router-link>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
deleted file mode 100644
index d0c53037a..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  emits: ['openNotificationPanel'],
-
-  computed: {
-    ...mapGetters({
-      notificationMetadata: 'notifications/getMeta',
-    }),
-    unreadCount() {
-      if (!this.notificationMetadata.unreadCount) {
-        return '';
-      }
-
-      return this.notificationMetadata.unreadCount < 100
-        ? `${this.notificationMetadata.unreadCount}`
-        : '99+';
-    },
-    isNotificationPanelActive() {
-      return this.$route.name === 'notifications_index';
-    },
-  },
-  methods: {
-    openNotificationPanel() {
-      if (this.$route.name !== 'notifications_index') {
-        this.$emit('openNotificationPanel');
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="mb-4">
-    <button
-      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
-      :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isNotificationPanelActive,
-      }"
-      @click="openNotificationPanel"
-    >
-      <fluent-icon
-        icon="alert"
-        :class="{
-          'text-woot-500': isNotificationPanelActive,
-        }"
-      />
-      <span
-        v-if="unreadCount"
-        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 text-xxs min-w-[1rem] rounded-full"
-      >
-        {{ unreadCount }}
-      </span>
-    </button>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
deleted file mode 100644
index 03549dad6..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import Auth from '../../../api/auth';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';
-import { FEATURE_FLAGS } from '../../../featureFlags';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    WootDropdownMenu,
-    WootDropdownItem,
-    AvailabilityStatus,
-    NextButton,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: [
-    'close',
-    'openKeyShortcutModal',
-    'toggleAccounts',
-    'showSupportChatWindow',
-  ],
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    showChangeAccountOption() {
-      if (this.globalConfig.createNewAccountFromDashboard) {
-        return true;
-      }
-
-      const { accounts = [] } = this.currentUser;
-      return accounts.length > 1;
-    },
-    showChatSupport() {
-      return (
-        this.isFeatureEnabledonAccount(
-          this.accountId,
-          FEATURE_FLAGS.CONTACT_CHATWOOT_SUPPORT_TEAM
-        ) && this.globalConfig.chatwootInboxToken
-      );
-    },
-  },
-  methods: {
-    handleProfileSettingClick(e, navigate) {
-      this.$emit('close');
-      navigate(e);
-    },
-    handleKeyboardHelpClick() {
-      this.$emit('openKeyShortcutModal');
-      this.$emit('close');
-    },
-    logout() {
-      Auth.logout();
-    },
-    onClickAway() {
-      if (this.show) this.$emit('close');
-    },
-    openAppearanceOptions() {
-      const ninja = document.querySelector('ninja-keys');
-      ninja.open({ parent: 'appearance_settings' });
-    },
-  },
-};
-</script>
-
-<template>
-  <transition name="menu-slide">
-    <div
-      v-if="show"
-      v-on-clickaway="onClickAway"
-      class="absolute z-30 w-64 px-2 py-2 bg-white border rounded-md shadow-xl left-3 rtl:left-auto rtl:right-3 bottom-16 dark:bg-slate-800 border-slate-25 dark:border-slate-700"
-      :class="{ 'block visible': show }"
-    >
-      <AvailabilityStatus />
-      <WootDropdownMenu>
-        <WootDropdownItem v-if="showChangeAccountOption">
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-arrow-right-left"
-            class="!w-full !justify-start"
-            @click="$emit('toggleAccounts')"
-          >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-            </span>
-          </NextButton>
-        </WootDropdownItem>
-        <WootDropdownItem v-if="showChatSupport">
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-message-circle-question"
-            class="!w-full !justify-start"
-            @click="$emit('showSupportChatWindow')"
-          >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
-            </span>
-          </NextButton>
-        </WootDropdownItem>
-        <WootDropdownItem>
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-keyboard"
-            class="!w-full !justify-start"
-            @click="handleKeyboardHelpClick"
-          >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
-            </span>
-          </NextButton>
-        </WootDropdownItem>
-        <WootDropdownItem>
-          <router-link
-            v-slot="{ href, isActive, navigate }"
-            :to="`/app/accounts/${accountId}/profile/settings`"
-            custom
-          >
-            <a
-              :href="href"
-              :class="{ 'is-active': isActive }"
-              @click="e => handleProfileSettingClick(e, navigate)"
-            >
-              <NextButton
-                ghost
-                sm
-                slate
-                icon="i-lucide-circle-user"
-                class="!w-full !justify-start"
-              >
-                <span class="min-w-0 truncate font-medium text-xs">
-                  {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
-                </span>
-              </NextButton>
-            </a>
-          </router-link>
-        </WootDropdownItem>
-        <WootDropdownItem>
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-sun-moon"
-            class="!w-full !justify-start"
-            @click="openAppearanceOptions"
-          >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
-            </span>
-          </NextButton>
-        </WootDropdownItem>
-        <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
-          <a
-            href="/super_admin"
-            target="_blank"
-            rel="noopener nofollow noreferrer"
-            @click="$emit('close')"
-          >
-            <NextButton
-              ghost
-              sm
-              slate
-              icon="i-lucide-layout-dashboard"
-              class="!w-full !justify-start"
-            >
-              <span class="min-w-0 truncate font-medium text-xs">
-                {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
-              </span>
-            </NextButton>
-          </a>
-        </WootDropdownItem>
-        <WootDropdownItem>
-          <NextButton
-            ghost
-            sm
-            slate
-            icon="i-lucide-circle-power"
-            class="!w-full !justify-start"
-            @click="logout"
-          >
-            <span class="min-w-0 truncate font-medium text-xs">
-              {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
-            </span>
-          </NextButton>
-        </WootDropdownItem>
-      </WootDropdownMenu>
-    </div>
-  </transition>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
deleted file mode 100644
index 1cbd6a56a..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script>
-import Logo from './Logo.vue';
-import PrimaryNavItem from './PrimaryNavItem.vue';
-import OptionsMenu from './OptionsMenu.vue';
-import AgentDetails from './AgentDetails.vue';
-import NotificationBell from './NotificationBell.vue';
-import wootConstants from 'dashboard/constants/globals';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    Logo,
-    PrimaryNavItem,
-    OptionsMenu,
-    AgentDetails,
-    NotificationBell,
-  },
-  props: {
-    isACustomBrandedInstance: {
-      type: Boolean,
-      default: false,
-    },
-    logoSource: {
-      type: String,
-      default: '',
-    },
-    installationName: {
-      type: String,
-      default: '',
-    },
-    accountId: {
-      type: Number,
-      default: 0,
-    },
-    menuItems: {
-      type: Array,
-      default: () => [],
-    },
-    activeMenuItem: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['toggleAccounts', 'openNotificationPanel', 'openKeyShortcutModal'],
-  data() {
-    return {
-      helpDocsURL: wootConstants.DOCS_URL,
-      showOptionsMenu: false,
-    };
-  },
-  methods: {
-    frontendURL,
-    toggleOptions() {
-      this.showOptionsMenu = !this.showOptionsMenu;
-    },
-    toggleAccountModal() {
-      this.$emit('toggleAccounts');
-    },
-    toggleSupportChatWindow() {
-      window.$chatwoot.toggle();
-    },
-    openNotificationPanel() {
-      useTrack(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
-      this.$emit('openNotificationPanel');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
-  >
-    <div class="flex flex-col items-center">
-      <Logo
-        :source="logoSource"
-        :name="installationName"
-        :account-id="accountId"
-        class="m-4 mb-10"
-      />
-      <PrimaryNavItem
-        v-for="menuItem in menuItems"
-        :id="menuItem.key"
-        :key="menuItem.toState"
-        :icon="menuItem.icon"
-        :name="menuItem.label"
-        :to="menuItem.toState"
-        :is-child-menu-active="menuItem.key === activeMenuItem"
-      />
-    </div>
-    <div class="flex flex-col items-center justify-end pb-6">
-      <a
-        v-if="!isACustomBrandedInstance"
-        v-tooltip.right="$t(`SIDEBAR.DOCS`)"
-        :href="helpDocsURL"
-        class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-      >
-        <fluent-icon icon="book-open-globe" />
-        <span class="sr-only">{{ $t(`SIDEBAR.DOCS`) }}</span>
-      </a>
-      <NotificationBell @open-notification-panel="openNotificationPanel" />
-      <AgentDetails @toggle-menu="toggleOptions" />
-      <OptionsMenu
-        :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @open-key-shortcut-modal="$emit('openKeyShortcutModal')"
-        @close="toggleOptions"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
deleted file mode 100644
index 2ad2a57b5..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script>
-import { OnClickOutside } from '@vueuse/components';
-import { HELP_CENTER_MENU_ITEMS } from 'dashboard/helper/portalHelper';
-
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-export default {
-  components: {
-    DropdownMenu,
-    OnClickOutside,
-  },
-  props: {
-    to: {
-      type: String,
-      default: '',
-    },
-    id: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    count: {
-      type: String,
-      default: '',
-    },
-    isChildMenuActive: {
-      type: Boolean,
-      default: false,
-    },
-    openInNewPage: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      helpCenterMenu: HELP_CENTER_MENU_ITEMS,
-      showHelpCenterMenu: false,
-    };
-  },
-  computed: {
-    helpCenterMenuItems() {
-      return this.helpCenterMenu.map(item => ({
-        ...item,
-        isSelected: this.isSelectedMenuItem(item),
-      }));
-    },
-    isHelpCenter() {
-      return this.id === 'helpcenter';
-    },
-    isHelpCenterSelected() {
-      const routes = [
-        'portals_new',
-        'portals_index',
-        'portals_articles_index',
-        'portals_articles_new',
-        'portals_articles_edit',
-        'portals_categories_index',
-        'portals_categories_articles_index',
-        'portals_categories_articles_edit',
-        'portals_locales_index',
-        'portals_settings_index',
-      ];
-      return routes.includes(this.$route.name);
-    },
-  },
-  methods: {
-    isSelectedMenuItem(menuItem) {
-      return menuItem.value.includes(this.$route.name);
-    },
-    toggleHelpCenterMenu() {
-      this.showHelpCenterMenu = !this.showHelpCenterMenu;
-    },
-    handleHelpCenterAction({ action }) {
-      this.$router.push({
-        name: 'portals_index',
-        params: {
-          navigationPath: action,
-        },
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <OnClickOutside v-if="isHelpCenter" @trigger="showHelpCenterMenu = false">
-    <button
-      v-tooltip.top="$t(`SIDEBAR.${name}`)"
-      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:!bg-slate-25 dark:hover:!bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
-      :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isHelpCenterSelected,
-      }"
-      @click="toggleHelpCenterMenu"
-    >
-      <fluent-icon
-        :icon="icon"
-        :class="{
-          'text-woot-500': isHelpCenterSelected,
-        }"
-      />
-      <DropdownMenu
-        v-if="showHelpCenterMenu && isHelpCenter"
-        :menu-items="helpCenterMenuItems"
-        class="ltr:left-10 rtl:right-10 w-36 z-[100] top-0 overflow-y-auto max-h-52"
-        @action="handleHelpCenterAction"
-      />
-    </button>
-  </OnClickOutside>
-
-  <router-link v-else v-slot="{ href, isActive, navigate }" :to="to" custom>
-    <a
-      v-tooltip.right="$t(`SIDEBAR.${name}`)"
-      :href="href"
-      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
-      :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isActive || isChildMenuActive,
-      }"
-      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
-      :target="openInNewPage ? '_blank' : undefined"
-      @click="navigate"
-    >
-      <fluent-icon
-        :icon="icon"
-        :class="{
-          'text-woot-500': isActive || isChildMenuActive,
-        }"
-      />
-      <span class="sr-only">{{ name }}</span>
-      <span
-        v-if="count"
-        class="absolute bg-yellow-500 text-black-900 -top-1 -right-1"
-      >
-        {{ count }}
-      </span>
-    </a>
-  </router-link>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
deleted file mode 100644
index c36b6f611..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-<script>
-import { frontendURL } from '../../../helper/URLHelper';
-import SecondaryNavItem from './SecondaryNavItem.vue';
-import AccountContext from './AccountContext.vue';
-import { mapGetters } from 'vuex';
-import { FEATURE_FLAGS } from '../../../featureFlags';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../../../helper/permissionsHelper';
-import { routesWithPermissions } from '../../../routes';
-
-export default {
-  components: {
-    AccountContext,
-    SecondaryNavItem,
-  },
-  props: {
-    accountId: {
-      type: Number,
-      default: 0,
-    },
-    labels: {
-      type: Array,
-      default: () => [],
-    },
-    inboxes: {
-      type: Array,
-      default: () => [],
-    },
-    teams: {
-      type: Array,
-      default: () => [],
-    },
-    customViews: {
-      type: Array,
-      default: () => [],
-    },
-    menuConfig: {
-      type: Object,
-      default: () => {},
-    },
-    currentUser: {
-      type: Object,
-      default: () => {},
-    },
-    isOnChatwootCloud: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['addLabel', 'toggleAccounts'],
-  computed: {
-    ...mapGetters({
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    contactCustomViews() {
-      return this.customViews.filter(view => view.filter_type === 'contact');
-    },
-    accessibleMenuItems() {
-      const menuItemsFilteredByPermissions = this.menuConfig.menuItems.filter(
-        menuItem => {
-          const userPermissions = getUserPermissions(
-            this.currentUser,
-            this.accountId
-          );
-          return hasPermissions(
-            routesWithPermissions[menuItem.toStateName],
-            userPermissions
-          );
-        }
-      );
-      return menuItemsFilteredByPermissions.filter(item => {
-        if (item.showOnlyOnCloud) {
-          return this.isOnChatwootCloud;
-        }
-        return true;
-      });
-    },
-    inboxSection() {
-      return {
-        icon: 'folder',
-        label: 'INBOXES',
-        hasSubMenu: true,
-        newLink: this.showNewLink(FEATURE_FLAGS.INBOX_MANAGEMENT),
-        newLinkTag: 'NEW_INBOX',
-        key: 'inbox',
-        toState: frontendURL(`accounts/${this.accountId}/settings/inboxes/new`),
-        toStateName: 'settings_inbox_new',
-        newLinkRouteName: 'settings_inbox_new',
-        children: this.inboxes
-          .map(inbox => ({
-            id: inbox.id,
-            label: inbox.name,
-            truncateLabel: true,
-            toState: frontendURL(
-              `accounts/${this.accountId}/inbox/${inbox.id}`
-            ),
-            type: inbox.channel_type,
-            phoneNumber: inbox.phone_number,
-            reauthorizationRequired: inbox.reauthorization_required,
-          }))
-          .sort((a, b) =>
-            a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1
-          ),
-      };
-    },
-    labelSection() {
-      return {
-        icon: 'number-symbol',
-        label: 'LABELS',
-        hasSubMenu: true,
-        newLink: this.showNewLink(FEATURE_FLAGS.TEAM_MANAGEMENT),
-        newLinkTag: 'NEW_LABEL',
-        key: 'label',
-        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
-        toStateName: 'labels_list',
-        showModalForNewItem: true,
-        modalName: 'AddLabel',
-        dataTestid: 'sidebar-new-label-button',
-        children: this.labels.map(label => ({
-          id: label.id,
-          label: label.title,
-          color: label.color,
-          truncateLabel: true,
-          toState: frontendURL(
-            `accounts/${this.accountId}/label/${label.title}`
-          ),
-        })),
-      };
-    },
-    contactLabelSection() {
-      return {
-        icon: 'number-symbol',
-        label: 'TAGGED_WITH',
-        hasSubMenu: true,
-        key: 'labels',
-        newLink: this.showNewLink(FEATURE_FLAGS.TEAM_MANAGEMENT),
-        newLinkTag: 'NEW_LABEL',
-        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
-        toStateName: 'labels_list',
-        showModalForNewItem: true,
-        modalName: 'AddLabel',
-        children: this.labels.map(label => ({
-          id: label.id,
-          label: label.title,
-          color: label.color,
-          truncateLabel: true,
-          toState: frontendURL(
-            `accounts/${this.accountId}/contacts/labels/${label.title}`
-          ),
-        })),
-      };
-    },
-    teamSection() {
-      return {
-        icon: 'people-team',
-        label: 'TEAMS',
-        hasSubMenu: true,
-        newLink: this.showNewLink(FEATURE_FLAGS.TEAM_MANAGEMENT),
-        newLinkTag: 'NEW_TEAM',
-        key: 'team',
-        toState: frontendURL(`accounts/${this.accountId}/settings/teams/new`),
-        toStateName: 'settings_teams_new',
-        newLinkRouteName: 'settings_teams_new',
-        children: this.teams.map(team => ({
-          id: team.id,
-          label: team.name,
-          truncateLabel: true,
-          toState: frontendURL(`accounts/${this.accountId}/team/${team.id}`),
-        })),
-      };
-    },
-    foldersSection() {
-      return {
-        icon: 'folder',
-        label: 'CUSTOM_VIEWS_FOLDER',
-        hasSubMenu: true,
-        key: 'custom_view',
-        children: this.customViews
-          .filter(view => view.filter_type === 'conversation')
-          .map(view => ({
-            id: view.id,
-            label: view.name,
-            truncateLabel: true,
-            toState: frontendURL(
-              `accounts/${this.accountId}/custom_view/${view.id}`
-            ),
-          })),
-      };
-    },
-    contactSegmentsSection() {
-      return {
-        icon: 'folder',
-        label: 'CUSTOM_VIEWS_SEGMENTS',
-        hasSubMenu: true,
-        key: 'segments',
-        children: this.customViews
-          .filter(view => view.filter_type === 'contact')
-          .map(view => ({
-            id: view.id,
-            label: view.name,
-            truncateLabel: true,
-            toState: frontendURL(
-              `accounts/${this.accountId}/contacts/segments/${view.id}`
-            ),
-          })),
-      };
-    },
-    additionalSecondaryMenuItems() {
-      let conversationMenuItems = [this.inboxSection, this.labelSection];
-      let contactMenuItems = [this.contactLabelSection];
-      if (this.teams.length) {
-        conversationMenuItems = [this.teamSection, ...conversationMenuItems];
-      }
-      if (this.customViews.length) {
-        conversationMenuItems = [this.foldersSection, ...conversationMenuItems];
-      }
-      if (this.contactCustomViews.length) {
-        contactMenuItems = [this.contactSegmentsSection, ...contactMenuItems];
-      }
-      return {
-        conversations: conversationMenuItems,
-        contacts: contactMenuItems,
-      };
-    },
-  },
-  methods: {
-    showAddLabelPopup() {
-      this.$emit('addLabel');
-    },
-    toggleAccountModal() {
-      this.$emit('toggleAccounts');
-    },
-    showNewLink(featureFlag) {
-      return this.isFeatureEnabledonAccount(this.accountId, featureFlag);
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
-  >
-    <AccountContext @toggle-accounts="toggleAccountModal" />
-    <transition-group
-      name="menu-list"
-      tag="ul"
-      class="pt-2 list-none reset-base"
-    >
-      <SecondaryNavItem
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <SecondaryNavItem
-        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @add-label="showAddLabelPopup"
-      />
-    </transition-group>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
deleted file mode 100644
index 6f72f11ec..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    labelColor: {
-      type: String,
-      default: '',
-    },
-    shouldTruncate: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    warningIcon: {
-      type: String,
-      default: '',
-    },
-    showChildCount: {
-      type: Boolean,
-      default: false,
-    },
-    childItemCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    showIcon() {
-      return {
-        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
-      };
-    },
-    isCountZero() {
-      return this.childItemCount === 0;
-    },
-    menuTitle() {
-      return this.shouldTruncate ? this.label : '';
-    },
-  },
-};
-</script>
-
-<template>
-  <router-link
-    v-slot="{ href, isActive, navigate }"
-    :to="to"
-    custom
-    active-class="active"
-  >
-    <li
-      class="h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
-      :class="{
-        'bg-woot-25 dark:bg-slate-800': isActive,
-        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
-          shouldTruncate,
-      }"
-      @click="navigate"
-    >
-      <a
-        :href="href"
-        class="inline-flex text-left max-w-full w-full items-center"
-      >
-        <span
-          v-if="icon"
-          class="inline-flex items-center justify-center w-4 rounded-sm bg-slate-100 dark:bg-slate-700 p-0.5 mr-1.5 rtl:mr-0 rtl:ml-1.5"
-        >
-          <fluent-icon
-            class="text-xxs text-slate-700 dark:text-slate-200"
-            :class="{
-              'text-woot-500 dark:text-woot-500': isActive,
-            }"
-            :icon="icon"
-            size="12"
-          />
-        </span>
-
-        <span
-          v-if="labelColor"
-          class="inline-flex rounded-sm bg-slate-100 h-3 w-3.5 mr-1.5 rtl:mr-0 rtl:ml-1.5 border border-slate-50 dark:border-slate-900"
-          :style="{ backgroundColor: labelColor }"
-        />
-        <div
-          class="items-center flex overflow-hidden whitespace-nowrap text-ellipsis w-full justify-between"
-        >
-          <span
-            :title="menuTitle"
-            class="text-sm text-slate-700 dark:text-slate-100"
-            :class="{
-              'text-woot-500 dark:text-woot-500': isActive,
-              'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
-                shouldTruncate,
-            }"
-          >
-            {{ label }}
-          </span>
-          <span
-            v-if="showChildCount"
-            class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs mx-1 py-0 px-1"
-            :class="
-              isCountZero
-                ? `text-slate-300 dark:text-slate-500`
-                : `text-slate-700 dark:text-slate-50`
-            "
-          >
-            {{ childItemCount }}
-          </span>
-        </div>
-        <span
-          v-if="warningIcon"
-          class="inline-flex mr-1 bg-red-50 dark:bg-red-900 p-0.5 rounded-sm"
-        >
-          <fluent-icon
-            v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
-            class="text-xxs text-red-500 dark:text-red-300"
-            :icon="warningIcon"
-            size="12"
-          />
-        </span>
-      </a>
-    </li>
-  </router-link>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
deleted file mode 100644
index 6bee69a41..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useConfig } from 'dashboard/composables/useConfig';
-import {
-  getInboxClassByType,
-  getInboxWarningIconClass,
-} from 'dashboard/helper/inbox';
-
-import SecondaryChildNavItem from './SecondaryChildNavItem.vue';
-import {
-  isOnMentionsView,
-  isOnUnattendedView,
-} from '../../../store/modules/conversations/helpers/actionHelpers';
-import Policy from '../../policy.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: { SecondaryChildNavItem, Policy, NextButton },
-  props: {
-    menuItem: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['addLabel', 'open'],
-  setup() {
-    const { isAdmin } = useAdmin();
-    const { isEnterprise } = useConfig();
-    return {
-      isAdmin,
-      isEnterprise,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      activeInbox: 'getSelectedInbox',
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-      globalConfig: 'globalConfig/get',
-    }),
-    isCountZero() {
-      return this.menuItem.count === 0;
-    },
-    isActiveView() {
-      return this.computedClass.includes('active-view');
-    },
-    hasSubMenu() {
-      return !!this.menuItem.children;
-    },
-    isMenuItemVisible() {
-      let isFeatureEnabled = true;
-      if (this.menuItem.featureFlag) {
-        isFeatureEnabled = this.isFeatureEnabledonAccount(
-          this.accountId,
-          this.menuItem.featureFlag
-        );
-      }
-
-      if (this.menuItem.isEnterpriseOnly) {
-        if (!this.isEnterprise) return false;
-        return isFeatureEnabled || this.globalConfig.displayManifest;
-      }
-
-      if (this.menuItem.featureFlag) {
-        return this.isFeatureEnabledonAccount(
-          this.accountId,
-          this.menuItem.featureFlag
-        );
-      }
-
-      return isFeatureEnabled;
-    },
-    isAllConversations() {
-      return (
-        this.$store.state.route.name === 'inbox_conversation' &&
-        this.menuItem.toStateName === 'home'
-      );
-    },
-    isMentions() {
-      return (
-        isOnMentionsView({ route: this.$route }) &&
-        this.menuItem.toStateName === 'conversation_mentions'
-      );
-    },
-    isUnattended() {
-      return (
-        isOnUnattendedView({ route: this.$route }) &&
-        this.menuItem.toStateName === 'conversation_unattended'
-      );
-    },
-    isTeamsSettings() {
-      return (
-        this.$store.state.route.name === 'settings_teams_edit' &&
-        this.menuItem.toStateName === 'settings_teams_list'
-      );
-    },
-    isInboxSettings() {
-      return (
-        this.$route.name === 'settings_inbox_show' &&
-        this.menuItem.toStateName === 'settings_inbox_list'
-      );
-    },
-    isIntegrationsSettings() {
-      return (
-        this.$store.state.route.name === 'settings_integrations_webhook' &&
-        this.menuItem.toStateName === 'settings_integrations'
-      );
-    },
-    isApplicationsSettings() {
-      return (
-        this.$store.state.route.name === 'settings_applications_integration' &&
-        this.menuItem.toStateName === 'settings_applications'
-      );
-    },
-    isContactsDefaultRoute() {
-      return (
-        this.menuItem.toStateName === 'contacts_dashboard_index' &&
-        (this.$store.state.route.name === 'contacts_dashboard_index' ||
-          this.$store.state.route.name === 'contacts_edit')
-      );
-    },
-    isCurrentRoute() {
-      return this.$store.state.route.name.includes(this.menuItem.toStateName);
-    },
-
-    computedClass() {
-      // If active inbox is present, do not highlight conversations
-      if (this.activeInbox) return ' ';
-      if (
-        this.isAllConversations ||
-        this.isMentions ||
-        this.isUnattended ||
-        this.isContactsDefaultRoute ||
-        this.isCurrentRoute
-      ) {
-        return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
-      }
-      if (this.hasSubMenu) {
-        if (
-          this.isTeamsSettings ||
-          this.isInboxSettings ||
-          this.isIntegrationsSettings ||
-          this.isApplicationsSettings
-        ) {
-          return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
-        }
-        return 'hover:text-slate-700 dark:hover:text-slate-100';
-      }
-
-      return 'hover:text-slate-700 dark:hover:text-slate-100';
-    },
-  },
-  methods: {
-    computedInboxClass(child) {
-      const { type, phoneNumber } = child;
-      if (!type) return '';
-      const classByType = getInboxClassByType(type, phoneNumber);
-      return classByType;
-    },
-    computedInboxErrorClass(child) {
-      const { type, reauthorizationRequired } = child;
-      if (!type) return '';
-      const warningClass = getInboxWarningIconClass(
-        type,
-        reauthorizationRequired
-      );
-      return warningClass;
-    },
-    newLinkClick(e, navigate) {
-      if (this.menuItem.newLinkRouteName) {
-        navigate(e);
-      } else if (this.menuItem.showModalForNewItem) {
-        if (this.menuItem.modalName === 'AddLabel') {
-          e.preventDefault();
-          this.$emit('addLabel');
-        }
-      }
-    },
-    showItem(item) {
-      return this.isAdmin && !!item.newLink;
-    },
-    onClickOpen() {
-      this.$emit('open');
-    },
-    showChildCount(count) {
-      return Number.isInteger(count);
-    },
-  },
-};
-</script>
-
-<template>
-  <li v-show="isMenuItemVisible" class="mt-1">
-    <div v-if="hasSubMenu" class="flex justify-between">
-      <span
-        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
-      >
-        {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      </span>
-      <div v-if="menuItem.showNewButton" class="flex items-center">
-        <NextButton ghost xs slate icon="i-lucide-plus" @click="onClickOpen" />
-      </div>
-    </div>
-    <router-link
-      v-else
-      class="flex items-center p-2 m-0 text-sm leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
-      :class="computedClass"
-      :to="menuItem && menuItem.toState"
-    >
-      <fluent-icon
-        :icon="menuItem.icon"
-        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
-        size="14"
-      />
-      {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      <span
-        v-if="showChildCount(menuItem.count)"
-        class="px-1 py-0 mx-1 rounded-md text-xxs"
-        :class="{
-          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
-          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
-            isActiveView,
-          'bg-slate-50 dark:bg-slate-700': !isActiveView,
-        }"
-      >
-        {{ `${menuItem.count}` }}
-      </span>
-      <span
-        v-if="menuItem.beta"
-        data-view-component="true"
-        label="Beta"
-        class="inline-block px-1 mx-1 leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
-      >
-        {{ $t('SIDEBAR.BETA') }}
-      </span>
-    </router-link>
-
-    <ul v-if="hasSubMenu" class="list-none reset-base">
-      <SecondaryChildNavItem
-        v-for="child in menuItem.children"
-        :key="child.id"
-        :to="child.toState"
-        :label="child.label"
-        :label-color="child.color"
-        :should-truncate="child.truncateLabel"
-        :icon="computedInboxClass(child)"
-        :warning-icon="computedInboxErrorClass(child)"
-        :show-child-count="showChildCount(child.count)"
-        :child-item-count="child.count"
-      />
-      <Policy :permissions="['administrator']">
-        <router-link
-          v-if="menuItem.newLink"
-          v-slot="{ href, navigate }"
-          :to="menuItem.toState"
-          custom
-        >
-          <li class="pl-1">
-            <a :href="href">
-              <NextButton
-                ghost
-                xs
-                slate
-                icon="i-lucide-plus"
-                :label="$t(`SIDEBAR.${menuItem.newLinkTag}`)"
-                :data-testid="menuItem.dataTestid"
-                @click="e => newLinkClick(e, navigate)"
-              />
-            </a>
-          </li>
-        </router-link>
-      </Policy>
-    </ul>
-  </li>
-</template>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
deleted file mode 100644
index c819702b0..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import AccountSelector from '../AccountSelector.vue';
-import WootModal from 'dashboard/components/Modal.vue';
-import WootModalHeader from 'dashboard/components/ModalHeader.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
-const store = createStore({
-  modules: {
-    auth: {
-      namespaced: false,
-      getters: {
-        getCurrentAccountId: () => 1,
-        getCurrentUser: () => ({
-          accounts: [
-            { id: 1, name: 'Chatwoot', role: 'administrator' },
-            { id: 2, name: 'GitX', role: 'agent' },
-          ],
-        }),
-      },
-    },
-    globalConfig: {
-      namespaced: true,
-      getters: {
-        get: () => ({ createNewAccountFromDashboard: false }),
-      },
-    },
-  },
-});
-
-describe('AccountSelector', () => {
-  let accountSelector = null;
-
-  beforeEach(() => {
-    accountSelector = mount(AccountSelector, {
-      global: {
-        plugins: [store],
-        components: {
-          'woot-modal': WootModal,
-          'woot-modal-header': WootModalHeader,
-          'fluent-icon': FluentIcon,
-        },
-        stubs: {
-          // override global stub
-          WootModalHeader: false,
-        },
-      },
-      props: { showAccountModal: true },
-    });
-  });
-
-  it('title and sub title exist', () => {
-    const headerComponent = accountSelector.findComponent(WootModalHeader);
-    const title = headerComponent.find('[data-test-id="modal-header-title"]');
-    expect(title.text()).toBe('Switch account');
-    const content = headerComponent.find(
-      '[data-test-id="modal-header-content"]'
-    );
-    expect(content.text()).toBe('Select an account from the following list');
-  });
-
-  it('first account item is checked', () => {
-    const selectedAccountCheckmark = accountSelector.find(
-      '#account-1 > button > svg'
-    );
-    expect(selectedAccountCheckmark.exists()).toBe(true);
-
-    const otherAccountCheckmark = accountSelector.find(
-      '#account-2 > button > svg'
-    );
-    expect(otherAccountCheckmark.exists()).toBe(true);
-  });
-});
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
deleted file mode 100644
index 7dd3e775b..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import AgentDetails from '../AgentDetails.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-describe('AgentDetails', () => {
-  const currentUser = {
-    name: 'Neymar Junior',
-    avatar_url: '',
-    availability_status: 'online',
-  };
-  const currentRole = 'agent';
-  let store = null;
-  let agentDetails = null;
-
-  const mockTooltipDirective = {
-    mounted: (el, binding) => {
-      // You can mock the behavior here if necessary
-      el.setAttribute('data-tooltip', binding.value || '');
-    },
-  };
-
-  beforeEach(() => {
-    store = createStore({
-      modules: {
-        auth: {
-          namespaced: false,
-          getters: {
-            getCurrentUser: () => currentUser,
-            getCurrentRole: () => currentRole,
-            getCurrentUserAvailability: () => currentUser.availability_status,
-          },
-        },
-      },
-    });
-
-    agentDetails = shallowMount(AgentDetails, {
-      global: {
-        plugins: [store],
-        components: {
-          Thumbnail,
-          NextButton,
-        },
-        directives: {
-          tooltip: mockTooltipDirective, // Mocking the tooltip directive
-        },
-        stubs: { NextButton: { template: '<button><slot /></button>' } },
-      },
-    });
-  });
-
-  it('shows the correct agent status', () => {
-    expect(agentDetails.findComponent(Thumbnail).vm.status).toBe('online');
-  });
-
-  it('agent thumbnail exists', () => {
-    const thumbnailComponent = agentDetails.findComponent(Thumbnail);
-    expect(thumbnailComponent.exists()).toBe(true);
-  });
-});
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js
deleted file mode 100644
index 607604d48..000000000
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-import NotificationBell from '../NotificationBell.vue';
-
-const $route = {
-  name: 'notifications_index',
-};
-
-describe('notificationBell', () => {
-  const accountId = 1;
-  const notificationMetadata = { unreadCount: 19 };
-  let store = null;
-  let actions = null;
-  let modules = null;
-
-  beforeEach(() => {
-    actions = {
-      showNotification: vi.fn(),
-    };
-    modules = {
-      auth: {
-        namespaced: false,
-        getters: {
-          getCurrentAccountId: () => accountId,
-        },
-      },
-      notifications: {
-        namespaced: false,
-        getters: {
-          'notifications/getMeta': () => notificationMetadata,
-        },
-      },
-    };
-
-    store = createStore({
-      actions,
-      modules,
-    });
-  });
-
-  it('it should return unread count 19', () => {
-    const wrapper = shallowMount(NotificationBell, {
-      global: {
-        plugins: [store],
-        mocks: {
-          $route,
-        },
-        components: {
-          'fluent-icon': FluentIcon,
-        },
-      },
-    });
-    expect(wrapper.vm.unreadCount).toBe('19');
-  });
-
-  it('it should return unread count 99+', async () => {
-    notificationMetadata.unreadCount = 100;
-    const wrapper = shallowMount(NotificationBell, {
-      global: {
-        plugins: [store],
-        mocks: {
-          $route,
-        },
-        components: {
-          'fluent-icon': FluentIcon,
-        },
-      },
-    });
-    expect(wrapper.vm.unreadCount).toBe('99+');
-  });
-
-  it('isNotificationPanelActive', async () => {
-    const notificationBell = shallowMount(NotificationBell, {
-      global: {
-        plugins: [store],
-        mocks: {
-          $route,
-        },
-        components: {
-          'fluent-icon': FluentIcon,
-        },
-      },
-    });
-
-    expect(notificationBell.vm.isNotificationPanelActive).toBe(true);
-  });
-});
diff --git a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js b/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
deleted file mode 100644
index ccff4321a..000000000
--- a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import AvailabilityStatus from '../AvailabilityStatus.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
-import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
-describe('AvailabilityStatus', () => {
-  const currentAvailability = 'online';
-  const currentAccountId = '1';
-  const currentUserAutoOffline = false;
-  let store = null;
-  let actions = null;
-
-  beforeEach(() => {
-    actions = {
-      updateAvailability: vi.fn(() => Promise.resolve()),
-    };
-
-    store = createStore({
-      modules: {
-        auth: {
-          namespaced: false,
-          getters: {
-            getCurrentUserAvailability: () => currentAvailability,
-            getCurrentAccountId: () => currentAccountId,
-            getCurrentUserAutoOffline: () => currentUserAutoOffline,
-          },
-        },
-      },
-      actions,
-    });
-  });
-
-  it('dispatches an action when user changes status', async () => {
-    const wrapper = mount(AvailabilityStatus, {
-      global: {
-        plugins: [store],
-        components: {
-          NextButton,
-          WootDropdownItem,
-          WootDropdownMenu,
-          WootDropdownHeader,
-          WootDropdownDivider,
-          FluentIcon,
-        },
-        stubs: {
-          WootSwitch: { template: '<button />' },
-        },
-      },
-    });
-
-    // Ensure that the dropdown menu is opened
-    await wrapper.vm.openStatusMenu();
-
-    // Simulate the user clicking the 3rd button (offline status)
-    const buttons = wrapper.findAll('.status-change--dropdown-button');
-    expect(buttons.length).toBeGreaterThan(0); // Ensure buttons exist
-
-    await buttons[2].trigger('click');
-
-    expect(actions.updateAvailability).toHaveBeenCalledTimes(1);
-    expect(actions.updateAvailability.mock.calls[0][1]).toEqual({
-      availability: 'offline',
-      account_id: currentAccountId,
-    });
-  });
-});
diff --git a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js b/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
deleted file mode 100644
index dc946369c..000000000
--- a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import SidemenuIcon from '../SidemenuIcon.vue';
-
-const store = createStore({
-  modules: {
-    auth: {
-      namespaced: false,
-      getters: {
-        getCurrentAccountId: () => 1,
-      },
-    },
-    accounts: {
-      namespaced: true,
-      getters: {
-        isFeatureEnabledonAccount: () => () => false,
-      },
-    },
-  },
-});
-
-describe('SidemenuIcon', () => {
-  test('matches snapshot', () => {
-    const wrapper = shallowMount(SidemenuIcon, {
-      stubs: { NextButton: { template: '<button><slot /></button>' } },
-      global: { plugins: [store] },
-    });
-    expect(wrapper.vm).toBeTruthy();
-    expect(wrapper.element).toMatchSnapshot();
-  });
-});
diff --git a/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap b/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
deleted file mode 100644
index a5ca2af6a..000000000
--- a/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`SidemenuIcon > matches snapshot 1`] = `
-<button
-  class="-ml-3"
-  ghost=""
-  icon="i-lucide-menu"
-  size="sm"
-  slate=""
->
-  
-  
-</button>
-`;
diff --git a/app/javascript/dashboard/components/table/BaseCell.vue b/app/javascript/dashboard/components/table/BaseCell.vue
index 952337423..ad1e6cf83 100644
--- a/app/javascript/dashboard/components/table/BaseCell.vue
+++ b/app/javascript/dashboard/components/table/BaseCell.vue
@@ -19,6 +19,6 @@ const isRTL = useMapGetter('accounts/isRTL');
     <slot v-if="$slots.default || content">
       <template v-if="content">{{ content }}</template>
     </slot>
-    <span v-else class="text-slate-300 dark:text-slate-700"> --- </span>
+    <span v-else class="text-n-slate-10"> --- </span>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 12e292a67..6c71588f7 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -118,13 +118,13 @@ export default {
 <style lang="scss" scoped>
 .banner {
   &.primary {
-    @apply bg-woot-500 dark:bg-woot-500;
+    @apply bg-n-brand;
   }
 
   &.secondary {
     @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12;
     a {
-      @apply text-slate-800 dark:text-slate-800;
+      @apply text-n-slate-12;
     }
   }
 
@@ -137,18 +137,18 @@ export default {
   }
 
   &.warning {
-    @apply bg-yellow-500 dark:bg-yellow-500 text-yellow-500 dark:text-yellow-500;
+    @apply bg-n-amber-5 text-n-amber-12;
     a {
-      @apply text-yellow-500 dark:text-yellow-500;
+      @apply text-n-amber-12;
     }
   }
 
   &.gray {
-    @apply text-black-500 dark:text-black-500;
+    @apply text-n-gray-10 dark:text-n-gray-10;
   }
 
   a {
-    @apply ml-1 underline text-white dark:text-white text-xs;
+    @apply ml-1 underline text-n-amber-12 text-xs;
   }
 
   .banner-message {
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue
index 715bc8cb3..73a41ab65 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue
@@ -55,7 +55,7 @@ const validateDate = () => {
 
 <template>
   <div class="h-[82px] flex flex-col items-start px-5 gap-1.5 pt-4 w-full">
-    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
+    <span class="text-sm font-medium text-n-slate-12">
       {{
         calendarType === START_CALENDAR
           ? $t('DATE_PICKER.DATE_RANGE_INPUT.START')
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
index d1fa42630..950a9f020 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
@@ -51,21 +51,13 @@ const openDatePicker = () => {
     class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1"
     @click="openDatePicker"
   >
-    <fluent-icon
-      class="text-slate-800 dark:text-slate-50"
-      icon="calendar"
-      size="16"
-    />
-    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
+    <fluent-icon class="text-n-slate-12" icon="calendar" size="16" />
+    <span class="text-sm font-medium text-n-slate-12">
       {{ $t(activeDateRange) }}
     </span>
-    <span class="text-sm font-medium text-slate-600 dark:text-slate-200">
+    <span class="text-sm font-medium text-n-slate-11">
       {{ formatDateRange }}
     </span>
-    <fluent-icon
-      class="text-slate-800 dark:text-slate-50"
-      icon="chevron-down"
-      size="14"
-    />
+    <fluent-icon class="text-n-slate-12" icon="chevron-down" size="14" />
   </button>
 </template>
diff --git a/app/javascript/dashboard/components/ui/HelperTextPopup.vue b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
index eed0e2755..88be9960b 100644
--- a/app/javascript/dashboard/components/ui/HelperTextPopup.vue
+++ b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
@@ -12,12 +12,12 @@ defineProps({
     <fluent-icon
       icon="info"
       size="14"
-      class="mt-0.5 text-slate-600 absolute dark:text-slate-400"
+      class="mt-0.5 text-n-slate-11 absolute"
     />
     <div
-      class="bg-white dark:bg-slate-900 w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-slate-75 dark:border-slate-800 rounded-lg shadow-md"
+      class="bg-n-background w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-n-weak rounded-lg shadow-md"
     >
-      <p class="text-slate-800 dark:text-slate-75 mb-0 text-xs">
+      <p class="text-n-slate-12 mb-0 text-xs">
         {{ message }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index 96e08fd7b..6c02c3629 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -113,7 +113,7 @@ export default {
 
 <style scoped lang="scss">
 .label {
-  @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-n-strong h-6;
+  @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-n-slate-3 text-n-slate-12 border border-solid border-n-strong h-6;
 
   &.small {
     @apply text-xs py-0.5 px-1 leading-tight h-5;
@@ -133,67 +133,71 @@ export default {
 
   /* Color Schemes */
   &.primary {
-    @apply bg-woot-100 dark:bg-woot-100 text-woot-900 dark:text-woot-900 border border-solid border-woot-200;
+    @apply bg-n-blue-5 text-n-blue-12 border border-solid border-n-blue-7;
 
     a {
-      @apply text-woot-900 dark:text-woot-900;
+      @apply text-n-blue-12;
     }
     .label-color-dot {
-      @apply bg-woot-600 dark:bg-woot-600;
+      @apply bg-n-blue-9;
     }
   }
   &.secondary {
-    @apply bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-solid border-n-weak;
+    @apply bg-n-slate-5 text-n-slate-12 border border-solid border-n-slate-7;
 
     a {
-      @apply text-slate-900 dark:text-slate-100;
+      @apply text-n-slate-12;
     }
     .label-color-dot {
-      @apply bg-slate-600 dark:bg-slate-600;
+      @apply bg-n-slate-9;
     }
   }
   &.success {
-    @apply bg-green-100 dark:bg-green-700 text-green-900 dark:text-green-100 border border-solid border-green-200 dark:border-green-600;
+    @apply bg-n-teal-5 text-n-teal-12 border border-solid border-n-teal-7;
 
     a {
-      @apply text-green-900 dark:text-green-100;
+      @apply text-n-teal-12;
     }
     .label-color-dot {
-      @apply bg-green-600 dark:bg-green-600;
+      @apply bg-n-teal-9;
     }
   }
   &.alert {
-    @apply bg-red-100 dark:bg-red-700 text-red-900 dark:text-red-100 border border-solid border-red-200 dark:border-red-600;
+    @apply bg-n-ruby-5 text-n-ruby-12 border border-solid border-n-ruby-7;
 
     a {
-      @apply text-red-900 dark:text-red-100;
+      @apply text-n-ruby-12;
     }
     .label-color-dot {
-      @apply bg-red-600 dark:bg-red-600;
+      @apply bg-n-ruby-9;
     }
   }
   &.warning {
-    @apply bg-yellow-100 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 border border-solid border-yellow-200 dark:border-yellow-600;
+    @apply bg-n-amber-5 text-n-amber-12 border border-solid border-n-amber-7;
 
     a {
-      @apply text-yellow-900 dark:text-yellow-100;
+      @apply text-n-amber-12;
     }
     .label-color-dot {
-      @apply bg-yellow-900 dark:bg-yellow-900;
+      @apply bg-n-amber-9;
     }
   }
 
   &.smooth {
-    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-solid border-n-strong;
+    @apply bg-transparent text-n-slate-11 dark:text-n-slate-12 border border-solid border-n-strong;
   }
 
   &.dashed {
-    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-dashed border-n-strong;
+    @apply bg-transparent text-n-slate-11 dark:text-n-slate-12 border border-dashed border-n-strong;
   }
 }
 
 .label-close--button {
-  @apply text-slate-800 dark:text-slate-100 -mb-0.5 rounded-sm cursor-pointer flex items-center justify-center hover:bg-slate-100 dark:hover:bg-slate-700;
+  @apply text-n-slate-11 -mb-0.5 rounded-sm cursor-pointer flex items-center justify-center hover:bg-n-slate-3;
+
+  svg {
+    @apply text-n-slate-11;
+  }
 }
 
 .label-action--button {
diff --git a/app/javascript/dashboard/components/ui/PreviewCard.vue b/app/javascript/dashboard/components/ui/PreviewCard.vue
index 1c90ce956..4baa362b0 100644
--- a/app/javascript/dashboard/components/ui/PreviewCard.vue
+++ b/app/javascript/dashboard/components/ui/PreviewCard.vue
@@ -23,16 +23,17 @@ export default {
 
 <template>
   <div
-    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-n-strong"
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid"
     :class="{
-      'bg-woot-25 dark:bg-n-solid-2 border border-solid border-n-blue-border':
-        active,
+      'bg-n-blue-1 dark:bg-n-solid-2 border-n-blue-4': active,
+      'border-n-weak': !active,
     }"
   >
     <div
-      class="flex justify-between items-center rounded-t-md px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 border-b border-solid border-n-strong"
+      class="flex justify-between items-center rounded-t-md px-2 w-full h-10 border-b border-solid"
       :class="{
-        'bg-woot-50 border-b border-solid border-n-blue-border': active,
+        'bg-n-blue-2 border-n-blue-4': active,
+        'bg-n-slate-2 border-n-weak': !active,
       }"
     >
       <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
@@ -41,23 +42,19 @@ export default {
         icon="checkmark-circle"
         type="solid"
         size="24"
-        class="text-woot-500 dark:text-woot-500"
+        class="text-n-brand"
       />
     </div>
     <div
-      class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
+      class="text-n-slate-11 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
     >
       {{ content }}
     </div>
     <div v-if="src" class="p-3">
       <img
         :src="src"
-        class="border border-solid rounded-md"
-        :class="
-          active
-            ? 'border-woot-75 dark:border-woot-700'
-            : 'border-slate-50 dark:border-slate-600'
-        "
+        class="border rounded-md"
+        :class="active ? 'border-n-blue-border' : 'border-n-weak'"
       />
     </div>
     <slot v-else />
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index b4398baf8..14cdad521 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -29,11 +29,11 @@ export default {
 
 <style lang="scss" scoped>
 .toggle-button {
-  @apply bg-slate-200 dark:bg-slate-600;
+  @apply bg-n-slate-5;
   --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
     rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
     rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  border-radius: var(--border-radius-large);
+  border-radius: 0.5625rem;
   border: 2px solid transparent;
   cursor: pointer;
   display: flex;
@@ -46,7 +46,7 @@ export default {
   width: 2.125rem;
 
   &.active {
-    background-color: var(--w-500);
+    @apply bg-n-brand;
   }
 
   &.small {
@@ -54,30 +54,29 @@ export default {
     height: 0.875rem;
 
     span {
-      height: var(--space-one);
-      width: var(--space-one);
+      @apply size-2.5;
 
       &.active {
-        transform: translate(var(--space-small), var(--space-zero));
+        @apply ltr:translate-x-[0.5rem] ltr:translate-y-0 rtl:translate-x-[-0.5rem] rtl:translate-y-0;
       }
     }
   }
 
   span {
-    @apply bg-white dark:bg-slate-900;
-    --space-one-point-five: 0.9375rem;
+    @apply bg-n-background;
+
     border-radius: 100%;
     box-shadow: var(--toggle-button-box-shadow);
     display: inline-block;
-    height: var(--space-one-point-five);
+    height: 0.9375rem;
     transform: translate(0, 0);
     transition-duration: 200ms;
     transition-property: transform;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    width: var(--space-one-point-five);
+    width: 0.9375rem;
 
     &.active {
-      transform: translate(var(--space-one-point-five), var(--space-zero));
+      @apply ltr:translate-x-[0.9375rem] ltr:translate-y-0 rtl:translate-x-[-0.9375rem] rtl:translate-y-0;
     }
   }
 }
diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
index 7a2b5054d..004eb31b1 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
@@ -11,10 +11,6 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  isCompact: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['change']);
@@ -70,25 +66,28 @@ watch(
 <template>
   <div
     ref="tabsContainer"
-    :class="{
-      'tabs--container--with-border': border,
-      'tabs--container--compact': isCompact,
-    }"
-    class="tabs--container"
+    class="flex"
+    :class="[border && 'border-b border-b-n-weak']"
   >
     <button
       v-if="hasScroll"
-      class="tabs--scroll-button button clear secondary button--only-icon"
+      class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
       @click="onScrollClick('left')"
     >
       <fluent-icon icon="chevron-left" :size="16" />
     </button>
-    <ul ref="tabsList" :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
+    <ul
+      ref="tabsList"
+      class="border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0"
+      :class="
+        hasScroll ? 'overflow-hidden py-0 px-1 max-w-[calc(100%-64px)]' : ''
+      "
+    >
       <slot />
     </ul>
     <button
       v-if="hasScroll"
-      class="tabs--scroll-button button clear secondary button--only-icon"
+      class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
       @click="onScrollClick('right')"
     >
       <fluent-icon icon="chevron-right" :size="16" />
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index 8936bec2e..aa959a4fa 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -22,6 +22,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  isCompact: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const activeIndex = inject('activeIndex');
@@ -40,14 +44,28 @@ const onTabClick = event => {
 
 <template>
   <li
-    class="tabs-title"
-    :class="{
-      'is-active': active,
-    }"
+    class="flex-shrink-0 my-0 mx-2 ltr:first:ml-0 rtl:first:mr-0 ltr:last:mr-0 rtl:last:ml-0 hover:text-n-slate-12"
   >
-    <a @click="onTabClick">
+    <a
+      class="flex items-center flex-row border-b select-none cursor-pointer text-sm relative top-[1px] transition-[border-color] duration-[150ms] ease-[cubic-bezier(0.37,0,0.63,1)]"
+      :class="[
+        active
+          ? 'border-b border-n-brand text-n-blue-text'
+          : 'border-transparent text-n-slate-11',
+        isCompact ? 'py-2 text-sm' : 'text-base py-3',
+      ]"
+      @click="onTabClick"
+    >
       {{ name }}
-      <div v-if="showBadge" class="badge min-w-[20px]">
+      <div
+        v-if="showBadge"
+        class="rounded-md h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0 min-w-[20px]"
+        :class="[
+          active
+            ? 'bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text'
+            : 'bg-n-alpha-black2 dark:bg-n-solid-3 text-n-slate-11',
+        ]"
+      >
         <span>
           {{ getItemCount }}
         </span>
diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index 6cf3202d6..9b1ee75db 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -113,7 +113,7 @@ export default {
       delay: { show: 1000, hide: 0 },
       hideOnClick: true,
     }"
-    class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-slate-11"
+    class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-n-slate-11"
   >
     <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
   </div>
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index cef85b193..2219a07c1 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -44,21 +44,18 @@ export default {
     >
       <div class="flex items-center">
         <h3
-          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
+          class="text-n-slate-12 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
         >
           {{ item.title }}
         </h3>
-        <span
-          v-if="isOver(item)"
-          class="ml-1 text-green-500 dark:text-green-500"
-        >
+        <span v-if="isOver(item)" class="mx-1 mt-0.5 text-n-teal-9">
           <fluent-icon icon="checkmark" />
         </span>
       </div>
       <span class="step">
         {{ items.indexOf(item) + 1 }}
       </span>
-      <p class="pl-6 m-0 text-sm text-slate-600 dark:text-slate-300">
+      <p class="pl-6 m-0 mt-1.5 text-sm text-n-slate-11">
         {{ item.body }}
       </p>
     </div>
@@ -68,7 +65,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 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;
+    @apply cursor-pointer after:bg-n-slate-6 before:bg-n-slate-6 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 {
@@ -97,7 +94,7 @@ export default {
     }
 
     .step {
-      @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-10 absolute text-center text-white dark:text-white text-xxs top-5;
+      @apply bg-n-slate-7 rounded-2xl font-medium w-4 left-4 leading-4 z-10 absolute text-center text-white dark:text-white text-xxs top-5;
     }
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
index 2eef79d2a..6fbdfe6e7 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
@@ -19,10 +19,10 @@ const onClick = () => {
     />
 
     <div
-      class="radar-ping-animation absolute top-0 right-0 -mt-1 -mr-1 rounded-full w-3 h-3 bg-woot-500 dark:bg-woot-500"
+      class="radar-ping-animation absolute top-0 right-0 -mt-1 -mr-1 rounded-full w-3 h-3 bg-n-brand"
     />
     <div
-      class="absolute top-0 right-0 -mt-1 -mr-1 rounded-full w-3 h-3 bg-woot-500 dark:bg-woot-500 opacity-50"
+      class="absolute top-0 right-0 -mt-1 -mr-1 rounded-full w-3 h-3 bg-n-brand opacity-50"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
index 395d49334..04bba8f59 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
@@ -70,11 +70,11 @@ export default {
       @submit.prevent="applyText"
     >
       <div v-if="draftMessage" class="w-full">
-        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
+        <h4 class="mt-1 text-base text-n-slate-12">
           {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
         </h4>
         <p v-dompurify-html="formatMessage(draftMessage, false)" />
-        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
+        <h4 class="mt-1 text-base text-n-slate-12">
           {{
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
           }}
diff --git a/app/javascript/dashboard/components/widgets/AILoader.vue b/app/javascript/dashboard/components/widgets/AILoader.vue
index ad6735251..66826b3a3 100644
--- a/app/javascript/dashboard/components/widgets/AILoader.vue
+++ b/app/javascript/dashboard/components/widgets/AILoader.vue
@@ -22,23 +22,15 @@
     gap: 4px;
 
     .ai-typing--icon {
-      color: var(--v-500);
+      @apply text-n-iris-11;
     }
   }
   label {
-    display: inline-block;
-    margin-right: var(--space-smaller);
-    color: var(--v-400);
+    @apply text-n-iris-11 ltr:mr-1 rtl:ml-1 inline-block;
   }
   .loader {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    margin-right: var(--space-smaller);
-    margin-top: var(--space-slab);
-    background-color: var(--v-300);
-    border-radius: 50%;
     animation: bubble-scale 1.2s infinite;
+    @apply bg-n-iris-11 inline-block size-1.5 ltr:mr-1 rtl:ml-1 mt-3 rounded-full;
   }
 
   .loader:nth-child(2) {
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 299a2ad5a..75afb5263 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -50,7 +50,7 @@ const fileName = file => {
     <div
       v-for="(attachment, index) in nonRecordedAudioAttachments"
       :key="attachment.id"
-      class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
+      class="flex items-center p-1 bg-n-slate-3 gap-1 rounded-md w-[15rem] mb-1"
     >
       <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
         <img
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 9bc197f25..f59b12dda 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -266,11 +266,11 @@ export default {
   @apply flex items-center justify-center relative my-2.5 mx-0;
 
   .operator__line {
-    @apply absolute w-full border-b border-solid border-slate-75 dark:border-slate-600;
+    @apply absolute w-full border-b border-solid border-n-weak;
   }
 
   .operator__select {
-    margin-bottom: var(--space-zero) !important;
+    margin-bottom: 0 !important;
     @apply relative w-auto;
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
index f5de79044..275b292d0 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -56,9 +56,9 @@ export default {
 
 <style scoped>
 .multiselect {
-  margin: var(--space-smaller) var(--space-zero);
+  margin: 0.25rem 0;
 }
 textarea {
-  margin-bottom: var(--space-zero);
+  margin-bottom: 0;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
index 1298c1da4..1eff406bf 100644
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -79,13 +79,13 @@ input[type='file'] {
   @apply hidden;
 }
 .input-wrapper {
-  @apply flex h-9 bg-white dark:bg-slate-900 py-1 px-2 items-center text-xs cursor-pointer rounded-sm border border-dashed border-woot-100 dark:border-woot-500;
+  @apply flex h-9 bg-n-background py-1 px-2 items-center text-xs cursor-pointer rounded-sm border border-dashed border-n-strong;
 }
 .success-icon {
-  @apply text-green-500 dark:text-green-600 mr-2;
+  @apply text-n-teal-9 mr-2;
 }
 .error-icon {
-  @apply text-red-500 dark:text-red-600 mr-2;
+  @apply text-n-ruby-9 mr-2;
 }
 
 .processing {
diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index 2c7ad01c0..9ccb87bf8 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -50,6 +50,6 @@ export default {
   }
 }
 .avatar-container {
-  @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-woot-600 dark:text-woot-200;
+  @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-n-blue-text;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index 4f9751c4e..5bc96d2b5 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -41,6 +41,10 @@ export default {
         );
       }
 
+      if (key === 'voice') {
+        return this.enabledFeatures.channel_voice;
+      }
+
       return [
         'website',
         'twilio',
@@ -50,8 +54,15 @@ export default {
         'telegram',
         'line',
         'instagram',
+        'voice',
       ].includes(key);
     },
+    isComingSoon() {
+      const { key } = this.channel;
+      // Show "Coming Soon" only if the channel is marked as coming soon
+      // and the corresponding feature flag is not enabled yet.
+      return ['voice'].includes(key) && !this.isActive;
+    },
   },
   methods: {
     getChannelThumbnail() {
@@ -74,6 +85,7 @@ export default {
     :class="{ inactive: !isActive }"
     :title="channel.name"
     :src="getChannelThumbnail()"
+    :is-coming-soon="isComingSoon"
     @click="onItemClick"
   />
 </template>
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index 26fa7466a..da56b54af 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -48,26 +48,17 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <woot-tabs
     :index="activeTabIndex"
-    class="w-full px-3 -mt-1 py-0 tab--chat-type"
+    class="w-full px-3 -mt-1 py-0 [&_ul]:p-0"
     @change="onTabChange"
   >
     <woot-tabs-item
       v-for="(item, index) in items"
       :key="item.key"
-      class="text-sm"
+      class="text-sm [&_a]:font-medium"
       :index="index"
       :name="item.name"
       :count="item.count"
+      is-compact
     />
   </woot-tabs>
 </template>
-
-<style scoped lang="scss">
-.tab--chat-type {
-  ::v-deep {
-    .tabs {
-      @apply p-0;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index 3a9c8e7ad..37637398e 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -52,19 +52,16 @@ export default {
 </template>
 
 <style scoped lang="scss">
-@import 'dashboard/assets/scss/variables';
-@import 'dashboard/assets/scss/mixins';
-
 .colorpicker {
   position: relative;
 }
 
 .colorpicker--selected {
-  @apply border border-solid border-slate-50 dark:border-slate-600 rounded cursor-pointer h-8 w-8 mb-4;
+  @apply border border-solid border-n-weak rounded cursor-pointer h-8 w-8 mb-4;
 }
 
 .colorpicker--chrome.vc-chrome {
-  @apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-slate-75 dark:border-slate-600 rounded;
+  @apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-n-weak rounded;
 
   ::v-deep {
     input {
diff --git a/app/javascript/dashboard/components/widgets/EmptyState.vue b/app/javascript/dashboard/components/widgets/EmptyState.vue
index 810704131..800b35f28 100644
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -17,7 +17,7 @@ export default {
     </h3>
     <p
       v-if="message"
-      class="block text-center text-n-slate-11 dark:text-slate-400 my-4 mx-auto w-[90%]"
+      class="block text-center text-n-slate-11 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 f6011c4ad..9e9e5bc4b 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -264,12 +264,10 @@ export default {
       v-if="showQueryOperator"
       class="flex items-center justify-center relative my-2.5 mx-0"
     >
-      <hr
-        class="absolute w-full border-b border-solid border-slate-75 dark:border-slate-800"
-      />
+      <hr class="absolute w-full border-b border-solid border-n-weak" />
       <select
         v-model="query_operator"
-        class="relative w-auto mb-0 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+        class="relative w-auto mb-0 bg-n-background text-n-slate-12 border-n-weak"
       >
         <option value="and">
           {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
@@ -285,7 +283,7 @@ export default {
 <style lang="scss" scoped>
 .filter__answer--wrap {
   input {
-    @apply bg-white dark:bg-slate-900 mb-0 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600;
+    @apply bg-n-background mb-0 text-n-slate-12 border-n-weak;
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/LoadingState.vue b/app/javascript/dashboard/components/widgets/LoadingState.vue
index dfba6b43e..b68cd2b6c 100644
--- a/app/javascript/dashboard/components/widgets/LoadingState.vue
+++ b/app/javascript/dashboard/components/widgets/LoadingState.vue
@@ -1,20 +1,20 @@
-<script>
-export default {
-  props: {
-    message: { type: String, default: '' },
-  },
-};
+<script setup>
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  message: { type: String, default: '' },
+});
 </script>
 
 <template>
   <div class="flex items-center justify-center p-8">
     <h6
-      class="flex items-center gap-2 text-base text-center w-100 text-slate-800 dark:text-slate-300"
+      class="flex items-center gap-3 text-base text-center w-100 text-n-slate-11"
     >
-      <span class="text-base font-medium text-slate-800 dark:text-slate-100">
+      <span class="text-base font-medium text-n-slate-12">
         {{ message }}
       </span>
-      <span class="spinner" />
+      <Spinner class="text-n-brand" />
     </h6>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index 60a22353f..4f7668604 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -16,13 +16,10 @@ export default {
 <template>
   <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">
+      <h2 class="text-2xl text-n-slate-12 mb-1 font-medium">
         {{ headerTitle }}
       </h2>
-      <p
-        v-if="headerContent"
-        class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
-      >
+      <p v-if="headerContent" class="w-full text-n-slate-11 text-sm mb-2">
         {{ headerContent }}
       </p>
       <slot />
diff --git a/app/javascript/dashboard/components/widgets/ShowMore.vue b/app/javascript/dashboard/components/widgets/ShowMore.vue
index fbc09cb6a..ca0ef36a7 100644
--- a/app/javascript/dashboard/components/widgets/ShowMore.vue
+++ b/app/javascript/dashboard/components/widgets/ShowMore.vue
@@ -37,7 +37,7 @@ const toggleShowMore = () => {
     {{ textToBeDisplayed }}
     <button
       v-if="text.length > limit"
-      class="text-woot-500 !p-0 !border-0 align-top"
+      class="text-n-brand !p-0 !border-0 align-top"
       @click="toggleShowMore"
     >
       {{ buttonLabel }}
diff --git a/app/javascript/dashboard/components/widgets/TableFooterResults.vue b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
index 23a3c3a0d..2e3875cad 100644
--- a/app/javascript/dashboard/components/widgets/TableFooterResults.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooterResults.vue
@@ -16,7 +16,7 @@ defineProps({
 </script>
 
 <template>
-  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
+  <span class="text-sm text-n-slate-11 font-medium">
     {{
       $t('GENERAL.SHOWING_RESULTS', {
         firstIndex,
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 5998dd338..3111212aa 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -93,7 +93,7 @@ export default {
     },
     thumbnailClass() {
       const className = this.hasBorder
-        ? 'border border-solid border-white dark:border-slate-700/50'
+        ? 'border border-solid border-white dark:border-n-weak'
         : '';
       const variant =
         this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';
@@ -183,7 +183,7 @@ export default {
   .user-thumbnail {
     border-radius: 50%;
     &.thumbnail-square {
-      border-radius: var(--border-radius-large);
+      border-radius: 0.5625rem;
     }
     height: 100%;
     width: 100%;
@@ -193,20 +193,16 @@ export default {
   }
 
   .source-badge {
-    border-radius: var(--border-radius-small);
-    bottom: var(--space-minus-micro);
-    box-shadow: var(--shadow-small);
-    height: var(--space-slab);
-    padding: var(--space-micro);
+    border-radius: 0.1875rem;
+    bottom: -0.125rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     position: absolute;
     right: 0;
-    width: var(--space-slab);
-    @apply bg-white dark:bg-slate-900;
+    @apply bg-n-background p-0.5 size-3;
   }
 
   .user-online-status {
-    border-radius: 50%;
-    bottom: var(--space-micro);
+    @apply bottom-0.5 rounded-full;
 
     &:after {
       content: ' ';
@@ -214,15 +210,15 @@ export default {
   }
 
   .user-online-status--online {
-    @apply bg-green-400 dark:bg-green-400;
+    @apply bg-n-teal-10;
   }
 
   .user-online-status--busy {
-    @apply bg-yellow-500 dark:bg-yellow-500;
+    @apply bg-n-amber-10;
   }
 
   .user-online-status--offline {
-    @apply bg-slate-500 dark:bg-slate-500;
+    @apply bg-n-slate-10;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
index 5f35f62fa..e25025e17 100644
--- a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
+++ b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
@@ -60,31 +60,19 @@ export default {
 
 .overlapping-thumbnail {
   position: relative;
-  box-shadow: var(--shadow-small);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 
   &:not(:first-child) {
-    margin-left: var(--space-minus-smaller);
+    margin-left: -0.25rem;
   }
 
   .gap-tight {
-    margin-left: var(--space-minus-small);
+    margin-left: -0.5rem;
   }
 }
 
 .thumbnail-more-text {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-
-  margin-left: var(--space-minus-small);
-  padding: 0 var(--space-small);
-  box-shadow: var(--shadow-small);
-  background: var(--color-background);
-  border-radius: var(--space-giga);
-  border: 1px solid var(--white);
-
-  color: var(--s-600);
-  font-size: var(--font-size-mini);
-  font-weight: var(--font-weight-medium);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  @apply text-n-slate-11 bg-n-slate-4 border border-n-weak text-xs font-medium rounded-full px-2 ltr:-ml-2 rtl:-mr-2 inline-flex items-center relative;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 628c88ad3..7ac589691 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -709,7 +709,7 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
     <div ref="editor" />
     <div
       v-show="isImageNodeSelected && showImageResizeToolbar"
-      class="absolute shadow-md rounded-[4px] flex gap-1 py-1 px-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50"
+      class="absolute shadow-md rounded-[6px] flex gap-1 py-1 px-1 bg-n-solid-3 outline outline-1 outline-n-weak text-n-slate-12"
       :style="{
         top: toolbarPosition.top,
         left: toolbarPosition.left,
@@ -718,7 +718,7 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
       <button
         v-for="size in sizes"
         :key="size.name"
-        class="text-xs font-medium rounded-[4px] border border-solid border-slate-200 dark:border-slate-600 px-1.5 py-0.5 hover:bg-slate-100 dark:hover:bg-slate-800"
+        class="text-xs font-medium rounded-[4px] outline outline-1 outline-n-strong px-1.5 py-0.5 hover:bg-n-slate-5"
         @click="setURLWithQueryAndImageSize(size)"
       >
         {{ size.name }}
@@ -735,16 +735,16 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
   @apply flex flex-col;
 
   .ProseMirror-menubar {
-    min-height: var(--space-two) !important;
+    min-height: 1.25rem !important;
     @apply -ml-2.5 pb-0 bg-transparent text-n-slate-11;
 
     .ProseMirror-menu-active {
-      @apply bg-slate-75 dark:bg-slate-800;
+      @apply bg-n-slate-5 dark:bg-n-solid-3;
     }
   }
 
   > .ProseMirror {
-    @apply p-0 break-words text-slate-800 dark:text-slate-100;
+    @apply p-0 break-words text-n-slate-12;
 
     h1,
     h2,
@@ -753,14 +753,14 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
     h5,
     h6,
     p {
-      @apply text-slate-800 dark:text-slate-100;
+      @apply text-n-slate-12;
     }
 
     blockquote {
-      @apply border-slate-400 dark:border-slate-500;
+      @apply border-n-slate-7;
 
       p {
-        @apply text-slate-600 dark:text-slate-400;
+        @apply text-n-slate-11;
       }
     }
 
@@ -825,6 +825,6 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .editor-warning__message {
-  @apply text-red-400 dark:text-red-400 font-normal text-sm pt-1 pb-0 px-0;
+  @apply text-n-ruby-9 dark:text-n-ruby-9 font-normal text-sm pt-1 pb-0 px-0;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 47fe01e9c..ad3edce1b 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -355,10 +355,10 @@ export default {
       <transition name="modal-fade">
         <div
           v-show="uploadRef && uploadRef.dropActive"
-          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-n-slate-12 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
         >
           <fluent-icon icon="cloud-backup" size="40" />
-          <h4 class="text-2xl break-words text-slate-900 dark:text-slate-50">
+          <h4 class="text-2xl break-words text-n-slate-12">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
         </div>
@@ -402,7 +402,7 @@ export default {
   }
 
   &:hover button {
-    @apply dark:bg-slate-800 bg-slate-100;
+    @apply enabled:bg-n-slate-9/20;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 23ef82b5e..b5367ca29 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -73,7 +73,7 @@ export default {
       };
     },
     charLengthClass() {
-      return this.charactersRemaining < 0 ? 'text-red-600' : 'text-slate-600';
+      return this.charactersRemaining < 0 ? 'text-n-ruby-9' : 'text-n-slate-11';
     },
     characterLengthWarning() {
       return this.charactersRemaining < 0
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue b/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue
index 3efade71d..a2fcd8ac7 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue
@@ -52,13 +52,13 @@ onMounted(() => {
   >
     <template #default="{ item, selected }">
       <span
-        class="max-w-full inline-flex items-center gap-0.5 min-w-0 mb-0 text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 truncate"
+        class="max-w-full inline-flex items-center gap-0.5 min-w-0 mb-0 text-sm font-medium text-n-slate-12 group-hover:text-n-brand truncate"
       >
         {{ item.emoji }}
         <p
           class="relative mb-0 truncate bottom-px"
           :class="{
-            'text-woot-500 dark:text-woot-500': selected,
+            'text-n-brand': selected,
             'font-normal': !selected,
           }"
         >
diff --git a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
deleted file mode 100644
index 97461667a..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-export default {
-  props: {
-    status: { type: String, default: '' },
-  },
-};
-</script>
-
-<template>
-  <div
-    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
-  />
-</template>
-
-<style lang="scss" scoped>
-.status-badge {
-  &__online {
-    @apply bg-green-400;
-  }
-  &__offline {
-    @apply bg-slate-500;
-  }
-  &__busy {
-    @apply bg-yellow-500;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
deleted file mode 100644
index 7794e0ab0..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/ChatFilter.vue
+++ /dev/null
@@ -1 +0,0 @@
-<!-- // not using this component -->
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 62ea8fdaf..36f8438c3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -91,7 +91,7 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap bg-n-background relative"
+    class="conversation-details-wrap flex flex-col min-w-0 w-full bg-n-background relative"
     :class="{
       'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
     }"
@@ -104,7 +104,7 @@ export default {
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px dashboard-app--tabs border-t border-t-n-background"
+      class="-mt-px border-t border-t-n-background"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -113,6 +113,8 @@ export default {
         :index="tab.index"
         :name="tab.name"
         :show-badge="false"
+        is-compact
+        class="[&_a]:pt-1"
       />
     </woot-tabs>
     <div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
@@ -138,19 +140,3 @@ export default {
     />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.conversation-details-wrap {
-  @apply flex flex-col min-w-0 w-full;
-}
-
-.dashboard-app--tabs {
-  ::v-deep {
-    .tabs-title {
-      a {
-        @apply pb-2 pt-1;
-      }
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 4840b459f..30e99ca9d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -328,9 +328,7 @@ export default {
           {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
       </p>
-      <div
-        class="absolute flex flex-col conversation--meta ltr:right-4 rtl:left-4 top-4"
-      >
+      <div class="absolute flex flex-col mt-4 ltr:right-4 rtl:left-4 top-4">
         <span class="ml-auto font-normal leading-4 text-xxs">
           <TimeAgo
             :last-activity-timestamp="chat.timestamp"
@@ -338,7 +336,7 @@ export default {
           />
         </span>
         <span
-          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ml-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
+          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ltr:ml-auto rtl:mr-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
         >
           {{ unreadCount > 9 ? '9+' : unreadCount }}
         </span>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
index 4a82c7537..3adc25459 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue
@@ -23,9 +23,7 @@ export default {
       src="dashboard/assets/images/no-chat.svg"
       alt="No Chat"
     />
-    <span
-      class="text-sm text-slate-800 dark:text-slate-200 font-medium text-center"
-    >
+    <span class="text-sm text-n-slate-12 font-medium text-center">
       {{ message }}
       <br />
     </span>
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
deleted file mode 100644
index bed90fd05..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ /dev/null
@@ -1,800 +0,0 @@
-<script>
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import BubbleActions from './bubble/Actions.vue';
-import BubbleContact from './bubble/Contact.vue';
-import BubbleFile from './bubble/File.vue';
-import BubbleImageAudioVideo from './bubble/ImageAudioVideo.vue';
-import BubbleIntegration from './bubble/Integration.vue';
-import BubbleLocation from './bubble/Location.vue';
-import BubbleMailHead from './bubble/MailHead.vue';
-import BubbleReplyTo from './bubble/ReplyTo.vue';
-import BubbleText from './bubble/Text.vue';
-import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
-import InstagramStory from './bubble/InstagramStory.vue';
-import InstagramStoryReply from './bubble/InstagramStoryReply.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import { CONTENT_TYPES } from 'shared/constants/contentType';
-import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
-import { generateBotMessageContent } from './helpers/botMessageContentHelper';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { ACCOUNT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { LocalStorage } from 'shared/helpers/localStorage';
-import { getDayDifferenceFromNow } from 'shared/helpers/DateHelper';
-import * as Sentry from '@sentry/vue';
-import { useTrack } from 'dashboard/composables';
-import { emitter } from 'shared/helpers/mitt';
-
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    BubbleActions,
-    BubbleContact,
-    BubbleFile,
-    BubbleImageAudioVideo,
-    BubbleIntegration,
-    BubbleLocation,
-    BubbleMailHead,
-    BubbleReplyTo,
-    BubbleText,
-    ContextMenu,
-    InstagramStory,
-    InstagramStoryReply,
-    Spinner,
-    NextButton,
-  },
-  props: {
-    data: {
-      type: Object,
-      required: true,
-    },
-    isATweet: {
-      type: Boolean,
-      default: false,
-    },
-    isAFacebookInbox: {
-      type: Boolean,
-      default: false,
-    },
-    isInstagram: {
-      type: Boolean,
-      default: false,
-    },
-    isAWhatsAppChannel: {
-      type: Boolean,
-      default: false,
-    },
-    isAnEmailInbox: {
-      type: Boolean,
-      default: false,
-    },
-    inboxSupportsReplyTo: {
-      type: Object,
-      default: () => ({}),
-    },
-    inReplyTo: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup() {
-    const { formatMessage } = useMessageFormatter();
-    return {
-      formatMessage,
-    };
-  },
-  data() {
-    return {
-      showContextMenu: false,
-      hasMediaLoadError: false,
-      contextMenuPosition: {},
-      showBackgroundHighlight: false,
-    };
-  },
-  computed: {
-    attachments() {
-      // Here it is used to get sender and created_at for each attachment
-      return this.data?.attachments.map(attachment => ({
-        ...attachment,
-        sender: this.data.sender || {},
-        created_at: this.data.created_at || '',
-      }));
-    },
-    hasOneDayPassed() {
-      // Disable retry button if the message is failed and the message is older than 24 hours
-      return getDayDifferenceFromNow(new Date(), this.data?.created_at) >= 1;
-    },
-    shouldRenderMessage() {
-      return (
-        this.hasAttachments ||
-        this.data.content ||
-        this.isEmailContentType ||
-        this.isUnsupported ||
-        this.isAnIntegrationMessage
-      );
-    },
-    emailMessageContent() {
-      const {
-        html_content: { full: fullHTMLContent } = {},
-        text_content: { full: fullTextContent } = {},
-      } = this.contentAttributes.email || {};
-
-      if (fullHTMLContent) {
-        return fullHTMLContent;
-      }
-
-      if (fullTextContent) {
-        return fullTextContent.replace(/\n/g, '<br>');
-      }
-
-      return '';
-    },
-    displayQuotedButton() {
-      if (this.emailMessageContent.includes('<blockquote')) {
-        return true;
-      }
-
-      if (!this.isIncoming) {
-        return false;
-      }
-
-      return false;
-    },
-    message() {
-      // If the message is an email, emailMessageContent would be present
-      // In that case, we would use letter package to render the email
-      if (this.emailMessageContent && this.isIncoming) {
-        return this.emailMessageContent;
-      }
-
-      const botMessageContent = generateBotMessageContent(
-        this.contentType,
-        this.contentAttributes,
-        {
-          noResponseText: this.$t('CONVERSATION.NO_RESPONSE'),
-          csat: {
-            ratingTitle: this.$t('CONVERSATION.RATING_TITLE'),
-            feedbackTitle: this.$t('CONVERSATION.FEEDBACK_TITLE'),
-          },
-        }
-      );
-
-      if (this.contentType === 'input_csat') {
-        return this.$t('CONVERSATION.CSAT_REPLY_MESSAGE') + botMessageContent;
-      }
-
-      return (
-        this.formatMessage(
-          this.data.content,
-          this.isATweet,
-          this.data.private
-        ) + botMessageContent
-      );
-    },
-    inReplyToMessageId() {
-      // Why not use the inReplyTo object directly?
-      // Glad you asked! The inReplyTo object may or may not be available
-      // depending on the current scroll position of the message list
-      // since old messages are only loaded when the user scrolls up
-      return this.data.content_attributes?.in_reply_to;
-    },
-    isAnInstagramStory() {
-      return this.contentAttributes.image_type === 'story_mention';
-    },
-    contextMenuEnabledOptions() {
-      return {
-        copy: this.hasText,
-        delete:
-          (this.hasText || this.hasAttachments) &&
-          !this.isMessageDeleted &&
-          !this.isFailed,
-        cannedResponse:
-          this.isOutgoing && this.hasText && !this.isMessageDeleted,
-        copyLink: !this.isFailed || !this.isProcessing,
-        translate:
-          (!this.isFailed || !this.isProcessing) &&
-          !this.isMessageDeleted &&
-          this.hasText,
-        replyTo: !this.data.private && this.inboxSupportsReplyTo.outgoing,
-      };
-    },
-    contentAttributes() {
-      return this.data.content_attributes || {};
-    },
-    externalError() {
-      return this.contentAttributes.external_error || '';
-    },
-    sender() {
-      return this.data.sender || {};
-    },
-    status() {
-      return this.data.status;
-    },
-    storySender() {
-      return this.contentAttributes.story_sender || null;
-    },
-    storyId() {
-      return this.contentAttributes.story_id || null;
-    },
-    storyUrl() {
-      return this.contentAttributes.story_url || null;
-    },
-    contentType() {
-      const {
-        data: { content_type: contentType },
-      } = this;
-      return contentType;
-    },
-    twitterProfileLink() {
-      const additionalAttributes = this.sender.additional_attributes || {};
-      const { screen_name: screenName } = additionalAttributes;
-      return `https://twitter.com/${screenName}`;
-    },
-    alignBubble() {
-      const { message_type: messageType } = this.data;
-      const isCentered = messageType === MESSAGE_TYPE.ACTIVITY;
-      const isLeftAligned = messageType === MESSAGE_TYPE.INCOMING;
-      const isRightAligned =
-        messageType === MESSAGE_TYPE.OUTGOING ||
-        messageType === MESSAGE_TYPE.TEMPLATE;
-      return {
-        center: isCentered,
-        left: isLeftAligned,
-        right: isRightAligned,
-        'has-context-menu': this.showContextMenu,
-        // this handles the offset required to align the context menu button
-        // extra alignment is required since a tweet message has a the user name and avatar below it
-        'has-tweet-menu': this.isATweet,
-        'has-bg': this.showBackgroundHighlight,
-      };
-    },
-    createdAt() {
-      return this.contentAttributes.external_created_at || this.data.created_at;
-    },
-    isBubble() {
-      return [0, 1, 3].includes(this.data.message_type);
-    },
-    isIncoming() {
-      return this.data.message_type === MESSAGE_TYPE.INCOMING;
-    },
-    isOutgoing() {
-      return this.data.message_type === MESSAGE_TYPE.OUTGOING;
-    },
-    isTemplate() {
-      return this.data.message_type === MESSAGE_TYPE.TEMPLATE;
-    },
-    isAnIntegrationMessage() {
-      return this.contentType === 'integrations';
-    },
-    emailHeadAttributes() {
-      return {
-        email: this.contentAttributes.email,
-        cc: this.contentAttributes.cc_emails,
-        bcc: this.contentAttributes.bcc_emails,
-      };
-    },
-    hasAttachments() {
-      return !!(this.data.attachments && this.data.attachments.length > 0);
-    },
-    isMessageDeleted() {
-      return this.contentAttributes.deleted;
-    },
-    hasText() {
-      return !!this.data.content;
-    },
-    tooltipForSender() {
-      const name = this.senderNameForAvatar;
-      const { message_type: messageType } = this.data;
-      const showTooltip =
-        messageType === MESSAGE_TYPE.OUTGOING ||
-        messageType === MESSAGE_TYPE.TEMPLATE;
-      return showTooltip
-        ? {
-            content: `${this.$t('CONVERSATION.SENT_BY')} ${name}`,
-          }
-        : false;
-    },
-    errorMessageTooltip() {
-      if (this.isFailed) {
-        return this.externalError || this.$t(`CONVERSATION.SEND_FAILED`);
-      }
-      return '';
-    },
-    wrapClass() {
-      return {
-        wrap: this.isBubble,
-        'activity-wrap': !this.isBubble,
-        'is-pending': this.isPending,
-        'is-failed': this.isFailed,
-        'is-email': this.isEmailContentType,
-      };
-    },
-    bubbleClass() {
-      return {
-        bubble: this.isBubble,
-        'is-private': this.data.private,
-        'is-unsupported': this.isUnsupported,
-        'is-image': this.hasMediaAttachment('image'),
-        'is-video': this.hasMediaAttachment('video'),
-        'is-text': this.hasText,
-        'is-from-bot': this.isSentByBot,
-        'is-failed': this.isFailed,
-        'is-email': this.isEmailContentType,
-      };
-    },
-    isUnsupported() {
-      return this.contentAttributes.is_unsupported ?? false;
-    },
-    isPending() {
-      return this.data.status === MESSAGE_STATUS.PROGRESS;
-    },
-    isFailed() {
-      return this.data.status === MESSAGE_STATUS.FAILED;
-    },
-    isSentByBot() {
-      if (this.isPending || this.isFailed) return false;
-      return !this.sender.type || this.sender.type === 'agent_bot';
-    },
-    shouldShowContextMenu() {
-      return !this.isUnsupported;
-    },
-    showAvatar() {
-      if (this.isOutgoing || this.isTemplate) {
-        return true;
-      }
-      return this.isATweet && this.isIncoming && this.sender;
-    },
-    senderNameForAvatar() {
-      if (this.isOutgoing || this.isTemplate) {
-        const { name = this.$t('CONVERSATION.BOT') } = this.sender || {};
-        return name;
-      }
-      return '';
-    },
-    isEmailContentType() {
-      return this.contentType === CONTENT_TYPES.INCOMING_EMAIL;
-    },
-  },
-  watch: {
-    data() {
-      this.hasMediaLoadError = false;
-    },
-  },
-  mounted() {
-    this.hasMediaLoadError = false;
-    emitter.on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
-    this.setupHighlightTimer();
-  },
-  unmounted() {
-    emitter.off(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
-    clearTimeout(this.higlightTimeout);
-  },
-  methods: {
-    isAttachmentImageVideoAudio(fileType) {
-      return ['image', 'audio', 'video', 'story_mention', 'ig_reel'].includes(
-        fileType
-      );
-    },
-    hasMediaAttachment(type) {
-      if (this.hasAttachments && this.data.attachments.length > 0) {
-        return this.compareMessageFileType(this.data, type);
-      }
-      return false;
-    },
-    compareMessageFileType(messageData, type) {
-      try {
-        const { attachments = [{}] } = messageData;
-        const { file_type: fileType } = attachments[0];
-        return fileType === type && !this.hasMediaLoadError;
-      } catch (err) {
-        Sentry.setContext('attachment-parsing-error', {
-          messageData,
-          type,
-          hasMediaLoadError: this.hasMediaLoadError,
-        });
-
-        Sentry.captureException(err);
-        return false;
-      }
-    },
-    handleContextMenuClick() {
-      this.showContextMenu = !this.showContextMenu;
-    },
-    async retrySendMessage() {
-      await this.$store.dispatch('sendMessageWithData', this.data);
-    },
-    onMediaLoadError() {
-      this.hasMediaLoadError = true;
-    },
-    openContextMenu(e) {
-      const shouldSkipContextMenu =
-        e.target?.classList.contains('skip-context-menu') ||
-        e.target?.tagName.toLowerCase() === 'a';
-      if (shouldSkipContextMenu || getSelection().toString()) {
-        return;
-      }
-
-      e.preventDefault();
-      if (e.type === 'contextmenu') {
-        useTrack(ACCOUNT_EVENTS.OPEN_MESSAGE_CONTEXT_MENU);
-      }
-      this.contextMenuPosition = {
-        x: e.pageX || e.clientX,
-        y: e.pageY || e.clientY,
-      };
-      this.showContextMenu = true;
-    },
-    closeContextMenu() {
-      this.showContextMenu = false;
-      this.contextMenuPosition = { x: null, y: null };
-    },
-    handleReplyTo() {
-      const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
-      const { conversation_id: conversationId, id: replyTo } = this.data;
-
-      LocalStorage.updateJsonStore(replyStorageKey, conversationId, replyTo);
-      emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.data);
-    },
-    setupHighlightTimer() {
-      if (Number(this.$route.query.messageId) !== Number(this.data.id)) {
-        return;
-      }
-
-      this.showBackgroundHighlight = true;
-      const HIGHLIGHT_TIMER = 1000;
-      this.higlightTimeout = setTimeout(() => {
-        this.showBackgroundHighlight = false;
-      }, HIGHLIGHT_TIMER);
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <li
-    v-if="shouldRenderMessage"
-    :id="`message${data.id}`"
-    class="group/context-menu"
-    :class="[alignBubble]"
-  >
-    <div :class="wrapClass">
-      <div
-        v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
-        class="message-failed--alert"
-      >
-        <NextButton
-          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
-          ghost
-          xs
-          ruby
-          icon="i-lucide-refresh-ccw"
-          @click="retrySendMessage"
-        />
-      </div>
-      <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
-        <BubbleMailHead
-          :email-attributes="contentAttributes.email"
-          :cc="emailHeadAttributes.cc"
-          :bcc="emailHeadAttributes.bcc"
-          :is-incoming="isIncoming"
-        />
-        <InstagramStoryReply v-if="storyUrl" :story-url="storyUrl" />
-        <BubbleReplyTo
-          v-if="inReplyToMessageId && inboxSupportsReplyTo.incoming"
-          :message="inReplyTo"
-          :message-type="data.message_type"
-          :parent-has-attachments="hasAttachments"
-        />
-        <div v-if="isUnsupported">
-          <template v-if="isAFacebookInbox && isInstagram">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
-          </template>
-          <template v-else-if="isAFacebookInbox">
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
-          </template>
-          <template v-else>
-            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
-          </template>
-        </div>
-        <BubbleText
-          v-else-if="data.content"
-          :message="message"
-          :is-email="isEmailContentType"
-          :display-quoted-button="displayQuotedButton"
-        />
-        <BubbleIntegration
-          :message-id="data.id"
-          :content-attributes="contentAttributes"
-          :inbox-id="data.inbox_id"
-        />
-        <span
-          v-if="isPending && hasAttachments"
-          class="chat-bubble has-attachment agent"
-        >
-          {{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
-        </span>
-        <div v-if="!isPending && hasAttachments">
-          <div v-for="attachment in attachments" :key="attachment.id">
-            <InstagramStory
-              v-if="isAnInstagramStory"
-              :story-url="attachment.data_url"
-              @error="onMediaLoadError"
-            />
-            <BubbleImageAudioVideo
-              v-else-if="isAttachmentImageVideoAudio(attachment.file_type)"
-              :attachment="attachment"
-              @error="onMediaLoadError"
-            />
-            <BubbleLocation
-              v-else-if="attachment.file_type === 'location'"
-              :latitude="attachment.coordinates_lat"
-              :longitude="attachment.coordinates_long"
-              :name="attachment.fallback_title"
-            />
-            <BubbleContact
-              v-else-if="attachment.file_type === 'contact'"
-              :name="data.content"
-              :phone-number="attachment.fallback_title"
-            />
-            <BubbleFile v-else :url="attachment.data_url" />
-          </div>
-        </div>
-        <BubbleActions
-          :id="data.id"
-          :sender="data.sender"
-          :story-sender="storySender"
-          :external-error="errorMessageTooltip"
-          :story-id="`${storyId}`"
-          :is-a-tweet="isATweet"
-          :is-a-whatsapp-channel="isAWhatsAppChannel"
-          :is-email="isEmailContentType"
-          :is-private="data.private"
-          :message-type="data.message_type"
-          :message-status="status"
-          :source-id="data.source_id"
-          :inbox-id="data.inbox_id"
-          :created-at="createdAt"
-        />
-      </div>
-      <Spinner v-if="isPending" size="tiny" />
-      <div
-        v-if="showAvatar"
-        v-tooltip.left="tooltipForSender"
-        class="sender--info"
-      >
-        <woot-thumbnail
-          :src="sender.thumbnail"
-          :username="senderNameForAvatar"
-          size="16px"
-        />
-        <a
-          v-if="isATweet && isIncoming"
-          class="sender--available-name"
-          :href="twitterProfileLink"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          {{ sender.name }}
-        </a>
-      </div>
-    </div>
-    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
-      <ContextMenu
-        v-if="isBubble && !isMessageDeleted"
-        :context-menu-position="contextMenuPosition"
-        :is-open="showContextMenu"
-        :enabled-options="contextMenuEnabledOptions"
-        :message="data"
-        @open="openContextMenu"
-        @close="closeContextMenu"
-        @reply-to="handleReplyTo"
-      />
-    </div>
-  </li>
-</template>
-
-<style lang="scss">
-.wrap {
-  > .bubble {
-    @apply min-w-[128px];
-
-    &.is-unsupported {
-      @apply text-xs max-w-[300px] border-dashed border border-slate-200 text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-700 dark:border-slate-500;
-
-      .message-text--metadata .time {
-        @apply text-slate-400 dark:text-slate-300;
-      }
-    }
-
-    &.is-image,
-    &.is-video {
-      @apply p-0 overflow-hidden;
-
-      .image,
-      .video {
-        @apply max-w-[20rem] p-0.5;
-
-        > img,
-        > video {
-          /** ensure that the bubble radius and image radius match*/
-          @apply rounded-[0.4rem];
-        }
-
-        > video {
-          @apply h-full w-full object-cover;
-        }
-      }
-
-      .video {
-        @apply h-[11.25rem];
-      }
-    }
-
-    &.is-image.is-text > .message-text__wrap,
-    &.is-video.is-text > .message-text__wrap {
-      @apply max-w-[20rem] py-2 px-4;
-    }
-
-    &.is-private .file.message-text__wrap {
-      .file--icon {
-        @apply text-woot-400 dark:text-woot-400;
-      }
-
-      .attachment-name {
-        @apply text-slate-700 dark:text-slate-200;
-      }
-
-      .download.button {
-        @apply text-woot-400 dark:text-woot-400;
-      }
-    }
-
-    &.is-private.is-text > .message-text__wrap .link {
-      @apply text-woot-600 dark:text-woot-200;
-    }
-
-    &.is-private.is-text > .message-text__wrap .prosemirror-mention-node {
-      @apply font-bold bg-none rounded-sm p-0 bg-yellow-100 dark:bg-yellow-700 text-slate-700 dark:text-slate-25 underline;
-    }
-
-    &.is-from-bot {
-      @apply bg-violet-400 dark:bg-violet-400;
-
-      .message-text--metadata .time {
-        @apply text-violet-50 dark:text-violet-50;
-      }
-
-      &.is-private .message-text--metadata .time {
-        @apply text-slate-400 dark:text-slate-400;
-      }
-    }
-
-    &.is-failed {
-      @apply bg-n-ruby-4 dark:bg-n-ruby-4 text-n-slate-12;
-
-      .message-text--metadata .time {
-        @apply text-n-ruby-12 dark:text-n-ruby-12;
-      }
-    }
-  }
-
-  &.is-pending {
-    @apply relative opacity-80;
-
-    .spinner {
-      @apply absolute bottom-1 right-1;
-    }
-
-    > .is-image.is-text.bubble > .message-text__wrap {
-      @apply p-0;
-    }
-  }
-}
-
-.wrap.is-email {
-  --bubble-max-width: 84% !important;
-}
-
-.sender--info {
-  @apply items-center text-black-700 dark:text-black-100 inline-flex py-1 px-0;
-
-  .sender--available-name {
-    @apply text-xs ml-1;
-  }
-}
-
-.message-failed--alert {
-  @apply text-red-900 dark:text-red-900 flex-grow text-right mt-1 mr-1 mb-0 ml-0;
-}
-
-li.left,
-li.right {
-  @apply flex items-end;
-}
-
-li.left.has-tweet-menu .context-menu {
-  // this handles the offset required to align the context menu button
-  // extra alignment is required since a tweet message has a the user name and avatar below it
-  @apply mb-6;
-}
-
-li.has-bg {
-  @apply bg-woot-75 dark:bg-woot-600;
-}
-
-li.right .context-menu-wrap {
-  @apply ml-auto;
-}
-
-li.right {
-  @apply flex-row-reverse justify-end;
-
-  .wrap.is-pending {
-    @apply ml-auto;
-  }
-
-  .wrap.is-failed {
-    @apply flex items-end ltr:ml-auto rtl:mr-auto;
-  }
-}
-
-.has-context-menu {
-  @apply bg-slate-50 dark:bg-slate-700;
-}
-
-.context-menu {
-  @apply relative;
-}
-
-/* Markdown styling */
-
-.bubble .text-content {
-  p code {
-    @apply bg-slate-75 dark:bg-slate-700 inline-block leading-none rounded-sm p-1;
-  }
-
-  ol li {
-    @apply list-item list-decimal;
-  }
-
-  pre {
-    @apply bg-slate-75 dark:bg-slate-700 block border-slate-75 dark:border-slate-700 text-slate-800 dark:text-slate-100 rounded-md p-2 mt-1 mb-2 leading-relaxed whitespace-pre-wrap;
-
-    code {
-      @apply bg-transparent text-slate-800 dark:text-slate-100 p-0;
-    }
-  }
-
-  blockquote {
-    @apply border-l-4 mx-0 my-1 pt-2 pr-2 pb-0 pl-4 border-slate-75 border-solid dark:border-slate-600 text-slate-800 dark:text-slate-100;
-
-    p {
-      @apply text-slate-800 dark:text-slate-300;
-    }
-  }
-}
-
-.right .bubble .text-content {
-  p code {
-    @apply bg-woot-600 dark:bg-woot-600 text-white dark:text-white;
-  }
-
-  pre {
-    @apply bg-woot-800 dark:bg-woot-800 border-woot-700 dark:border-woot-700 text-white dark:text-white;
-
-    code {
-      @apply bg-transparent text-white dark:text-white;
-    }
-  }
-
-  blockquote {
-    @apply border-l-4 border-solid border-woot-400 dark:border-woot-400 text-white dark:text-white;
-
-    p {
-      @apply text-woot-75 dark:text-woot-75;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue b/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
index 4df6e16e1..2421f948d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue
@@ -66,26 +66,26 @@ export default {
       <fluent-icon
         v-if="isMessagePrivate"
         size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        class="-mt-0.5 align-middle text-n-slate-11 inline-block"
         icon="lock-closed"
       />
       <fluent-icon
         v-else-if="messageByAgent"
         size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        class="-mt-0.5 align-middle text-n-slate-11 inline-block"
         icon="arrow-reply"
       />
       <fluent-icon
         v-else-if="isMessageAnActivity"
         size="16"
-        class="-mt-0.5 align-middle text-slate-600 dark:text-slate-300 inline-block"
+        class="-mt-0.5 align-middle text-n-slate-11 inline-block"
         icon="info"
       />
     </template>
     <span v-if="message.content && isMessageSticker">
       <fluent-icon
         size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+        class="-mt-0.5 align-middle inline-block text-n-slate-11"
         icon="image"
       />
       {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
@@ -97,7 +97,7 @@ export default {
       <fluent-icon
         v-if="attachmentIcon && showMessageType"
         size="16"
-        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+        class="-mt-0.5 align-middle inline-block text-n-slate-11"
         :icon="attachmentIcon"
       />
       {{ $t(`${attachmentMessageContent}`) }}
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
index fd2139b67..a10d933bc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue
@@ -11,7 +11,7 @@ const openProfileSettings = () => {
 
 <template>
   <div
-    class="my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-slate-25 dark:hover:bg-slate-800 border border-dashed border-slate-100 dark:border-slate-700 rounded-sm overflow-auto"
+    class="my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-n-slate-1 border border-dashed border-n-weak rounded-sm overflow-auto"
   >
     <p class="w-fit !m-0">
       {{ $t('CONVERSATION.FOOTER.MESSAGE_SIGNATURE_NOT_CONFIGURED') }}
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 5f020d9ba..1f850cd74 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -4,14 +4,13 @@ import { ref, provide } from 'vue';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useAI } from 'dashboard/composables/useAI';
-import { useMapGetter } from 'dashboard/composables/store';
 
 // components
 import ReplyBox from './ReplyBox.vue';
-import Message from './Message.vue';
-import NextMessageList from 'next/message/MessageList.vue';
+import MessageList from 'next/message/MessageList.vue';
 import ConversationLabelSuggestion from './conversation/LabelSuggestion.vue';
 import Banner from 'dashboard/components/ui/Banner.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 // stores and apis
 import { mapGetters } from 'vuex';
@@ -35,16 +34,15 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { FEATURE_FLAGS } from '../../../featureFlags';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 export default {
   components: {
-    Message,
-    NextMessageList,
+    MessageList,
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
+    Spinner,
   },
   mixins: [inboxMixin],
   setup() {
@@ -52,17 +50,11 @@ export default {
     const conversationPanelRef = ref(null);
     const { isEnterprise } = useConfig();
 
-    const closePopOutReplyBox = () => {
-      isPopOutReplyBox.value = false;
-    };
-
-    const showPopOutReplyBox = () => {
-      isPopOutReplyBox.value = !isPopOutReplyBox.value;
-    };
-
     const keyboardEvents = {
       Escape: {
-        action: closePopOutReplyBox,
+        action: () => {
+          isPopOutReplyBox.value = false;
+        },
       },
     };
 
@@ -75,28 +67,15 @@ export default {
       fetchLabelSuggestions,
     } = useAI();
 
-    const currentAccountId = useMapGetter('getCurrentAccountId');
-    const isFeatureEnabledonAccount = useMapGetter(
-      'accounts/isFeatureEnabledonAccount'
-    );
-
-    const showNextBubbles = isFeatureEnabledonAccount.value(
-      currentAccountId.value,
-      FEATURE_FLAGS.CHATWOOT_V4
-    );
-
     provide('contextMenuElementTarget', conversationPanelRef);
 
     return {
       isEnterprise,
       isPopOutReplyBox,
-      closePopOutReplyBox,
-      showPopOutReplyBox,
       isAIIntegrationEnabled,
       isLabelSuggestionFeatureEnabled,
       fetchIntegrationsIfRequired,
       fetchLabelSuggestions,
-      showNextBubbles,
       conversationPanelRef,
     };
   },
@@ -180,20 +159,6 @@ export default {
         (!this.listLoadingStatus && this.isLoadingPrevious)
       );
     },
-    conversationType() {
-      const { additional_attributes: additionalAttributes } = this.currentChat;
-      const type = additionalAttributes ? additionalAttributes.type : '';
-      return type || '';
-    },
-
-    isATweet() {
-      return this.conversationType === 'tweet';
-    },
-    getLastSeenAt() {
-      const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
-      return contactLastSeenAt;
-    },
-
     // Check there is a instagram inbox exists with the same instagram_id
     hasDuplicateInstagramInbox() {
       const instagramId = this.inbox.instagram_id;
@@ -269,9 +234,6 @@ export default {
           : 'CONVERSATION.UNREAD_MESSAGE';
       return `${count} ${this.$t(label)}`;
     },
-    isInstagramDM() {
-      return this.conversationType === 'instagram_direct_message';
-    },
     inboxSupportsReplyTo() {
       const incoming = this.inboxHasFeature(INBOX_FEATURES.REPLY_TO);
       const outgoing =
@@ -475,18 +437,6 @@ export default {
     makeMessagesRead() {
       this.$store.dispatch('markMessagesRead', { id: this.currentChat.id });
     },
-    getInReplyToMessage(parentMessage) {
-      if (!parentMessage) return {};
-      const inReplyToMessageId = parentMessage.content_attributes?.in_reply_to;
-      if (!inReplyToMessageId) return {};
-
-      return this.currentChat?.messages.find(message => {
-        if (message.id === inReplyToMessageId) {
-          return true;
-        }
-        return false;
-      });
-    },
   },
 };
 </script>
@@ -507,10 +457,9 @@ export default {
       class="mx-2 mt-2 overflow-hidden rounded-lg"
       :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
     />
-    <NextMessageList
-      v-if="showNextBubbles"
+    <MessageList
       ref="conversationPanelRef"
-      class="conversation-panel"
+      class="conversation-panel flex-shrink flex-grow basis-px flex flex-col overflow-y-auto relative h-full m-0 pb-4"
       :current-user-id="currentUserId"
       :first-unread-id="unReadMessages[0]?.id"
       :is-an-email-channel="isAnEmailChannel"
@@ -520,14 +469,21 @@ export default {
       <template #beforeAll>
         <transition name="slide-up">
           <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
-          <li class="min-h-[4rem]">
-            <span v-if="shouldShowSpinner" class="spinner message" />
+          <li
+            class="min-h-[4rem] flex flex-shrink-0 flex-grow-0 items-center flex-auto justify-center max-w-full mt-0 mr-0 mb-1 ml-0 relative first:mt-auto last:mb-0"
+          >
+            <Spinner v-if="shouldShowSpinner" class="text-n-brand" />
           </li>
         </transition>
       </template>
       <template #unreadBadge>
-        <li v-show="unreadMessageCount != 0" class="unread--toast">
-          <span>
+        <li
+          v-show="unreadMessageCount != 0"
+          class="list-none flex justify-center items-center"
+        >
+          <span
+            class="shadow-lg rounded-full bg-n-brand text-white text-xs font-medium my-2.5 mx-auto px-2.5 py-1.5"
+          >
             {{ unreadMessageLabel }}
           </span>
         </li>
@@ -540,65 +496,12 @@ export default {
           :conversation-id="currentChat.id"
         />
       </template>
-    </NextMessageList>
-    <ul v-else ref="conversationPanelRef" class="conversation-panel">
-      <transition name="slide-up">
-        <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
-        <li class="min-h-[4rem]">
-          <span v-if="shouldShowSpinner" class="spinner message" />
-        </li>
-      </transition>
-      <Message
-        v-for="message in readMessages"
-        :key="message.id"
-        class="message--read ph-no-capture"
-        data-clarity-mask="True"
-        :data="message"
-        :is-a-tweet="isATweet"
-        :is-a-whatsapp-channel="isAWhatsAppChannel"
-        :is-web-widget-inbox="isAWebWidgetInbox"
-        :is-a-facebook-inbox="isAFacebookInbox"
-        :is-an-email-inbox="isAnEmailChannel"
-        :is-instagram="isInstagramDM"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :in-reply-to="getInReplyToMessage(message)"
-      />
-      <li v-show="unreadMessageCount != 0" class="unread--toast">
-        <span>
-          {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
-          {{
-            unreadMessageCount > 1
-              ? $t('CONVERSATION.UNREAD_MESSAGES')
-              : $t('CONVERSATION.UNREAD_MESSAGE')
-          }}
-        </span>
-      </li>
-      <Message
-        v-for="message in unReadMessages"
-        :key="message.id"
-        class="message--unread ph-no-capture"
-        data-clarity-mask="True"
-        :data="message"
-        :is-a-tweet="isATweet"
-        :is-a-whatsapp-channel="isAWhatsAppChannel"
-        :is-web-widget-inbox="isAWebWidgetInbox"
-        :is-a-facebook-inbox="isAFacebookInbox"
-        :is-instagram-dm="isInstagramDM"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :in-reply-to="getInReplyToMessage(message)"
-      />
-      <ConversationLabelSuggestion
-        v-if="shouldShowLabelSuggestions"
-        :suggested-labels="labelSuggestions"
-        :chat-labels="currentChat.labels"
-        :conversation-id="currentChat.id"
-      />
-    </ul>
+    </MessageList>
     <div
-      class="conversation-footer"
+      class="flex relative flex-col"
       :class="{
         'modal-mask': isPopOutReplyBox,
-        'bg-n-background': showNextBubbles && !isPopOutReplyBox,
+        'bg-n-background': !isPopOutReplyBox,
       }"
     >
       <div
@@ -606,7 +509,7 @@ export default {
         class="absolute flex items-center w-full h-0 -top-7"
       >
         <div
-          class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-n-slate-11 text-xs font-semibold my-2.5 mx-auto"
+          class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-n-solid-3 text-n-slate-11 text-xs font-semibold my-2.5 mx-auto"
         >
           {{ typingUserNames }}
           <img
@@ -617,8 +520,8 @@ export default {
         </div>
       </div>
       <ReplyBox
-        v-model:popout-reply-box="isPopOutReplyBox"
-        @toggle-popout="showPopOutReplyBox"
+        :pop-out-reply-box="isPopOutReplyBox"
+        @update:pop-out-reply-box="isPopOutReplyBox = $event"
       />
     </div>
   </div>
@@ -626,7 +529,7 @@ export default {
 
 <style scoped lang="scss">
 .modal-mask {
-  @apply absolute;
+  @apply fixed;
 
   &::v-deep {
     .ProseMirror-woot-style {
@@ -650,7 +553,7 @@ export default {
     }
 
     .emoji-dialog {
-      @apply absolute left-auto bottom-1;
+      @apply absolute ltr:left-auto rtl:right-auto bottom-1;
     }
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue
index d141d34c3..d7ae5ab89 100644
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue
@@ -29,24 +29,24 @@ defineProps({
 
 <template>
   <div
-    class="h-full w-full bg-white dark:bg-slate-900 border border-slate-100 dark:border-white/10 rounded-lg p-4 flex flex-col"
+    class="h-full w-full bg-n-background border border-n-weak rounded-lg p-4 flex flex-col"
   >
     <div class="flex-1 flex items-center justify-center">
       <img :src="imageSrc" :alt="imageAlt" class="h-36 w-auto mx-auto" />
     </div>
     <div class="mt-auto">
       <p
-        class="text-base text-slate-800 dark:text-slate-100 font-interDisplay font-semibold tracking-[0.3px]"
+        class="text-base text-n-slate-12 font-interDisplay font-semibold tracking-[0.3px]"
       >
         {{ title }}
       </p>
-      <p class="text-slate-600 dark:text-slate-400 text-sm">
+      <p class="text-n-slate-11 text-sm">
         {{ description }}
       </p>
       <router-link
         v-if="to"
         :to="{ name: to }"
-        class="no-underline text-woot-500 text-sm font-medium"
+        class="no-underline text-n-brand text-sm font-medium"
       >
         <span>{{ linkText }}</span>
         <span class="ml-2">{{ `→` }}</span>
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
index a2145c4e6..5ac9390a5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@@ -32,11 +32,11 @@ const greetingMessage = computed(() => {
   >
     <div class="col-span-full self-start">
       <p
-        class="text-xl font-semibold text-slate-900 dark:text-white font-interDisplay tracking-[0.3px]"
+        class="text-xl font-semibold text-n-slate-12 font-interDisplay tracking-[0.3px]"
       >
         {{ greetingMessage }}
       </p>
-      <p class="text-slate-600 dark:text-slate-400 max-w-2xl text-base">
+      <p class="text-n-slate-11 max-w-2xl text-base">
         {{
           $t('ONBOARDING.DESCRIPTION', {
             installationName: globalConfig.installationName,
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 4fa83e029..4eeef92e8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1,6 +1,5 @@
 <script>
-// [TODO] The popout events are needlessly complex and should be simplified
-import { defineAsyncComponent, defineModel, useTemplateRef } from 'vue';
+import { defineAsyncComponent, useTemplateRef } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -66,7 +65,13 @@ export default {
     WootMessageEditor,
   },
   mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
-  emits: ['update:popoutReplyBox', 'togglePopout'],
+  props: {
+    popOutReplyBox: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:popOutReplyBox'],
   setup() {
     const {
       uiSettings,
@@ -75,16 +80,10 @@ export default {
       fetchSignatureFlagFromUISettings,
     } = useUISettings();
 
-    const popoutReplyBox = defineModel('popoutReplyBox', {
-      type: Boolean,
-      default: false,
-    });
-
     const replyEditor = useTemplateRef('replyEditor');
 
     return {
       uiSettings,
-      popoutReplyBox,
       updateUISettings,
       isEditorHotKeyEnabled,
       fetchSignatureFlagFromUISettings,
@@ -123,7 +122,6 @@ export default {
   },
   computed: {
     ...mapGetters({
-      isRTL: 'accounts/isRTL',
       currentChat: 'getSelectedChat',
       messageSignature: 'getMessageSignature',
       currentUser: 'getCurrentUser',
@@ -316,15 +314,6 @@ export default {
         this.uiSettings;
       return conversationDisplayType !== CONDENSED;
     },
-    emojiDialogClassOnExpandedLayoutAndRTLView() {
-      if (this.isOnExpandedLayout || this.popoutReplyBox) {
-        return 'emoji-dialog--expanded';
-      }
-      if (this.isRTL) {
-        return 'emoji-dialog--rtl';
-      }
-      return '';
-    },
     isMessageEmpty() {
       if (!this.message) {
         return true;
@@ -719,7 +708,7 @@ export default {
 
         this.clearMessage();
         this.hideEmojiPicker();
-        this.$emit('update:popoutReplyBox', false);
+        this.$emit('update:popOutReplyBox', false);
       }
     },
     sendMessageAsMultipleMessages(message) {
@@ -1098,6 +1087,9 @@ export default {
         file => !file?.isRecordedAudio
       );
     },
+    togglePopout() {
+      this.$emit('update:popOutReplyBox', !this.popOutReplyBox);
+    },
   },
 };
 </script>
@@ -1118,9 +1110,9 @@ export default {
       :mode="replyType"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
-      :popout-reply-box="popoutReplyBox"
+      :popout-reply-box="popOutReplyBox"
       @set-reply-mode="setReplyMode"
-      @toggle-popout="$emit('togglePopout')"
+      @toggle-popout="togglePopout"
     />
     <ArticleSearchPopover
       v-if="showArticleSearchPopover && connectedPortalSlug"
@@ -1144,7 +1136,9 @@ export default {
       <EmojiInput
         v-if="showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
-        :class="emojiDialogClassOnExpandedLayoutAndRTLView"
+        :class="{
+          'emoji-dialog--expanded': isOnExpandedLayout || popOutReplyBox,
+        }"
         :on-click="addIntoEditor"
       />
       <ReplyEmailHead
@@ -1297,21 +1291,11 @@ export default {
 }
 
 .emoji-dialog {
-  @apply top-[unset] -bottom-10 -left-80 right-[unset];
+  @apply top-[unset] -bottom-10 ltr:-left-80 ltr:right-[unset] rtl:left-[unset] rtl:-right-80;
 
   &::before {
-    transform: rotate(270deg);
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
-    @apply -right-4 bottom-2 rtl:right-0 rtl:-left-4;
-  }
-}
-
-.emoji-dialog--rtl {
-  @apply left-[unset] -right-80;
-
-  &::before {
-    transform: rotate(90deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
+    @apply ltr:-right-4 bottom-2 rtl:-left-4 ltr:rotate-[270deg] rtl:rotate-[90deg];
   }
 }
 
@@ -1320,12 +1304,12 @@ export default {
 
   &::before {
     transform: rotate(0deg);
-    @apply left-1 -bottom-2;
+    @apply ltr:left-1 rtl:right-1 -bottom-2;
   }
 }
 
 .normal-editor__canned-box {
-  width: calc(100% - 2 * var(--space-normal));
-  left: var(--space-normal);
+  width: calc(100% - 2 * 1rem);
+  left: 1rem;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ShopifyOrderItem.vue b/app/javascript/dashboard/components/widgets/conversation/ShopifyOrderItem.vue
index ed15ff47d..d47b4c7b7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ShopifyOrderItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ShopifyOrderItem.vue
@@ -27,7 +27,7 @@ const getStatusClass = status => {
   const classes = {
     paid: 'bg-n-teal-5 text-n-teal-12',
   };
-  return classes[status] || 'bg-slate-50 text-slate-700';
+  return classes[status] || 'bg-n-solid-3 text-n-slate-12';
 };
 
 const getStatusI18nKey = (type, status = '') => {
@@ -52,11 +52,11 @@ const financialStatus = computed(() => {
 
 const getFulfillmentClass = status => {
   const classes = {
-    fulfilled: 'text-green-600',
-    partial: 'text-yellow-600',
-    unfulfilled: 'text-red-600',
+    fulfilled: 'text-n-teal-9',
+    partial: 'text-n-amber-9',
+    unfulfilled: 'text-n-ruby-9',
   };
-  return classes[status] || 'text-slate-600';
+  return classes[status] || 'text-n-slate-11';
 };
 </script>
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
index 2e055cae6..b2d578e0d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -82,7 +82,7 @@ const onAgentSelect = index => {
         @click="onAgentSelect(index)"
         @mouseover="onHover(index)"
       >
-        <div class="mr-2">
+        <div class="ltr:mr-2 rtl:ml-2">
           <Avatar :src="agent.thumbnail" :name="agent.name" rounded-full />
         </div>
         <div
diff --git a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
index 0bbde1ba5..1b935ad29 100644
--- a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
@@ -69,6 +69,6 @@ export default {
 
 <style scoped>
 .variable--list-label {
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
deleted file mode 100644
index f3ed9ac51..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ /dev/null
@@ -1,357 +0,0 @@
-<script>
-import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
-import inboxMixin from 'shared/mixins/inboxMixin';
-import { messageTimestamp } from 'shared/helpers/timeHelper';
-
-export default {
-  mixins: [inboxMixin],
-  props: {
-    sender: {
-      type: Object,
-      default: () => ({}),
-    },
-    createdAt: {
-      type: Number,
-      default: 0,
-    },
-    storySender: {
-      type: String,
-      default: '',
-    },
-    externalError: {
-      type: String,
-      default: '',
-    },
-    storyId: {
-      type: String,
-      default: '',
-    },
-    isEmail: {
-      type: Boolean,
-      default: true,
-    },
-    isPrivate: {
-      type: Boolean,
-      default: true,
-    },
-    isATweet: {
-      type: Boolean,
-      default: true,
-    },
-    messageType: {
-      type: Number,
-      default: 1,
-    },
-    messageStatus: {
-      type: String,
-      default: '',
-    },
-    sourceId: {
-      type: String,
-      default: '',
-    },
-    inboxId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  computed: {
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.inboxId);
-    },
-    isIncoming() {
-      return MESSAGE_TYPE.INCOMING === this.messageType;
-    },
-    isOutgoing() {
-      return MESSAGE_TYPE.OUTGOING === this.messageType;
-    },
-    isTemplate() {
-      return MESSAGE_TYPE.TEMPLATE === this.messageType;
-    },
-    isDelivered() {
-      return MESSAGE_STATUS.DELIVERED === this.messageStatus;
-    },
-    isRead() {
-      return MESSAGE_STATUS.READ === this.messageStatus;
-    },
-    isSent() {
-      return MESSAGE_STATUS.SENT === this.messageStatus;
-    },
-    readableTime() {
-      return messageTimestamp(this.createdAt, 'LLL d, h:mm a');
-    },
-    screenName() {
-      const { additional_attributes: additionalAttributes = {} } =
-        this.sender || {};
-      return additionalAttributes?.screen_name || '';
-    },
-    linkToTweet() {
-      if (!this.sourceId || !this.inbox.name) {
-        return '';
-      }
-      const { screenName, sourceId } = this;
-      return `https://twitter.com/${
-        screenName || this.inbox.name
-      }/status/${sourceId}`;
-    },
-    linkToStory() {
-      if (!this.storyId || !this.storySender) {
-        return '';
-      }
-      const { storySender, storyId } = this;
-      return `https://www.instagram.com/stories/direct/${storySender}_${storyId}`;
-    },
-    showStatusIndicators() {
-      if ((this.isOutgoing || this.isTemplate) && !this.isPrivate) {
-        return true;
-      }
-      return false;
-    },
-    showSentIndicator() {
-      if (!this.showStatusIndicators) {
-        return false;
-      }
-      // Messages will be marked as sent for the Email channel if they have a source ID.
-      if (this.isAnEmailChannel) {
-        return !!this.sourceId;
-      }
-
-      if (
-        this.isAWhatsAppChannel ||
-        this.isATwilioChannel ||
-        this.isAFacebookInbox ||
-        this.isASmsInbox ||
-        this.isATelegramChannel
-      ) {
-        return this.sourceId && this.isSent;
-      }
-      // All messages will be mark as sent for the Line channel, as there is no source ID.
-      if (this.isALineChannel) {
-        return true;
-      }
-
-      return false;
-    },
-    showDeliveredIndicator() {
-      if (!this.showStatusIndicators) {
-        return false;
-      }
-      if (
-        this.isAWhatsAppChannel ||
-        this.isATwilioChannel ||
-        this.isASmsInbox ||
-        this.isAFacebookInbox
-      ) {
-        return this.sourceId && this.isDelivered;
-      }
-      // All messages marked as delivered for the web widget inbox and API inbox once they are sent.
-      if (this.isAWebWidgetInbox || this.isAPIInbox) {
-        return this.isSent;
-      }
-      if (this.isALineChannel) {
-        return this.isDelivered;
-      }
-
-      return false;
-    },
-    showReadIndicator() {
-      if (!this.showStatusIndicators) {
-        return false;
-      }
-      if (
-        this.isAWhatsAppChannel ||
-        this.isATwilioChannel ||
-        this.isAFacebookInbox
-      ) {
-        return this.sourceId && this.isRead;
-      }
-
-      if (this.isAWebWidgetInbox || this.isAPIInbox) {
-        return this.isRead;
-      }
-
-      return false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="message-text--metadata">
-    <span
-      class="time"
-      :class="{
-        'has-status-icon':
-          showSentIndicator || showDeliveredIndicator || showReadIndicator,
-      }"
-    >
-      {{ readableTime }}
-    </span>
-    <span v-if="externalError" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="externalError"
-        icon="error-circle"
-        class="action--icon"
-        size="14"
-      />
-    </span>
-    <span v-if="showReadIndicator" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
-        icon="checkmark-double"
-        class="action--icon read-tick read-indicator"
-        size="14"
-      />
-    </span>
-    <span v-else-if="showDeliveredIndicator" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.DELIVERED')"
-        icon="checkmark-double"
-        class="action--icon read-tick"
-        size="14"
-      />
-    </span>
-    <span v-else-if="showSentIndicator" class="read-indicator-wrap">
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
-        icon="checkmark"
-        class="action--icon read-tick"
-        size="14"
-      />
-    </span>
-    <fluent-icon
-      v-if="isEmail"
-      v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
-      icon="mail"
-      class="action--icon"
-      size="16"
-    />
-    <fluent-icon
-      v-if="isPrivate"
-      v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
-      icon="lock-closed"
-      class="action--icon lock--icon--private"
-      size="16"
-      @mouseenter="isHovered = true"
-      @mouseleave="isHovered = false"
-    />
-    <a
-      v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
-      :href="linkToTweet"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-    >
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
-        icon="open"
-        class="cursor-pointer action--icon"
-        size="16"
-      />
-    </a>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.right {
-  .message-text--metadata {
-    @apply items-center;
-    .time {
-      @apply text-woot-100 dark:text-woot-100;
-    }
-
-    .action--icon {
-      @apply text-white dark:text-white;
-
-      &.read-tick {
-        @apply text-violet-100 dark:text-violet-100;
-      }
-
-      &.read-indicator {
-        @apply text-green-200 dark:text-green-200;
-      }
-    }
-
-    .lock--icon--private {
-      @apply text-slate-400 dark:text-slate-400;
-    }
-  }
-}
-
-.left {
-  .message-text--metadata {
-    .time {
-      @apply text-slate-400 dark:text-slate-200;
-    }
-  }
-}
-
-.message-text--metadata {
-  @apply items-start flex;
-
-  .time {
-    @apply mr-2 block text-xxs leading-[1.8];
-  }
-
-  .action--icon {
-    @apply mr-2 ml-2 text-slate-900 dark:text-slate-100;
-  }
-
-  a {
-    @apply text-slate-900 dark:text-slate-100;
-  }
-}
-
-.activity-wrap {
-  .message-text--metadata {
-    .time {
-      @apply ml-2 rtl:mr-2 rtl:ml-0 flex text-center text-xxs text-slate-300 dark:text-slate-200;
-    }
-  }
-}
-
-.is-image,
-.is-video {
-  .message-text--metadata {
-    .time {
-      @apply bottom-1 text-white dark:text-slate-50 absolute right-2 whitespace-nowrap;
-
-      &.has-status-icon {
-        @apply right-8 leading-loose;
-      }
-    }
-    .read-tick {
-      @apply absolute bottom-2 right-2;
-    }
-  }
-}
-
-.is-private {
-  .message-text--metadata {
-    @apply items-center;
-
-    .time {
-      @apply text-slate-400 dark:text-slate-400;
-    }
-
-    .icon {
-      @apply text-slate-400 dark:text-slate-400;
-    }
-  }
-
-  &.is-image,
-  &.is-video {
-    .time {
-      position: inherit;
-      @apply pl-2.5;
-    }
-  }
-}
-
-.delivered-icon {
-  @apply ml-4;
-}
-
-.read-indicator-wrap {
-  @apply leading-none flex items-center;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
deleted file mode 100644
index 313a5943d..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import {
-  DuplicateContactException,
-  ExceptionWithMessage,
-} from 'shared/helpers/CustomErrors';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    NextButton,
-  },
-  props: {
-    name: {
-      type: String,
-      default: '',
-    },
-    phoneNumber: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    formattedPhoneNumber() {
-      return this.phoneNumber.replace(/\s|-|[A-Za-z]/g, '');
-    },
-    rawPhoneNumber() {
-      return this.phoneNumber.replace(/\D/g, '');
-    },
-  },
-  methods: {
-    async addContact() {
-      try {
-        let contact = await this.filterContactByNumber(this.rawPhoneNumber);
-        if (!contact) {
-          contact = await this.$store.dispatch(
-            'contacts/create',
-            this.getContactObject()
-          );
-          useAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
-        }
-        this.openContactNewTab(contact.id);
-      } catch (error) {
-        if (error instanceof DuplicateContactException) {
-          if (error.data.includes('phone_number')) {
-            useAlert(this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
-          }
-        } else if (error instanceof ExceptionWithMessage) {
-          useAlert(error.data);
-        } else {
-          useAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
-        }
-      }
-    },
-    getContactObject() {
-      const contactItem = {
-        name: this.name,
-        phone_number: `+${this.rawPhoneNumber}`,
-      };
-      return contactItem;
-    },
-    async filterContactByNumber(phoneNumber) {
-      const query = {
-        attribute_key: 'phone_number',
-        filter_operator: 'equal_to',
-        values: [phoneNumber],
-        attribute_model: 'standard',
-        custom_attribute_type: '',
-      };
-
-      const queryPayload = { payload: [query] };
-      const contacts = await this.$store.dispatch('contacts/filter', {
-        queryPayload,
-        resetState: false,
-      });
-      return contacts.shift();
-    },
-    openContactNewTab(contactId) {
-      const accountId = window.location.pathname.split('/')[3];
-      const url = `/app/accounts/${accountId}/contacts/${contactId}`;
-      window.open(url, '_blank');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="contact--group">
-    <fluent-icon icon="call" class="file--icon" size="18" />
-    <div class="meta">
-      <p
-        class="overflow-hidden whitespace-nowrap text-ellipsis margin-bottom-0"
-      >
-        {{ phoneNumber }}
-      </p>
-    </div>
-    <div v-if="formattedPhoneNumber" class="link-wrap">
-      <NextButton
-        ghost
-        xs
-        :label="$t('CONVERSATION.SAVE_CONTACT')"
-        @click.prevent="addContact"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.contact--group {
-  align-items: center;
-  display: flex;
-  margin-top: var(--space-smaller);
-
-  .meta {
-    flex: 1;
-    margin-left: var(--space-small);
-  }
-
-  .link-wrap {
-    margin-left: var(--space-small);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
deleted file mode 100644
index 7e7fb4e3c..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-export default {
-  props: {
-    url: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    fileName() {
-      if (this.url) {
-        const filename = this.url.substring(this.url.lastIndexOf('/') + 1);
-        return filename || this.$t('CONVERSATION.UNKNOWN_FILE_TYPE');
-      }
-      return this.$t('CONVERSATION.UNKNOWN_FILE_TYPE');
-    },
-  },
-  methods: {
-    openLink() {
-      const win = window.open(this.url, '_blank', 'noopener');
-      if (win) win.focus();
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="file message-text__wrap">
-    <div class="icon-wrap">
-      <fluent-icon icon="document" class="file--icon" size="32" />
-    </div>
-    <div class="meta">
-      <h5 class="attachment-name text-slate-700 dark:text-slate-400">
-        {{ decodeURI(fileName) }}
-      </h5>
-      <a
-        class="download clear link button small"
-        rel="noreferrer noopener nofollow"
-        target="_blank"
-        :href="url"
-      >
-        {{ $t('CONVERSATION.DOWNLOAD') }}
-      </a>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@import 'dashboard/assets/scss/variables';
-
-.file {
-  display: flex;
-  flex-direction: row;
-  padding: $space-smaller 0;
-  cursor: pointer;
-
-  .icon-wrap {
-    font-size: $font-size-giga;
-    color: $color-white;
-    line-height: 1;
-    margin-left: $space-smaller;
-    margin-right: $space-slab;
-  }
-
-  .attachment-name {
-    margin: 0;
-    color: $color-white;
-    font-weight: $font-weight-bold;
-    word-break: break-word;
-  }
-
-  .button {
-    padding: 0;
-    margin: 0;
-    color: $color-primary-light;
-  }
-
-  .meta {
-    padding-right: $space-two;
-  }
-
-  .time {
-    min-width: $space-larger;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
deleted file mode 100644
index 1b2fd4201..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-export default {
-  components: {},
-  props: {
-    url: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: ['error'],
-  data() {
-    return {
-      show: false,
-    };
-  },
-  methods: {
-    onClose() {
-      this.show = false;
-    },
-    onClick() {
-      this.show = true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="image message-text__wrap">
-    <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal v-model:show="show" full-width :on-close="onClose">
-      <img :src="url" class="modal-image skip-context-menu" />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
deleted file mode 100644
index de5e3a3cd..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { hasPressedCommand } from 'shared/helpers/KeyboardHelpers';
-import GalleryView from '../components/GalleryView.vue';
-import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
-
-const ALLOWED_FILE_TYPES = {
-  IMAGE: 'image',
-  VIDEO: 'video',
-  AUDIO: 'audio',
-  IG_REEL: 'ig_reel',
-};
-
-export default {
-  components: {
-    GalleryView,
-  },
-  props: {
-    attachment: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ['error'],
-  data() {
-    return {
-      show: false,
-      isImageError: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      currentChatAttachments: 'getSelectedChatAttachments',
-    }),
-    isImage() {
-      return this.attachment.file_type === ALLOWED_FILE_TYPES.IMAGE;
-    },
-    isVideo() {
-      return (
-        this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO ||
-        this.attachment.file_type === ALLOWED_FILE_TYPES.IG_REEL
-      );
-    },
-    isAudio() {
-      return this.attachment.file_type === ALLOWED_FILE_TYPES.AUDIO;
-    },
-    timeStampURL() {
-      return timeStampAppendedURL(this.dataUrl);
-    },
-    attachmentTypeClasses() {
-      return {
-        image: this.isImage,
-        video: this.isVideo,
-      };
-    },
-    filteredCurrentChatAttachments() {
-      const attachments = this.currentChatAttachments.filter(attachment =>
-        ['image', 'video', 'audio'].includes(attachment.file_type)
-      );
-      return attachments;
-    },
-    dataUrl() {
-      return this.attachment.data_url;
-    },
-    imageWidth() {
-      return this.attachment.width ? `${this.attachment.width}px` : 'auto';
-    },
-    imageHeight() {
-      return this.attachment.height ? `${this.attachment.height}px` : 'auto';
-    },
-  },
-  watch: {
-    attachment() {
-      this.isImageError = false;
-    },
-  },
-  methods: {
-    onClose() {
-      this.show = false;
-    },
-    onClick(e) {
-      if (hasPressedCommand(e)) {
-        window.open(this.attachment.data_url, '_blank');
-        return;
-      }
-      this.show = true;
-    },
-    onImgError() {
-      this.isImageError = true;
-      this.$emit('error');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="message-text__wrap" :class="attachmentTypeClasses">
-    <img
-      v-if="isImage && !isImageError"
-      class="bg-woot-200 dark:bg-woot-900"
-      :src="dataUrl"
-      :width="imageWidth"
-      :height="imageHeight"
-      @click="onClick"
-      @error="onImgError"
-    />
-    <video
-      v-if="isVideo"
-      :src="dataUrl"
-      muted
-      playsInline
-      @error="onImgError"
-      @click="onClick"
-    />
-    <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
-      <source :src="timeStampURL" />
-    </audio>
-    <GalleryView
-      v-if="show"
-      v-model:show="show"
-      :attachment="attachment"
-      :all-attachments="filteredCurrentChatAttachments"
-      @error="onImgError"
-      @close="onClose"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
deleted file mode 100644
index 0ddcfb853..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-import BubbleImage from './Image.vue';
-import BubbleVideo from './Video.vue';
-import InstagramStoryErrorPlaceHolder from './InstagramStoryErrorPlaceHolder.vue';
-
-export default {
-  components: {
-    BubbleImage,
-    BubbleVideo,
-    InstagramStoryErrorPlaceHolder,
-  },
-  props: {
-    storyUrl: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['error'],
-  data() {
-    return {
-      hasImgStoryError: false,
-      hasVideoStoryError: false,
-    };
-  },
-  methods: {
-    onImageLoadError() {
-      this.hasImgStoryError = true;
-      this.emitError();
-    },
-    onVideoLoadError() {
-      this.hasVideoStoryError = true;
-      this.emitError();
-    },
-    emitError() {
-      this.$emit('error');
-    },
-  },
-};
-</script>
-
-<template>
-  <BubbleImage
-    v-if="!hasImgStoryError"
-    :url="storyUrl"
-    @error="onImageLoadError"
-  />
-  <BubbleVideo
-    v-else-if="!hasVideoStoryError"
-    :url="storyUrl"
-    @error="onVideoLoadError"
-  />
-  <InstagramStoryErrorPlaceHolder v-else />
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
deleted file mode 100644
index 07781df88..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryErrorPlaceHolder.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-export default {};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-center px-8 h-28 w-full bg-slate-100 text-slate-700 dark:bg-slate-500 dark:text-slate-75"
-  >
-    <fluent-icon icon="document-error" size="32" />
-    <p class="mb-0 text-slate-700 dark:text-slate-75">
-      {{ $t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_UNAVAILABLE') }}
-    </p>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
deleted file mode 100644
index a42f694fd..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStoryReply.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-import InstagramStory from './InstagramStory.vue';
-
-export default {
-  components: { InstagramStory },
-  props: {
-    storyUrl: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      hasImgStoryError: false,
-      hasVideoStoryError: false,
-    };
-  },
-  methods: {
-    onImageLoadError() {
-      this.hasImgStoryError = true;
-    },
-    onVideoLoadError() {
-      this.hasVideoStoryError = true;
-    },
-  },
-};
-</script>
-
-<template>
-  <blockquote
-    class="my-0 px-2 pb-0 pt-0 border-l-4 border-solid border-slate-75 dark:border-slate-600 text-slate-600 dark:text-slate-200"
-  >
-    <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
-    <InstagramStory :story-url="storyUrl" class="mt-3 rounded-md" />
-  </blockquote>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
deleted file mode 100644
index fd8fb9212..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-import DyteVideoCall from './integrations/Dyte.vue';
-import inboxMixin from 'shared/mixins/inboxMixin';
-
-export default {
-  components: { DyteVideoCall },
-  mixins: [inboxMixin],
-  props: {
-    messageId: {
-      type: [String, Number],
-      default: 0,
-    },
-    contentAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-    inboxId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  computed: {
-    showDyteIntegration() {
-      const isEnabledOnTheInbox = this.isAPIInbox || this.isAWebWidgetInbox;
-      return isEnabledOnTheInbox && this.contentAttributes.type === 'dyte';
-    },
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.inboxId);
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <DyteVideoCall
-    v-if="showDyteIntegration"
-    :message-id="messageId"
-    :meeting-data="contentAttributes.data"
-  />
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
deleted file mode 100644
index e72233b88..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Location.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  latitude: {
-    type: Number,
-    default: undefined,
-  },
-  longitude: {
-    type: Number,
-    default: undefined,
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-});
-
-const mapUrl = computed(
-  () => `https://maps.google.com/?q=${props.latitude},${props.longitude}`
-);
-</script>
-
-<template>
-  <div
-    class="flex flex-row items-center justify-start gap-1 w-full py-1 px-0 cursor-pointer overflow-hidden"
-  >
-    <fluent-icon
-      icon="location"
-      class="text-slate-600 dark:text-slate-200 leading-none my-0 flex items-center flex-shrink-0"
-      size="32"
-    />
-    <div class="flex flex-col items-start flex-1 min-w-0">
-      <h5
-        class="text-sm text-slate-800 dark:text-slate-100 truncate m-0 w-full"
-        :title="name"
-      >
-        {{ name }}
-      </h5>
-      <div class="flex items-center">
-        <a
-          class="text-woot-600 dark:text-woot-600 text-xs underline"
-          rel="noreferrer noopener nofollow"
-          target="_blank"
-          :href="mapUrl"
-        >
-          {{ $t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP') }}
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
deleted file mode 100644
index 9e0b8ef0d..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script>
-export default {
-  props: {
-    emailAttributes: {
-      type: Object,
-      default: () => ({}),
-    },
-    isIncoming: {
-      type: Boolean,
-      default: true,
-    },
-    cc: {
-      type: Array,
-      default: () => [],
-    },
-    bcc: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    fromMail() {
-      const from = this.emailAttributes.from || [];
-      return from.join(', ');
-    },
-    toMails() {
-      const to = this.emailAttributes.to || [];
-      return to.join(', ');
-    },
-    ccMails() {
-      const cc = this.emailAttributes.cc || this.cc || [];
-      return cc.join(', ');
-    },
-    bccMails() {
-      const bcc = this.emailAttributes.bcc || this.bcc || [];
-      return bcc.join(', ');
-    },
-    subject() {
-      return this.emailAttributes.subject || '';
-    },
-    showHead() {
-      return this.toMails || this.ccMails || this.bccMails || this.fromMail;
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <div
-    v-if="showHead"
-    class="message__mail-head"
-    :class="{ 'is-incoming': isIncoming }"
-  >
-    <div v-if="fromMail" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.FROM') }}:</span>
-      <span>{{ fromMail }}</span>
-    </div>
-    <div v-if="toMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.TO') }}:</span>
-      <span>{{ toMails }}</span>
-    </div>
-    <div v-if="ccMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.CC') }}:</span>
-      <span>{{ ccMails }}</span>
-    </div>
-    <div v-if="bccMails" class="meta-wrap">
-      <span class="message__content--type">{{ $t('EMAIL_HEADER.BCC') }}:</span>
-      <span>{{ bccMails }}</span>
-    </div>
-    <div v-if="subject" class="meta-wrap">
-      <span class="message__content--type">
-        {{ $t('EMAIL_HEADER.SUBJECT') }}:
-      </span>
-      <span>{{ subject }}</span>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.message__mail-head {
-  padding-bottom: var(--space-small);
-  margin-bottom: var(--space-small);
-  border-bottom: 1px solid var(--w-300);
-
-  &.is-incoming {
-    border-bottom: 1px solid var(--color-border-light);
-  }
-}
-
-.meta-wrap {
-  .message__content--type {
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-mini);
-  }
-  span {
-    font-size: var(--font-size-mini);
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
deleted file mode 100644
index e11f1a17e..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
-import { MESSAGE_TYPE } from 'shared/constants/messages';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { emitter } from 'shared/helpers/mitt';
-
-export default {
-  name: 'ReplyTo',
-  components: {
-    MessagePreview,
-  },
-  props: {
-    message: {
-      type: Object,
-      required: true,
-    },
-    messageType: {
-      type: Number,
-      required: true,
-    },
-    parentHasAttachments: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  data() {
-    return { MESSAGE_TYPE };
-  },
-  methods: {
-    scrollToMessage() {
-      emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
-        messageId: this.message.id,
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="px-2 py-1.5 rounded-sm min-w-[10rem] mb-2"
-    :class="{
-      'bg-slate-50 dark:bg-slate-600 dark:text-slate-50':
-        messageType === MESSAGE_TYPE.INCOMING,
-      'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
-      '-mx-2': !parentHasAttachments,
-    }"
-    @click="scrollToMessage"
-  >
-    <MessagePreview
-      class="cursor-pointer"
-      :message="message"
-      :show-message-type="false"
-      :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
deleted file mode 100644
index 6500cbc35..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<script>
-import { Letter } from 'vue-letter';
-import GalleryView from '../components/GalleryView.vue';
-
-export default {
-  components: { Letter, GalleryView },
-  props: {
-    message: {
-      type: String,
-      default: '',
-    },
-    isEmail: {
-      type: Boolean,
-      default: true,
-    },
-    displayQuotedButton: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      showQuotedContent: false,
-      showGalleryViewer: false,
-      attachment: {},
-      availableAttachments: [],
-    };
-  },
-  computed: {
-    isQuotedContentPresent() {
-      if (!this.isEmail) {
-        return this.message.includes('<blockquote');
-      }
-      return this.showQuotedContent;
-    },
-    showQuoteToggle() {
-      if (!this.isEmail) {
-        return false;
-      }
-      return this.displayQuotedButton;
-    },
-  },
-  methods: {
-    toggleQuotedContent() {
-      this.showQuotedContent = !this.showQuotedContent;
-    },
-    handleClickOnContent(event) {
-      // if event target is IMG and not close in A tag
-      // then open image preview
-      const isImageElement = event.target.tagName === 'IMG';
-      const isWrappedInLink = event.target.closest('A');
-
-      if (isImageElement && !isWrappedInLink) {
-        this.openImagePreview(event.target.src);
-      }
-    },
-    openImagePreview(src) {
-      this.showGalleryViewer = true;
-      this.attachment = {
-        file_type: 'image',
-        data_url: src,
-        message_id: Math.floor(Math.random() * 100),
-      };
-      this.availableAttachments = [{ ...this.attachment }];
-    },
-    onClose() {
-      this.showGalleryViewer = false;
-      this.resetAttachmentData();
-    },
-    resetAttachmentData() {
-      this.attachment = {};
-      this.availableAttachments = [];
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="message-text__wrap"
-    :class="{
-      'show--quoted': isQuotedContentPresent,
-      'hide--quoted': !isQuotedContentPresent,
-    }"
-  >
-    <div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
-    <div v-else @click="handleClickOnContent">
-      <Letter
-        class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
-        :html="message"
-      />
-    </div>
-    <button
-      v-if="showQuoteToggle"
-      class="py-1 text-xs cursor-pointer text-slate-300 dark:text-slate-300"
-      @click="toggleQuotedContent"
-    >
-      <span v-if="showQuotedContent" class="flex items-center gap-0.5">
-        <fluent-icon icon="chevron-up" size="16" />
-        {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
-      </span>
-      <span v-else class="flex items-center gap-0.5">
-        <fluent-icon icon="chevron-down" size="16" />
-        {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
-      </span>
-    </button>
-    <GalleryView
-      v-if="showGalleryViewer"
-      v-model:show="showGalleryViewer"
-      :attachment="attachment"
-      :all-attachments="availableAttachments"
-      @error="onClose"
-      @close="onClose"
-    />
-  </div>
-</template>
-
-<style lang="scss">
-.text-content {
-  overflow: auto;
-
-  ul,
-  ol {
-    padding-left: var(--space-two);
-  }
-
-  table {
-    margin: 0;
-    border: 0;
-
-    td {
-      margin: 0;
-      border: 0;
-    }
-
-    tr {
-      border-bottom: 0 !important;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: var(--font-size-normal);
-  }
-}
-
-.show--quoted {
-  blockquote {
-    @apply block;
-  }
-}
-
-.hide--quoted {
-  blockquote {
-    @apply hidden;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
deleted file mode 100644
index cdfe90f5a..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-export default {
-  props: {
-    url: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: ['error'],
-  data() {
-    return {
-      show: false,
-    };
-  },
-  mounted() {
-    this.$refs.videoElement.onerror = () => {
-      this.$emit('error');
-    };
-  },
-  methods: {
-    onClose() {
-      this.show = false;
-    },
-    onClick() {
-      this.show = true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="video message-text__wrap">
-    <video ref="videoElement" :src="url" muted playsInline @click="onClick" />
-    <woot-modal v-model:show="show" :on-close="onClose">
-      <video
-        :src="url"
-        controls
-        playsInline
-        class="modal-video skip-context-menu mx-auto"
-      />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
deleted file mode 100644
index 0b41d00f0..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script>
-import DyteAPI from 'dashboard/api/integrations/dyte';
-import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
-import { useAlert } from 'dashboard/composables';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    NextButton,
-  },
-  props: {
-    messageId: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
-  },
-  computed: {
-    meetingLink() {
-      return buildDyteURL(this.dyteAuthToken);
-    },
-  },
-  methods: {
-    async joinTheCall() {
-      this.isLoading = true;
-      try {
-        const { data: { token } = {} } = await DyteAPI.addParticipantToMeeting(
-          this.messageId
-        );
-        this.dyteAuthToken = token;
-      } catch (err) {
-        useAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
-      } finally {
-        this.isLoading = false;
-      }
-    },
-    leaveTheRoom() {
-      this.dyteAuthToken = '';
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <NextButton
-      blue
-      sm
-      icon="i-lucide-video"
-      :label="$t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN')"
-      :is-loading="isLoading"
-      @click="joinTheCall"
-    />
-    <div v-if="dyteAuthToken" class="video-call--container">
-      <iframe
-        :src="meetingLink"
-        allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
-      />
-      <NextButton
-        sm
-        class="mt-2"
-        :label="$t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM')"
-        @click="leaveTheRoom"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.join-call-button {
-  margin: var(--space-small) 0;
-}
-
-.video-call--container {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  z-index: var(--z-index-high);
-  padding: var(--space-smaller);
-  background: var(--b-800);
-
-  iframe {
-    width: 100%;
-    height: 100%;
-    border: 0;
-  }
-
-  button {
-    position: absolute;
-    top: var(--space-smaller);
-    right: 10rem;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
index f62117f96..e21ae1438 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/agentLoadingPlaceholder.vue
@@ -21,11 +21,11 @@ export default {
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  padding: var(--space-normal) 0;
-  min-width: calc(var(--space-mega) * 2);
+  padding: 1rem 0;
+  min-width: calc(6.25rem * 2);
 
   p {
-    margin: var(--space-small) 0 0 0;
+    margin: 0.5rem 0 0 0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
index 2b58e9389..4c24d9405 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -18,10 +18,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="menu text-slate-800 dark:text-slate-100 min-h-7 min-w-0"
-    role="button"
-  >
+  <div class="menu text-n-slate-12 min-h-7 min-w-0" role="button">
     <fluent-icon
       v-if="variant === 'icon' && option.icon"
       :icon="option.icon"
@@ -49,7 +46,7 @@ export default {
 
 <style scoped lang="scss">
 .menu {
-  width: calc(var(--space-mega) * 2);
+  width: calc(6.25rem * 2);
   @apply flex items-center flex-nowrap p-1 rounded-md overflow-hidden cursor-pointer;
 
   .menu-label {
@@ -57,7 +54,7 @@ export default {
   }
 
   &:hover {
-    @apply bg-n-brand text-white dark:text-slate-50;
+    @apply bg-n-brand text-white;
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
index a601c92d3..32fc71890 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -40,7 +40,7 @@ const submenuPosition = computed(() => [
 <template>
   <div
     ref="menuRef"
-    class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-n-alpha-3/50 backdrop-blur-[100px] justify-between hover:bg-n-brand/10 cursor-pointer dark:hover:bg-n-solid-3"
+    class="text-n-slate-12 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-n-alpha-3/50 backdrop-blur-[100px] justify-between hover:bg-n-brand/10 cursor-pointer dark:hover:bg-n-solid-3"
     :class="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
   >
     <div class="flex items-center h-4">
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
index aafd59f3e..6b4397ff9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
@@ -154,7 +154,7 @@ export default {
 <template>
   <li
     v-if="shouldShowSuggestions"
-    class="label-suggestion right"
+    class="label-suggestion right list-none"
     @mouseover="isHovered = true"
     @mouseleave="isHovered = false"
   >
@@ -180,9 +180,7 @@ export default {
             <woot-label
               variant="dashed"
               v-bind="label"
-              :bg-color="
-                selectedLabels.includes(label.title) ? 'var(--w-100)' : ''
-              "
+              :bg-color="selectedLabels.includes(label.title) ? '#2781F6' : ''"
             />
           </button>
           <NextButton
@@ -253,17 +251,14 @@ export default {
 .label-suggestion {
   flex-direction: row;
   justify-content: flex-end;
-  margin-top: var(--space-normal);
+  margin-top: 1rem;
 
   .label-suggestion--container {
     max-width: 300px;
   }
 
   .label-suggestion--options {
-    text-align: right;
-    display: flex;
-    align-items: center;
-    gap: var(--space-micro);
+    @apply gap-0.5 text-end flex items-center;
 
     button.label-suggestion--option {
       .label {
@@ -274,14 +269,12 @@ export default {
   }
 
   .chatwoot-ai-icon {
-    height: var(--font-size-mini);
-    width: var(--font-size-mini);
+    height: 0.75rem;
+    width: 0.75rem;
   }
 
   .label-suggestion--title {
-    color: var(--b-600);
-    margin-top: var(--space-micro);
-    font-size: var(--font-size-micro);
+    @apply text-n-slate-11 mt-0.5 text-xxs;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index 22443d118..f4f38cbb1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -129,7 +129,7 @@ export default {
                 :username="agent.name"
                 size="22px"
               />
-              <span class="my-0 text-slate-800 dark:text-slate-75">
+              <span class="my-0 text-n-slate-12">
                 {{ agent.name }}
               </span>
             </div>
@@ -181,7 +181,7 @@ export default {
 
 <style scoped lang="scss">
 .bulk-action__agents {
-  @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
+  @apply max-w-[75%] absolute ltr:right-2 rtl:left-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
   .header {
     @apply p-2.5;
 
@@ -198,7 +198,7 @@ export default {
     .agent-list-search {
       @apply py-0 px-2.5 bg-n-alpha-black2 border border-solid border-n-strong rounded-md;
       .search-icon {
-        @apply text-slate-400 dark:text-slate-200;
+        @apply text-n-slate-10;
       }
 
       .agent--search_input {
@@ -207,8 +207,7 @@ export default {
     }
   }
   .triangle {
-    right: var(--triangle-position);
-    @apply block z-10 absolute -top-3 text-left;
+    @apply block z-10 absolute -top-3 text-left ltr:right-[--triangle-position] rtl:left-[--triangle-position];
 
     svg path {
       @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
@@ -248,6 +247,6 @@ ul {
 }
 
 .agent__list-loading {
-  @apply m-2.5 rounded-md bg-slate-25 dark:bg-slate-900 flex items-center justify-center flex-col p-5 h-[calc(95%-6.25rem)];
+  @apply m-2.5 rounded-md dark:bg-n-solid-3 bg-n-slate-2 flex items-center justify-center flex-col p-5 h-[calc(95%-6.25rem)];
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 0cc9a50ba..e36e94ac6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -262,15 +262,6 @@ export default {
 </template>
 
 <style scoped lang="scss">
-// For RTL direction view
-.app-rtl--wrapper {
-  .bulk-action__actions {
-    ::v-deep .button--only-icon:last-child {
-      margin-right: var(--space-smaller);
-    }
-  }
-}
-
 .bulk-action__container {
   @apply p-4 relative border-b border-solid border-n-strong dark:border-n-weak;
 }
@@ -288,7 +279,7 @@ export default {
 }
 
 .bulk-action__alert {
-  @apply bg-yellow-50 text-yellow-700 rounded text-xs mt-2 py-1 px-2 border border-solid border-yellow-300 dark:border-yellow-300/10 dark:bg-yellow-200/20 dark:text-yellow-400;
+  @apply bg-n-amber-3 text-n-amber-12 rounded text-xs mt-2 py-1 px-2 border border-solid border-n-amber-5;
 }
 
 .popover-animation-enter-active,
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 78b93f0de..9bb8f0ccf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -130,7 +130,7 @@ export default {
   @apply bg-n-alpha-black2 py-0 px-2.5 border border-solid border-n-strong rounded-md;
 
   .search-icon {
-    @apply text-slate-400 dark:text-slate-200;
+    @apply text-n-slate-10;
   }
 
   .label--search_input {
@@ -139,7 +139,7 @@ export default {
 }
 
 .labels-container {
-  @apply absolute right-2 top-12 origin-top-right w-auto z-20 max-w-[15rem] min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
+  @apply absolute ltr:right-2 rtl:left-2 top-12 origin-top-right w-auto z-20 max-w-[15rem] min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
 
   .header {
     @apply p-2.5;
@@ -158,8 +158,7 @@ export default {
   }
 
   .triangle {
-    right: var(--triangle-position);
-    @apply block z-10 absolute text-left -top-3;
+    @apply block z-10 absolute text-left -top-3 ltr:right-[--triangle-position] rtl:left-[--triangle-position];
 
     svg path {
       @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
@@ -182,7 +181,7 @@ ul {
     @apply items-center rounded-md cursor-pointer flex py-1 px-2.5 hover:bg-n-slate-3 dark:hover:bg-n-solid-3;
 
     &.label-selected {
-      @apply bg-slate-50 dark:bg-slate-900;
+      @apply bg-n-slate-2;
     }
 
     span {
@@ -190,7 +189,7 @@ ul {
     }
 
     .label-checkbox {
-      @apply my-0 mr-2.5 ml-0;
+      @apply my-0 ltr:mr-2.5 rtl:ml-2.5;
     }
 
     .label-title {
@@ -198,7 +197,7 @@ ul {
     }
 
     .label-pill {
-      @apply bg-slate-50 rounded-md h-3 w-3 flex-shrink-0 border border-solid border-n-weak;
+      @apply rounded-md h-3 w-3 flex-shrink-0 border border-solid border-n-weak;
     }
   }
 }
@@ -206,12 +205,4 @@ ul {
 .search-container {
   @apply bg-n-alpha-3 backdrop-blur-[100px] py-0 px-2.5 sticky top-0 z-20;
 }
-
-.actions-container {
-  @apply bg-white dark:bg-slate-900 bottom-0 p-2 sticky z-20;
-
-  button {
-    @apply w-full;
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index fae209692..2bb6bd893 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -66,9 +66,7 @@ export default {
           <template v-if="filteredTeams.length">
             <li v-for="team in filteredTeams" :key="team.id">
               <div class="team__list-item" @click="assignTeam(team)">
-                <span
-                  class="my-0 ltr:ml-2 rtl:mr-2 text-slate-800 dark:text-slate-75"
-                >
+                <span class="my-0 ltr:ml-2 rtl:mr-2 text-n-slate-12">
                   {{ team.name }}
                 </span>
               </div>
@@ -76,9 +74,7 @@ export default {
           </template>
           <li v-else>
             <div class="team__list-item">
-              <span
-                class="my-0 ltr:ml-2 rtl:mr-2 text-slate-800 dark:text-slate-75"
-              >
+              <span class="my-0 ltr:ml-2 rtl:mr-2 text-n-slate-12">
                 {{ $t('BULK_ACTION.TEAMS.NO_TEAMS_AVAILABLE') }}
               </span>
             </div>
@@ -91,7 +87,7 @@ export default {
 
 <style scoped lang="scss">
 .bulk-action__teams {
-  @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
+  @apply max-w-[75%] absolute ltr:right-2 rtl:left-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
   .header {
     @apply p-2.5;
 
@@ -108,7 +104,7 @@ export default {
     .agent-list-search {
       @apply py-0 px-2.5 bg-n-alpha-black2 border border-solid border-n-strong rounded-md;
       .search-icon {
-        @apply text-slate-400 dark:text-slate-200;
+        @apply text-n-slate-10;
       }
 
       .agent--search_input {
@@ -117,8 +113,7 @@ export default {
     }
   }
   .triangle {
-    right: var(--triangle-position);
-    @apply block z-10 absolute text-left -top-3;
+    @apply block z-10 absolute text-left -top-3 ltr:right-[--triangle-position] rtl:left-[--triangle-position];
 
     svg path {
       @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index fe40b048d..e3280c5af 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -68,7 +68,7 @@ const actionLabel = key => {
 <template>
   <div
     v-on-clickaway="onClose"
-    class="absolute z-20 w-auto origin-top-right border border-solid rounded-lg shadow-md right-2 top-12 bg-n-alpha-3 backdrop-blur-[100px] border-n-weak"
+    class="absolute z-20 w-auto origin-top-right border border-solid rounded-lg shadow-md ltr:right-2 rtl:left-2 top-12 bg-n-alpha-3 backdrop-blur-[100px] border-n-weak"
   >
     <div
       class="right-[var(--triangle-position)] block z-10 absolute text-left -top-3"
@@ -83,7 +83,7 @@ const actionLabel = key => {
       </svg>
     </div>
     <div class="p-2.5 flex gap-1 items-center justify-between">
-      <span class="text-sm font-medium text-slate-600 dark:text-slate-100">
+      <span class="text-sm font-medium text-n-slate-12">
         {{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}
       </span>
       <Button ghost xs slate icon="i-lucide-x" @click="onClose" />
@@ -96,7 +96,7 @@ const actionLabel = key => {
               ghost
               sm
               slate
-              class="!w-full ltr:!justify-start rtl:!justify-end"
+              class="!w-full !justify-start"
               :icon="action.icon"
               :label="actionLabel(action.key)"
               @click="updateConversations(action.key)"
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index 65260444e..c07c73010 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -86,7 +86,7 @@ const onShowLabels = e => {
             ? $t('CONVERSATION.CARD.HIDE_LABELS')
             : $t('CONVERSATION.CARD.SHOW_LABELS')
         "
-        class="h-5 py-0 px-1 flex-shrink-0 mr-6 ml-0 rtl:ml-6 rtl:mr-0 rtl:rotate-180 text-slate-700 dark:text-slate-200 border-n-strong dark:border-n-strong"
+        class="h-5 py-0 px-1 flex-shrink-0 mr-6 ml-0 rtl:ml-6 rtl:mr-0 rtl:rotate-180 text-n-slate-11 border-n-strong dark:border-n-strong"
         @click="onShowLabels"
       >
         <fluent-icon
diff --git a/app/javascript/dashboard/components/widgets/conversation/helpers/botMessageContentHelper.js b/app/javascript/dashboard/components/widgets/conversation/helpers/botMessageContentHelper.js
deleted file mode 100644
index 2f4521f72..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/helpers/botMessageContentHelper.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { CSAT_RATINGS } from '../../../../../shared/constants/messages';
-
-const generateInputSelectContent = contentAttributes => {
-  const { submitted_values: submittedValues = [] } = contentAttributes;
-  const [selectedOption] = submittedValues;
-
-  if (selectedOption && selectedOption.title) {
-    return `<strong>${selectedOption.title}</strong>`;
-  }
-  return '';
-};
-
-const generateInputEmailContent = contentAttributes => {
-  const { submitted_email: submittedEmail = '' } = contentAttributes;
-  if (submittedEmail) {
-    return `<strong>${submittedEmail}</strong>`;
-  }
-  return '';
-};
-
-const generateFormContent = (contentAttributes, { noResponseText }) => {
-  const { items, submitted_values: submittedValues = [] } = contentAttributes;
-  if (submittedValues.length) {
-    const submittedObject = submittedValues.reduce((acc, keyValuePair) => {
-      acc[keyValuePair.name] = keyValuePair.value;
-      return acc;
-    }, {});
-    let formMessageContent = '';
-    items.forEach(item => {
-      formMessageContent += `<div>${item.label}</div>`;
-      const response = submittedObject[item.name] || noResponseText;
-      formMessageContent += `<strong>${response}</strong><br/><br/>`;
-    });
-    return formMessageContent;
-  }
-  return '';
-};
-
-const generateCSATContent = (
-  contentAttributes,
-  { ratingTitle, feedbackTitle }
-) => {
-  const {
-    submitted_values: { csat_survey_response: surveyResponse = {} } = {},
-  } = contentAttributes;
-  const { rating, feedback_message } = surveyResponse || {};
-
-  let messageContent = '';
-  if (rating) {
-    const [ratingObject = {}] = CSAT_RATINGS.filter(
-      csatRating => csatRating.value === rating
-    );
-    messageContent += `<div><strong>${ratingTitle}</strong></div>`;
-    messageContent += `<p>${ratingObject.emoji}</p>`;
-  }
-  if (feedback_message) {
-    messageContent += `<div><strong>${feedbackTitle}</strong></div>`;
-    messageContent += `<p>${feedback_message}</p>`;
-  }
-  return messageContent;
-};
-
-export const generateBotMessageContent = (
-  contentType,
-  contentAttributes,
-  {
-    noResponseText = 'No response',
-    csat: { ratingTitle = 'Rating', feedbackTitle = 'Feedback' } = {},
-  } = {}
-) => {
-  const contentTypeMethods = {
-    input_select: generateInputSelectContent,
-    input_email: generateInputEmailContent,
-    form: generateFormContent,
-    input_csat: generateCSATContent,
-  };
-
-  const contentTypeMethod = contentTypeMethods[contentType];
-  if (contentTypeMethod && typeof contentTypeMethod === 'function') {
-    return contentTypeMethod(contentAttributes, {
-      noResponseText,
-      ratingTitle,
-      feedbackTitle,
-    });
-  }
-  return '';
-};
diff --git a/app/javascript/dashboard/components/widgets/conversation/helpers/specs/botMessageContentHelper.spec.js b/app/javascript/dashboard/components/widgets/conversation/helpers/specs/botMessageContentHelper.spec.js
deleted file mode 100644
index a0901aa1a..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/helpers/specs/botMessageContentHelper.spec.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { generateBotMessageContent } from '../botMessageContentHelper';
-
-describe('#generateBotMessageContent', () => {
-  it('return correct input_select content', () => {
-    expect(
-      generateBotMessageContent('input_select', {
-        submitted_values: [{ value: 'salad', title: 'Salad' }],
-      })
-    ).toEqual('<strong>Salad</strong>');
-  });
-
-  it('return correct input_email content', () => {
-    expect(
-      generateBotMessageContent('input_email', {
-        submitted_email: 'hello@chatwoot.com',
-      })
-    ).toEqual('<strong>hello@chatwoot.com</strong>');
-  });
-
-  it('return correct input_csat content', () => {
-    expect(
-      generateBotMessageContent('input_csat', {
-        submitted_values: {
-          csat_survey_response: {
-            rating: 5,
-            feedback_message: 'Great Service',
-          },
-        },
-      })
-    ).toEqual(
-      '<div><strong>Rating</strong></div><p>😍</p><div><strong>Feedback</strong></div><p>Great Service</p>'
-    );
-
-    expect(
-      generateBotMessageContent(
-        'input_csat',
-        {
-          submitted_values: {
-            csat_survey_response: { rating: 1, feedback_message: '' },
-          },
-        },
-        { csat: { ratingTitle: 'റേറ്റിംഗ്', feedbackTitle: 'പ്രതികരണം' } }
-      )
-    ).toEqual('<div><strong>റേറ്റിംഗ്</strong></div><p>😞</p>');
-  });
-
-  it('return correct form content', () => {
-    expect(
-      generateBotMessageContent('form', {
-        items: [
-          {
-            name: 'large_text',
-            label: 'This a large text',
-          },
-          {
-            name: 'email',
-            label: 'Email',
-          },
-        ],
-        submitted_values: [{ name: 'large_text', value: 'Large Text Content' }],
-      })
-    ).toEqual(
-      '<div>This a large text</div><strong>Large Text Content</strong><br/><br/><div>Email</div><strong>No response</strong><br/><br/>'
-    );
-  });
-});
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index 52791f300..4fd57eccc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -58,7 +58,7 @@ const onClickTabChange = index => {
     />
 
     <div class="flex flex-col h-auto overflow-auto">
-      <div class="flex flex-col px-8 pb-4">
+      <div class="flex flex-col px-8 pb-4 mt-1">
         <woot-tabs
           class="ltr:[&>ul]:pl-0 rtl:[&>ul]:pr-0"
           :index="selectedTabIndex"
@@ -70,6 +70,7 @@ const onClickTabChange = index => {
             :index="index"
             :name="tab.name"
             :show-badge="false"
+            is-compact
           />
         </woot-tabs>
       </div>
diff --git a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
index 5cfdc87d9..23006183e 100644
--- a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -53,7 +53,7 @@ export default {
       :src="src"
       :username="usernameAvatar"
     />
-    <div v-if="src && deleteAvatar" class="avatar-delete-btn">
+    <div v-if="src && deleteAvatar" class="my-1">
       <NextButton
         outline
         xs
@@ -74,10 +74,3 @@ export default {
     </label>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.avatar-delete-btn {
-  margin-top: var(--space-smaller);
-  margin-bottom: var(--space-smaller);
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index bf85ae712..a18857cbc 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -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 text-n-slate-12"
+        class="flex py-2 ltr:pl-2 rtl:pr-2 text-base font-normal leading-normal text-n-slate-12"
       >
         {{ activeDialCode }}
       </span>
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index fc4dc5c7e..894ab3045 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -92,7 +92,7 @@ const variableKey = (item = {}) => {
         >
           <slot :item="item" :index="index" :selected="index === selectedIndex">
             <p
-              class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-n-slate-11 group-hover:text-n-slate-11 text-ellipsis whitespace-nowrap"
+              class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-n-slate-11 group-hover:text-n-slate-12 text-ellipsis whitespace-nowrap"
               :class="{
                 'text-n-slate-12': index === selectedIndex,
               }"
@@ -100,7 +100,7 @@ const variableKey = (item = {}) => {
               {{ item.description }}
             </p>
             <p
-              class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-n-slate-11 text-ellipsis whitespace-nowrap"
+              class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-n-slate-11 group-hover:text-n-slate-12 text-ellipsis whitespace-nowrap"
               :class="{
                 'text-n-slate-12': index === selectedIndex,
               }"
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index 04cd100ef..c8fe5f2b8 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -43,7 +43,7 @@ onMounted(async () => {
       />
       <div class="grid grid-cols-2 px-8 pt-0 pb-4 mt-6 gap-x-5 gap-y-3">
         <div class="flex justify-between items-center min-w-[25rem]">
-          <h5 class="text-sm text-slate-800 dark:text-slate-100">
+          <h5 class="text-sm text-n-slate-12">
             {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
           </h5>
           <div class="flex items-center gap-2 mb-1 ml-2">
@@ -63,7 +63,7 @@ onMounted(async () => {
           :key="shortcut.id"
           class="flex justify-between items-center min-w-[25rem]"
         >
-          <h5 class="text-sm text-slate-800 min-w-[36px] dark:text-slate-100">
+          <h5 class="text-sm text-n-slate-12 min-w-[36px]">
             {{ title(shortcut) }}
           </h5>
           <div class="flex items-center gap-2 mb-1 ml-2">
@@ -83,7 +83,7 @@ onMounted(async () => {
               </template>
               <span
                 v-else
-                class="flex items-center text-sm font-semibold text-slate-800 dark:text-slate-100"
+                class="flex items-center text-sm font-semibold text-n-slate-12"
               >
                 {{ key }}
               </span>
@@ -97,6 +97,6 @@ onMounted(async () => {
 
 <style scoped>
 .key {
-  @apply py-2 px-2.5 font-semibold text-xs text-slate-700 dark:text-slate-100 bg-slate-75 dark:bg-slate-900 shadow border-b-2 rtl:border-l-2 ltr:border-r-2 border-slate-200 dark:border-slate-700;
+  @apply py-2 px-2.5 font-semibold text-xs text-n-slate-12 bg-n-slate-4 dark:bg-n-slate-2 shadow border-b-2 rtl:border-l-2 ltr:border-r-2 border-n-strong;
 }
 </style>
diff --git a/app/javascript/dashboard/composables/useInbox.js b/app/javascript/dashboard/composables/useInbox.js
index 67ce11ae2..3ad308a39 100644
--- a/app/javascript/dashboard/composables/useInbox.js
+++ b/app/javascript/dashboard/composables/useInbox.js
@@ -125,6 +125,10 @@ export const useInbox = () => {
     return channelType.value === INBOX_TYPES.INSTAGRAM;
   });
 
+  const isAVoiceChannel = computed(() => {
+    return channelType.value === INBOX_TYPES.VOICE;
+  });
+
   return {
     inbox,
     isAFacebookInbox,
@@ -142,5 +146,6 @@ export const useInbox = () => {
     is360DialogWhatsAppChannel,
     isAnEmailChannel,
     isAnInstagramChannel,
+    isAVoiceChannel,
   };
 };
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index ff6d73c84..ca880a79b 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -10,6 +10,7 @@ export const INBOX_TYPES = {
   LINE: 'Channel::Line',
   SMS: 'Channel::Sms',
   INSTAGRAM: 'Channel::Instagram',
+  VOICE: 'Channel::Voice',
 };
 
 const INBOX_ICON_MAP_FILL = {
@@ -22,6 +23,7 @@ const INBOX_ICON_MAP_FILL = {
   [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
   [INBOX_TYPES.LINE]: 'i-ri-line-fill',
   [INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-fill',
+  [INBOX_TYPES.VOICE]: 'i-ri-phone-fill',
 };
 
 const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
@@ -36,6 +38,7 @@ const INBOX_ICON_MAP_LINE = {
   [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-line',
   [INBOX_TYPES.LINE]: 'i-ri-line-line',
   [INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-line',
+  [INBOX_TYPES.VOICE]: 'i-ri-phone-line',
 };
 
 const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
@@ -47,6 +50,7 @@ export const getInboxSource = (type, phoneNumber, inbox) => {
 
     case INBOX_TYPES.TWILIO:
     case INBOX_TYPES.WHATSAPP:
+    case INBOX_TYPES.VOICE:
       return phoneNumber || '';
 
     case INBOX_TYPES.EMAIL:
@@ -85,6 +89,9 @@ export const getReadableInboxByType = (type, phoneNumber) => {
     case INBOX_TYPES.LINE:
       return 'line';
 
+    case INBOX_TYPES.VOICE:
+      return 'voice';
+
     default:
       return 'chat';
   }
@@ -124,6 +131,9 @@ export const getInboxClassByType = (type, phoneNumber) => {
     case INBOX_TYPES.INSTAGRAM:
       return 'brand-instagram';
 
+    case INBOX_TYPES.VOICE:
+      return 'phone';
+
     default:
       return 'chat';
   }
diff --git a/app/javascript/dashboard/helper/permissionsHelper.js b/app/javascript/dashboard/helper/permissionsHelper.js
index 25f97c038..cb736f4ab 100644
--- a/app/javascript/dashboard/helper/permissionsHelper.js
+++ b/app/javascript/dashboard/helper/permissionsHelper.js
@@ -25,32 +25,6 @@ export const getUserRole = (user, accountId) => {
   return currentAccount.role || 'agent';
 };
 
-const isPermissionsPresentInRoute = route =>
-  route.meta && route.meta.permissions;
-
-export const buildPermissionsFromRouter = (routes = []) =>
-  routes.reduce((acc, route) => {
-    if (route.name) {
-      if (!isPermissionsPresentInRoute(route)) {
-        // eslint-disable-next-line
-        console.error(route);
-        throw new Error(
-          "The route doesn't have the required permissions defined"
-        );
-      }
-      acc[route.name] = route.meta.permissions;
-    }
-
-    if (route.children) {
-      acc = {
-        ...acc,
-        ...buildPermissionsFromRouter(route.children),
-      };
-    }
-
-    return acc;
-  }, {});
-
 /**
  * Filters and transforms items based on user permissions.
  *
diff --git a/app/javascript/dashboard/helper/portalHelper.js b/app/javascript/dashboard/helper/portalHelper.js
index 4df38c5bc..a640ed6ca 100644
--- a/app/javascript/dashboard/helper/portalHelper.js
+++ b/app/javascript/dashboard/helper/portalHelper.js
@@ -66,42 +66,6 @@ export const getArticleStatus = status => {
   }
 };
 
-// Constants
-export const HELP_CENTER_MENU_ITEMS = [
-  {
-    label: 'Articles',
-    icon: 'i-lucide-book',
-    action: 'portals_articles_index',
-    value: [
-      'portals_articles_index',
-      'portals_articles_new',
-      'portals_articles_edit',
-    ],
-  },
-  {
-    label: 'Categories',
-    icon: 'i-lucide-folder',
-    action: 'portals_categories_index',
-    value: [
-      'portals_categories_index',
-      'portals_categories_articles_index',
-      'portals_categories_articles_edit',
-    ],
-  },
-  {
-    label: 'Locales',
-    icon: 'i-lucide-languages',
-    action: 'portals_locales_index',
-    value: ['portals_locales_index'],
-  },
-  {
-    label: 'Settings',
-    icon: 'i-lucide-settings',
-    action: 'portals_settings_index',
-    value: ['portals_settings_index'],
-  },
-];
-
 export const ARTICLE_STATUSES = {
   DRAFT: 'draft',
   PUBLISHED: 'published',
diff --git a/app/javascript/dashboard/helper/specs/permissionsHelper.spec.js b/app/javascript/dashboard/helper/specs/permissionsHelper.spec.js
index f991a6bc9..7fe26119d 100644
--- a/app/javascript/dashboard/helper/specs/permissionsHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/permissionsHelper.spec.js
@@ -1,5 +1,4 @@
 import {
-  buildPermissionsFromRouter,
   getCurrentAccount,
   getUserPermissions,
   hasPermissions,
@@ -43,70 +42,6 @@ describe('hasPermissions', () => {
   });
 });
 
-describe('buildPermissionsFromRouter', () => {
-  it('returns a valid object when routes have permissions defined', () => {
-    expect(
-      buildPermissionsFromRouter([
-        {
-          path: 'agent',
-          name: 'agent_list',
-          meta: { permissions: ['agent_admin'] },
-        },
-        {
-          path: 'inbox',
-          children: [
-            {
-              path: '',
-              name: 'inbox_list',
-              meta: { permissions: ['inbox_admin'] },
-            },
-          ],
-        },
-        {
-          path: 'conversations',
-          children: [
-            {
-              path: '',
-              children: [
-                {
-                  path: 'attachments',
-                  name: 'attachments_list',
-                  meta: { permissions: ['conversation_admin'] },
-                },
-              ],
-            },
-          ],
-        },
-      ])
-    ).toEqual({
-      agent_list: ['agent_admin'],
-      inbox_list: ['inbox_admin'],
-      attachments_list: ['conversation_admin'],
-    });
-  });
-
-  it('throws an error if a named routed does not have permissions defined', () => {
-    expect(() => {
-      buildPermissionsFromRouter([
-        {
-          path: 'agent',
-          name: 'agent_list',
-        },
-      ]);
-    }).toThrow("The route doesn't have the required permissions defined");
-
-    expect(() => {
-      buildPermissionsFromRouter([
-        {
-          path: 'agent',
-          name: 'agent_list',
-          meta: {},
-        },
-      ]);
-    }).toThrow("The route doesn't have the required permissions defined");
-  });
-});
-
 describe('filterItemsByPermission', () => {
   const items = {
     item1: { name: 'Item 1', permissions: ['agent', 'administrator'] },
diff --git a/app/javascript/dashboard/helper/validations.js b/app/javascript/dashboard/helper/validations.js
index 58f3faa1a..edebc4656 100644
--- a/app/javascript/dashboard/helper/validations.js
+++ b/app/javascript/dashboard/helper/validations.js
@@ -126,6 +126,7 @@ const validateSingleAction = action => {
     'snooze_conversation',
     'resolve_conversation',
     'remove_assigned_team',
+    'open_conversation',
   ];
 
   if (
diff --git a/app/javascript/dashboard/i18n/locale/en/automation.json b/app/javascript/dashboard/i18n/locale/en/automation.json
index 86ec0b58b..c5dd4a514 100644
--- a/app/javascript/dashboard/i18n/locale/en/automation.json
+++ b/app/javascript/dashboard/i18n/locale/en/automation.json
@@ -147,7 +147,8 @@
       "SEND_ATTACHMENT": "Send Attachment",
       "SEND_MESSAGE": "Send a Message",
       "CHANGE_PRIORITY": "Change Priority",
-      "ADD_SLA": "Add SLA"
+      "ADD_SLA": "Add SLA",
+      "OPEN_CONVERSATION": "Open conversation"
     },
     "ATTRIBUTES": {
       "MESSAGE_TYPE": "Message Type",
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index e44c6e039..0a2542a84 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -49,5 +49,8 @@
     "HOURS": "Hours",
     "DAYS": "Days",
     "PLACEHOLDER": "Enter duration"
+  },
+  "CHANNEL_SELECTOR": {
+    "COMING_SOON": "Coming Soon!"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index cc0fe4b33..be7a6f2f9 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -268,6 +268,46 @@
           "ERROR_MESSAGE": "We were not able to save the WhatsApp channel"
         }
       },
+      "VOICE": {
+        "TITLE": "Voice Channel",
+        "DESC": "Integrate Twilio Voice and start supporting your customers via phone calls.",
+        "PHONE_NUMBER": {
+          "LABEL": "Phone Number",
+          "PLACEHOLDER": "Enter your phone number (e.g. +1234567890)",
+          "ERROR": "Please provide a valid phone number in E.164 format (e.g. +1234567890)"
+        },
+        "TWILIO": {
+          "ACCOUNT_SID": {
+            "LABEL": "Account SID",
+            "PLACEHOLDER": "Enter your Twilio Account SID",
+            "REQUIRED": "Account SID is required"
+          },
+          "AUTH_TOKEN": {
+            "LABEL": "Auth Token",
+            "PLACEHOLDER": "Enter your Twilio Auth Token",
+            "REQUIRED": "Auth Token is required"
+          },
+          "API_KEY_SID": {
+            "LABEL": "API Key SID",
+            "PLACEHOLDER": "Enter your Twilio API Key SID",
+            "REQUIRED": "API Key SID is required"
+          },
+          "API_KEY_SECRET": {
+            "LABEL": "API Key Secret",
+            "PLACEHOLDER": "Enter your Twilio API Key Secret",
+            "REQUIRED": "API Key Secret is required"
+          },
+          "TWIML_APP_SID": {
+            "LABEL": "TwiML App SID",
+            "PLACEHOLDER": "Enter your Twilio TwiML App SID (starts with AP)",
+            "REQUIRED": "TwiML App SID is required"
+          }
+        },
+        "SUBMIT_BUTTON": "Create Voice Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to create the voice channel"
+        }
+      },
       "API_CHANNEL": {
         "TITLE": "API Channel",
         "DESC": "Integrate with API channel and start supporting your customers.",
@@ -789,7 +829,8 @@
       "TELEGRAM": "Telegram",
       "LINE": "Line",
       "API": "API Channel",
-      "INSTAGRAM": "Instagram"
+      "INSTAGRAM": "Instagram",
+      "VOICE": "Voice"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 41f63d0a2..b3e091722 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -328,6 +328,14 @@
         "DESCRIPTION": "Linear workspace is not connected. Click the button below to connect your workspace to use this integration.",
         "BUTTON_TEXT": "Connect Linear workspace"
       }
+    },
+    "NOTION": {
+      "DELETE": {
+        "TITLE": "Are you sure you want to delete the Notion integration?",
+        "MESSAGE": "Deleting this integration will remove access to your Notion workspace and stop all related functionality.",
+        "CONFIRM": "Yes, delete",
+        "CANCEL": "Cancel"
+      }
     }
   },
   "CAPTAIN": {
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
index ec3865227..f68cf9530 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
@@ -60,7 +60,7 @@ export default {
   @apply flex items-center;
 }
 .user-identifier {
-  @apply text-xs ml-0.5 text-slate-700 dark:text-slate-100;
+  @apply text-xs ml-0.5 text-n-slate-12;
 }
 .option__user-data {
   @apply flex flex-col flex-grow ml-2 mr-2;
@@ -73,10 +73,10 @@ export default {
   @apply relative top-px mr-0.5 rtl:mr-0 rtl:ml-0.5;
 }
 .option__title {
-  @apply text-slate-800 dark:text-slate-100 font-medium mb-0.5;
+  @apply text-n-slate-12 font-medium mb-0.5;
 }
 .option__body {
-  @apply text-xs text-slate-700 dark:text-slate-100 mt-1;
+  @apply text-xs text-n-slate-12 mt-1;
 }
 
 .option__user-data .option__body {
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index 4055a22e4..85fda4464 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -130,7 +130,7 @@ export default {
       </div>
       <div class="flex multiselect-wrap--medium">
         <div
-          class="w-8 relative text-base text-slate-100 dark:text-slate-600 after:content-[''] after:h-12 after:w-0 ltr:after:left-4 rtl:after:right-4 after:absolute after:border-l after:border-solid after:border-slate-100 after:dark:border-slate-600 before:content-[''] before:h-0 before:w-4 ltr:before:left-4 rtl:before:right-4 before:top-12 before:absolute before:border-b before:border-solid before:border-slate-100 before:dark:border-slate-600"
+          class="w-8 relative text-base text-n-strong after:content-[''] after:h-12 after:w-0 ltr:after:left-4 rtl:after:right-4 after:absolute after:border-l after:border-solid after:border-n-strong before:content-[''] before:h-0 before:w-4 ltr:before:left-4 rtl:before:right-4 before:top-12 before:absolute before:border-b before:border-solid before:border-n-strong"
         >
           <fluent-icon
             icon="arrow-up"
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
index 26d4ce44c..058021dd5 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
@@ -17,9 +17,9 @@ export default {
 <template>
   <div
     v-if="parentContactName"
-    class="my-4 relative p-2.5 border rounded-[4px] text-slate-800 dark:text-slate-100 border-slate-100 dark:border-slate-700 bg-white dark:bg-slate-800"
+    class="my-4 relative p-2.5 border rounded-[4px] text-n-slate-12 border-n-weak bg-n-background"
   >
-    <h5 class="text-base font-medium text-slate-900 dark:text-white">
+    <h5 class="text-base font-medium text-n-slate-12">
       {{ $t('MERGE_CONTACTS.SUMMARY.TITLE') }}
     </h5>
     <ul class="ml-0 list-none">
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index ababf1588..632425feb 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -257,7 +257,7 @@ export default {
 
 <style lang="scss" scoped>
 .menu-container {
-  @apply p-1 bg-white dark:bg-slate-900 shadow-xl rounded-md;
+  @apply p-1 bg-n-background shadow-xl rounded-md;
 
   hr:first-child {
     @apply hidden;
@@ -277,10 +277,6 @@ export default {
         @apply font-medium text-base;
       }
     }
-
-    .modal-footer {
-      @apply pt-4 pb-8 px-8;
-    }
   }
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchTabs.vue b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
index 6e5174b5c..9260796ef 100644
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -41,6 +41,7 @@ const onTabChange = index => {
         :name="item.name"
         :count="item.count"
         :show-badge="item.showBadge"
+        is-compact
       />
     </woot-tabs>
   </div>
diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index 028a330ac..61e917d91 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -140,7 +140,7 @@ export default {
     </div>
     <div
       v-if="isWidgetVisible"
-      class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-slate-25 dark:bg-slate-800 h-[31.25rem] w-80"
+      class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-n-slate-2 dark:bg-n-solid-1 h-[31.25rem] w-80"
     >
       <WidgetHead :config="getWidgetConfig" />
       <div>
@@ -151,7 +151,7 @@ export default {
         <WidgetFooter :config="getWidgetConfig" />
         <div class="py-2.5 flex justify-center">
           <a
-            class="items-center gap-0.5 text-slate-500 dark:text-slate-400 cursor-pointer flex filter grayscale opacity-90 hover:grayscale-0 hover:opacity-100 text-xxs"
+            class="items-center gap-0.5 text-n-slate-11 cursor-pointer flex filter grayscale opacity-90 hover:grayscale-0 hover:opacity-100 text-xxs"
           >
             <img
               class="max-w-2.5 max-h-2.5"
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index 09f1ce057..b2a1740b9 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -28,7 +28,7 @@ defineProps({
       </div>
 
       <div
-        class="bg-white shadow rounded-[1.25rem] rounded-bl-[0.25rem] px-4 py-3 inline-block text-sm text-slate-900 dark:text-white dark:bg-slate-700"
+        class="shadow rounded-[1.25rem] rounded-bl-[0.25rem] px-4 py-3 inline-block text-sm text-n-slate-12 bg-n-background dark:bg-n-solid-3"
       >
         <div>
           <p class="m-0">
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
index afa31a212..224d9cf5b 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -27,16 +27,16 @@ const getStatusText = computed(() => {
   <div class="relative flex flex-col w-full px-4">
     <div
       v-if="config.isDefaultScreen"
-      class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700"
+      class="p-4 rounded-md shadow-sm bg-n-background dark:bg-n-solid-2"
     >
       <div class="flex items-center justify-between">
         <div>
           <div
-            class="text-sm font-medium leading-4 text-slate-700 dark:text-slate-50"
+            class="text-sm font-medium leading-4 text-n-slate-12 dark:text-n-slate-50"
           >
             {{ getStatusText }}
           </div>
-          <div class="mt-1 text-xs text-slate-500 dark:text-slate-100">
+          <div class="mt-1 text-xs text-n-slate-11">
             {{ config.replyTime }}
           </div>
         </div>
@@ -44,7 +44,7 @@ const getStatusText = computed(() => {
       </div>
       <button
         v-if="config.isDefaultScreen"
-        class="inline-flex items-center justify-between px-2 py-1 mt-1 -ml-2 font-medium leading-6 bg-transparent rounded-md text-slate-800 dark:bg-transparent dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
+        class="inline-flex items-center justify-between px-2 py-1 mt-1 -ml-2 font-medium leading-6 bg-transparent rounded-md text-n-slate-12 dark:bg-transparent"
         :style="{ color: config.color }"
       >
         <span class="pr-2 text-xs">
@@ -59,8 +59,8 @@ const getStatusText = computed(() => {
     </div>
     <div
       v-else
-      class="flex items-center h-10 bg-white rounded-md dark:bg-slate-700"
-      :class="{ 'ring-2 ring-woot-500 dark:ring-woot-400': isInputFocused }"
+      class="flex items-center h-10 bg-white rounded-md dark:!bg-n-slate-3"
+      :class="{ 'ring-2 ring-n-brand dark:ring-n-brand': isInputFocused }"
     >
       <ResizableTextArea
         id="chat-input"
@@ -68,7 +68,7 @@ const getStatusText = computed(() => {
         :placeholder="
           $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
         "
-        class="flex-grow !bg-white border-0 outline-none !outline-0 border-none h-8 text-sm dark:!bg-slate-700 pb-0 !pt-1.5 resize-none px-3 !mb-0 focus:outline-none rounded-md"
+        class="flex-grow !bg-white border-0 outline-none !outline-0 border-none h-8 text-sm dark:!bg-n-slate-3 pb-0 !pt-1.5 resize-none px-3 !mb-0 focus:outline-none rounded-md"
         @focus="isInputFocused = true"
         @blur="isInputFocused = false"
       />
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
index 5de9ca069..58bbfac15 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -26,8 +26,8 @@ const isDefaultScreen = computed(() => {
     class="rounded-t-lg flex-shrink-0 transition-[max-height] duration-300"
     :class="
       isDefaultScreen
-        ? 'bg-slate-25 dark:bg-slate-800 px-4 py-5'
-        : 'bg-white dark:bg-slate-900 p-4'
+        ? 'bg-n-slate-2 dark:bg-n-solid-1 px-4 py-5'
+        : 'bg-n-slate-2 dark:bg-n-solid-1 p-4'
     "
   >
     <div class="relative top-px">
@@ -40,17 +40,15 @@ const isDefaultScreen = computed(() => {
         />
         <div v-if="!isDefaultScreen">
           <div class="flex items-center justify-start gap-1">
-            <span
-              class="text-base font-medium leading-3 text-slate-900 dark:text-white"
-            >
+            <span class="text-base font-medium leading-3 text-n-slate-12">
               {{ config.websiteName }}
             </span>
             <div
               v-if="config.isOnline"
-              class="w-2 h-2 bg-green-500 rounded-full"
+              class="w-2 h-2 bg-n-teal-10 rounded-full"
             />
           </div>
-          <span class="mt-1 text-xs text-slate-600 dark:text-slate-400">
+          <span class="mt-1 text-xs text-n-slate-11">
             {{ config.replyTime }}
           </span>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 475fc9ee3..ae54e9a7c 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -1,43 +1,29 @@
 <script>
 import { defineAsyncComponent, ref } from 'vue';
-import { mapGetters } from 'vuex';
 
 import NextSidebar from 'next/sidebar/Sidebar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
-import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
-import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
-import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
-import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
+import AddAccountModal from 'dashboard/components/app/AddAccountModal.vue';
 import UpgradePage from 'dashboard/routes/dashboard/upgrade/UpgradePage.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
 
 import wootConstants from 'dashboard/constants/globals';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const CommandBar = defineAsyncComponent(
   () => import('./commands/commandbar.vue')
 );
 
-const Sidebar = defineAsyncComponent(
-  () => import('../../components/layout/Sidebar.vue')
-);
-import { emitter } from 'shared/helpers/mitt';
 import CopilotLauncher from 'dashboard/components-next/copilot/CopilotLauncher.vue';
 import CopilotContainer from 'dashboard/components/copilot/CopilotContainer.vue';
 
 export default {
   components: {
     NextSidebar,
-    Sidebar,
     CommandBar,
     WootKeyShortcutModal,
     AddAccountModal,
-    AccountSelector,
-    AddLabelModal,
-    NotificationPanel,
     UpgradePage,
     CopilotLauncher,
     CopilotContainer,
@@ -58,20 +44,11 @@ export default {
     return {
       showAccountModal: false,
       showCreateAccountModal: false,
-      showAddLabelModal: false,
       showShortcutModal: false,
-      isNotificationPanel: false,
       displayLayoutType: '',
-      hasBanner: '',
     };
   },
   computed: {
-    ...mapGetters({
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    currentRoute() {
-      return ' ';
-    },
     showUpgradePage() {
       return this.upgradePageRef?.shouldShowUpgradePage;
     },
@@ -82,10 +59,6 @@ export default {
         'agent_list',
       ].includes(this.$route.name);
     },
-    isSidebarOpen() {
-      const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
-      return showSecondarySidebar;
-    },
     previouslyUsedDisplayType() {
       const {
         previously_used_conversation_display_type: conversationDisplayType,
@@ -97,12 +70,6 @@ export default {
         this.uiSettings;
       return showSecondarySidebar;
     },
-    showNextSidebar() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.CHATWOOT_V4
-      );
-    },
   },
   watch: {
     displayLayoutType() {
@@ -121,22 +88,13 @@ export default {
   },
   mounted() {
     this.handleResize();
-    this.$nextTick(this.checkBanner);
     window.addEventListener('resize', this.handleResize);
-    window.addEventListener('resize', this.checkBanner);
-    emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
   unmounted() {
     window.removeEventListener('resize', this.handleResize);
-    window.removeEventListener('resize', this.checkBanner);
-    emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
 
   methods: {
-    checkBanner() {
-      this.hasBanner =
-        document.getElementsByClassName('woot-banner').length > 0;
-    },
     handleResize() {
       const { SMALL_SCREEN_BREAKPOINT, LAYOUT_TYPES } = wootConstants;
       let throttled = false;
@@ -156,12 +114,6 @@ export default {
         }
       }, delay);
     },
-    toggleSidebar() {
-      this.updateUISettings({
-        show_secondary_sidebar: !this.isSidebarOpen,
-        previously_used_sidebar_view: !this.isSidebarOpen,
-      });
-    },
     openCreateAccountModal() {
       this.showAccountModal = false;
       this.showCreateAccountModal = true;
@@ -178,42 +130,18 @@ export default {
     closeKeyShortcutModal() {
       this.showShortcutModal = false;
     },
-    showAddLabelPopup() {
-      this.showAddLabelModal = true;
-    },
-    hideAddLabelPopup() {
-      this.showAddLabelModal = false;
-    },
-    openNotificationPanel() {
-      this.isNotificationPanel = true;
-    },
-    closeNotificationPanel() {
-      this.isNotificationPanel = false;
-    },
   },
 };
 </script>
 
 <template>
-  <div class="flex flex-wrap app-wrapper dark:text-slate-300">
+  <div class="flex flex-wrap app-wrapper text-n-slate-12">
     <NextSidebar
-      v-if="showNextSidebar"
       @toggle-account-modal="toggleAccountModal"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-create-account-modal="openCreateAccountModal"
     />
-    <Sidebar
-      v-else
-      :route="currentRoute"
-      :has-banner="hasBanner"
-      :show-secondary-sidebar="isSidebarOpen"
-      @open-notification-panel="openNotificationPanel"
-      @toggle-account-modal="toggleAccountModal"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-      @show-add-label-popup="showAddLabelPopup"
-    />
     <main class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
       <UpgradePage
         v-show="showUpgradePage"
@@ -225,23 +153,7 @@ export default {
         <CommandBar />
         <CopilotLauncher />
         <CopilotContainer />
-
-        <NotificationPanel
-          v-if="isNotificationPanel"
-          @close="closeNotificationPanel"
-        />
-        <woot-modal
-          v-model:show="showAddLabelModal"
-          :on-close="hideAddLabelPopup"
-        >
-          <AddLabelModal @close="hideAddLabelPopup" />
-        </woot-modal>
       </template>
-      <AccountSelector
-        :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-        @show-create-account-modal="openCreateAccountModal"
-      />
       <AddAccountModal
         :show="showCreateAccountModal"
         @close-account-create-modal="closeCreateAccountModal"
diff --git a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
index 90db4694a..5f5156d8e 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
@@ -58,6 +58,11 @@ const handleCreateDialogClose = () => {
   showCreateDialog.value = false;
 };
 
+const handleCreateDialogSuccess = () => {
+  // Document is already added to the store optimistically, no need to refetch
+  // The store action 'uploadPdf' or 'create' already adds the document via commit(mutationTypes.ADD)
+};
+
 const handleAction = ({ action, id }) => {
   selectedDocument.value = documents.value.find(
     captainDocument => id === captainDocument.id
@@ -171,6 +176,7 @@ onMounted(() => {
       v-if="showCreateDialog"
       ref="createDocumentDialog"
       @close="handleCreateDialogClose"
+      @success="handleCreateDialogSuccess"
     />
     <DeleteDialog
       v-if="selectedDocument"
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index 19e1cbe9e..afd15283e 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -95,7 +95,7 @@ onMounted(setCommandBarData);
 
 <style lang="scss">
 ninja-keys {
-  --ninja-accent-color: var(--w-500);
+  --ninja-accent-color: rgba(39, 129, 246, 1);
   --ninja-font-family: 'Inter';
   z-index: 9999;
 }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index 810872cac..68f5bd36e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -71,7 +71,7 @@ export default {
 
 <style lang="scss" scoped>
 .no-label-message {
-  @apply text-slate-500 dark:text-slate-400 mb-4;
+  @apply text-n-slate-11 mb-4;
 }
 
 ::v-deep .conversation {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
index 1bba00568..5d5697c93 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
@@ -11,7 +11,7 @@ export default {
 <template>
   <div class="overflow-auto" :class="compact ? 'py-0 px-0' : 'py-3 px-4'">
     <div class="items-center flex justify-between mb-1.5">
-      <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+      <span class="text-sm font-medium text-n-slate-12">
         {{ title }}
       </span>
       <slot name="button" />
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 64191eab5..ed762d914 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -304,7 +304,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 ::v-deep {
   .contact--profile {
-    @apply pb-3 border-b border-solid border-slate-75 dark:border-slate-700;
+    @apply pb-3 border-b border-solid border-n-weak;
   }
 
   .conversation--actions .multiselect-wrap--small {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index b715c000a..f94fc7a9b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -207,7 +207,7 @@ export default {
 </script>
 
 <template>
-  <div class="bg-white dark:bg-slate-900">
+  <div class="bg-n-background">
     <div class="multiselect-wrap--small">
       <ContactDetailsItem
         compact
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index f3bdbbee5..2323b4281 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -155,7 +155,7 @@ export default {
 </script>
 
 <template>
-  <div class="relative bg-white dark:bg-slate-900">
+  <div class="relative bg-n-background">
     <div class="flex justify-between">
       <div class="flex justify-between w-full mb-1">
         <div>
@@ -163,7 +163,7 @@ export default {
             <Spinner v-if="watchersUiFlas.isFetching" size="tiny" />
             {{ totalWatchersText }}
           </p>
-          <p v-else class="m-0 text-sm text-slate-400 dark:text-slate-700">
+          <p v-else class="m-0 text-sm text-n-slate-10">
             {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
           </p>
         </div>
@@ -185,10 +185,7 @@ export default {
         :show-more-thumbnails-count="showMoreThumbs"
         :users-list="thumbnailList"
       />
-      <p
-        v-if="isUserWatching"
-        class="m-0 text-sm text-slate-300 dark:text-slate-300"
-      >
+      <p v-if="isUserWatching" class="m-0 text-sm text-n-slate-10">
         {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
       </p>
       <NextButton
@@ -207,12 +204,15 @@ export default {
           onCloseDropdown();
         }
       "
-      :class="{ 'dropdown-pane--open': showDropDown }"
-      class="dropdown-pane"
+      :class="{
+        'block visible': showDropDown,
+        'hidden invisible': !showDropDown,
+      }"
+      class="border rounded-lg shadow-lg bg-n-alpha-3 absolute backdrop-blur-[100px] border-n-strong dark:border-n-strong p-2 z-[9999] box-border top-8 w-full"
     >
       <div class="flex items-center justify-between mb-1">
         <h4
-          class="m-0 overflow-hidden text-sm whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+          class="m-0 overflow-hidden text-sm whitespace-nowrap text-ellipsis text-n-slate-12"
         >
           {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
         </h4>
@@ -227,9 +227,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.dropdown-pane {
-  @apply box-border top-8 w-full;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index 14b1f37d1..a1534a772 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -4,12 +4,10 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
-import PopOverSearch from './search/PopOverSearch.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import SidepanelSwitch from 'dashboard/components-next/Conversation/SidepanelSwitch.vue';
 import ConversationSidebar from 'dashboard/components/widgets/conversation/ConversationSidebar.vue';
 
@@ -17,7 +15,6 @@ export default {
   components: {
     ChatList,
     ConversationBox,
-    PopOverSearch,
     CmdBarConversationSnooze,
     SidepanelSwitch,
     ConversationSidebar,
@@ -75,7 +72,6 @@ export default {
     ...mapGetters({
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     showConversationList() {
       return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -100,12 +96,6 @@ export default {
       const { is_contact_sidebar_open: isContactSidebarOpen } = this.uiSettings;
       return isContactSidebarOpen;
     },
-    showPopOverSearch() {
-      return !this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.CHATWOOT_V4
-      );
-    },
   },
   watch: {
     conversationId() {
@@ -215,13 +205,7 @@ export default {
       :folders-id="foldersId"
       :is-on-expanded-layout="isOnExpandedLayout"
       @conversation-load="onConversationLoad"
-    >
-      <PopOverSearch
-        v-if="showPopOverSearch"
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle-conversation-layout="toggleConversationLayout"
-      />
-    </ChatList>
+    />
     <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
index 9e7f92ae1..7903ae751 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue
@@ -104,7 +104,6 @@ onMounted(() => {
           :key="element.id"
           :macro="element"
           :conversation-id="conversationId"
-          class="drag-handle cursor-grab"
         />
       </template>
     </Draggable>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
index 2b7637ee2..b6de05d51 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -54,6 +54,7 @@ const closeMacroPreview = () => {
 <template>
   <div
     class="relative flex items-center justify-between leading-4 rounded-md h-10 pl-3 pr-2"
+    :class="showPreview ? 'cursor-default' : 'drag-handle cursor-grab'"
   >
     <span
       class="overflow-hidden whitespace-nowrap text-ellipsis font-medium text-n-slate-12"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
index 299531df2..d5a2ae0b8 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
@@ -59,10 +59,10 @@ const resolvedMacro = computed(() => {
     >
       <div
         v-if="i !== macro.actions.length - 1"
-        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
+        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-n-slate-6"
       />
       <div
-        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-n-solid-1 border-2 border-solid border-n-weak dark:border-slate-600"
+        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-n-solid-1 border-2 border-solid border-n-weak dark:border-n-slate-6"
       />
       <p class="mb-1 text-xs text-n-slate-11">
         {{ $t(`MACROS.ACTIONS.${action.actionName}`) }}
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index f5075f201..967d25912 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -346,7 +346,7 @@ export default {
         </label>
         <div
           v-if="isPhoneNumberNotValid || !phoneNumber"
-          class="relative mx-0 mt-0 mb-2.5 p-2 rounded-md text-sm border border-solid border-yellow-500 text-yellow-700 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 dark:text-yellow-400"
+          class="relative mx-0 mt-0 mb-2.5 p-2 rounded-md text-sm border border-solid border-n-amber-5 text-n-amber-12 bg-n-amber-3"
         >
           {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
         </div>
@@ -394,13 +394,13 @@ export default {
         class="flex items-stretch w-full mb-4"
       >
         <span
-          class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
+          class="flex items-center h-10 px-2 text-sm border-solid border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md bg-n-solid-3 text-n-slate-11 border-n-weak"
         >
           {{ socialProfile.prefixURL }}
         </span>
         <input
           v-model="socialProfileUserNames[socialProfile.key]"
-          class="input-group-field ltr:!rounded-l-none rtl:rounded-r-none !mb-0"
+          class="input-group-field ltr:!rounded-l-none rtl:!rounded-r-none !mb-0"
           type="text"
         />
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
index 0cd0ad4b5..b5c4b12be 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
@@ -41,7 +41,7 @@ export default {
       <fluent-icon
         :icon="`brand-${profile.key}`"
         size="16"
-        class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+        class="text-n-slate-11 hover:text-n-slate-10"
       />
     </a>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index be46d268f..e129852b2 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -102,20 +102,21 @@ export default {
           @remove="removeLabelFromConversation"
         />
 
-        <div class="dropdown-wrap">
-          <div
-            :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-            class="dropdown-pane"
-          >
-            <LabelDropdown
-              v-if="showSearchDropdownLabel"
-              :account-labels="accountLabels"
-              :selected-labels="savedLabels"
-              :allow-creation="isAdmin"
-              @add="addLabelToConversation"
-              @remove="removeLabelFromConversation"
-            />
-          </div>
+        <div
+          :class="{
+            'block visible': showSearchDropdownLabel,
+            'hidden invisible': !showSearchDropdownLabel,
+          }"
+          class="border rounded-lg bg-n-alpha-3 top-6 backdrop-blur-[100px] absolute w-full shadow-lg border-n-strong dark:border-n-strong p-2 box-border z-[9999]"
+        >
+          <LabelDropdown
+            v-if="showSearchDropdownLabel"
+            :account-labels="accountLabels"
+            :selected-labels="savedLabels"
+            :allow-creation="isAdmin"
+            @add="addLabelToConversation"
+            @remove="removeLabelFromConversation"
+          />
         </div>
       </div>
     </div>
@@ -131,28 +132,8 @@ export default {
   width: 100%;
 
   .label-wrap {
-    line-height: var(--space-medium);
+    line-height: 1.5rem;
     position: relative;
-
-    .dropdown-wrap {
-      display: flex;
-      left: -1px;
-      margin-right: var(--space-medium);
-      position: absolute;
-      top: var(--space-medium);
-      width: 100%;
-
-      .dropdown-pane {
-        width: 100%;
-        box-sizing: border-box;
-      }
-    }
   }
 }
-
-.error {
-  color: var(--r-500);
-  font-size: var(--font-size-mini);
-  font-weight: var(--font-weight-medium);
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
deleted file mode 100644
index 1c1627914..000000000
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import SwitchLayout from './SwitchLayout.vue';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-
-export default {
-  components: {
-    SwitchLayout,
-  },
-  directives: {
-    focus: {
-      inserted(el) {
-        el.focus();
-      },
-    },
-  },
-  props: {
-    isOnExpandedLayout: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['toggleConversationLayout'],
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
-    searchUrl() {
-      return frontendURL(`accounts/${this.accountId}/search`);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="relative">
-    <div
-      class="flex px-4 pb-1 justify-between items-center flex-row gap-1 pt-2.5 border-b border-transparent"
-    >
-      <woot-sidemenu-icon
-        size="xs"
-        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5 flex-shrink-0 focus:!bg-n-solid-3 dark:!hover:bg-n-solid-2 hover:!bg-n-alpha-2"
-      />
-      <router-link
-        :to="searchUrl"
-        class="inline-flex items-center flex-1 h-6 min-w-0 gap-1 px-2 py-0 text-left rounded-md rtl:mr-2.5 search-link rtl:text-right bg-n-slate-9/10 hover:bg-n-slate-3"
-      >
-        <div class="flex flex-shrink-0">
-          <fluent-icon
-            icon="search"
-            class="search--icon text-n-slate-11"
-            size="16"
-          />
-        </div>
-        <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-n-slate-11"
-        >
-          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
-        </p>
-      </router-link>
-      <SwitchLayout
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle="$emit('toggleConversationLayout')"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.search-link {
-  &:hover {
-    .search--icon,
-    .search--label {
-      @apply hover:text-woot-500 dark:hover:text-woot-500;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
index 0c3254028..e5108ddc1 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
@@ -50,18 +50,18 @@ const handleCopy = async e => {
 
 <template>
   <button
-    class="flex flex-col w-full gap-1 px-2 py-1 bg-white border border-transparent border-solid rounded-md cursor-pointer dark:bg-slate-900 hover:bg-slate-25 hover:dark:bg-slate-800 group focus:outline-none focus:bg-slate-25 focus:border-slate-500 dark:focus:border-slate-400 dark:focus:bg-slate-800"
+    class="flex flex-col w-full gap-1 px-2 py-1 border border-transparent border-solid rounded-md cursor-pointer hover:bg-n-slate-3 group focus:outline-none focus:bg-n-slate-3"
     @click="handlePreview"
   >
     <h4
-      class="w-full mb-0 -mx-1 text-sm rounded-sm ltr:text-left rtl:text-right text-slate-900 dark:text-slate-25 hover:underline group-hover:underline"
+      class="w-full mb-0 -mx-1 text-sm rounded-sm ltr:text-left rtl:text-right text-n-slate-12 hover:underline group-hover:underline"
     >
       {{ title }}
     </h4>
 
     <div class="flex content-between items-center gap-0.5 w-full">
       <p
-        class="w-full mb-0 text-sm ltr:text-left rtl:text-right text-slate-600 dark:text-slate-300"
+        class="w-full mb-0 text-sm ltr:text-left rtl:text-right text-n-slate-11"
       >
         {{ locale }}
         {{ ` / ` }}
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
index 7fac7b663..516984b80 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -47,7 +47,7 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <div class="flex flex-col py-1">
     <div class="flex items-center justify-between py-2 mb-1">
-      <h3 class="text-base text-slate-900 dark:text-slate-25">
+      <h3 class="text-base text-n-slate-12">
         {{ title }}
       </h3>
       <Button ghost xs slate icon="i-lucide-x" @click="onClose" />
@@ -63,7 +63,7 @@ useKeyboardEvents(keyboardEvents);
         ref="searchInputRef"
         type="text"
         :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
-        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-n-slate-2 !border-n-weak !bg-n-slate-2 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
+        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-n-slate-2 !border-n-weak !bg-n-slate-2 text-sm rounded-md leading-8 text-n-slate-12 shadow-sm ring-2 ring-transparent ring-n-weak border border-solid placeholder:text-n-slate-10 focus:border-n-brand focus:ring-n-brand !mb-0"
         :value="searchQuery"
         @input="onInput"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
index f54db1597..88504d26d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -137,7 +137,7 @@ export default {
   >
     <div
       v-on-clickaway="onClose"
-      class="flex flex-col px-4 pb-4 rounded-md shadow-md border border-solid border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-900 z-[1000] max-w-[720px] md:w-[20rem] lg:w-[24rem] xl:w-[28rem] 2xl:w-[32rem] h-[calc(100vh-20rem)] max-h-[40rem]"
+      class="flex flex-col px-4 pb-4 rounded-md shadow-md border border-solid border-n-weak bg-n-background z-[1000] max-w-[720px] md:w-[20rem] lg:w-[24rem] xl:w-[28rem] 2xl:w-[32rem] h-[calc(100vh-20rem)] max-h-[40rem]"
     >
       <SearchHeader
         :title="$t('HELP_CENTER.ARTICLE_SEARCH.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
index a51e29767..7338924b1 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
@@ -39,13 +39,19 @@ export default {
 
 <template>
   <div
-    class="flex justify-end h-full gap-1 py-4 overflow-y-auto bg-white dark:bg-slate-900"
+    class="flex justify-end h-full gap-1 py-4 overflow-y-auto bg-n-background"
   >
     <div class="flex flex-col w-full gap-1">
-      <div v-if="isLoading" class="empty-state-message">
+      <div
+        v-if="isLoading"
+        class="text-center flex items-center justify-center px-4 py-8 text-n-slate-10 text-sm"
+      >
         {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.SEARCH_LOADER') }}
       </div>
-      <div v-else-if="showNoResults" class="empty-state-message">
+      <div
+        v-else-if="showNoResults"
+        class="text-center flex items-center justify-center px-4 py-8 text-n-slate-10 text-sm"
+      >
         {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
       </div>
       <template v-else>
@@ -65,9 +71,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style scoped>
-.empty-state-message {
-  @apply text-center flex items-center justify-center px-4 py-8 text-slate-500 text-sm;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
index b498e4385..ec38b3248 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
@@ -68,17 +68,17 @@ export default {
 
 <template>
   <div
-    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full min-h-screen max-w-full overflow-auto bg-white dark:bg-slate-900"
+    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full min-h-screen max-w-full overflow-auto bg-n-background"
   >
     <div class="flex flex-col justify-start sm:justify-center gap-6">
       <div class="flex flex-col gap-1.5 items-start sm:items-center">
         <h1
-          class="text-slate-900 dark:text-white text-left sm:text-center text-4xl sm:text-5xl mb-6 font-semibold"
+          class="text-n-slate-12 text-left sm:text-center text-4xl sm:text-5xl mb-6 font-semibold"
         >
           {{ $t('HELP_CENTER.UPGRADE_PAGE.TITLE') }}
         </h1>
         <p
-          class="max-w-2xl text-base font-normal leading-6 text-left sm:text-center text-slate-700 dark:text-slate-200"
+          class="max-w-2xl text-base font-normal leading-6 text-left sm:text-center text-n-slate-11"
         >
           {{
             isOnChatwootCloud
@@ -116,14 +116,14 @@ export default {
               :icon="feature.icon"
               icon-lib="lucide"
               :size="26"
-              class="mt-px text-slate-800 dark:text-slate-25"
+              class="mt-px text-n-slate-12"
             />
           </div>
           <div>
-            <h5 class="font-semibold text-lg text-slate-800 dark:text-slate-25">
+            <h5 class="font-semibold text-lg text-n-slate-12">
               {{ feature.title }}
             </h5>
-            <p class="text-sm leading-6 text-slate-700 dark:text-slate-100">
+            <p class="text-sm leading-6 text-n-slate-12">
               {{ feature.description }}
             </p>
           </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
index f43270857..6e86b54f7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
@@ -67,7 +67,7 @@ watch(
   <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
     <section
       v-if="isHelpCenterEnabled"
-      class="flex flex-1 h-full px-0 overflow-hidden bg-white dark:bg-slate-900"
+      class="flex flex-1 h-full px-0 overflow-hidden bg-n-background"
     >
       <router-view />
     </section>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
index d5f9d677b..0d9100259 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
@@ -69,7 +69,7 @@ onMounted(() => performRouting());
 
 <template>
   <div
-    class="flex items-center justify-center w-full bg-n-background text-slate-600 dark:text-slate-200"
+    class="flex items-center justify-center w-full bg-n-background text-n-slate-11"
   >
     <Spinner />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
index 2276037ce..f54fa8a7f 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
@@ -1,6 +1,11 @@
 <script>
 import { mapGetters } from 'vuex';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
 export default {
+  components: {
+    Spinner,
+  },
   props: {
     emptyStateMessage: {
       type: String,
@@ -25,14 +30,12 @@ export default {
   <div
     class="items-center justify-center hidden w-full h-full text-center bg-n-background lg:flex"
   >
-    <span v-if="uiFlags.isFetching" class="my-4 spinner" />
+    <div v-if="uiFlags.isFetching" class="flex justify-center my-4">
+      <Spinner class="text-n-brand" />
+    </div>
     <div v-else class="flex flex-col items-center gap-2">
-      <fluent-icon
-        icon="mail-inbox"
-        size="40"
-        class="text-slate-600 dark:text-slate-400"
-      />
-      <span class="text-sm font-medium text-slate-500 dark:text-slate-300">
+      <fluent-icon icon="mail-inbox" size="40" class="text-n-slate-11" />
+      <span class="text-sm font-medium text-n-slate-11">
         {{ emptyMessage }}
       </span>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index 50771d538..f7b5eb2df 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -9,6 +9,7 @@ import InboxListHeader from './components/InboxListHeader.vue';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 export default {
   components: {
@@ -16,6 +17,7 @@ export default {
     InboxListHeader,
     IntersectionObserver,
     CmdBarConversationSnooze,
+    Spinner,
   },
   setup() {
     const { uiSettings } = useUISettings();
@@ -242,12 +244,12 @@ export default {
           @context-menu-close="isInboxContextMenuOpen = false"
           @click="openConversation(notificationItem)"
         />
-        <div v-if="uiFlags.isFetching" class="text-center">
-          <span class="mt-4 mb-4 spinner" />
+        <div v-if="uiFlags.isFetching" class="flex justify-center my-4">
+          <Spinner class="text-n-brand" />
         </div>
         <p
           v-if="showEmptyState"
-          class="p-4 text-sm font-medium text-center text-slate-400 dark:text-slate-400"
+          class="p-4 text-sm font-medium text-center text-n-slate-10"
         >
           {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
         </p>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
index f420a40a8..29ddc5ef1 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue
@@ -4,6 +4,7 @@ import { useTrack } from 'dashboard/composables';
 import InboxItemHeader from './components/InboxItemHeader.vue';
 import ConversationBox from 'dashboard/components/widgets/conversation/ConversationBox.vue';
 import InboxEmptyState from './InboxEmptyState.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -14,6 +15,7 @@ export default {
     InboxItemHeader,
     InboxEmptyState,
     ConversationBox,
+    Spinner,
   },
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
@@ -191,9 +193,9 @@ export default {
       />
       <div
         v-if="isConversationLoading"
-        class="flex items-center h-[calc(100%-56px)] justify-center bg-slate-25 dark:bg-slate-800"
+        class="flex items-center h-[calc(100%-56px)] my-4 justify-center bg-n-solid-1"
       >
-        <span class="my-4 spinner" />
+        <Spinner class="text-n-brand" />
       </div>
       <ConversationBox
         v-else
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
index 71e506294..ec9d02979 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
@@ -182,12 +182,12 @@ export default {
             type="checkbox"
             :name="option.key"
             :checked="option.selected"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-n-brand dark:checked:bg-n-brand after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+            class="m-0 border-[1.5px] shadow border-n-weak appearance-none rounded-[4px] w-4 h-4 dark:bg-n-background focus:ring-1 focus:ring-n-weak dark:focus:ring-n-strong checked:bg-n-brand dark:checked:bg-n-brand after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-n-blue-10 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
             @change="updateDisplayOption(option)"
           />
           <label
             :for="option.key"
-            class="text-xs font-medium text-slate-800 !ml-0 !mr-0 dark:text-slate-100"
+            class="text-xs font-medium text-n-slate-12 !ml-0 !mr-0 dark:text-n-slate-12"
           >
             {{ option.name }}
           </label>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/routes.js b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
index 28ffa2ebf..4ec1dff75 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -7,8 +7,6 @@ import {
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-
 export const routes = [
   {
     path: frontendURL('accounts/:accountId/inbox-view'),
@@ -20,7 +18,6 @@ export const routes = [
         component: InboxEmptyStateView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          featureFlag: FEATURE_FLAGS.CHATWOOT_V4,
         },
       },
       {
@@ -29,7 +26,6 @@ export const routes = [
         component: InboxDetailView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          featureFlag: FEATURE_FLAGS.CHATWOOT_V4,
         },
       },
     ],
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
deleted file mode 100644
index 59ecf67b4..000000000
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import NotificationPanelList from './NotificationPanelList.vue';
-import { useTrack } from 'dashboard/composables';
-import { ACCOUNT_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    NotificationPanelList,
-    NextButton,
-  },
-  emits: ['close'],
-  data() {
-    return {
-      pageSize: 15,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      meta: 'notifications/getMeta',
-      records: 'notifications/getNotifications',
-      uiFlags: 'notifications/getUIFlags',
-    }),
-    totalUnreadNotifications() {
-      return this.meta.unreadCount;
-    },
-    noUnreadNotificationAvailable() {
-      return this.meta.unreadCount === 0;
-    },
-    getUnreadNotifications() {
-      return this.records.filter(notification => notification.read_at === null);
-    },
-    currentPage() {
-      return Number(this.meta.currentPage);
-    },
-    lastPage() {
-      if (this.totalUnreadNotifications > 15) {
-        return Math.ceil(this.totalUnreadNotifications / this.pageSize);
-      }
-      return 1;
-    },
-    inFirstPage() {
-      const page = Number(this.meta.currentPage);
-      return page === 1;
-    },
-    inLastPage() {
-      return this.currentPage === this.lastPage;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('notifications/get', { page: 1 });
-  },
-  methods: {
-    onPageChange(page) {
-      this.$store.dispatch('notifications/get', { page });
-    },
-    openConversation(notification) {
-      const {
-        primary_actor_id: primaryActorId,
-        primary_actor_type: primaryActorType,
-        primary_actor: { id: conversationId },
-        notification_type: notificationType,
-      } = notification;
-
-      useTrack(ACCOUNT_EVENTS.OPEN_CONVERSATION_VIA_NOTIFICATION, {
-        notificationType,
-      });
-      this.$store.dispatch('notifications/read', {
-        id: notification.id,
-        primaryActorId,
-        primaryActorType,
-        unreadCount: this.meta.unreadCount,
-      });
-      this.$router.push({
-        name: 'inbox_conversation',
-        params: { conversation_id: conversationId },
-      });
-      this.$emit('close');
-    },
-    onClickNextPage() {
-      if (!this.inLastPage) {
-        const page = this.currentPage + 1;
-        this.onPageChange(page);
-      }
-    },
-    onClickPreviousPage() {
-      if (!this.inFirstPage) {
-        const page = this.currentPage - 1;
-        this.onPageChange(page);
-      }
-    },
-    onClickFirstPage() {
-      if (!this.inFirstPage) {
-        const page = 1;
-        this.onPageChange(page);
-      }
-    },
-    onClickLastPage() {
-      if (!this.inLastPage) {
-        const page = this.lastPage;
-        this.onPageChange(page);
-      }
-    },
-    onMarkAllDoneClick() {
-      useTrack(ACCOUNT_EVENTS.MARK_AS_READ_NOTIFICATIONS);
-      this.$store.dispatch('notifications/readAll');
-    },
-    openAudioNotificationSettings() {
-      this.$router.push({ name: 'profile_settings_index' });
-      this.closeNotificationPanel();
-      this.$nextTick(() => {
-        const audioSettings = document.getElementById(
-          'profile-settings-notifications'
-        );
-        if (audioSettings) {
-          // TODO [ref](https://github.com/chatwoot/chatwoot/pull/6233#discussion_r1069636890)
-          audioSettings.scrollIntoView(
-            { behavior: 'smooth', block: 'start' },
-            150
-          );
-        }
-      });
-    },
-    closeNotificationPanel() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="modal-mask">
-    <div
-      v-on-clickaway="closeNotificationPanel"
-      class="flex-col h-[90vh] w-[32.5rem] flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
-    >
-      <div
-        class="flex flex-row items-center justify-between w-full px-6 pt-5 pb-3 border-b border-solid border-slate-50 dark:border-slate-700"
-      >
-        <div class="flex items-center">
-          <span class="text-xl font-bold text-slate-800 dark:text-slate-100">
-            {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.TITLE') }}
-          </span>
-          <span
-            v-if="totalUnreadNotifications"
-            class="px-2 py-1 ml-2 mr-2 font-semibold rounded-md text-slate-700 dark:text-slate-200 text-xxs bg-slate-50 dark:bg-slate-700"
-          >
-            {{ totalUnreadNotifications }}
-          </span>
-        </div>
-        <div class="flex gap-2">
-          <NextButton
-            v-if="!noUnreadNotificationAvailable"
-            faded
-            xs
-            icon="i-lucide-list-check"
-            :is-loading="uiFlags.isUpdating"
-            :label="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
-            @click="onMarkAllDoneClick"
-          />
-          <NextButton
-            faded
-            xs
-            slate
-            icon="i-lucide-settings"
-            @click="openAudioNotificationSettings"
-          />
-          <NextButton
-            ghost
-            xs
-            slate
-            icon="i-lucide-x"
-            @click="closeNotificationPanel"
-          />
-        </div>
-      </div>
-      <NotificationPanelList
-        :notifications="getUnreadNotifications"
-        :is-loading="uiFlags.isFetching"
-        :on-click-notification="openConversation"
-        :in-last-page="inLastPage"
-        @close="closeNotificationPanel"
-      />
-      <div
-        v-if="records.length !== 0"
-        class="flex items-center justify-between px-5 py-1"
-      >
-        <div class="flex">
-          <NextButton
-            ghost
-            slate
-            icon="i-lucide-chevrons-left"
-            :disabled="inFirstPage"
-            @click="onClickFirstPage"
-          />
-          <NextButton
-            ghost
-            slate
-            icon="i-lucide-chevron-left"
-            class="ltr:-ml-3 rtl:-mr-3"
-            :disabled="inFirstPage"
-            @click="onClickPreviousPage"
-          />
-        </div>
-        <span class="font-semibold text-xxs text-slate-500 dark:text-slate-400">
-          {{ currentPage }} - {{ lastPage }}
-        </span>
-        <div class="flex">
-          <NextButton
-            ghost
-            slate
-            icon="i-lucide-chevron-right"
-            class="ltr:-mr-3 rtl:-ml-3"
-            :disabled="inLastPage"
-            @click="onClickNextPage"
-          />
-          <NextButton
-            ghost
-            slate
-            icon="i-lucide-chevrons-right"
-            :disabled="inLastPage"
-            @click="onClickLastPage"
-          />
-        </div>
-      </div>
-      <div v-else />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
deleted file mode 100644
index 1ef18548f..000000000
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    Thumbnail,
-    NextButton,
-  },
-  props: {
-    notificationItem: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: ['openNotification'],
-  computed: {
-    notificationAssignee() {
-      const { primary_actor: primaryActor } = this.notificationItem;
-      return primaryActor?.meta?.assignee;
-    },
-    hasNotificationAssignee() {
-      return !!this.notificationAssignee;
-    },
-    notificationAssigneeName() {
-      return this.notificationAssignee?.name || '';
-    },
-    notificationAssigneeThumbnail() {
-      return this.notificationAssignee?.thumbnail || '';
-    },
-  },
-  methods: {
-    dynamicTime,
-    onClickOpenNotification() {
-      this.$emit('openNotification', this.notificationItem);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="w-full">
-    <NextButton
-      link
-      slate
-      class="!w-full !h-auto"
-      @click="onClickOpenNotification()"
-    >
-      <div
-        class="flex-row items-center p-2.5 leading-[1.4] border-b border-solid border-slate-50 dark:border-slate-700 flex w-full hover:bg-slate-75 dark:hover:bg-slate-900 hover:rounded-md"
-      >
-        <div
-          v-if="!notificationItem.read_at"
-          class="w-2 h-2 rounded-full bg-woot-500"
-        />
-        <div v-else class="flex w-2" />
-        <div
-          class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
-        >
-          <div class="flex justify-between">
-            <div class="flex items-center">
-              <span class="font-bold text-slate-800 dark:text-slate-100">
-                {{
-                  `#${
-                    notificationItem.primary_actor
-                      ? notificationItem.primary_actor.id
-                      : $t(`NOTIFICATIONS_PAGE.DELETE_TITLE`)
-                  }`
-                }}
-              </span>
-              <span
-                class="text-xxs p-0.5 px-1 my-0 mx-2 bg-slate-50 dark:bg-slate-700 rounded-md"
-              >
-                {{
-                  $t(
-                    `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
-                  )
-                }}
-              </span>
-            </div>
-            <div v-if="hasNotificationAssignee">
-              <Thumbnail
-                :src="notificationAssigneeThumbnail"
-                size="16px"
-                :username="notificationAssigneeName"
-              />
-            </div>
-          </div>
-          <div class="flex w-full">
-            <span
-              class="overflow-hidden font-normal text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
-            >
-              {{ notificationItem.push_message_title }}
-            </span>
-          </div>
-          <span
-            class="flex mt-1 font-semibold text-slate-500 dark:text-slate-400 text-xxs"
-          >
-            {{ dynamicTime(notificationItem.last_activity_at) }}
-          </span>
-        </div>
-      </div>
-    </NextButton>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
deleted file mode 100644
index a8bf0d0d4..000000000
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import NotificationPanelItem from './NotificationPanelItem.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    NotificationPanelItem,
-    Spinner,
-    EmptyState,
-    NextButton,
-  },
-  props: {
-    notifications: {
-      type: Array,
-      default: () => [],
-    },
-    isLoading: {
-      type: Boolean,
-      default: true,
-    },
-    onClickNotification: {
-      type: Function,
-      default: () => {},
-    },
-    inLastPage: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['close'],
-  computed: {
-    showEmptyResult() {
-      return !this.isLoading && this.notifications.length === 0;
-    },
-  },
-  methods: {
-    openNotificationPage() {
-      if (this.$route.name !== 'notifications_index') {
-        this.$router.push({
-          name: 'notifications_index',
-        });
-      }
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
-    <NotificationPanelItem
-      v-for="notificationItem in notifications"
-      v-show="!isLoading"
-      :key="notificationItem.id"
-      :notification-item="notificationItem"
-      @open-notification="onClickNotification"
-    />
-    <EmptyState
-      v-if="showEmptyResult"
-      :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
-    />
-    <NextButton
-      v-if="!isLoading && inLastPage"
-      ghost
-      class="!w-full mt-3"
-      :label="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS')"
-      @click="openNotificationPage"
-    />
-    <div
-      v-if="isLoading"
-      class="flex items-center justify-center mx-2 my-12 text-sm font-medium"
-    >
-      <Spinner />
-      <span>{{
-        $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
-      }}</span>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index b7b59c445..ce234cc54 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -66,7 +66,7 @@ export default {
         @click="onMarkAllDoneClick"
       />
     </div>
-    <table class="woot-table notifications-table overflow-auto">
+    <table class="notifications-table overflow-auto">
       <tbody v-show="!isLoading">
         <tr
           v-for="notificationItem in notifications"
@@ -74,9 +74,10 @@ export default {
           :class="{
             'is-unread': notificationItem.read_at === null,
           }"
+          class="border-b border-n-weak"
           @click="() => onClickNotification(notificationItem)"
         >
-          <td>
+          <td class="p-2.5 text-n-slate-12">
             <div
               class="overflow-hidden flex-view notification-contant--wrap whitespace-nowrap text-ellipsis"
             >
@@ -109,12 +110,12 @@ export default {
             <Thumbnail
               v-if="notificationItem.primary_actor.meta.assignee"
               :src="notificationItem.primary_actor.meta.assignee.thumbnail"
-              size="36px"
+              size="28px"
               :username="notificationItem.primary_actor.meta.assignee.name"
             />
           </td>
           <td>
-            <div class="text-right timestamp--column">
+            <div class="text-right timestamp--column ltr:mr-2 rtl:ml-2">
               <span class="notification--created-at">
                 {{ dynamicTime(notificationItem.last_activity_at) }}
               </span>
@@ -141,10 +142,8 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'dashboard/assets/scss/mixins';
-
 .notification--title {
-  @apply text-sm m-0 text-slate-800 dark:text-slate-100;
+  @apply text-sm m-0 text-n-slate-12;
 }
 
 .notifications-table {
@@ -153,11 +152,11 @@ export default {
       @apply cursor-pointer;
 
       &:hover {
-        @apply bg-slate-50 dark:bg-slate-800;
+        @apply bg-n-slate-3;
       }
 
       &.is-active {
-        @apply bg-slate-100 dark:bg-slate-700;
+        @apply bg-n-slate-4 dark:bg-n-slate-6;
       }
 
       > td {
@@ -182,11 +181,11 @@ export default {
 }
 
 .notification--unread-indicator {
-  @apply w-2.5 h-2.5 rounded-full bg-woot-500 dark:bg-woot-500;
+  @apply w-2.5 h-2.5 rounded-full bg-n-brand;
 }
 
 .notification--created-at {
-  @apply text-slate-700 dark:text-slate-200 text-xs;
+  @apply text-n-slate-11 text-xs;
 }
 
 .notification--type {
@@ -206,6 +205,6 @@ export default {
 }
 
 .notification--message-title {
-  @apply text-slate-700 dark:text-slate-100;
+  @apply text-n-slate-12;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
index 0013ec42a..67805e0e3 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
@@ -68,7 +68,7 @@ export default {
         :on-mark-all-done-click="onMarkAllDoneClick"
       />
       <TableFooter
-        class="border-t border-slate-75 dark:border-slate-700/50"
+        class="border-t border-n-weak"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"
@@ -77,17 +77,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.notification--page {
-  background: var(--white);
-  overflow-y: auto;
-  width: 100%;
-}
-
-.notification--content {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/routes.js b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
index 0e532362d..76293f347 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -11,7 +11,6 @@ export const routes = [
       headerTitle: '',
       icon: '',
       showNewButton: false,
-      showSidemenuIcon: false,
     },
     children: [
       {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index b5772db54..ec51744ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -35,10 +35,6 @@ export default {
       type: String,
       default: '',
     },
-    showSidemenuIcon: {
-      type: Boolean,
-      default: true,
-    },
   },
   setup() {
     const { isAdmin } = useAdmin();
@@ -59,7 +55,6 @@ export default {
     class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-background"
   >
     <h1 class="flex items-center mb-0 text-2xl text-n-slate-12">
-      <woot-sidemenu-icon v-if="showSidemenuIcon" />
       <BackButton
         v-if="showBackButton"
         :button-label="backButtonLabel"
@@ -68,7 +63,7 @@ export default {
       />
 
       <slot />
-      <span class="text-xl font-medium text-slate-900 dark:text-slate-100">
+      <span class="text-xl font-medium text-n-slate-12">
         {{ headerTitle }}
       </span>
     </h1>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
index 4202c687b..44bad28c1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
@@ -30,7 +30,7 @@ defineProps({
       </slot>
       <p
         v-else-if="noRecordsFound"
-        class="flex-1 py-20 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
+        class="flex-1 py-20 text-n-slate-12 flex items-center justify-center text-base"
       >
         {{ noRecordsMessage }}
       </p>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
index ab84902b3..329f1f750 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -9,14 +9,12 @@ export default {
 
 <template>
   <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"
-    >
+    <h2 class="text-xl font-medium mb-1 text-n-slate-12 break-words">
       {{ headerTitle }}
     </h2>
     <p
       v-dompurify-html="headerContent"
-      class="text-sm w-full text-slate-600 dark:text-slate-300"
+      class="text-sm w-full text-n-slate-11"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 7bd67b8ab..c8e7cebab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -11,7 +11,6 @@ const props = defineProps({
   newButtonRoutes: { type: Array, default: () => [] },
   showBackButton: { type: Boolean, default: false },
   backUrl: { type: [String, Object], default: '' },
-  showSidemenuIcon: { type: Boolean, default: true },
   fullWidth: { type: Boolean, default: false },
 });
 
@@ -45,7 +44,6 @@ const showSettingsHeader = computed(
         :show-back-button="showBackButton"
         :back-url="backUrl"
         :show-new-button="showNewButton"
-        :show-sidemenu-icon="showSidemenuIcon"
         class="sticky top-0 z-20"
         :class="{ 'max-w-6xl w-full mx-auto': fullWidth }"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/components/AccountDelete.vue b/app/javascript/dashboard/routes/dashboard/settings/account/components/AccountDelete.vue
index 66c969a0a..b57680fca 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/components/AccountDelete.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/components/AccountDelete.vue
@@ -106,9 +106,7 @@ async function clearDeletionMark() {
     with-border
   >
     <div v-if="isMarkedForDeletion">
-      <div
-        class="p-4 flex-grow-0 flex-shrink-0 flex-[50%] bg-red-50 dark:bg-red-900 rounded"
-      >
+      <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%] bg-n-ruby-4 rounded">
         <p class="mb-4">
           {{ markedForDeletionMessage }}
         </p>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 8a2e46655..bd44d9e7b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -159,7 +159,7 @@ const confirmDeletion = () => {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="divide-y divide-slate-75 dark:divide-slate-700">
+      <table class="divide-y divide-n-weak">
         <tbody class="divide-y divide-n-weak text-n-slate-11">
           <tr v-for="(agent, index) in agentList" :key="agent.email">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
@@ -190,7 +190,7 @@ const confirmDeletion = () => {
                 {{ getAgentRoleName(agent) }}
 
                 <div
-                  class="absolute left-0 z-10 hidden max-w-[300px] w-auto bg-white rounded-xl border border-slate-50 shadow-lg top-14 md:top-12 dark:bg-slate-800 dark:border-slate-700"
+                  class="absolute left-0 z-10 hidden max-w-[300px] w-auto bg-white rounded-xl border border-n-weak shadow-lg top-14 md:top-12 dark:bg-n-solid-2"
                   :class="{ 'group-hover:block': agent.custom_role_id }"
                 >
                   <div class="flex flex-col gap-1 p-4">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index cb59d059d..c0b388ce1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -246,7 +246,10 @@ export default {
               @close="onTouch"
               @tag="addTagValue"
             />
-            <label v-show="isMultiselectInvalid" class="error-message">
+            <label
+              v-show="isMultiselectInvalid"
+              class="text-n-ruby-9 dark:text-n-ruby-9 text-sm font-normal mt-1"
+            >
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
             </label>
           </div>
@@ -296,26 +299,12 @@ export default {
 
 <style lang="scss" scoped>
 .key-value {
-  padding: 0 var(--space-small) var(--space-small) 0;
+  padding: 0 0.5rem 0.5rem 0;
   font-family: monospace;
 }
 
 .multiselect--wrap {
-  margin-bottom: var(--space-normal);
-
-  .error-message {
-    color: var(--r-400);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-normal);
-  }
-
-  .invalid {
-    ::v-deep {
-      .multiselect__tags {
-        border: 1px solid var(--r-400);
-      }
-    }
-  }
+  margin-bottom: 1rem;
 }
 
 ::v-deep {
@@ -328,7 +317,7 @@ export default {
   }
 
   .multiselect--active .multiselect__tags {
-    border-radius: var(--border-radius-normal);
+    border-radius: 0.3125rem;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 2e120c1e0..420edafce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -100,9 +100,7 @@ const tableHeaders = computed(() => {
           {{ tableHeader }}
         </th>
       </thead>
-      <tbody
-        class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
-      >
+      <tbody class="divide-y divide-n-weak flex-1 text-n-slate-12">
         <tr v-for="attribute in attributes" :key="attribute.attribute_key">
           <td
             class="py-4 ltr:pr-4 rtl:pl-4 overflow-hidden whitespace-nowrap text-ellipsis"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
index 64372ef8a..712d65588 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -236,7 +236,10 @@ export default {
             taggable
             @tag="addTagValue"
           />
-          <label v-show="isMultiselectInvalid" class="error-message">
+          <label
+            v-show="isMultiselectInvalid"
+            class="text-n-ruby-9 dark:text-n-ruby-9 text-sm font-normal mt-1"
+          >
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
           </label>
         </div>
@@ -286,26 +289,12 @@ export default {
 
 <style lang="scss" scoped>
 .key-value {
-  padding: 0 var(--space-small) var(--space-small) 0;
+  padding: 0 0.5rem 0.5rem 0;
   font-family: monospace;
 }
 
 .multiselect--wrap {
-  margin-bottom: var(--space-normal);
-
-  .error-message {
-    color: var(--r-400);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-normal);
-  }
-
-  .invalid {
-    ::v-deep {
-      .multiselect__tags {
-        border: 1px solid var(--r-400);
-      }
-    }
-  }
+  margin-bottom: 1rem;
 }
 
 ::v-deep {
@@ -318,7 +307,7 @@ export default {
   }
 
   .multiselect--active .multiselect__tags {
-    border-radius: var(--border-radius-normal);
+    border-radius: 0.3125rem;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 77d9df74e..636892005 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -79,7 +79,7 @@ const onClickTabChange = index => {
     </template>
     <template #preBody>
       <woot-tabs
-        class="font-medium [&_.tabs]:p-0 mb-4"
+        class="font-medium [&_ul]:p-0 mb-4"
         :index="selectedTabIndex"
         @change="onClickTabChange"
       >
@@ -89,6 +89,7 @@ const onClickTabChange = index => {
           :index="index"
           :name="tab.name"
           :show-badge="false"
+          is-compact
         />
       </woot-tabs>
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index 13c7521d4..f98297f21 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -83,7 +83,7 @@ const tableHeaders = computed(() => {
       feature-name="audit_logs"
     />
 
-    <div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
+    <div class="mt-6 flex-1 text-n-slate-11">
       <woot-loading-state
         v-if="uiFlags.fetchingList"
         :message="$t('AUDIT_LOGS.LOADING')"
@@ -95,7 +95,7 @@ const tableHeaders = computed(() => {
         {{ $t('AUDIT_LOGS.LIST.404') }}
       </p>
       <div v-else class="min-w-full overflow-x-auto">
-        <table class="divide-y divide-slate-75 dark:divide-slate-700">
+        <table class="divide-y divide-n-weak">
           <thead>
             <th
               v-for="thHeader in tableHeaders"
@@ -128,7 +128,7 @@ const tableHeaders = computed(() => {
           :current-page="Number(meta.currentPage)"
           :total-count="meta.totalEntries"
           :page-size="meta.perPage"
-          class="border-slate-50 dark:border-slate-800 border-t !px-0 py-4"
+          class="border-n-weak border-t !px-0 py-4"
           @page-change="onPageChange"
         />
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index c92d0b1c8..1cd0e9069 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -215,7 +215,7 @@ export default {
           </label>
           <p
             v-if="hasAutomationMutated"
-            class="text-xs text-right text-green-500 pt-1 dark:text-green-500"
+            class="text-xs text-right text-n-teal-10 pt-1"
           >
             {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
           </p>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index 208fcf7ec..aac65302b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -337,7 +337,7 @@ export default {
     @apply m-0;
   }
   .info-message {
-    @apply text-xs text-green-500 dark:text-green-500 text-right;
+    @apply text-xs text-n-teal-10  text-right;
   }
 
   @apply mb-6;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 02e24287b..3d0e82d88 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -196,7 +196,7 @@ const tableHeaders = computed(() => {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+      <table class="min-w-full divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/constants.js b/app/javascript/dashboard/routes/dashboard/settings/automation/constants.js
index 18468e3ad..1b0f0599f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/constants.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/constants.js
@@ -32,6 +32,30 @@ export const AUTOMATIONS = {
         inputType: 'multi_select',
         filterOperators: OPERATOR_TYPES_1,
       },
+      {
+        key: 'status',
+        name: 'STATUS',
+        inputType: 'multi_select',
+        filterOperators: OPERATOR_TYPES_1,
+      },
+      {
+        key: 'assignee_id',
+        name: 'ASSIGNEE_NAME',
+        inputType: 'search_select',
+        filterOperators: OPERATOR_TYPES_3,
+      },
+      {
+        key: 'team_id',
+        name: 'TEAM_NAME',
+        inputType: 'search_select',
+        filterOperators: OPERATOR_TYPES_3,
+      },
+      {
+        key: 'priority',
+        name: 'PRIORITY',
+        inputType: 'multi_select',
+        filterOperators: OPERATOR_TYPES_1,
+      },
       {
         key: 'conversation_language',
         name: 'CONVERSATION_LANGUAGE',
@@ -82,7 +106,10 @@ export const AUTOMATIONS = {
         key: 'snooze_conversation',
         name: 'SNOOZE_CONVERSATION',
       },
-
+      {
+        key: 'open_conversation',
+        name: 'OPEN_CONVERSATION',
+      },
       {
         key: 'resolve_conversation',
         name: 'RESOLVE_CONVERSATION',
@@ -508,6 +535,11 @@ export const AUTOMATION_ACTION_TYPES = [
     label: 'RESOLVE_CONVERSATION',
     inputType: null,
   },
+  {
+    key: 'open_conversation',
+    label: 'OPEN_CONVERSATION',
+    inputType: null,
+  },
   {
     key: 'send_webhook_event',
     label: 'SEND_WEBHOOK_EVENT',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 474439663..216aa1923 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -141,14 +141,11 @@ const tableHeaders = computed(() => {
       />
       <p
         v-else-if="!records.length"
-        class="flex flex-col items-center justify-center h-full text-base text-slate-600 dark:text-slate-300 py-8"
+        class="flex flex-col items-center justify-center h-full text-base text-n-slate-11 py-8"
       >
         {{ $t('CANNED_MGMT.LIST.404') }}
       </p>
-      <table
-        v-else
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
-      >
+      <table v-else class="min-w-full overflow-x-auto divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index 1d42b7972..3b8dfed7c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -51,10 +51,10 @@ const openInNewTab = url => {
       <div class="flex items-center gap-3">
         <div
           v-if="iconName"
-          class="flex items-center w-10 h-10 p-1 rounded-full bg-woot-25/60 dark:bg-woot-900/60"
+          class="flex items-center w-10 h-10 p-1 rounded-full bg-n-blue-2"
         >
           <div
-            class="flex items-center justify-center w-full h-full rounded-full bg-woot-75/70 dark:bg-woot-800/40"
+            class="flex items-center justify-center w-full h-full rounded-full bg-n-blue-3"
           >
             <fluent-icon
               size="14"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
index 3f86b0727..6c4a10636 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
@@ -21,7 +21,7 @@ defineProps({
           class="flex items-center justify-between w-full gap-3 sm:justify-normal whitespace-nowrap"
         >
           <h3
-            class="justify-between tracking-tight font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
+            class="justify-between tracking-tight font-medium truncate w-fit sm:justify-normal text-n-slate-12"
           >
             <slot name="title">
               {{ title }}
@@ -29,9 +29,7 @@ defineProps({
           </h3>
           <slot name="label" />
         </div>
-        <p
-          class="text-base text-slate-600 dark:text-slate-300 max-w-[25rem] w-full line-clamp-2"
-        >
+        <p class="text-base text-n-slate-11 max-w-[25rem] w-full line-clamp-2">
           <slot name="description">
             {{ description }}
           </slot>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
index 0d2316c21..501313010 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
@@ -147,15 +147,12 @@ const confirmDeletion = () => {
 
     <template #body>
       <CustomRolePaywall v-if="isBehindAPaywall" />
-      <table
-        v-else
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
-      >
+      <table v-else class="min-w-full overflow-x-auto divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 ltr:pr-4 rtl:pl-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-n-slate-11"
           >
             <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 cddbddd32..ed67a0636 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
@@ -186,7 +186,7 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="w-full">
-        <label :class="{ 'text-red-500': v$.selectedPermissions.$error }">
+        <label :class="{ 'text-n-ruby-9': v$.selectedPermissions.$error }">
           {{ $t('CUSTOM_ROLE.FORM.PERMISSIONS.LABEL') }}
         </label>
         <div class="flex flex-col gap-2.5 mb-4 mt-2">
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 aefe281ff..7e8b6f255 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 ltr:pr-4 rtl:pl-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-n-slate-11"
         >
           <span class="mb-0">
             {{ thHeader }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelFactory.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelFactory.vue
index 7ea58e3e5..609365e20 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelFactory.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelFactory.vue
@@ -10,6 +10,7 @@ import Whatsapp from './channels/Whatsapp.vue';
 import Line from './channels/Line.vue';
 import Telegram from './channels/Telegram.vue';
 import Instagram from './channels/Instagram.vue';
+import Voice from './channels/Voice.vue';
 
 const channelViewList = {
   facebook: Facebook,
@@ -22,6 +23,7 @@ const channelViewList = {
   line: Line,
   telegram: Telegram,
   instagram: Instagram,
+  voice: Voice,
 };
 
 export default defineComponent({
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 8482dabc2..0a4fbc7f3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -36,6 +36,7 @@ export default {
         { key: 'telegram', name: 'Telegram' },
         { key: 'line', name: 'Line' },
         { key: 'instagram', name: 'Instagram' },
+        { key: 'voice', name: 'Voice' },
       ];
     },
     ...mapGetters({
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
index fcac0648e..f6d0707af 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -114,11 +114,11 @@ export default {
           />
         </div>
         <div v-if="isWhatsAppCloudInbox" class="w-[50%] max-w-[50%] ml-[25%]">
-          <p class="mt-8 font-medium text-slate-700 dark:text-slate-200">
+          <p class="mt-8 font-medium text-n-slate-11">
             {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_URL') }}
           </p>
           <woot-code lang="html" :script="currentInbox.callback_webhook_url" />
-          <p class="mt-8 font-medium text-slate-700 dark:text-slate-200">
+          <p class="mt-8 font-medium text-n-slate-11">
             {{
               $t(
                 'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_VERIFICATION_TOKEN'
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index f7ce40f66..aae2263a7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -88,9 +88,7 @@ const openDelete = inbox => {
     </template>
     <template #body>
       <table class="min-w-full overflow-x-auto">
-        <tbody
-          class="divide-y divide-n-weak flex-1 text-slate-700 dark:text-slate-100"
-        >
+        <tbody class="divide-y divide-n-weak flex-1 text-n-slate-12">
           <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">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
index cf7048c29..8936558ee 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
@@ -42,7 +42,7 @@ export default {
     @end="onDragEnd"
   >
     <template #item="{ element: item }">
-      <tr>
+      <tr class="border-b border-n-weak">
         <td class="pre-chat-field"><fluent-icon icon="drag" /></td>
         <td class="pre-chat-field">
           <woot-switch
@@ -98,14 +98,14 @@ export default {
 
 <style scoped lang="scss">
 .pre-chat-field {
-  @apply py-4 px-2 text-slate-700 dark:text-slate-100;
+  @apply py-4 px-2 text-n-slate-12;
 
   svg {
     @apply flex items-center;
   }
 }
 .disabled-text {
-  @apply text-slate-500 dark:text-slate-400;
+  @apply text-n-slate-11;
 }
 
 table {
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 0d0e49567..bb7274db0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -127,9 +127,11 @@ export default {
         </div>
         <div class="mt-4">
           <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
-          <table class="table w-full table-striped woot-table">
+          <table class="table w-full table-striped mt-4">
             <thead class="thead-dark">
-              <tr>
+              <tr
+                class="[&>th]:font-semibold [&>th]:tracking-[1px] ltr:[&>th]:text-left rtl:[&>th]:text-right [&>th]:px-2.5 [&>th]:uppercase [&>th]:text-n-slate-12"
+              >
                 <th scope="col" />
                 <th scope="col" />
                 <th scope="col">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index a3bb9f3f4..a3f60c6d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -390,7 +390,7 @@ export default {
       :header-title="inboxName"
     >
       <woot-tabs
-        class="settings--tabs"
+        class="[&_ul]:p-0"
         :index="selectedTabIndex"
         :border="false"
         @change="onTabChange"
@@ -401,6 +401,7 @@ export default {
           :index="index"
           :name="tab.name"
           :show-badge="false"
+          is-compact
         />
       </woot-tabs>
     </SettingIntroBanner>
@@ -814,11 +815,3 @@ export default {
     </section>
   </div>
 </template>
-
-<style scoped lang="scss">
-.settings--tabs {
-  ::v-deep .tabs {
-    @apply p-0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index 9e88287e0..08ad90a92 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -408,7 +408,7 @@ export default {
         />
         <div
           v-if="isWidgetPreview"
-          class="flex flex-col items-center justify-end min-h-[40.625rem] mx-5 mb-5 p-2.5 bg-slate-50 dark:bg-slate-900/50 rounded-lg"
+          class="flex flex-col items-center justify-end min-h-[40.625rem] mx-5 mb-5 p-2.5 bg-n-slate-3 rounded-lg"
         >
           <Widget
             :welcome-heading="welcomeHeading"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue
index 83620b496..bcdeafcc9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue
@@ -65,7 +65,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 p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <div class="flex flex-col items-center justify-start h-full text-center">
       <div v-if="hasError" class="max-w-lg mx-auto text-center">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Voice.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Voice.vue
new file mode 100644
index 000000000..e19ad23bb
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Voice.vue
@@ -0,0 +1,184 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import { isPhoneE164 } from 'shared/helpers/Validators';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const router = useRouter();
+
+const state = reactive({
+  phoneNumber: '',
+  accountSid: '',
+  authToken: '',
+  apiKeySid: '',
+  apiKeySecret: '',
+  twimlAppSid: '',
+});
+
+const uiFlags = useMapGetter('inboxes/getUIFlags');
+
+const validationRules = {
+  phoneNumber: { required, isPhoneE164 },
+  accountSid: { required },
+  authToken: { required },
+  apiKeySid: { required },
+  apiKeySecret: { required },
+  twimlAppSid: { required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+const formErrors = computed(() => ({
+  phoneNumber: v$.value.phoneNumber?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.ERROR')
+    : '',
+  accountSid: v$.value.accountSid?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.REQUIRED')
+    : '',
+  authToken: v$.value.authToken?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.REQUIRED')
+    : '',
+  apiKeySid: v$.value.apiKeySid?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.REQUIRED')
+    : '',
+  apiKeySecret: v$.value.apiKeySecret?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.REQUIRED')
+    : '',
+  twimlAppSid: v$.value.twimlAppSid?.$error
+    ? t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.REQUIRED')
+    : '',
+}));
+
+function getProviderConfig() {
+  const config = {
+    account_sid: state.accountSid,
+    auth_token: state.authToken,
+    api_key_sid: state.apiKeySid,
+    api_key_secret: state.apiKeySecret,
+  };
+  if (state.twimlAppSid) config.outgoing_application_sid = state.twimlAppSid;
+  return config;
+}
+
+async function createChannel() {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  try {
+    const channel = await store.dispatch('inboxes/createVoiceChannel', {
+      name: `Voice (${state.phoneNumber})`,
+      voice: {
+        phone_number: state.phoneNumber,
+        provider: 'twilio',
+        provider_config: getProviderConfig(),
+      },
+    });
+
+    router.replace({
+      name: 'settings_inboxes_add_agents',
+      params: { page: 'new', inbox_id: channel.id },
+    });
+  } catch (error) {
+    useAlert(
+      error.response?.data?.message ||
+        t('INBOX_MGMT.ADD.VOICE.API.ERROR_MESSAGE')
+    );
+  }
+}
+</script>
+
+<template>
+  <div
+    class="overflow-auto col-span-6 p-6 w-full h-full rounded-t-lg border border-b-0 border-n-weak bg-n-solid-1"
+  >
+    <PageHeader
+      :header-title="t('INBOX_MGMT.ADD.VOICE.TITLE')"
+      :header-content="t('INBOX_MGMT.ADD.VOICE.DESC')"
+    />
+
+    <form
+      class="flex flex-col gap-4 flex-wrap mx-0"
+      @submit.prevent="createChannel"
+    >
+      <Input
+        v-model="state.phoneNumber"
+        :label="t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.PHONE_NUMBER.PLACEHOLDER')"
+        :message="formErrors.phoneNumber"
+        :message-type="formErrors.phoneNumber ? 'error' : 'info'"
+        @blur="v$.phoneNumber?.$touch"
+      />
+
+      <Input
+        v-model="state.accountSid"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
+        :message="formErrors.accountSid"
+        :message-type="formErrors.accountSid ? 'error' : 'info'"
+        @blur="v$.accountSid?.$touch"
+      />
+
+      <Input
+        v-model="state.authToken"
+        type="password"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.AUTH_TOKEN.PLACEHOLDER')"
+        :message="formErrors.authToken"
+        :message-type="formErrors.authToken ? 'error' : 'info'"
+        @blur="v$.authToken?.$touch"
+      />
+
+      <Input
+        v-model="state.apiKeySid"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.LABEL')"
+        :placeholder="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SID.PLACEHOLDER')"
+        :message="formErrors.apiKeySid"
+        :message-type="formErrors.apiKeySid ? 'error' : 'info'"
+        @blur="v$.apiKeySid?.$touch"
+      />
+
+      <Input
+        v-model="state.apiKeySecret"
+        type="password"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.LABEL')"
+        :placeholder="
+          t('INBOX_MGMT.ADD.VOICE.TWILIO.API_KEY_SECRET.PLACEHOLDER')
+        "
+        :message="formErrors.apiKeySecret"
+        :message-type="formErrors.apiKeySecret ? 'error' : 'info'"
+        @blur="v$.apiKeySecret?.$touch"
+      />
+
+      <Input
+        v-model="state.twimlAppSid"
+        :label="t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.LABEL')"
+        :placeholder="
+          t('INBOX_MGMT.ADD.VOICE.TWILIO.TWIML_APP_SID.PLACEHOLDER')
+        "
+        :message="formErrors.twimlAppSid"
+        :message-type="formErrors.twimlAppSid ? 'error' : 'info'"
+        @blur="v$.twimlAppSid?.$touch"
+      />
+
+      <div>
+        <NextButton
+          :is-loading="uiFlags.isCreating"
+          :disabled="isSubmitDisabled"
+          :label="t('INBOX_MGMT.ADD.VOICE.SUBMIT_BUTTON')"
+          type="submit"
+        />
+      </div>
+    </form>
+  </div>
+</template>
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 ccbb06617..14ba5b371 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -193,14 +193,14 @@ export default {
         />
       </div>
       <div v-if="hasError" class="date-error pt-1">
-        <span class="error text-xs text-red-300 dark:text-red-500">{{
+        <span class="error text-xs text-n-ruby-9">{{
           $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR')
         }}</span>
       </div>
     </div>
     <div
       v-else
-      class="flex items-center flex-shrink-0 flex-grow text-sm text-slate-500 dark:text-slate-300"
+      class="flex items-center flex-shrink-0 flex-grow text-sm text-n-slate-11"
     >
       <span>
         {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.UNAVAILABLE') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue
index b7b0a2c1d..4ff8b1ab1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue
@@ -29,6 +29,7 @@ const i18nMap = {
   'Channel::Line': 'LINE',
   'Channel::Api': 'API',
   'Channel::Instagram': 'INSTAGRAM',
+  'Channel::Voice': 'VOICE',
 };
 
 const twilioChannelName = () => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
index ded4fb9d7..cf0d0d2c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue
@@ -43,22 +43,22 @@ export default {
 
 <style lang="scss" scoped>
 .radio-group-label {
-  margin-bottom: var(--space-smaller);
+  margin-bottom: 0.25rem;
 }
 .radio-group {
   display: inline-block;
-  margin-bottom: var(--space-small);
+  margin-bottom: 0.5rem;
 }
 .radio-group-item {
   float: left;
-  margin-right: var(--space-one);
+  margin-right: 0.625rem;
   .radio-group-item-label {
     display: flex;
     align-items: center;
     cursor: pointer;
 
     .radio-input {
-      margin: 0 var(--space-one) 0 0;
+      margin: 0 0.625rem 0 0;
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
index 2b5b23907..5c08b143b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
@@ -73,7 +73,7 @@ export default {
     <button
       v-for="keyOption in senderNameKeyOptions"
       :key="keyOption.key"
-      class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
+      class="text-n-slate-12 cursor-pointer p-0"
       @click="toggleSenderNameType(keyOption.key)"
     >
       <PreviewCard
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 758dfa1ff..83f2bed8c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -136,7 +136,7 @@ export default {
           />
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
         </label>
-        <p class="mb-4 text-slate-700 dark:text-slate-300">
+        <p class="mb-4 text-n-slate-11">
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
         </p>
         <div v-if="isBusinessHoursEnabled" class="mb-6">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
index e5018b1da..c234cb7ae 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -103,12 +103,10 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'dashboard/assets/scss/variables';
-
 .fb--login {
   img {
     max-width: 240px;
-    padding: $space-normal 0;
+    padding: 1rem 0;
   }
 }
 </style>
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 8f72894c2..d2ee47e48 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -170,10 +170,7 @@ export default {
         </p>
       </label>
 
-      <div
-        v-if="enableAutoAssignment && isEnterprise"
-        class="max-assignment-container"
-      >
+      <div v-if="enableAutoAssignment && isEnterprise" class="py-3">
         <woot-input
           v-model="maxAssignmentLimit"
           type="number"
@@ -196,13 +193,3 @@ export default {
     </SettingsSection>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import 'dashboard/assets/scss/variables';
-@import 'dashboard/assets/scss/mixins';
-
-.max-assignment-container {
-  padding-top: var(--space-slab);
-  padding-bottom: var(--space-slab);
-}
-</style>
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 a82321f1d..da8adc496 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -102,7 +102,7 @@ export default {
         />
       </template>
     </BaseSettingsHeader>
-    <div class="w-full overflow-x-auto text-slate-700 dark:text-slate-200">
+    <div class="w-full overflow-x-auto text-n-slate-11">
       <p
         v-if="!uiFlags.isFetching && !records.length"
         class="flex flex-col items-center justify-center h-full"
@@ -115,18 +115,18 @@ export default {
       />
       <table
         v-if="!uiFlags.isFetching && records.length"
-        class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
+        class="min-w-full divide-y divide-n-weak"
       >
         <thead>
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 ltr:pr-4 rtl:pl-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-n-slate-11"
           >
             {{ thHeader }}
           </th>
         </thead>
-        <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
+        <tbody class="divide-y divide-n-weak">
           <DashboardAppsRow
             v-for="(dashboardAppItem, index) in records"
             :key="dashboardAppItem.id"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
index d8e770d49..ddb5197e0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
@@ -78,8 +78,10 @@ export default {
       </template>
     </BaseSettingsHeader>
     <div class="w-full">
-      <table v-if="hasConnectedHooks" class="woot-table">
-        <thead>
+      <table v-if="hasConnectedHooks">
+        <thead
+          class="[&>th]:font-semibold [&>th]:tracking-[1px] ltr:[&>th]:text-left rtl:[&>th]:text-right [&>th]:px-2.5 [&>th]:uppercase [&>th]:text-n-slate-12"
+        >
           <th
             v-for="hookHeader in hookHeaders"
             :key="hookHeader"
@@ -92,7 +94,11 @@ export default {
           </th>
         </thead>
         <tbody>
-          <tr v-for="hook in hooks" :key="hook.id">
+          <tr
+            v-for="hook in hooks"
+            :key="hook.id"
+            class="border-b border-n-weak [&>td]:p-2.5 [&>td]:text-n-slate-12"
+          >
             <td
               v-for="property in hook.properties"
               :key="property"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
index c7b4cde1f..5fe350215 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
@@ -179,7 +179,7 @@ export default {
 }
 
 [data-invalid] .formkit-message {
-  @apply text-red-500 block text-xs font-normal my-1 w-full;
+  @apply text-n-ruby-9 block text-xs font-normal my-1 w-full;
 }
 
 .formkit-outer[data-type='checkbox'] .formkit-wrapper {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
new file mode 100644
index 000000000..c2d63ad22
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
@@ -0,0 +1,80 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import {
+  useFunctionGetter,
+  useMapGetter,
+  useStore,
+} from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+
+import ButtonNext from 'next/button/Button.vue';
+import notionClient from 'dashboard/api/notion_auth.js';
+
+import Integration from './Integration.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const integrationLoaded = ref(false);
+
+const integration = useFunctionGetter('integrations/getIntegration', 'notion');
+
+const uiFlags = useMapGetter('integrations/getUIFlags');
+
+const integrationAction = computed(() => {
+  if (integration.value.enabled) {
+    return 'disconnect';
+  }
+
+  return '';
+});
+
+const authorize = async () => {
+  const response = await notionClient.generateAuthorization();
+  const {
+    data: { url },
+  } = response;
+
+  window.location.href = url;
+};
+
+const initializeNotionIntegration = async () => {
+  await store.dispatch('integrations/get', 'notion');
+  integrationLoaded.value = true;
+};
+
+onMounted(() => {
+  initializeNotionIntegration();
+});
+</script>
+
+<template>
+  <div class="flex-grow flex-shrink p-4 overflow-auto mx-auto">
+    <div v-if="integrationLoaded && !uiFlags.isCreatingNotion">
+      <Integration
+        :integration-id="integration.id"
+        :integration-logo="integration.logo"
+        :integration-name="integration.name"
+        :integration-description="integration.description"
+        :integration-enabled="integration.enabled"
+        :integration-action="integrationAction"
+        :delete-confirmation-text="{
+          title: t('INTEGRATION_SETTINGS.NOTION.DELETE.TITLE'),
+          message: t('INTEGRATION_SETTINGS.NOTION.DELETE.MESSAGE'),
+        }"
+      >
+        <template #action>
+          <ButtonNext
+            faded
+            blue
+            :label="t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
+            @click="authorize"
+          />
+        </template>
+      </Integration>
+    </div>
+    <div v-else class="flex items-center justify-center flex-1">
+      <Spinner size="" color-scheme="primary" />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue
index f88769b91..304aa1724 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue
@@ -117,7 +117,7 @@ onMounted(() => {
         v-if="error"
         class="flex items-center justify-center flex-1 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow p-6"
       >
-        <p class="text-red-500">
+        <p class="text-n-ruby-9">
           {{ $t('INTEGRATION_SETTINGS.SHOPIFY.ERROR') }}
         </p>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
index f94f3640f..6639da4b4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -97,7 +97,7 @@ const updateIntegration = async () => {
       <div v-else class="inline-flex">
         <select
           v-model="selectedChannelId"
-          class="h-8 py-1 mr-4 text-xs leading-4 border border-yellow-300"
+          class="h-8 py-1 mr-4 text-xs leading-4 border border-n-amber-10"
         >
           <option value="">
             {{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.OPTION_LABEL') }}
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 81a654964..2c9a71d94 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -115,7 +115,7 @@ export default {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+      <table class="min-w-full divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"
@@ -125,9 +125,7 @@ export default {
             {{ thHeader }}
           </th>
         </thead>
-        <tbody
-          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
-        >
+        <tbody class="divide-y divide-n-weak flex-1 text-n-slate-12">
           <WebhookRow
             v-for="(webHookItem, index) in records"
             :key="webHookItem.id"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
index 1ff6244ba..e2bf986e0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -37,10 +37,10 @@ const subscribedEvents = computed(() => {
 <template>
   <tr>
     <td class="py-4 ltr:pr-4 rtl:pl-4">
-      <div class="font-medium break-words text-slate-700 dark:text-slate-100">
+      <div class="font-medium break-words text-n-slate-12">
         {{ webhook.url }}
       </div>
-      <div class="block mt-1 text-sm text-slate-500 dark:text-slate-400">
+      <div class="block mt-1 text-sm text-n-slate-11">
         <span class="font-medium">
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
         </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index e50eccb3a..bb700fc74 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -8,6 +8,7 @@ import DashboardApps from './DashboardApps/Index.vue';
 import Slack from './Slack.vue';
 import SettingsContent from '../Wrapper.vue';
 import Linear from './Linear.vue';
+import Notion from './Notion.vue';
 import Shopify from './Shopify.vue';
 
 export default {
@@ -90,6 +91,15 @@ export default {
           },
           props: route => ({ code: route.query.code }),
         },
+        {
+          path: 'notion',
+          name: 'settings_integrations_notion',
+          component: Notion,
+          meta: {
+            permissions: ['administrator'],
+          },
+          props: route => ({ code: route.query.code }),
+        },
         {
           path: 'shopify',
           name: 'settings_integrations_shopify',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 9f7faa889..7a2944a2c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -104,26 +104,20 @@ onBeforeMount(() => {
       </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 divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 font-semibold text-left ltr:pr-4 rtl:pl-4 text-slate-700 dark:text-slate-300"
+            class="py-4 font-semibold text-left ltr:pr-4 rtl:pl-4 text-n-slate-11"
           >
             {{ thHeader }}
           </th>
         </thead>
-        <tbody
-          class="flex-1 divide-y divide-slate-25 dark:divide-slate-800 text-slate-700 dark:text-slate-100"
-        >
+        <tbody class="flex-1 divide-y divide-n-weak text-n-slate-12">
           <tr v-for="(label, index) in records" :key="label.title">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <span
-                class="mb-1 font-medium break-words text-slate-700 dark:text-slate-100"
-              >
+              <span class="mb-1 font-medium break-words text-n-slate-12">
                 {{ label.title }}
               </span>
             </td>
@@ -131,7 +125,7 @@ onBeforeMount(() => {
             <td class="py-4 leading-6 ltr:pr-4 rtl:pl-4">
               <div class="flex items-center">
                 <span
-                  class="w-4 h-4 mr-1 border border-solid rounded rtl:mr-0 rtl:ml-1 border-slate-50 dark:border-slate-700"
+                  class="w-4 h-4 mr-1 border border-solid rounded rtl:mr-0 rtl:ml-1 border-n-weak"
                   :style="{ backgroundColor: label.color }"
                 />
                 {{ label.color }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 46579678d..c5ec47327 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -83,7 +83,7 @@ const tableHeaders = computed(() => {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+      <table class="min-w-full divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index e010b270c..687a14285 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -61,10 +61,10 @@ const dropdownValues = () => {
       sm
       slate
       icon="i-lucide-menu"
-      class="absolute cursor-move -left-10 mr-2 macros__node-drag-handle"
+      class="absolute cursor-move ltr:-left-10 rtl:-right-10 ltr:mr-2 rtl:ml-2 macros__node-drag-handle"
     />
     <div
-      class="flex-grow p-2 mr-2 rounded-md shadow-sm outline outline-1 outline-n-weak"
+      class="flex-grow p-2 ltr:mr-2 rtl:ml-2 rounded-md shadow-sm outline outline-1 outline-n-weak"
       :class="
         errorKey
           ? 'animate-shake bg-n-ruby-8/20 outline-n-ruby-5 dark:outline-n-ruby-5'
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index 855aae9d3..dd7b3a47b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -118,33 +118,26 @@ export default {
 
 .macro__node:not(:last-child) {
   position: relative;
-  padding-bottom: var(--space-large);
+  padding-bottom: 2rem;
 }
 
 .macro__node:not(:last-child):not(.sortable-chosen):after,
 .macros__nodes-draggable:after {
-  content: '';
-  position: absolute;
-  height: var(--space-large);
-  width: var(--space-smaller);
-  margin-left: var(--space-medium);
-
-  border-left: 1px dashed var(--s-500);
+  @apply border-l dark:border-n-blue-11 border-n-blue-7 border-dashed ltr:ml-6 rtl:mr-6 absolute h-8 w-1 content-[""];
 }
 
 .macros__nodes-draggable {
   position: relative;
-  padding-bottom: var(--space-large);
+  padding-bottom: 2rem;
 }
 
 .macros__node-action-container {
   position: relative;
   .drag-handle {
     position: absolute;
-    left: var(--space-minus-medium);
-    top: var(--space-smaller);
+    left: -1.5rem;
+    top: 0.25rem;
     cursor: move;
-    color: var(--s-400);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index 1d5c80579..c4de2b2c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -20,8 +20,8 @@ export default {
   methods: {
     isActive(key) {
       return this.macroVisibility === key
-        ? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
-        : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
+        ? 'bg-n-blue-2 dark:bg-n-blue-1 border-n-blue-3 dark:border-n-blue-4'
+        : 'bg-white dark:bg-n-solid-2 border-n-weak dark:border-n-strong';
     },
     onUpdateName(value) {
       this.$emit('update:name', value);
@@ -48,9 +48,7 @@ export default {
       />
     </div>
     <div class="mt-2">
-      <p
-        class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
-      >
+      <p class="block m-0 text-sm font-medium leading-[1.8] text-n-slate-12">
         {{ $t('MACROS.EDITOR.VISIBILITY.LABEL') }}
       </p>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
@@ -63,14 +61,14 @@ export default {
             v-if="macroVisibility === 'global'"
             icon="checkmark-circle"
             type="solid"
-            class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
+            class="absolute text-n-brand top-2 right-2"
           />
           <p
-            class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
+            class="block m-0 text-sm font-medium leading-[1.8] text-n-slate-12"
           >
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
           </p>
-          <p class="text-xs text-slate-500 dark:text-slate-200">
+          <p class="text-xs text-n-slate-11">
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.DESCRIPTION') }}
           </p>
         </button>
@@ -83,14 +81,14 @@ export default {
             v-if="macroVisibility === 'personal'"
             icon="checkmark-circle"
             type="solid"
-            class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
+            class="absolute text-n-brand top-2 right-2"
           />
           <p
-            class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
+            class="block m-0 text-sm font-medium leading-[1.8] text-n-slate-12"
           >
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
           </p>
-          <p class="text-xs text-slate-500 dark:text-slate-200">
+          <p class="text-xs text-n-slate-11">
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.DESCRIPTION') }}
           </p>
         </button>
@@ -99,9 +97,7 @@ export default {
         class="mt-2 flex items-start p-2 bg-n-slate-3 dark:bg-n-solid-3 rounded-md"
       >
         <fluent-icon icon="info" size="16" class="flex-shrink-0 mt-0.5" />
-        <p
-          class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-slate-600 dark:text-slate-200"
-        >
+        <p class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-n-slate-11">
           {{ $t('MACROS.ORDER_INFO') }}
         </p>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
index 5b0b43fac..027492629 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue
@@ -33,7 +33,7 @@ const onReset = () => {
   <div class="flex flex-row justify-between gap-4">
     <woot-input
       name="access_token"
-      class="flex-1 [&>input]:!py-1.5 ltr:[&>input]:!pr-9 ltr:[&>input]:!pl-3 rtl:[&>input]:!pl-9 rtl:[&>input]:!pr-3 focus:[&>input]:!border-slate-200 focus:[&>input]:dark:!border-slate-600 [&>input]:cursor-not-allowed relative"
+      class="flex-1 [&>input]:!py-1.5 ltr:[&>input]:!pr-9 ltr:[&>input]:!pl-3 rtl:[&>input]:!pl-9 rtl:[&>input]:!pr-3 focus:[&>input]:!border-n-weak [&>input]:cursor-not-allowed relative"
       :styles="{
         borderRadius: '12px',
         fontSize: '14px',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
index 898d9afb6..a83cecaa4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
@@ -20,7 +20,7 @@ const onChange = (id, value) => {
 <template>
   <div>
     <label
-      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
+      class="flex justify-between pb-1 text-sm font-medium leading-6 text-n-slate-12"
     >
       {{ label }}
     </label>
@@ -37,7 +37,7 @@ const onChange = (id, value) => {
           @update="onChange"
         />
         <label
-          class="text-sm font-normal text-ash-900"
+          class="text-sm font-normal text-n-slate-12"
           :for="`checkbox-condition-${item.value}`"
         >
           {{ item.label }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
index 890956f7e..9a9415d48 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertEvent.vue
@@ -70,7 +70,7 @@ const alertDescription = computed(() => {
 
 <template>
   <div>
-    <label class="pb-1 text-sm font-medium leading-6 text-ash-900">
+    <label class="pb-1 text-sm font-medium leading-6 text-n-slate-12">
       {{ label }}
     </label>
     <div class="grid gap-3 mt-2">
@@ -86,7 +86,7 @@ const alertDescription = computed(() => {
         />
         <label
           :for="`checkbox-${option.value}`"
-          class="text-sm text-ash-900 font-normal"
+          class="text-sm text-n-slate-12 font-normal"
         >
           {{
             $t(
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
index 4ec8183d7..c0ed9000a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
@@ -86,7 +86,7 @@ const playAudio = async () => {
       v-tooltip.top="
         $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.PLAY')
       "
-      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-ash-200 ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-primary-500 flex-shrink-0 mt-[1.75rem]"
+      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-n-weak ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-n-brand flex-shrink-0 mt-[1.75rem]"
       @click="playAudio"
     >
       <Icon icon="i-lucide-volume-2" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
index 6ee5108ac..3e9d93181 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
@@ -3,11 +3,11 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
-import FormButton from 'v3/components/Form/Button.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
-    FormButton,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -130,15 +130,13 @@ export default {
         @blur="v$.passwordConfirmation.$touch"
       />
 
-      <FormButton
-        type="submit"
-        color-scheme="primary"
-        variant="solid"
-        size="large"
-        :disabled="isButtonDisabled"
-      >
-        {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
-      </FormButton>
+      <div>
+        <NextButton
+          type="submit"
+          :label="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT')"
+          :disabled="isButtonDisabled"
+        />
+      </div>
     </div>
   </form>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
index f652adeb0..cab54d43a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
@@ -27,13 +27,13 @@ defineProps({
   <button
     class="flex flex-col gap-4 w-full h-fit p-4 rounded-md border border-n-weak dark:border-n-weak"
     :class="{
-      'border-primary-300 ': active,
+      'border-n-brand ': active,
     }"
   >
     <div class="flex flex-col gap-2 items-center w-full rounded-t-[5px]">
       <div class="grid grid-cols-[1fr_auto] items-center w-full gap-1">
         <div
-          class="overflow-hidden text-base font-medium text-ash-900 text-left"
+          class="overflow-hidden text-base font-medium text-n-slate-12 text-left"
         >
           <span class="block truncate">{{ title }}</span>
         </div>
@@ -41,10 +41,12 @@ defineProps({
           :checked="active"
           type="radio"
           :name="`hotkey-${title}`"
-          class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-5 h-5 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-primary-600"
+          class="shadow cursor-pointer grid place-items-center border-2 border-n-strong appearance-none rounded-full w-5 h-5 checked:bg-n-brand before:content-[''] before:bg-n-brand before:border-4 before:rounded-full before:border-n-strong checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-n-brand"
         />
       </div>
-      <span class="text-ash-900 text-sm line-clamp-2 leading-[1.4] text-start">
+      <span
+        class="text-n-slate-12 text-sm line-clamp-2 leading-[1.4] text-start"
+      >
         {{ description }}
       </span>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 097e0589a..2c278ed75 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -196,7 +196,7 @@ export default {
 <template>
   <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-screen-md">
     <div class="flex flex-col gap-6">
-      <h2 class="text-2xl font-medium text-ash-900">
+      <h2 class="text-2xl font-medium text-n-slate-12">
         {{ $t('PROFILE_SETTINGS.TITLE') }}
       </h2>
       <UserProfilePicture
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
index 2d149755c..ffb1ff9e7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -2,7 +2,7 @@
 import { ref, watch } from 'vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import { MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
-import FormButton from 'v3/components/Form/Button.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   messageSignature: {
@@ -38,13 +38,11 @@ const updateSignature = () => {
       :enable-suggestions="false"
       show-image-resize-toolbar
     />
-    <FormButton
-      type="submit"
-      color-scheme="primary"
-      variant="solid"
-      size="large"
-    >
-      {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
-    </FormButton>
+    <div>
+      <NextButton
+        type="submit"
+        :label="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT')"
+      />
+    </div>
   </form>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
index 7b2c4fd22..ee0b85ddc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationCheckBox.vue
@@ -45,7 +45,7 @@ const handleInput = e => {
   >
     <input
       v-model="localFlags"
-      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+      class="mt-1 flex-shrink-0 border-n-weak border checked:border-none checked:bg-n-brand shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
       type="checkbox"
       :value="localValue"
       @input="handleInput"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
index 6ab2b34d4..3c239a3c8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
@@ -167,7 +167,7 @@ export default {
           :span="7"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE')}`"
         >
-          <span class="text-sm font-normal normal-case text-ash-800">
+          <span class="text-sm font-normal normal-case text-n-slate-11">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE') }}
           </span>
         </TableHeaderCell>
@@ -175,7 +175,7 @@ export default {
           :span="2"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL')}`"
         >
-          <span class="text-sm font-medium normal-case text-ash-900">
+          <span class="text-sm font-medium normal-case text-n-slate-12">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL') }}
           </span>
         </TableHeaderCell>
@@ -185,7 +185,7 @@ export default {
         >
           <div class="flex items-center justify-between gap-1">
             <span
-              class="text-sm font-medium normal-case text-ash-900 whitespace-nowrap"
+              class="text-sm font-medium normal-case text-n-slate-12 whitespace-nowrap"
             >
               {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
             </span>
@@ -202,7 +202,7 @@ export default {
           <div
             class="flex flex-row items-start gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
           >
-            <span class="text-sm text-ash-900">
+            <span class="text-sm text-n-slate-12">
               {{ $t(notification.label) }}
             </span>
           </div>
@@ -225,7 +225,7 @@ export default {
     </div>
     <!--  Layout for mobile devices -->
     <div class="flex flex-col gap-6 sm:hidden">
-      <span class="text-sm font-medium normal-case text-ash-900">
+      <span class="text-sm font-medium normal-case text-n-slate-12">
         {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
       </span>
       <div class="flex flex-col gap-4">
@@ -240,12 +240,14 @@ export default {
             :is-checked="checkFlagStatus('email', notification.value)"
             @update="handleEmailInput"
           />
-          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+          <span class="text-sm text-n-slate-12">{{
+            $t(notification.label)
+          }}</span>
         </div>
       </div>
 
       <div class="flex items-center justify-start gap-2">
-        <span class="text-sm font-medium normal-case text-ash-900">
+        <span class="text-sm font-medium normal-case text-n-slate-12">
           {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
         </span>
       </div>
@@ -262,21 +264,23 @@ export default {
             :is-checked="checkFlagStatus('push', notification.value)"
             @update="handlePushInput"
           />
-          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+          <span class="text-sm text-n-slate-12">{{
+            $t(notification.label)
+          }}</span>
         </div>
       </div>
     </div>
 
     <div
-      class="flex items-center justify-between w-full gap-2 p-4 border border-solid border-ash-200 rounded-xl"
+      class="flex items-center justify-between w-full gap-2 p-4 border border-solid border-n-weak rounded-xl"
     >
       <div class="flex flex-row items-center gap-2">
         <fluent-icon
           icon="alert"
-          class="flex-shrink-0 text-ash-900"
+          class="flex-shrink-0 text-n-slate-12"
           size="18"
         />
-        <span class="text-sm text-ash-900">
+        <span class="text-sm text-n-slate-12">
           {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
         </span>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
index 10720e472..e44d699cc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
@@ -1,11 +1,11 @@
 <script>
 import { useAlert } from 'dashboard/composables';
-import FormButton from 'v3/components/Form/Button.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 export default {
   components: {
-    FormButton,
+    NextButton,
   },
   props: {
     name: {
@@ -131,13 +131,8 @@ export default {
       @input="v$.userEmail.$touch"
       @blur="v$.userEmail.$touch"
     />
-    <FormButton
-      type="submit"
-      color-scheme="primary"
-      variant="solid"
-      size="large"
-    >
-      {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
-    </FormButton>
+    <div>
+      <NextButton type="submit" :label="$t('PROFILE_SETTINGS.BTN_TEXT')" />
+    </div>
   </form>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
index d86329b76..901c842de 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserProfilePicture.vue
@@ -24,7 +24,7 @@ const deleteProfilePicture = () => {
 
 <template>
   <div class="flex flex-col gap-2">
-    <span class="text-sm font-medium text-ash-900">
+    <span class="text-sm font-medium text-n-slate-12">
       {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
     </span>
     <Avatar
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
index c055a781e..857f3a992 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-white dark:bg-slate-900"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
   >
     <router-view v-slot="{ Component }">
       <keep-alive v-if="keepAlive">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index 01ee625fe..3a459e771 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -169,7 +169,7 @@ export default {
             :collection="getCollection(metric)"
             :chart-options="getChartOptions(metric)"
           />
-          <span v-else class="text-sm text-slate-600">
+          <span v-else class="text-sm text-n-slate-10">
             {{ $t('REPORT.NO_ENOUGH_DATA') }}
           </span>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
index 118248cab..6e47a14ce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue
@@ -27,12 +27,12 @@ const { calculateTrend, displayMetric, isAverageMetricType, fetchingStatus } =
 const trendColor = (value, key) => {
   if (isAverageMetricType(key)) {
     return value > 0
-      ? 'border-red-500 text-red-500'
-      : 'border-green-500 text-green-500';
+      ? 'border-n-ruby-9 text-n-ruby-9'
+      : 'border-n-teal-10 text-n-teal-10';
   }
   return value < 0
-    ? 'border-red-500 text-red-500'
-    : 'border-green-500 text-green-500';
+    ? 'border-n-ruby-9 text-n-ruby-9'
+    : 'border-n-teal-10 text-n-teal-10';
 };
 </script>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue
index 5342d75e4..0b221857e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue
@@ -19,10 +19,7 @@ const routerParams = computed(() => ({
     <router-link :to="routerParams" class="hover:underline">
       {{ `#${row.original.conversationId}` }}
     </router-link>
-    <div
-      v-tooltip="row.original.createdAt"
-      class="text-slate-600 dark:text-slate-200 text-sm"
-    >
+    <div v-tooltip="row.original.createdAt" class="text-n-slate-11 text-sm">
       {{ row.original.createdAgo }}
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index 8beeafd70..64870d31c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -61,7 +61,7 @@ const defaultSpanRender = cellProps => {
 
 const columnHelper = createColumnHelper();
 
-const columns = [
+const columns = computed(() => [
   columnHelper.accessor('contact', {
     header: t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
     width: 200,
@@ -105,7 +105,7 @@ const columns = [
         {
           class: ratingObject.emoji
             ? 'emoji-response text-lg'
-            : 'text-slate-300 dark:text-slate-700',
+            : 'text-n-slate-10',
         },
         ratingObject.emoji || '---'
       );
@@ -121,7 +121,7 @@ const columns = [
     width: 100,
     cell: cellProps => h(ConversationCell, cellProps),
   }),
-];
+]);
 
 const paginationParams = computed(() => {
   return {
@@ -134,7 +134,9 @@ const table = useVueTable({
   get data() {
     return tableData.value;
   },
-  columns,
+  get columns() {
+    return columns.value;
+  },
   manualPagination: true,
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
index 6a74f17a3..37139865f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue
@@ -48,7 +48,7 @@ export default {
 
 <template>
   <div class="multiselect-wrap--small">
-    <p aria-hidden="true" class="hide">
+    <p aria-hidden="true" class="hidden">
       {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
     </p>
     <multiselect
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
index 4d1cc340f..9caab26dd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue
@@ -1,28 +1,33 @@
-<script>
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { DATE_RANGE_OPTIONS } from '../../constants';
 
-const EVENT_NAME = 'on-range-change';
+const emit = defineEmits(['onRangeChange']);
 
-export default {
-  name: 'ReportFiltersDateRange',
-  data() {
-    const translatedOptions = Object.values(DATE_RANGE_OPTIONS).map(option => ({
-      ...option,
-      name: this.$t(option.translationKey),
-    }));
+const { t } = useI18n();
 
-    return {
-      // relies on translations, need to move it to constants
-      selectedOption: translatedOptions[0],
-      options: translatedOptions,
-    };
+const options = computed(() =>
+  Object.values(DATE_RANGE_OPTIONS).map(option => ({
+    ...option,
+    name: t(option.translationKey),
+  }))
+);
+
+const selectedId = ref(Object.values(DATE_RANGE_OPTIONS)[0].id);
+
+const selectedOption = computed({
+  get() {
+    return options.value.find(o => o.id === selectedId.value);
   },
-  methods: {
-    updateRange(selectedRange) {
-      this.selectedOption = selectedRange;
-      this.$emit(EVENT_NAME, selectedRange);
-    },
+  set(val) {
+    selectedId.value = val.id;
   },
+});
+
+const updateRange = range => {
+  selectedOption.value = range;
+  emit('onRangeChange', range);
 };
 </script>
 
@@ -31,7 +36,7 @@ export default {
     <multiselect
       v-model="selectedOption"
       class="no-margin"
-      track-by="name"
+      track-by="id"
       label="name"
       :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
       selected-label
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
index 68cc4baf2..ede9e020c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
@@ -44,7 +44,7 @@ export default {
             :style="{ backgroundColor: props.option.color }"
             class="w-5 h-5 rounded-full"
           />
-          <span class="my-0 text-slate-800 dark:text-slate-75">
+          <span class="my-0 text-n-slate-12">
             {{ props.option.title }}
           </span>
         </div>
@@ -53,10 +53,10 @@ export default {
         <div class="flex items-center 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"
+            class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-n-weak"
           />
 
-          <span class="my-0 text-slate-800 truncate min-w-0 dark:text-slate-75">
+          <span class="my-0 text-n-slate-12 truncate min-w-0">
             {{ props.option.title }}
           </span>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
index eed783f4b..41cfe277e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
@@ -67,7 +67,7 @@ function getDayOfTheWeek(date) {
   return days[dayIndex];
 }
 function getHeatmapLevelClass(value) {
-  if (!value) return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
+  if (!value) return 'outline-n-container bg-n-slate-2 dark:bg-n-slate-5/50';
 
   let level = [...quantileRange.value, Infinity].findIndex(
     range => value <= range && value > 0
@@ -76,16 +76,16 @@ function getHeatmapLevelClass(value) {
   if (level > 6) level = 5;
 
   if (level === 0) {
-    return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
+    return 'outline-n-container bg-n-slate-2 dark:bg-n-slate-5/50';
   }
 
   const classes = [
-    'bg-woot-50 dark:bg-woot-800/40 dark:outline-woot-800/80',
-    'bg-woot-100 dark:bg-woot-800/30 dark:outline-woot-800/80',
-    'bg-woot-200 dark:bg-woot-500/40 dark:outline-woot-700/80',
-    'bg-woot-300 dark:bg-woot-500/60 dark:outline-woot-600/80',
-    'bg-woot-600 dark:bg-woot-500/80 dark:outline-woot-500/80',
-    'bg-woot-800 dark:bg-woot-500 dark:outline-woot-400/80',
+    'bg-n-blue-3 dark:outline-n-blue-4',
+    'bg-n-blue-5 dark:outline-n-blue-6',
+    'bg-n-blue-7 dark:outline-n-blue-8',
+    'bg-n-blue-8 dark:outline-n-blue-9',
+    'bg-n-blue-10 dark:outline-n-blue-8',
+    'bg-n-blue-11 dark:outline-n-blue-10',
   ];
 
   return classes[level - 1];
@@ -101,7 +101,7 @@ function getHeatmapLevelClass(value) {
         <div
           v-for="ii in numberOfRows"
           :key="ii"
-          class="w-full rounded-sm bg-slate-100 dark:bg-slate-900 animate-loader-pulse h-8 min-w-[70px]"
+          class="w-full rounded-sm bg-n-slate-3 dark:bg-n-slate-1 animate-loader-pulse h-8 min-w-[70px]"
         />
       </div>
       <div class="grid gap-[5px] w-full min-w-[700px]">
@@ -113,13 +113,13 @@ function getHeatmapLevelClass(value) {
           <div
             v-for="jj in 24"
             :key="jj"
-            class="w-full h-8 rounded-sm bg-slate-100 dark:bg-slate-900 animate-loader-pulse"
+            class="w-full h-8 rounded-sm bg-n-slate-3 dark:bg-n-slate-1 animate-loader-pulse"
           />
         </div>
       </div>
       <div />
       <div
-        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-slate-800 dark:text-slate-200"
+        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-n-slate-11"
       >
         <div
           v-for="ii in 24"
@@ -135,10 +135,10 @@ function getHeatmapLevelClass(value) {
         <div
           v-for="dateKey in processedData.keys()"
           :key="dateKey"
-          class="h-8 min-w-[70px] text-slate-800 dark:text-slate-200 text-[10px] font-semibold flex flex-col items-end justify-center"
+          class="h-8 min-w-[70px] text-n-slate-12 text-[10px] font-semibold flex flex-col items-end justify-center"
         >
           {{ getDayOfTheWeek(new Date(dateKey)) }}
-          <time class="font-normal text-slate-700 dark:text-slate-200">
+          <time class="font-normal text-n-slate-11">
             {{ formatDate(dateKey) }}
           </time>
         </div>
@@ -153,14 +153,14 @@ function getHeatmapLevelClass(value) {
             v-for="data in processedData.get(dateKey)"
             :key="data.timestamp"
             v-tooltip.top="getCountTooltip(data.value)"
-            class="h-8 rounded-sm shadow-inner dark:outline dark:outline-1 shadow-black"
+            class="h-8 rounded-sm shadow-inner dark:outline dark:outline-1"
             :class="getHeatmapLevelClass(data.value)"
           />
         </div>
       </div>
       <div />
       <div
-        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-slate-800 dark:text-slate-200"
+        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-n-slate-12"
       >
         <div
           v-for="ii in 24"
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 c1d805081..d7409dc22 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -188,7 +188,7 @@ export default {
               :username="props.option.name"
               size="22px"
             />
-            <span class="my-0 text-slate-800 truncate dark:text-slate-75">{{
+            <span class="my-0 text-n-slate-12 truncate">{{
               props.option.name
             }}</span>
           </div>
@@ -201,7 +201,7 @@ export default {
               :username="props.option.name"
               size="22px"
             />
-            <p class="my-0 text-slate-800 dark:text-slate-75">
+            <p class="my-0 text-n-slate-12">
               {{ props.option.name }}
             </p>
           </div>
@@ -230,7 +230,7 @@ export default {
               class="w-5 h-5 rounded-full"
             />
 
-            <span class="my-0 text-slate-800 truncate dark:text-slate-75">
+            <span class="my-0 text-n-slate-12 truncate">
               {{ props.option.title }}
             </span>
           </div>
@@ -239,10 +239,10 @@ export default {
           <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"
+              class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-n-weak"
             />
 
-            <span class="my-0 text-slate-800 truncate dark:text-slate-75">
+            <span class="my-0 text-n-slate-12 truncate">
               {{ props.option.title }}
             </span>
           </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
index fc8f35521..abe5674eb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue
@@ -179,7 +179,7 @@ export default {
     <!-- Dividing line between Active filters and Add filter button -->
     <div
       v-if="hasActiveFilters && !isAllFilterSelected"
-      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
+      class="w-full h-px border md:w-px md:h-5 border-n-weak"
     />
     <!-- Add filter and clear filter button -->
     <div class="flex items-center gap-2">
@@ -196,10 +196,7 @@ export default {
       />
 
       <!-- Dividing line between Add filter and Clear all filter button -->
-      <div
-        v-if="hasActiveFilters"
-        class="w-px h-5 border border-slate-75 dark:border-slate-800"
-      />
+      <div v-if="hasActiveFilters" class="w-px h-5 border border-n-weak" />
       <!-- Clear all filter button -->
       <FilterButton
         v-if="hasActiveFilters"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
index 1cd18226e..9604cedf9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -34,12 +34,12 @@ const conversationLabels = computed(() => {
     class="grid items-center content-center w-full h-16 grid-cols-12 gap-4 px-6 py-0 border-b last:border-b-0 last:rounded-b-xl border-n-weak"
   >
     <div
-      class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-n-slate-12 rtl:text-right"
     >
       <span class="text-n-slate-12">
         {{ `#${conversationId} ` }}
       </span>
-      <span class="text-slate-11">
+      <span class="text-n-slate-11">
         {{ $t('SLA_REPORTS.WITH') }}
       </span>
       <span class="capitalize truncate text-n-slate-12">{{
@@ -53,7 +53,7 @@ const conversationLabels = computed(() => {
       />
     </div>
     <div
-      class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right col-span-2"
+      class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-n-slate-12 text-left rtl:text-right col-span-2"
     >
       {{ slaName }}
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
index f50fed377..2eb04f652 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -34,7 +34,7 @@ export default {
 <template>
   <div
     v-on-clickaway="closeSlaEvents"
-    class="flex items-center col-span-2 text-slate-11 justify-end"
+    class="flex items-center col-span-2 text-n-slate-11 justify-end"
   >
     <div class="relative">
       <NextButton
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentCell.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentCell.vue
index effa4c56b..c6f348252 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentCell.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentCell.vue
@@ -27,11 +27,11 @@ const isRTL = useMapGetter('accounts/isRTL');
       />
       <div class="items-start flex flex-col min-w-0 my-0 mx-2">
         <h6
-          class="overflow-hidden text-sm m-0 leading-[1.2] text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+          class="overflow-hidden text-sm m-0 leading-[1.2] text-n-slate-12 whitespace-nowrap text-ellipsis"
         >
           {{ row.original.agent }}
         </h6>
-        <span class="text-xs text-slate-600 dark:text-slate-200">
+        <span class="text-xs text-n-slate-11">
           {{ row.original.email }}
         </span>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js
index e6253186b..c863029fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js
@@ -12,33 +12,30 @@ const mountParams = {
 };
 
 describe('ReportFiltersDateRange.vue', () => {
-  it('emits "on-range-change" event when updateRange is called', () => {
+  it('emits "onRangeChange" event when updateRange is called', () => {
     const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
 
     const selectedRange = DATE_RANGE_OPTIONS.LAST_7_DAYS;
     wrapper.vm.updateRange(selectedRange);
 
-    expect(wrapper.emitted('on-range-change')).toBeTruthy();
-    expect(wrapper.emitted('on-range-change')[0]).toEqual([selectedRange]);
+    expect(wrapper.emitted('onRangeChange')).toBeTruthy();
+    expect(wrapper.emitted('onRangeChange')[0]).toEqual([selectedRange]);
   });
 
   it('initializes options correctly', () => {
     const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
 
-    const expectedOptions = Object.values(DATE_RANGE_OPTIONS).map(option => ({
-      ...option,
-      name: option.translationKey,
-    }));
+    const expectedIds = Object.values(DATE_RANGE_OPTIONS).map(
+      option => option.id
+    );
+    const receivedIds = wrapper.vm.options.map(option => option.id);
 
-    expect(wrapper.vm.options).toEqual(expectedOptions);
+    expect(receivedIds).toEqual(expectedIds);
   });
 
   it('initializes selectedOption correctly', () => {
     const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
-    const expectedSelectedOption = Object.values(DATE_RANGE_OPTIONS)[0];
-    expect(wrapper.vm.selectedOption).toEqual({
-      ...expectedSelectedOption,
-      name: expectedSelectedOption.translationKey,
-    });
+    const expectedId = Object.values(DATE_RANGE_OPTIONS)[0].id;
+    expect(wrapper.vm.selectedOption.id).toBe(expectedId);
   });
 });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index f562aa9ce..5dc6e16f4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -200,7 +200,7 @@ export default {
       <div
         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">
+        <span for="sla_bh" class="text-n-slate-11">
           {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
         </span>
         <woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
index 3f8cad837..983ff38b2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
@@ -9,26 +9,18 @@ defineProps({
 
 <template>
   <div
-    class="inline-flex items-center min-w-0 gap-1 px-1.5 sm:px-2 py-1 border border-solid rounded-lg border-slate-75 dark:border-slate-700/50"
+    class="inline-flex items-center min-w-0 gap-1 px-1.5 sm:px-2 py-1 border border-solid rounded-lg border-n-weak"
   >
     <fluent-icon
       size="14"
       :icon="hasBusinessHours ? 'alarm-on' : 'alarm-off'"
       type="outline"
       class="flex-shrink-0"
-      :class="
-        hasBusinessHours
-          ? 'text-slate-600 dark:text-slate-400'
-          : 'text-slate-300 dark:text-slate-700'
-      "
+      :class="hasBusinessHours ? 'text-n-slate-11' : 'text-n-slate-10'"
     />
     <span
       class="hidden text-xs tracking-[0.2%] font-normal truncate sm:block"
-      :class="
-        hasBusinessHours
-          ? 'text-slate-600 dark:text-slate-400'
-          : 'text-slate-300 dark:text-slate-700'
-      "
+      :class="hasBusinessHours ? 'text-n-slate-11' : 'text-n-slate-10'"
     >
       {{
         hasBusinessHours
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
index f296da403..085860efa 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
@@ -40,7 +40,7 @@ const emit = defineEmits(['delete']);
 
 <template>
   <BaseSettingsListItem
-    class="sm:divide-x sm:divide-slate-75 sm:dark:divide-slate-700/50"
+    class="sm:divide-x sm:divide-n-weak"
     :title="slaName"
     :description="description"
   >
@@ -49,7 +49,7 @@ const emit = defineEmits(['delete']);
     </template>
     <template #rightSection>
       <div
-        class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-slate-75 dark:divide-slate-700/50"
+        class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-n-weak gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-n-weak"
       >
         <SLAResponseTime response-type="FRT" :response-time="firstResponse" />
         <SLAResponseTime response-type="NRT" :response-time="nextResponse" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
index 860ded975..7282f73d1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
@@ -6,25 +6,25 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
   <BaseSettingsListItem class="opacity-50">
     <template #title>
       <div
-        class="w-24 h-[26px] rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+        class="w-24 h-[26px] rounded-md bg-n-slate-4 dark:bg-n-slate-6 animate-pulse"
       />
     </template>
     <template #description>
       <div
-        class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+        class="w-64 h-4 mb-0.5 rounded-md bg-n-slate-4 dark:bg-n-slate-6 animate-pulse"
       />
       <div
-        class="w-48 h-4 rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+        class="w-48 h-4 rounded-md bg-n-slate-4 dark:bg-n-slate-6 animate-pulse"
       />
     </template>
     <template #label>
       <div
-        class="w-32 h-[26px] bg-slate-50 dark:bg-slate-700 animate-pulse rounded-md"
+        class="w-32 h-[26px] bg-n-slate-4 dark:bg-n-slate-6 animate-pulse rounded-md"
       />
     </template>
     <template #rightSection>
       <div
-        class="flex items-center sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between"
+        class="flex items-center sm:rtl:!border-l-0 sm:rtl:!border-r border-n-weak gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between"
       >
         <div
           v-for="ii in 3"
@@ -32,7 +32,7 @@ import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
           class="flex justify-end w-1/3 h-full px-4"
         >
           <div
-            class="w-32 h-full rounded-md bg-slate-50 dark:bg-slate-700 animate-pulse"
+            class="w-32 h-full rounded-md bg-n-slate-4 dark:bg-n-slate-6 animate-pulse"
           />
         </div>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
index e7e986e7b..87860110a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
@@ -16,20 +16,20 @@ defineProps({
     class="flex flex-row items-start w-full h-full gap-1 sm:items-end sm:px-6 sm:py-2 sm:gap-2 sm:flex-col"
   >
     <span
-      class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm ltr:pl-1.5 sm:ltr:pl-0 rtl:pr-1.5 sm:rtl:pr-0 text-slate-600 dark:text-slate-300"
+      class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm ltr:pl-1.5 sm:ltr:pl-0 rtl:pr-1.5 sm:rtl:pr-0 text-n-slate-11"
     >
       <fluent-icon
         v-tooltip.left="$t(`SLA.LIST.RESPONSE_TYPES.${responseType}`)"
         size="14"
         icon="information"
         type="outline"
-        class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+        class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-n-slate-11"
       />
       {{ $t(`SLA.LIST.RESPONSE_TYPES.SHORT_HAND.${responseType}`) }}
       <span class="flex sm:hidden">:</span>
     </span>
     <span
-      class="text-sm sm:text-2xl font-medium tracking-[-1.5%] text-slate-900 dark:text-slate-25"
+      class="text-sm sm:text-2xl font-medium tracking-[-1.5%] text-n-slate-12"
     >
       {{ responseTime }}
     </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
index cf48c0c97..d90d3ce63 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
@@ -73,8 +73,10 @@ export default {
 <template>
   <div>
     <div class="add-agents__header" />
-    <table class="woot-table">
-      <thead>
+    <table>
+      <thead
+        class="[&>th]:font-semibold [&>th]:tracking-[1px] ltr:[&>th]:text-left rtl:[&>th]:text-right [&>th]:px-2.5 [&>th]:uppercase [&>th]:text-n-slate-12"
+      >
         <tr>
           <td class="ltr:pl-2.5 rtl:pr-2.5">
             <div class="flex items-center">
@@ -87,10 +89,10 @@ export default {
               />
             </div>
           </td>
-          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
+          <td class="text-n-slate-12 ltr:pl-2.5 rtl:pr-2.5">
             {{ $t('TEAMS_SETTINGS.AGENTS.AGENT') }}
           </td>
-          <td class="text-slate-800 dark:text-slate-100 ltr:pl-2.5 rtl:pr-2.5">
+          <td class="text-n-slate-12 ltr:pl-2.5 rtl:pr-2.5">
             {{ $t('TEAMS_SETTINGS.AGENTS.EMAIL') }}
           </td>
         </tr>
@@ -100,6 +102,7 @@ export default {
           v-for="agent in agentList"
           :key="agent.id"
           :class="agentRowClass(agent.id)"
+          class="border-b border-n-weak [&>td]:p-2.5 [&>td]:text-n-slate-12"
         >
           <td class="w-12">
             <div class="flex items-center">
@@ -118,7 +121,7 @@ export default {
                 :username="agent.name"
                 :status="agent.availability_status"
               />
-              <h4 class="text-base mb-0 text-slate-800 dark:text-slate-100">
+              <h4 class="text-base mb-0 text-n-slate-12">
                 {{ agent.name }}
               </h4>
             </div>
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 7f3eb9694..084cc88f5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -104,7 +104,7 @@ export default {
 
       <div class="w-full">
         <div v-if="v$.selectedAgents.$error">
-          <p class="error-message">
+          <p class="error-message pb-2">
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
           </p>
         </div>
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 66df8ea12..b56c0c2e1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -119,7 +119,7 @@ export default {
 
       <div class="w-full">
         <div v-if="v$.selectedAgents.$error">
-          <p class="error-message">
+          <p class="error-message pb-2">
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
           </p>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index 14b07e93c..cd32e1911 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -84,7 +84,7 @@ const confirmPlaceHolderText = computed(() =>
         </router-link>
       </template>
     </BaseSettingsHeader>
-    <div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
+    <div class="mt-6 flex-1 text-n-slate-11">
       <woot-loading-state
         v-if="uiFlags.isFetching"
         :message="$t('TEAMS_SETTINGS.LOADING')"
@@ -96,11 +96,8 @@ const confirmPlaceHolderText = computed(() =>
         {{ $t('TEAMS_SETTINGS.LIST.404') }}
       </p>
 
-      <table
-        v-else
-        class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
-      >
-        <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
+      <table v-else class="min-w-full divide-y divide-n-weak">
+        <tbody class="divide-y divide-n-weak">
           <tr v-for="team in teamsList" :key="team.id">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
               <span class="block font-medium capitalize">{{ team.name }}</span>
diff --git a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
index c52a32a1f..56a5b5cae 100644
--- a/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/suspended/Index.vue
@@ -21,7 +21,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="items-center bg-slate-50 flex justify-center h-full w-full">
+  <div class="items-center bg-n-slate-2 flex justify-center h-full w-full">
     <EmptyState
       :title="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.TITLE')"
       :message="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.MESSAGE')"
diff --git a/app/javascript/dashboard/routes/index.js b/app/javascript/dashboard/routes/index.js
index e21cca31a..e69d0b5ad 100644
--- a/app/javascript/dashboard/routes/index.js
+++ b/app/javascript/dashboard/routes/index.js
@@ -5,12 +5,10 @@ import dashboard from './dashboard/dashboard.routes';
 import store from 'dashboard/store';
 import { validateLoggedInRoutes } from '../helper/routeHelpers';
 import AnalyticsHelper from '../helper/AnalyticsHelper';
-import { buildPermissionsFromRouter } from '../helper/permissionsHelper';
 
 const routes = [...dashboard.routes];
 
 export const router = createRouter({ history: createWebHistory(), routes });
-export const routesWithPermissions = buildPermissionsFromRouter(routes);
 
 export const validateAuthenticateRoutePermission = (to, next) => {
   const { isLoggedIn, getCurrentUser: user } = store.getters;
diff --git a/app/javascript/dashboard/store/captain/document.js b/app/javascript/dashboard/store/captain/document.js
index 25d9c3b94..52794b21a 100644
--- a/app/javascript/dashboard/store/captain/document.js
+++ b/app/javascript/dashboard/store/captain/document.js
@@ -1,7 +1,25 @@
 import CaptainDocumentAPI from 'dashboard/api/captain/document';
 import { createStore } from './storeFactory';
 
+const actions = mutationTypes => ({
+  async uploadPdf({ commit }, formData) {
+    commit(mutationTypes.SET_UI_FLAG, { creatingItem: true });
+    try {
+      const response = await CaptainDocumentAPI.uploadPdf(formData);
+      const { data } = response;
+      // Use UPSERT like the create action for consistency
+      commit(mutationTypes.UPSERT, data);
+      commit(mutationTypes.SET_UI_FLAG, { creatingItem: false });
+      return Promise.resolve(data);
+    } catch (error) {
+      commit(mutationTypes.SET_UI_FLAG, { creatingItem: false });
+      return Promise.reject(error);
+    }
+  },
+});
+
 export default createStore({
   name: 'CaptainDocument',
   API: CaptainDocumentAPI,
+  actions,
 });
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index 32d91fb8e..aef95d1b1 100644
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -9,29 +9,7 @@ import { throwErrorMessage } from '../utils/api';
 import AnalyticsHelper from '../../helper/AnalyticsHelper';
 import camelcaseKeys from 'camelcase-keys';
 import { ACCOUNT_EVENTS } from '../../helper/AnalyticsHelper/events';
-
-const buildInboxData = inboxParams => {
-  const formData = new FormData();
-  const { channel = {}, ...inboxProperties } = inboxParams;
-  Object.keys(inboxProperties).forEach(key => {
-    formData.append(key, inboxProperties[key]);
-  });
-  const { selectedFeatureFlags, ...channelParams } = channel;
-  // selectedFeatureFlags needs to be empty when creating a website channel
-  if (selectedFeatureFlags) {
-    if (selectedFeatureFlags.length) {
-      selectedFeatureFlags.forEach(featureFlag => {
-        formData.append(`channel[selected_feature_flags][]`, featureFlag);
-      });
-    } else {
-      formData.append('channel[selected_feature_flags][]', '');
-    }
-  }
-  Object.keys(channelParams).forEach(key => {
-    formData.append(`channel[${key}]`, channel[key]);
-  });
-  return formData;
-};
+import { channelActions, buildInboxData } from './inboxes/channelActions';
 
 export const state = {
   records: [],
@@ -220,6 +198,12 @@ export const actions = {
       throw new Error(error);
     }
   },
+  ...channelActions,
+  // TODO: Extract other create channel methods to separate files to reduce file size
+  // - createChannel
+  // - createWebsiteChannel
+  // - createTwilioChannel
+  // - createFBChannel
   updateInbox: async ({ commit }, { id, formData = true, ...inboxParams }) => {
     commit(types.default.SET_INBOXES_UI_FLAG, { isUpdating: true });
     try {
diff --git a/app/javascript/dashboard/store/modules/inboxes/channelActions.js b/app/javascript/dashboard/store/modules/inboxes/channelActions.js
new file mode 100644
index 000000000..9975d8d1f
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/inboxes/channelActions.js
@@ -0,0 +1,52 @@
+import * as types from '../../mutation-types';
+import InboxesAPI from '../../../api/inboxes';
+import AnalyticsHelper from '../../../helper/AnalyticsHelper';
+import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
+
+export const buildInboxData = inboxParams => {
+  const formData = new FormData();
+  const { channel = {}, ...inboxProperties } = inboxParams;
+  Object.keys(inboxProperties).forEach(key => {
+    formData.append(key, inboxProperties[key]);
+  });
+  const { selectedFeatureFlags, ...channelParams } = channel;
+  // selectedFeatureFlags needs to be empty when creating a website channel
+  if (selectedFeatureFlags) {
+    if (selectedFeatureFlags.length) {
+      selectedFeatureFlags.forEach(featureFlag => {
+        formData.append(`channel[selected_feature_flags][]`, featureFlag);
+      });
+    } else {
+      formData.append('channel[selected_feature_flags][]', '');
+    }
+  }
+  Object.keys(channelParams).forEach(key => {
+    formData.append(`channel[${key}]`, channel[key]);
+  });
+  return formData;
+};
+
+const sendAnalyticsEvent = channelType => {
+  AnalyticsHelper.track(ACCOUNT_EVENTS.ADDED_AN_INBOX, {
+    channelType,
+  });
+};
+
+export const channelActions = {
+  createVoiceChannel: async ({ commit }, params) => {
+    try {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: true });
+      const response = await InboxesAPI.create({
+        name: params.name,
+        channel: { ...params.voice, type: 'voice' },
+      });
+      commit(types.default.ADD_INBOXES, response.data);
+      commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      sendAnalyticsEvent('voice');
+      return response.data;
+    } catch (error) {
+      commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      throw error;
+    }
+  },
+};
diff --git a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
index 8e917467a..a91addaa3 100644
--- a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
@@ -62,6 +62,28 @@ describe('#actions', () => {
     });
   });
 
+  describe('#createVoiceChannel', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: inboxList[0] });
+      await actions.createVoiceChannel({ commit }, inboxList[0]);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.ADD_INBOXES, inboxList[0]],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.createVoiceChannel({ commit })).rejects.toThrow(
+        Error
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
   describe('#createFBChannel', () => {
     it('sends correct actions if API is success', async () => {
       axios.post.mockResolvedValue({ data: inboxList[0] });
diff --git a/app/javascript/shared/assets/stylesheets/animations.scss b/app/javascript/shared/assets/stylesheets/animations.scss
deleted file mode 100644
index f0f2758c6..000000000
--- a/app/javascript/shared/assets/stylesheets/animations.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Taken from thoughtbot/bourbon library timing functions
-
-:root {
-  --ease-in-cubic: cubic-bezier(0.17, 0.67, 0.83, 0.67);
-  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
-
-  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
-
-  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-}
diff --git a/app/javascript/shared/assets/stylesheets/border-radius.scss b/app/javascript/shared/assets/stylesheets/border-radius.scss
deleted file mode 100644
index 5fefbb5ac..000000000
--- a/app/javascript/shared/assets/stylesheets/border-radius.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-:root {
-  --border-radius-small: 0.1875rem;
-  --border-radius-normal: 0.3125rem;
-  --border-radius-medium: 0.4375rem;
-  --border-radius-large: 0.5625rem;
-  --border-radius-full: 6.25rem;
-  --border-radius-rounded: 50%;
-}
diff --git a/app/javascript/shared/assets/stylesheets/colors.scss b/app/javascript/shared/assets/stylesheets/colors.scss
deleted file mode 100644
index c80f52427..000000000
--- a/app/javascript/shared/assets/stylesheets/colors.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-:root {
-  --white: #fff;
-  --white-transparent: rgba(255, 255, 255, 0.9);
-  --black-transparent: rgba(0, 0, 0, 0.9);
-
-  --w-25: #F5FAFF;
-  --w-50: #EBF5FF;
-  --w-75: #D6EBFF;
-  --w-100: #C2E1FF;
-  --w-200: #99CEFF;
-  --w-300: #70BAFF;
-  --w-400: #47A6FF;
-  --w-500: #1F93FF;
-  --w-600: #1976CC;
-  --w-700: #135899;
-  --w-800: #0C3B66;
-  --w-900: #061D33;
-
-  --g-50: #E6F8E6;
-  --g-100: #C4EEC2;
-  --g-200: #9DE29A;
-  --g-300: #6FD86F;
-  --g-400: #44CE4B;
-  --g-500: #00C41D;
-  --g-600: #00B412;
-  --g-700: #00A200;
-  --g-800: #009000;
-  --g-900: #007000;
-
-  --y-50: #FEFDE8;
-  --y-100: #FDFCC4;
-  --y-200: #FCF68C;
-  --y-300: #F9E736;
-  --y-400: #F6D819;
-  --y-500: #E6C00C;
-  --y-600: #C69608;
-  --y-700: #9E6b0A;
-  --y-800: #835510;
-  --y-900: #6F4514;
-
-  --s-25: #F8FAFC;
-  --s-50: #F1F5F8;
-  --s-75: #EBF0F5;
-  --s-100: #E4EBF1;
-  --s-200: #C9D7E3;
-  --s-300: #AEC3D5;
-  --s-400: #93AFC8;
-  --s-500: #779BBB;
-  --s-600: #446888;
-  --s-700: #37546D;
-  --s-800: #293F51;
-  --s-900: #1B2836;
-
-  --b-50: #F7F7F7;
-  --b-100: #ECECED;
-  --b-200: #DDDDE0;
-  --b-300: #C6C7CA;
-  --b-400: #ABACAF;
-  --b-500: #96979C;
-  --b-600: #6E6F73;
-  --b-700: #5A5B5F;
-  --b-800: #3C3D40;
-  --b-900: #1B1C1F;
-
-  --r-50: #FFEBEE;
-  --r-100: #FFCCD1;
-  --r-200: #F69898;
-  --r-300: #EF6F6F;
-  --r-400: #F94B4A;
-  --r-500: #FF382D;
-  --r-600: #F02B2D;
-  --r-700: #DE1E27;
-  --r-800: #D11320;
-  --r-900: #C30011;
-
-  --v-50: #FFFFFF;
-  --v-100: #F5EBFF;
-  --v-200: #DDB8FF;
-  --v-300: #C585FF;
-  --v-400: #AC52FF;
-  --v-500: #941FFF;
-  --v-600: #7B00EB;
-  --v-700: #6000B8;
-  --v-800: #450085;
-  --v-900: #2B0052;
-
-  // Common color aliases
-  --color-woot: var(--w-500);
-
-  --color-heading: #1f2d3d;
-  --color-body: #3c4858;
-
-  --color-border: var(--s-75);
-  --color-border-light: var(--s-50);
-  --color-border-dark: var(--s-100);
-
-  --color-background: var(--s-50);
-  --color-background-light: var(--s-25);
-
-  // Social and inboxes brand colors
-  --color-facebook-brand: #3b5998;
-  --color-twitter-brand: #1da1f2;
-  --color-whatsapp-brand: #25d366;
-  --color-sms-twilio: #f42f46;
-  --color-cloud-generic: #18b7b0;
-
-  // Tech-debt
-  --color-medium-gray: #8492a6;
-}
diff --git a/app/javascript/shared/assets/stylesheets/font-size.scss b/app/javascript/shared/assets/stylesheets/font-size.scss
deleted file mode 100644
index 77406a5ca..000000000
--- a/app/javascript/shared/assets/stylesheets/font-size.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
-  --font-size-nano: 0.5rem;
-  --font-size-micro: 0.625rem;
-  --font-size-mini: 0.75rem;
-  --font-size-small: 0.875rem;
-  --font-size-default: 1rem;
-  --font-size-medium: 1.125rem;
-  --font-size-two: 1.25rem;
-  --font-size-large: 1.375rem;
-  --font-size-big: 1.5rem;
-  --font-size-bigger: 1.875rem;
-  --font-size-mega: 2.125rem;
-  --font-size-giga: 2.5rem;
-}
diff --git a/app/javascript/shared/assets/stylesheets/font-weights.scss b/app/javascript/shared/assets/stylesheets/font-weights.scss
deleted file mode 100644
index 322b66c72..000000000
--- a/app/javascript/shared/assets/stylesheets/font-weights.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-:root {
-  --font-weight-feather: 100;
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold: 600;
-  --font-weight-black: 700;
-}
diff --git a/app/javascript/shared/assets/stylesheets/shadows.scss b/app/javascript/shared/assets/stylesheets/shadows.scss
deleted file mode 100644
index ef086f93d..000000000
--- a/app/javascript/shared/assets/stylesheets/shadows.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-:root {
-    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
-        0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    --shadow-small: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-        0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-        0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    --shadow-larger: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-        0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    --shadow-dropdown-pane:
-        0 0.5rem 1rem rgb(50 50 93 / 8%),
-        0 0.25rem 0.75rem rgb(0 0 0 / 7%);
-    --shadow-bulk-action-container:
-        6px 3px 22px 9px rgb(181 181 181 / 25%);
-    --shadow-context-menu: rgb(22 23 24 / 30%) 0px 10px 38px -10px,
-    rgb(22 23 24 / 20%) 0px 10px 20px -15px;
-    --shadow-widget-builder: 0 0px 20px 5px rgb(0 0 0 / 10%);
-}
diff --git a/app/javascript/shared/assets/stylesheets/spacing.scss b/app/javascript/shared/assets/stylesheets/spacing.scss
deleted file mode 100644
index aad1e5b27..000000000
--- a/app/javascript/shared/assets/stylesheets/spacing.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-:root {
-  // spaces
-  --space-zero: 0;
-  --space-micro: 0.125rem;
-  --space-smaller: 0.25rem;
-  --space-small: 0.5rem;
-  --space-one: 0.625rem;
-  --space-slab: 0.75rem;
-  --space-snug: 0.875rem;
-  --space-normal: 1rem;
-  --space-two: 1.25rem;
-  --space-medium: 1.5rem;
-  --space-large: 2rem;
-  --space-larger: 3rem;
-  --space-jumbo: 4rem;
-  --space-mega: 6.25rem;
-  --space-giga: 15rem;
-
-  --space-minus-micro: -0.125rem;
-  --space-minus-smaller: -0.25rem;
-  --space-minus-half: -0.3125rem;
-  --space-minus-small: -0.5rem;
-  --space-minus-one: -0.625rem;
-  --space-minus-slab: -0.75rem;
-  --space-minus-snug: -0.875rem;
-  --space-minus-normal: -1rem;
-  --space-minus-two: -1.25rem;
-  --space-minus-medium: -1.5rem;
-  --space-minus-large: -2rem;
-  --space-minus-larger: -3rem;
-  --space-minus-jumbo: -4rem;
-  --space-minus-mega: -6.25rem;
-}
diff --git a/app/javascript/shared/assets/stylesheets/z-index.scss b/app/javascript/shared/assets/stylesheets/z-index.scss
deleted file mode 100644
index 43c28d575..000000000
--- a/app/javascript/shared/assets/stylesheets/z-index.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-:root {
-  // z-index
-  --z-index-minus: -1;
-  --z-index-zero: 0;
-  --z-index-one: 1;
-  --z-index-low: 10;
-  --z-index-twenty: 20;
-  --z-index-normal: 100;
-  --z-index-high: 1000;
-  --z-index-higher: 2000;
-  --z-index-much-higher: 5000;
-  --z-index-very-high: 9999;
-  --z-index-highest: 10000;
-}
diff --git a/app/javascript/shared/components/ArticleSkeletonLoader.vue b/app/javascript/shared/components/ArticleSkeletonLoader.vue
index d65813b54..098dde490 100644
--- a/app/javascript/shared/components/ArticleSkeletonLoader.vue
+++ b/app/javascript/shared/components/ArticleSkeletonLoader.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="p-4 space-y-6 bg-white dark:bg-slate-900">
+  <div class="p-4 space-y-6 bg-n-background">
     <div class="space-y-2 animate-loader-pulse">
-      <div class="h-6 bg-slate-100 dark:bg-slate-700 rounded w-1/5" />
-      <div class="h-10 bg-slate-100 dark:bg-slate-700 rounded w-3/5" />
+      <div class="h-6 bg-n-slate-4 dark:bg-n-slate-6 rounded w-1/5" />
+      <div class="h-10 bg-n-slate-4 dark:bg-n-slate-6 rounded w-3/5" />
     </div>
     <div class="space-y-2 animate-loader-pulse">
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded w-4/5" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded w-4/5" />
     </div>
     <div class="space-y-2 animate-loader-pulse">
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded w-3/5" />
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded w-3/5" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded" />
     </div>
     <div class="space-y-2 animate-loader-pulse">
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
-      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded w-3/5" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded" />
+      <div class="h-5 bg-n-slate-4 dark:bg-n-slate-6 rounded w-3/5" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/shared/components/Button.vue b/app/javascript/shared/components/Button.vue
index b6275a3a3..52eef212e 100644
--- a/app/javascript/shared/components/Button.vue
+++ b/app/javascript/shared/components/Button.vue
@@ -27,11 +27,11 @@ export default {
       let className =
         'text-white py-3 px-4 rounded-lg shadow-sm leading-4 cursor-pointer disabled:opacity-50';
       if (this.type === 'clear') {
-        className = 'flex mx-auto mt-4 text-xs leading-3 w-auto text-black-600';
+        className = 'flex mx-auto mt-4 text-xs leading-3 w-auto text-n-gray-12';
       }
 
       if (this.type === 'blue' && !Object.keys(this.buttonStyles).length) {
-        className = `${className} bg-woot-500 hover:bg-woot-700`;
+        className = `${className} bg-n-brand hover:brightness-110`;
       }
       if (this.block) {
         className = `${className} w-full`;
diff --git a/app/javascript/shared/components/Spinner.vue b/app/javascript/shared/components/Spinner.vue
index e80a94c7b..af7237554 100644
--- a/app/javascript/shared/components/Spinner.vue
+++ b/app/javascript/shared/components/Spinner.vue
@@ -13,15 +13,15 @@ export default {
   computed: {
     colorSchemeClasses() {
       if (this.colorScheme === 'primary') {
-        return 'before:!border-t-woot-500';
+        return 'before:!border-t-n-brand';
       }
 
       if (this.colorScheme === 'warning') {
-        return 'before:!border-t-yellow-500';
+        return 'before:!border-t-n-amber-6';
       }
 
       if (this.colorScheme === 'success') {
-        return 'before:!border-t-success-500';
+        return 'before:!border-t-n-teal-9';
       }
 
       return this.colorScheme;
diff --git a/app/javascript/shared/components/TextArea.vue b/app/javascript/shared/components/TextArea.vue
index 682a4522b..1f6e0127a 100644
--- a/app/javascript/shared/components/TextArea.vue
+++ b/app/javascript/shared/components/TextArea.vue
@@ -38,23 +38,22 @@ export default {
       v-if="label"
       class="mb-2 text-xs font-medium"
       :class="{
-        'text-black-800': !error,
-        'text-red-400': error,
+        'text-n-gray-12': !error,
+        'text-n-ruby-9': error,
       }"
     >
       {{ label }}
     </div>
     <textarea
       v-model="computedModel"
-      class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-slate-700"
+      class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-n-gray-12"
       :class="{
-        'border-black-200 hover:border-black-300 focus:border-black-300':
-          !error,
-        'border-red-200 hover:border-red-300 focus:border-red-300': error,
+        'border-n-weak hover:border-n-weak focus:border-n-weak': !error,
+        'border-n-ruby-9 hover:border-n-ruby-9 focus:border-n-ruby-9': error,
       }"
       :placeholder="placeholder"
     />
-    <div v-if="error" class="mt-2 text-xs font-medium text-red-400">
+    <div v-if="error" class="mt-2 text-xs font-medium text-n-ruby-9">
       {{ error }}
     </div>
   </label>
diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
index 37917c6c3..586496d8a 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -210,23 +210,10 @@ export default {
 </style>
 
 <style lang="scss">
-@import 'dashboard/assets/scss/mixins';
-
 .emoji-dialog {
   &::before {
-    $space-slab: 12px;
-
-    @media (prefers-color-scheme: dark) {
-      $color-bg-dark: #26292b;
-      @include arrow(bottom, $color-bg-dark, $space-slab);
-    }
-
-    @media (prefers-color-scheme: light) {
-      $color-bg: #ebf0f5;
-      @include arrow(bottom, $color-bg, $space-slab);
-    }
-
-    @apply -bottom-3 absolute right-5;
+    @apply absolute -bottom-3 h-3 w-6 bg-n-slate-3 content-[""];
+    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
   }
 }
 
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 3c066e691..e3150ac05 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -91,8 +91,11 @@ const hasValue = computed(() => {
         />
       </Button>
       <div
-        :class="{ 'dropdown-pane--open': showSearchDropdown }"
-        class="dropdown-pane"
+        :class="{
+          'block visible': showSearchDropdown,
+          'hidden invisible': !showSearchDropdown,
+        }"
+        class="box-border top-[2.625rem] w-full border rounded-lg bg-n-alpha-3 backdrop-blur-[100px] absolute shadow-lg border-n-strong dark:border-n-strong p-2 z-[9999]"
       >
         <div class="flex items-center justify-between mb-1">
           <h4
@@ -115,9 +118,3 @@ const hasValue = computed(() => {
     </div>
   </OnClickOutside>
 </template>
-
-<style lang="scss" scoped>
-.dropdown-pane {
-  @apply box-border top-[2.625rem] w-full;
-}
-</style>
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index 20f9cf05d..0df7bedac 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -133,7 +133,7 @@ export default {
 }
 
 .search-input {
-  @apply m-0 w-full border border-solid border-transparent h-8 text-sm text-slate-700 dark:text-slate-100 rounded-md focus:border-woot-500 bg-slate-50 dark:bg-slate-900;
+  @apply m-0 w-full border border-solid border-transparent h-8 text-sm text-n-slate-12 rounded-md focus:border-n-brand bg-n-background dark:bg-n-background;
 }
 
 .multiselect-dropdown--item {
@@ -144,7 +144,7 @@ export default {
   }
 
   &:hover {
-    @apply bg-n-slate-2 dark:bg-n-solid-3 text-slate-800 dark:text-slate-100;
+    @apply bg-n-slate-2 dark:bg-n-solid-3 text-n-slate-12;
   }
 }
 </style>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
index fbe7f6e32..f9b230fbb 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
@@ -4,7 +4,7 @@ export default {};
 
 <template>
   <li
-    class="list-none my-1 mx-0 border-b border-slate-50 dark:border-slate-700"
+    class="list-none my-1 mx-0 border-b border-n-weak"
     :tabindex="null"
     :aria-disabled="true"
   />
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
index 65afa3123..9da0ef39c 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
@@ -13,7 +13,7 @@ export default {
 <template>
   <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
     <span
-      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
+      class="text-xs text-n-slate-12 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
     >
       {{ title }}
     </span>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
index 95f98f01b..f41d6fa7c 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
@@ -18,20 +18,10 @@ export default {
 </script>
 
 <template>
-  <li class="sub-menu-container">
-    <ul class="sub-menu-li-container">
+  <li class="!mt-0.5">
+    <ul class="!m-0">
       <WootDropdownHeader v-if="title" :title="title" />
       <slot />
     </ul>
   </li>
 </template>
-
-<style lang="scss" scoped>
-.sub-menu-container {
-  margin-top: var(--space-micro);
-}
-
-.sub-menu-li-container {
-  margin: 0;
-}
-</style>
diff --git a/app/javascript/shared/components/ui/label/LabelDropdown.vue b/app/javascript/shared/components/ui/label/LabelDropdown.vue
index 5eccabd2f..a1216acd8 100644
--- a/app/javascript/shared/components/ui/label/LabelDropdown.vue
+++ b/app/javascript/shared/components/ui/label/LabelDropdown.vue
@@ -114,12 +114,12 @@ export default {
   <div class="flex flex-col w-full max-h-[12.5rem]">
     <div class="flex items-center justify-center mb-1">
       <h4
-        class="flex-grow m-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+        class="flex-grow m-0 overflow-hidden text-sm text-n-slate-12 whitespace-nowrap text-ellipsis"
       >
         {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
       </h4>
       <Hotkey
-        custom-class="border border-solid text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border-slate-75 dark:border-slate-600 flex-shrink-0"
+        custom-class="border border-solid text-n-slate-12 bg-n-slate-2 text-xxs border-n-strong flex-shrink-0"
       >
         {{ 'L' }}
       </Hotkey>
@@ -150,13 +150,13 @@ export default {
         </woot-dropdown-menu>
         <div
           v-if="noResult"
-          class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
+          class="flex justify-center py-4 px-2.5 font-medium text-xs text-n-slate-11"
         >
           {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
         </div>
         <div
           v-if="allowCreation && shouldShowCreate"
-          class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
+          class="flex pt-1 border-t border-solid border-n-weak"
         >
           <NextButton
             icon="i-lucide-plus"
diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js
index 8ae15c3f8..0d5661d26 100644
--- a/app/javascript/shared/constants/busEvents.js
+++ b/app/javascript/shared/constants/busEvents.js
@@ -5,7 +5,6 @@ export const BUS_EVENTS = {
   SCROLL_TO_MESSAGE: 'SCROLL_TO_MESSAGE',
   MESSAGE_SENT: 'MESSAGE_SENT',
   FETCH_LABEL_SUGGESTIONS: 'FETCH_LABEL_SUGGESTIONS',
-  TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
   ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
   WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
   WEBSOCKET_RECONNECT: 'WEBSOCKET_RECONNECT',
diff --git a/app/javascript/shared/helpers/DateHelper.js b/app/javascript/shared/helpers/DateHelper.js
index dc6b8b4fd..938b4c605 100644
--- a/app/javascript/shared/helpers/DateHelper.js
+++ b/app/javascript/shared/helpers/DateHelper.js
@@ -2,7 +2,7 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import isToday from 'date-fns/isToday';
 import isYesterday from 'date-fns/isYesterday';
-import { endOfDay, getUnixTime, startOfDay, differenceInDays } from 'date-fns';
+import { endOfDay, getUnixTime, startOfDay } from 'date-fns';
 
 export const formatUnixDate = (date, dateFormat = 'MMM dd, yyyy') => {
   const unixDate = fromUnixTime(date);
@@ -16,10 +16,6 @@ export const formatDate = ({ date, todayText, yesterdayText }) => {
   return date;
 };
 
-export const formatDigitToString = val => {
-  return val > 9 ? `${val}` : `0${val}`;
-};
-
 export const isTimeAfter = (h1, m1, h2, m2) => {
   if (h1 < h2) {
     return false;
@@ -45,8 +41,3 @@ export const generateRelativeTime = (value, unit, languageCode) => {
   });
   return rtf.format(value, unit);
 };
-
-export const getDayDifferenceFromNow = (now, timestampInSeconds) => {
-  const date = new Date(timestampInSeconds * 1000);
-  return differenceInDays(now, date);
-};
diff --git a/app/javascript/shared/helpers/specs/DateHelper.spec.js b/app/javascript/shared/helpers/specs/DateHelper.spec.js
index 63ef9edd8..13678fa2f 100644
--- a/app/javascript/shared/helpers/specs/DateHelper.spec.js
+++ b/app/javascript/shared/helpers/specs/DateHelper.spec.js
@@ -1,10 +1,8 @@
 import {
   formatDate,
   formatUnixDate,
-  formatDigitToString,
   isTimeAfter,
   generateRelativeTime,
-  getDayDifferenceFromNow,
 } from '../DateHelper';
 
 describe('#DateHelper', () => {
@@ -47,14 +45,6 @@ describe('#DateHelper', () => {
     ).toEqual('Yesterday');
   });
 });
-describe('#formatDigitToString', () => {
-  it('returns date compatabile string from number is less than 9', () => {
-    expect(formatDigitToString(8)).toEqual('08');
-  });
-  it('returns date compatabile string from number is greater than 9', () => {
-    expect(formatDigitToString(11)).toEqual('11');
-  });
-});
 
 describe('#isTimeAfter', () => {
   it('return correct values', () => {
@@ -121,25 +111,3 @@ describe('generateRelativeTime', () => {
     expect(actualResult).toBe(expectedResult);
   });
 });
-
-describe('#getDayDifferenceFromNow', () => {
-  it('should return the difference if in same day', () => {
-    const now = new Date('2023-12-08T00:00:00.000Z');
-    const timestampInSeconds = 1702020305; // 08/12/2023, 12:55:05 (GMT+05:30)
-    const expectedResult = 0;
-
-    const actualResult = getDayDifferenceFromNow(now, timestampInSeconds);
-
-    expect(actualResult).toBe(expectedResult);
-  });
-
-  it('should return the difference if in different day', () => {
-    const now = new Date('2023-12-11T00:00:00.000Z');
-    const timestampInSeconds = 1702020305; // 08/12/2023, 12:55:05 (GMT+05:30)
-    const expectedResult = 2;
-
-    const actualResult = getDayDifferenceFromNow(now, timestampInSeconds);
-
-    expect(actualResult).toBe(expectedResult);
-  });
-});
diff --git a/app/javascript/shared/mixins/inboxMixin.js b/app/javascript/shared/mixins/inboxMixin.js
index 273e9f8b4..bf8ec492b 100644
--- a/app/javascript/shared/mixins/inboxMixin.js
+++ b/app/javascript/shared/mixins/inboxMixin.js
@@ -63,6 +63,9 @@ export default {
     isATelegramChannel() {
       return this.channelType === INBOX_TYPES.TELEGRAM;
     },
+    isAVoiceChannel() {
+      return this.channelType === INBOX_TYPES.VOICE;
+    },
     isATwilioSMSChannel() {
       const { medium: medium = '' } = this.inbox;
       return this.isATwilioChannel && medium === 'sms';
diff --git a/app/javascript/v3/App.vue b/app/javascript/v3/App.vue
index 718828665..992c0b381 100644
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -50,10 +50,6 @@ export default {
 @tailwind utilities;
 
 @import '../dashboard/assets/scss/next-colors';
-@import 'shared/assets/stylesheets/colors';
-@import 'shared/assets/stylesheets/spacing';
-@import 'shared/assets/stylesheets/font-size';
-@import 'shared/assets/stylesheets/border-radius';
 
 html,
 body {
@@ -68,7 +64,7 @@ body {
 }
 
 .text-link {
-  @apply text-woot-500 font-medium hover:text-woot-600;
+  @apply text-n-brand font-medium hover:text-n-blue-10;
 }
 
 .v-popper--theme-tooltip .v-popper__inner {
diff --git a/app/javascript/v3/components/Button/SubmitButton.vue b/app/javascript/v3/components/Button/SubmitButton.vue
deleted file mode 100644
index 88dad0799..000000000
--- a/app/javascript/v3/components/Button/SubmitButton.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    Spinner,
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    buttonText: {
-      type: String,
-      default: '',
-    },
-    buttonClass: {
-      type: String,
-      default: '',
-    },
-    iconClass: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'submit',
-    },
-  },
-  computed: {
-    computedClass() {
-      return `
-        ${this.disabled ? 'opacity-40 hover:bg-woot-500' : ''}
-        ${this.buttonClass || ' '}
-      `;
-    },
-  },
-  created() {
-    if (import.meta.env.DEV) {
-      // eslint-disable-next-line
-      console.warn(
-        '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
-      );
-    }
-  },
-};
-</script>
-
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
-  >
-    <span>{{ buttonText }}</span>
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <Spinner v-if="loading" />
-  </button>
-</template>
diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
deleted file mode 100644
index 5786b0af7..000000000
--- a/app/javascript/v3/components/Form/Button.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup>
-import { computed, useAttrs } from 'vue';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'solid',
-    validator: value => ['outline', 'ghost', 'solid'].includes(value),
-  },
-  size: {
-    type: String,
-    default: 'large',
-    validator: value => ['medium', 'large'].includes(value),
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  colorScheme: {
-    type: String,
-    default: 'primary',
-    validator: value => ['primary', 'secondary', 'danger'].includes(value),
-  },
-  trailingIcon: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const attrs = useAttrs();
-
-const baseClasses = {
-  outline: 'outline outline-1 -outline-offset-1',
-  ghost: 'hover:text-600 active:text-600 focus:outline focus:outline-offset-1',
-  solid:
-    'hover:bg-700 active:bg-700 focus:outline focus:outline-offset-1 focus:outline-2',
-};
-
-const colorClass = computed(() => {
-  if (attrs.disabled) {
-    return 'bg-ash-200 text-ash-600 cursor-not-allowed';
-  }
-
-  const styleMap = {
-    primary: {
-      outline: `${baseClasses.outline} outline-primary-400 hover:text-primary-600 active:text-primary-600`,
-      ghost: `${baseClasses.ghost} focus:outline-primary-400`,
-      solid: `${baseClasses.solid} bg-primary-600 text-white focus:outline-primary-400`,
-    },
-    secondary: {
-      outline: `${baseClasses.outline} outline-ash-400 hover:text-ash-900 active:text-ash-900 `,
-      ghost: `${baseClasses.ghost} focus:outline-ash-400`,
-      solid: `${baseClasses.solid} bg-ash-100 text-ash-900 focus:outline-ash-400`,
-    },
-    danger: {
-      outline: `${baseClasses.outline} outline-ruby-400 hover:text-ruby-600 active:text-ruby-600`,
-      ghost: `${baseClasses.ghost} focus:outline-ruby-400`,
-      solid: `${baseClasses.solid} bg-ruby-600 text-white focus:outline-ruby-400`,
-    },
-  };
-
-  const schemeStyles = styleMap[props.colorScheme];
-  return schemeStyles[props.variant] || schemeStyles.solid;
-});
-
-const sizeClass = computed(() => {
-  if (props.size === 'medium') {
-    return 'h-8 px-3 py-1.5 text-sm';
-  }
-  return 'h-10 px-4 py-2.5 text';
-});
-
-const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
-</script>
-
-<template>
-  <button
-    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
-    :class="buttonClasses"
-    v-bind="$attrs"
-  >
-    <fluent-icon
-      v-if="icon && !trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-    <span
-      v-if="$slots.default"
-      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
-    >
-      <slot />
-    </span>
-    <fluent-icon
-      v-if="icon && trailingIcon"
-      size="1.16em"
-      :icon="icon"
-      class="flex-shrink-0"
-    />
-  </button>
-</template>
diff --git a/app/javascript/v3/components/Form/CheckBox.vue b/app/javascript/v3/components/Form/CheckBox.vue
index fe5baf41d..8241e3150 100644
--- a/app/javascript/v3/components/Form/CheckBox.vue
+++ b/app/javascript/v3/components/Form/CheckBox.vue
@@ -26,6 +26,6 @@ const checked = computed({
     v-model="checked"
     type="checkbox"
     :value="value"
-    class="flex-shrink-0 mt-0.5 border-ash-200 border bg-ash-50 checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+    class="flex-shrink-0 mt-0.5 border-n-strong border bg-n-slate-2 checked:border-none checked:bg-n-brand shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
   />
 </template>
diff --git a/app/javascript/v3/components/Form/InitialsAvatar.vue b/app/javascript/v3/components/Form/InitialsAvatar.vue
deleted file mode 100644
index ad427acaf..000000000
--- a/app/javascript/v3/components/Form/InitialsAvatar.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { userInitial } from 'v3/helpers/CommonHelper';
-const props = defineProps({
-  name: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: Number,
-    default: 72,
-  },
-});
-const colors = {
-  1: 'bg-ash-200 text-ash-900',
-  2: 'bg-amber-200 text-amber-900',
-  3: 'bg-pink-100 text-pink-800',
-  4: 'bg-purple-100 text-purple-800',
-  5: 'bg-indigo-100 text-indigo-800',
-  6: 'bg-grass-100 text-grass-800',
-  7: 'bg-mint-100 text-mint-800',
-  8: 'bg-orange-100 text-orange-800',
-};
-const style = computed(() => ({
-  fontSize: `${Math.floor(props.size / 2.5)}px`,
-}));
-const colorClass = computed(() => {
-  return colors[(props.name.length % 8) + 1];
-});
-
-const initial = computed(() => userInitial(props.name));
-</script>
-
-<template>
-  <div
-    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
-    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
-    :style="style"
-    aria-hidden="true"
-  >
-    <slot>{{ initial }}</slot>
-  </div>
-</template>
diff --git a/app/javascript/v3/components/Form/Switch.vue b/app/javascript/v3/components/Form/Switch.vue
index 597284ef8..c7e9e93fb 100644
--- a/app/javascript/v3/components/Form/Switch.vue
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -17,9 +17,7 @@ export default {
     type="button"
     class="relative flex-shrink-0 h-4 p-0 border-none shadow-inner w-7 rounded-3xl"
     :class="
-      modelValue
-        ? 'bg-primary-600 shadow-primary-800'
-        : 'shadow-ash-400 bg-ash-200'
+      modelValue ? 'bg-n-brand shadow-n-brand' : 'shadow-n-slate-6 bg-n-slate-5'
     "
     role="switch"
     :aria-checked="modelValue.toString()"
@@ -27,7 +25,7 @@ export default {
   >
     <span
       aria-hidden="true"
-      class="rounded-full bg-white top-0.5 absolute dark:bg-white w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
+      class="rounded-full bg-n-background top-0.5 absolute w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
       :class="
         modelValue
           ? 'ltr:translate-x-0 rtl:translate-x-[0.75rem]'
diff --git a/app/javascript/v3/components/Form/Textarea.vue b/app/javascript/v3/components/Form/Textarea.vue
deleted file mode 100644
index 8236d5b21..000000000
--- a/app/javascript/v3/components/Form/Textarea.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script>
-import WithLabel from './WithLabel.vue';
-export default {
-  components: {
-    WithLabel,
-  },
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    rows: {
-      type: Number,
-      default: 3,
-    },
-    allowResize: {
-      type: Boolean,
-      default: true,
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    dataTestid: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue', 'blur'],
-  methods: {
-    onInput(e) {
-      this.$emit('update:modelValue', e.target.value);
-    },
-  },
-};
-</script>
-
-<template>
-  <WithLabel
-    :label="label"
-    :name="name"
-    :has-error="hasError"
-    :error-message="errorMessage"
-  >
-    <textarea
-      :id="name"
-      :name="name"
-      autocomplete="off"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="modelValue"
-      :rows="rows"
-      :class="{
-        'focus:outline-red-600 outline-red-600': hasError,
-        'dark:outline-slate-600 dark:focus:outline-woot-500 outline-slate-200 focus:outline-woot-500':
-          !hasError,
-        'resize-none': !allowResize,
-      }"
-      class="block w-full p-3 bg-white border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:bg-slate-800"
-      @update:model-value="onInput"
-      @blur="$emit('blur')"
-    />
-  </WithLabel>
-</template>
diff --git a/app/javascript/v3/components/SnackBar/Item.vue b/app/javascript/v3/components/SnackBar/Item.vue
index 25c719c76..97c75cc63 100644
--- a/app/javascript/v3/components/SnackBar/Item.vue
+++ b/app/javascript/v3/components/SnackBar/Item.vue
@@ -17,7 +17,7 @@ export default {
 
 <template>
   <div
-    class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
+    class="bg-n-slate-12 dark:bg-n-slate-7 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
     :class="isActionPresent ? 'justify-between' : 'justify-center'"
   >
     <div class="text-sm font-medium text-white">
diff --git a/app/javascript/v3/views/auth/password/Edit.vue b/app/javascript/v3/views/auth/password/Edit.vue
index 34405d76e..93ae3b0ac 100644
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -3,14 +3,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import FormInput from '../../../components/Form/Input.vue';
-import SubmitButton from '../../../components/Button/SubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { setNewPassword } from '../../../api/auth';
 
 export default {
   components: {
     FormInput,
-    SubmitButton,
+    NextButton,
   },
   props: {
     resetPasswordToken: { type: String, default: '' },
@@ -120,14 +120,18 @@ export default {
           :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
           @blur="v$.credentials.confirmPassword.$touch"
         />
-        <SubmitButton
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :label="$t('SET_NEW_PASSWORD.SUBMIT')"
           :disabled="
             v$.credentials.password.$invalid ||
             v$.credentials.confirmPassword.$invalid ||
             newPasswordAPI.showLoading
           "
-          :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
-          :loading="newPasswordAPI.showLoading"
+          :is-loading="newPasswordAPI.showLoading"
         />
       </div>
     </form>
diff --git a/app/javascript/v3/views/auth/reset/password/Index.vue b/app/javascript/v3/views/auth/reset/password/Index.vue
index a1fecacde..4f3bf04e8 100644
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -6,10 +6,10 @@ import { required, minLength, email } from '@vuelidate/validators';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import FormInput from '../../../../components/Form/Input.vue';
 import { resetPassword } from '../../../../api/auth';
-import SubmitButton from '../../../../components/Button/SubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
-  components: { FormInput, SubmitButton },
+  components: { FormInput, NextButton },
   mixins: [globalConfigMixin],
   setup() {
     return { v$: useVuelidate() };
@@ -98,10 +98,14 @@ export default {
           :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
           @input="v$.credentials.email.$touch"
         />
-        <SubmitButton
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :label="$t('RESET_PASSWORD.SUBMIT')"
           :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
-          :button-text="$t('RESET_PASSWORD.SUBMIT')"
-          :loading="resetPassword.showLoading"
+          :is-loading="resetPassword.showLoading"
         />
       </div>
       <p class="mt-4 -mb-1 text-sm text-n-slate-11">
diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
index 9cffea18d..6f0a6da48 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -7,7 +7,7 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import FormInput from '../../../../../components/Form/Input.vue';
-import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { isValidPassword } from 'shared/helpers/Validators';
 import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
 import { register } from '../../../../../api/auth';
@@ -17,7 +17,7 @@ export default {
   components: {
     FormInput,
     GoogleOAuthButton,
-    SubmitButton,
+    NextButton,
     VueHcaptcha,
   },
   mixins: [globalConfigMixin],
@@ -195,23 +195,28 @@ export default {
         />
         <span
           v-if="!hasAValidCaptcha && didCaptchaReset"
-          class="text-xs text-red-400"
+          class="text-xs text-n-ruby-9"
         >
           {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
         </span>
       </div>
-      <SubmitButton
-        :button-text="$t('REGISTER.SUBMIT')"
+      <NextButton
+        lg
+        type="submit"
+        data-testid="submit_button"
+        class="w-full"
+        icon="i-lucide-chevron-right"
+        trailing-icon
+        :label="$t('REGISTER.SUBMIT')"
         :disabled="isSignupInProgress || !isFormValid"
-        :loading="isSignupInProgress"
-        icon-class="arrow-chevron-right"
+        :is-loading="isSignupInProgress"
       />
     </form>
     <GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
       {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
     </GoogleOAuthButton>
     <p
-      class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
+      class="text-sm mb-1 mt-5 text-n-slate-12 [&>a]:text-n-brand [&>a]:font-medium [&>a]:hover:brightness-110"
       v-html="termsLink"
     />
   </div>
@@ -221,8 +226,7 @@ export default {
 .h-captcha--box {
   &::v-deep .error {
     iframe {
-      border: 1px solid var(--r-500);
-      border-radius: var(--border-radius-normal);
+      @apply rounded-md border border-n-ruby-8 dark:border-n-ruby-8;
     }
   }
 }
diff --git a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
index d6bed6431..e49cf7505 100644
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -28,7 +28,7 @@ export default {
 <template>
   <div
     v-show="testimonials.length"
-    class="relative flex-1 min-h-screen hidden overflow-hidden bg-woot-400 dark:bg-woot-800 xl:flex"
+    class="relative flex-1 min-h-screen hidden overflow-hidden bg-n-blue-8 dark:bg-n-blue-5 xl:flex"
   >
     <img
       src="assets/images/auth/top-left.svg"
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index a90368d08..707e84879 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -15,7 +15,7 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import FormInput from '../../components/Form/Input.vue';
 import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import SubmitButton from '../../components/Button/SubmitButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const ERROR_MESSAGES = {
   'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
@@ -29,7 +29,7 @@ export default {
     FormInput,
     GoogleOAuthButton,
     Spinner,
-    SubmitButton,
+    NextButton,
   },
   mixins: [globalConfigMixin],
   props: {
@@ -237,11 +237,15 @@ export default {
               </router-link>
             </p>
           </FormInput>
-          <SubmitButton
-            :disabled="loginApi.showLoading"
+          <NextButton
+            lg
+            type="submit"
+            data-testid="submit_button"
+            class="w-full"
             :tabindex="3"
-            :button-text="$t('LOGIN.SUBMIT')"
-            :loading="loginApi.showLoading"
+            :label="$t('LOGIN.SUBMIT')"
+            :disabled="loginApi.showLoading"
+            :is-loading="loginApi.showLoading"
           />
         </form>
       </div>
diff --git a/app/javascript/v3/views/onboarding/OnboardingStep.vue b/app/javascript/v3/views/onboarding/OnboardingStep.vue
index fbd3d17d4..ac8c079ff 100644
--- a/app/javascript/v3/views/onboarding/OnboardingStep.vue
+++ b/app/javascript/v3/views/onboarding/OnboardingStep.vue
@@ -24,19 +24,19 @@ export default {
 
 <template>
   <div
-    class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-slate-200 before:-bottom-8 before:left-[24px] hide-before-of-last"
+    class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-n-slate-3 before:-bottom-8 before:left-[24px] hide-before-of-last"
     :class="{
-      'text-woot-500 ': isActive,
-      'text-slate-400': !isActive || isComplete,
-      'before:bg-woot-500': !isActive && isComplete,
+      'text-n-brand ': isActive,
+      'text-n-slate-6': !isActive || isComplete,
+      'before:bg-n-brand': !isActive && isComplete,
     }"
   >
     <div
       class="grid w-8 h-8 border border-solid rounded-full place-content-center"
       :class="{
-        'border-woot-500': !isActive || isComplete,
-        'border-slate-200 dark:border-slate-600': !isActive && !isComplete,
-        'text-woot-500': isComplete,
+        'border-n-brand': !isActive || isComplete,
+        'border-n-weak': !isActive && !isComplete,
+        'text-n-brand': isComplete,
       }"
     >
       <fluent-icon v-if="isComplete" size="20" icon="checkmark" />
diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
index 3a8496d70..07aa6a0e3 100755
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -1,6 +1,3 @@
-@import 'shared/assets/stylesheets/animations';
-@import 'shared/assets/stylesheets/colors';
-
 @import 'reset';
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 462cddcfe..7c497b70f 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/app/javascript/widget/components/ChatHeader.vue
@@ -76,7 +76,7 @@ export default {
           <span v-dompurify-html="title" class="ltr:mr-1 rtl:ml-1" />
           <div
             :class="`h-2 w-2 rounded-full
-              ${isOnline ? 'bg-green-500' : 'hidden'}`"
+              ${isOnline ? 'bg-n-teal-10' : 'hidden'}`"
           />
         </div>
         <div class="text-xs leading-3 text-n-slate-11">
diff --git a/app/javascript/widget/components/FooterReplyTo.vue b/app/javascript/widget/components/FooterReplyTo.vue
index 42d7492a5..fdafbb37b 100644
--- a/app/javascript/widget/components/FooterReplyTo.vue
+++ b/app/javascript/widget/components/FooterReplyTo.vue
@@ -26,14 +26,14 @@ export default {
 
 <template>
   <div
-    class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
+    class="mb-2.5 rounded-[7px] bg-n-slate-3 px-2 py-1.5 text-sm text-n-slate-11 flex items-center gap-2"
   >
     <div class="items-center flex-grow truncate">
       <strong>{{ $t('FOOTER_REPLY_TO.REPLY_TO') }}</strong>
       {{ inReplyTo.content || replyToAttachment }}
     </div>
     <button
-      class="items-end flex-shrink-0 p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-800"
+      class="items-end flex-shrink-0 p-1 rounded-md hover:bg-n-slate-5"
       @click="$emit('dismiss')"
     >
       <FluentIcon icon="dismiss" size="12" />
diff --git a/app/javascript/widget/components/MessageReplyButton.vue b/app/javascript/widget/components/MessageReplyButton.vue
index b99194ac3..f484f2e76 100644
--- a/app/javascript/widget/components/MessageReplyButton.vue
+++ b/app/javascript/widget/components/MessageReplyButton.vue
@@ -9,7 +9,7 @@ export default {
 
 <template>
   <button
-    class="p-1 mb-1 rounded-full dark:text-slate-500 dark:bg-slate-900 text-slate-600 bg-slate-100 hover:text-slate-800"
+    class="p-1 mb-1 rounded-full text-n-slate-11 bg-n-slate-3 hover:text-n-slate-12"
   >
     <FluentIcon icon="arrow-reply" size="11" class="flex-shrink-0" />
   </button>
diff --git a/app/javascript/widget/components/ReplyToChip.vue b/app/javascript/widget/components/ReplyToChip.vue
index f4c76ebcc..2968e5353 100644
--- a/app/javascript/widget/components/ReplyToChip.vue
+++ b/app/javascript/widget/components/ReplyToChip.vue
@@ -37,9 +37,9 @@ export default {
       this.$nextTick(() => {
         const el = document.getElementById(elementId);
         el.scrollIntoView();
-        el.classList.add('bg-slate-100', 'dark:bg-slate-900');
+        el.classList.add('bg-n-slate-3', 'dark:bg-n-solid-3');
         this.timeOutID = setTimeout(() => {
-          el.classList.remove('bg-slate-100', 'dark:bg-slate-900');
+          el.classList.remove('bg-n-slate-3', 'dark:bg-n-solid-3');
         }, 500);
       });
     },
@@ -49,7 +49,7 @@ export default {
 
 <template>
   <button
-    class="px-1.5 py-0.5 rounded-md text-slate-500 bg-slate-50 dark:bg-slate-900 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
+    class="px-1.5 py-0.5 rounded-md text-n-slate-11 bg-n-slate-4 opacity-60 hover:opacity-100 cursor-pointer flex items-center gap-1.5"
     @click="navigateTo(replyTo.id)"
   >
     <FluentIcon icon="arrow-reply" size="12" class="flex-shrink-0" />
diff --git a/app/javascript/widget/components/UnreadMessageList.vue b/app/javascript/widget/components/UnreadMessageList.vue
index 51b14a4d0..b9e415745 100644
--- a/app/javascript/widget/components/UnreadMessageList.vue
+++ b/app/javascript/widget/components/UnreadMessageList.vue
@@ -118,12 +118,12 @@ export default {
   }
 
   .clear-button {
-    transition: all 0.3s var(--ease-in-cubic);
+    transition: all 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
     @apply bg-transparent text-n-brand border-none border-0 font-semibold text-base ml-1 py-0 pl-0 pr-2.5 hover:brightness-75 hover:translate-x-1;
   }
 
   .close-unread-button {
-    transition: all 0.3s var(--ease-in-cubic);
+    transition: all 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
     @apply bg-n-slate-3 dark:bg-n-slate-12 text-n-slate-12 dark:text-n-slate-1 hover:brightness-95 border-none border-0 font-medium text-xxs rounded-2xl mb-3;
   }
 }
diff --git a/app/javascript/widget/components/template/Article.vue b/app/javascript/widget/components/template/Article.vue
index a380f6564..218bab6f8 100644
--- a/app/javascript/widget/components/template/Article.vue
+++ b/app/javascript/widget/components/template/Article.vue
@@ -36,7 +36,7 @@ export default {
         rel="noopener noreferrer nofollow"
         class="text-n-slate-12 no-underline"
       >
-        <span class="flex items-center text-black-900 font-medium">
+        <span class="flex items-center text-n-slate-12 font-medium">
           <FluentIcon icon="link" class="ltr:mr-1 rtl:ml-1 text-n-slate-12" />
           <span class="text-n-slate-12">
             {{ item.title }}
diff --git a/app/jobs/webhooks/twilio_events_job.rb b/app/jobs/webhooks/twilio_events_job.rb
index 5f44d981b..87fdfadfb 100644
--- a/app/jobs/webhooks/twilio_events_job.rb
+++ b/app/jobs/webhooks/twilio_events_job.rb
@@ -2,10 +2,16 @@ class Webhooks::TwilioEventsJob < ApplicationJob
   queue_as :low
 
   def perform(params = {})
-    # Skip processing if Body parameter or MediaUrl0 is not present
+    # Skip processing if Body parameter, MediaUrl0, or location data is not present
     # This is to skip processing delivery events being delivered to this endpoint
-    return if params[:Body].blank? && params[:MediaUrl0].blank?
+    return if params[:Body].blank? && params[:MediaUrl0].blank? && !valid_location_message?(params)
 
     ::Twilio::IncomingMessageService.new(params: params).perform
   end
+
+  private
+
+  def valid_location_message?(params)
+    params[:MessageType] == 'location' && params[:Latitude].present? && params[:Longitude].present?
+  end
 end
diff --git a/app/listeners/reporting_event_listener.rb b/app/listeners/reporting_event_listener.rb
index b31d899bb..9f22fe8de 100644
--- a/app/listeners/reporting_event_listener.rb
+++ b/app/listeners/reporting_event_listener.rb
@@ -47,6 +47,10 @@ class ReportingEventListener < BaseListener
     message = extract_message_and_account(event)[0]
     conversation = message.conversation
     waiting_since = event.data[:waiting_since]
+
+    return if waiting_since.blank?
+
+    # When waiting_since is nil, set reply_time to 0
     reply_time = message.created_at.to_i - waiting_since.to_i
 
     reporting_event = ReportingEvent.new(
diff --git a/app/models/automation_rule.rb b/app/models/automation_rule.rb
index 258c5c0a3..c8f5a180d 100644
--- a/app/models/automation_rule.rb
+++ b/app/models/automation_rule.rb
@@ -41,7 +41,7 @@ class AutomationRule < ApplicationRecord
 
   def actions_attributes
     %w[send_message add_label remove_label send_email_to_team assign_team assign_agent send_webhook_event mute_conversation
-       send_attachment change_status resolve_conversation snooze_conversation change_priority send_email_transcript].freeze
+       send_attachment change_status resolve_conversation open_conversation snooze_conversation change_priority send_email_transcript].freeze
   end
 
   def file_base_data
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index 922118b09..d6c5d0e4a 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -198,11 +198,21 @@ class Conversation < ApplicationRecord
   private
 
   def execute_after_update_commit_callbacks
+    handle_resolved_status_change
     notify_status_change
     create_activity
     notify_conversation_updation
   end
 
+  def handle_resolved_status_change
+    # When conversation is resolved, clear waiting_since using update_column to avoid callbacks
+    return unless saved_change_to_status? && status == 'resolved'
+
+    # rubocop:disable Rails/SkipsModelValidations
+    update_column(:waiting_since, nil)
+    # rubocop:enable Rails/SkipsModelValidations
+  end
+
   def ensure_snooze_until_reset
     self.snoozed_until = nil unless snoozed?
   end
diff --git a/app/models/integrations/app.rb b/app/models/integrations/app.rb
index dfe889bfa..6a1378f1e 100644
--- a/app/models/integrations/app.rb
+++ b/app/models/integrations/app.rb
@@ -55,9 +55,11 @@ class Integrations::App
     when 'linear'
       GlobalConfigService.load('LINEAR_CLIENT_ID', nil).present?
     when 'shopify'
-      account.feature_enabled?('shopify_integration') && GlobalConfigService.load('SHOPIFY_CLIENT_ID', nil).present?
+      shopify_enabled?(account)
     when 'leadsquared'
       account.feature_enabled?('crm_integration')
+    when 'notion'
+      notion_enabled?(account)
     else
       true
     end
@@ -71,7 +73,8 @@ class Integrations::App
       "redirect_uri=#{self.class.linear_integration_url}",
       "state=#{encode_state}",
       'scope=read,write',
-      'prompt=consent'
+      'prompt=consent',
+      'actor=app'
     ].join('&')
   end
 
@@ -113,4 +116,14 @@ class Integrations::App
       all.detect { |app| app.id == params[:id] }
     end
   end
+
+  private
+
+  def shopify_enabled?(account)
+    account.feature_enabled?('shopify_integration') && GlobalConfigService.load('SHOPIFY_CLIENT_ID', nil).present?
+  end
+
+  def notion_enabled?(account)
+    account.feature_enabled?('notion_integration') && GlobalConfigService.load('NOTION_CLIENT_ID', nil).present?
+  end
 end
diff --git a/app/models/integrations/hook.rb b/app/models/integrations/hook.rb
index e7300b525..ca77fa13d 100644
--- a/app/models/integrations/hook.rb
+++ b/app/models/integrations/hook.rb
@@ -53,6 +53,10 @@ class Integrations::Hook < ApplicationRecord
     app_id == 'dialogflow'
   end
 
+  def notion?
+    app_id == 'notion'
+  end
+
   def disable
     update(status: 'disabled')
   end
diff --git a/app/models/message.rb b/app/models/message.rb
index e7c4e9b6c..cc04a088e 100644
--- a/app/models/message.rb
+++ b/app/models/message.rb
@@ -24,6 +24,7 @@
 #
 # Indexes
 #
+#  idx_messages_account_content_created                 (account_id,content_type,created_at)
 #  index_messages_on_account_created_type               (account_id,created_at,message_type)
 #  index_messages_on_account_id                         (account_id)
 #  index_messages_on_account_id_and_inbox_id            (account_id,inbox_id)
@@ -167,7 +168,7 @@ class Message < ApplicationRecord
       additional_attributes: additional_attributes,
       content_attributes: content_attributes,
       content_type: content_type,
-      content: content,
+      content: outgoing_content,
       conversation: conversation.webhook_data,
       created_at: created_at,
       id: id,
diff --git a/app/services/action_service.rb b/app/services/action_service.rb
index 4f33a302b..a50b11193 100644
--- a/app/services/action_service.rb
+++ b/app/services/action_service.rb
@@ -18,6 +18,10 @@ class ActionService
     @conversation.resolved!
   end
 
+  def open_conversation(_params)
+    @conversation.open!
+  end
+
   def change_status(status)
     @conversation.update!(status: status[0])
   end
diff --git a/app/services/twilio/incoming_message_service.rb b/app/services/twilio/incoming_message_service.rb
index c38577599..a11b99744 100644
--- a/app/services/twilio/incoming_message_service.rb
+++ b/app/services/twilio/incoming_message_service.rb
@@ -17,6 +17,7 @@ class Twilio::IncomingMessageService
       source_id: params[:SmsSid]
     )
     attach_files
+    attach_location if location_message?
     @message.save!
   end
 
@@ -155,4 +156,17 @@ class Twilio::IncomingMessageService
     Rails.logger.info "Error downloading attachment from Twilio: #{e.message}: Skipping"
     nil
   end
+
+  def location_message?
+    params[:MessageType] == 'location' && params[:Latitude].present? && params[:Longitude].present?
+  end
+
+  def attach_location
+    @message.attachments.new(
+      account_id: @message.account_id,
+      file_type: :location,
+      coordinates_lat: params[:Latitude].to_f,
+      coordinates_long: params[:Longitude].to_f
+    )
+  end
 end
diff --git a/app/views/mailers/conversation_reply_mailer/email_reply.html.erb b/app/views/mailers/conversation_reply_mailer/email_reply.html.erb
index 319ba4b4e..feb5dff96 100644
--- a/app/views/mailers/conversation_reply_mailer/email_reply.html.erb
+++ b/app/views/mailers/conversation_reply_mailer/email_reply.html.erb
@@ -1,5 +1,5 @@
 <% if @message.content %>
-  <%= ChatwootMarkdownRenderer.new(@message.content).render_message %>
+  <%= ChatwootMarkdownRenderer.new(@message.outgoing_content).render_message %>
 <% end %>
 <% if @large_attachments.present? %>
   <p>Attachments:</p>
diff --git a/app/views/super_admin/application/_icons.html.erb b/app/views/super_admin/application/_icons.html.erb
index fabff914b..6669fe87d 100644
--- a/app/views/super_admin/application/_icons.html.erb
+++ b/app/views/super_admin/application/_icons.html.erb
@@ -156,9 +156,14 @@
     <path d="M 8 3 C 5.243 3 3 5.243 3 8 L 3 16 C 3 18.757 5.243 21 8 21 L 16 21 C 18.757 21 21 18.757 21 16 L 21 8 C 21 5.243 18.757 3 16 3 L 8 3 z M 8 5 L 16 5 C 17.654 5 19 6.346 19 8 L 19 16 C 19 17.654 17.654 19 16 19 L 8 19 C 6.346 19 5 17.654 5 16 L 5 8 C 5 6.346 6.346 5 8 5 z M 17 6 A 1 1 0 0 0 16 7 A 1 1 0 0 0 17 8 A 1 1 0 0 0 18 7 A 1 1 0 0 0 17 6 z M 12 7 C 9.243 7 7 9.243 7 12 C 7 14.757 9.243 17 12 17 C 14.757 17 17 14.757 17 12 C 17 9.243 14.757 7 12 7 z M 12 9 C 13.654 9 15 10.346 15 12 C 15 13.654 13.654 15 12 15 C 10.346 15 9 13.654 9 12 C 9 10.346 10.346 9 12 9 z"/>
   </symbol>
   
+  <symbol id="icon-notion" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M6.104 5.91c.584.474.802.438 1.898.365l10.332-.62c.22 0 .037-.22-.036-.256l-1.716-1.24c-.329-.255-.767-.548-1.606-.475l-10.005.73c-.364.036-.437.219-.292.365zm.62 2.408v10.87c0 .585.292.803.95.767l11.354-.657c.657-.036.73-.438.73-.913V7.588c0-.474-.182-.73-.584-.693l-11.866.693c-.438.036-.584.255-.584.73m11.21.583c.072.328 0 .657-.33.694l-.547.109v8.025c-.475.256-.913.401-1.278.401c-.584 0-.73-.182-1.168-.729l-3.579-5.618v5.436l1.133.255s0 .656-.914.656l-2.519.146c-.073-.146 0-.51.256-.583l.657-.182v-7.187l-.913-.073c-.073-.329.11-.803.621-.84l2.702-.182l3.724 5.692V9.886l-.95-.109c-.072-.402.22-.693.585-.73zM4.131 3.429l10.406-.766c1.277-.11 1.606-.036 2.41.547l3.321 2.335c.548.401.731.51.731.948v12.805c0 .803-.292 1.277-1.314 1.35l-12.085.73c-.767.036-1.132-.073-1.534-.584L3.62 17.62c-.438-.584-.62-1.021-.62-1.533V4.705c0-.656.292-1.203 1.132-1.276"/>
+  </symbol>
+
   <symbol id="icon-shopify"  viewBox="0 0 32 32">
     <path fill="currentColor" d="m20.448 31.974l9.625-2.083s-3.474-23.484-3.5-23.641s-.156-.255-.281-.255c-.13 0-2.573-.182-2.573-.182s-1.703-1.698-1.922-1.88a.4.4 0 0 0-.161-.099l-1.219 28.141zm-4.833-16.901s-1.083-.563-2.365-.563c-1.932 0-2.005 1.203-2.005 1.521c0 1.641 4.318 2.286 4.318 6.172c0 3.057-1.922 5.01-4.542 5.01c-3.141 0-4.719-1.953-4.719-1.953l.859-2.781s1.661 1.422 3.042 1.422c.901 0 1.302-.724 1.302-1.245c0-2.156-3.542-2.255-3.542-5.807c-.047-2.984 2.094-5.891 6.438-5.891c1.677 0 2.5.479 2.5.479l-1.26 3.625zm-.719-13.969c.177 0 .359.052.536.182c-1.313.62-2.75 2.188-3.344 5.323a76 76 0 0 1-2.516.771c.688-2.38 2.359-6.26 5.323-6.26zm1.646 3.932v.182c-1.005.307-2.115.646-3.193.979c.62-2.37 1.776-3.526 2.781-3.958c.255.667.411 1.568.411 2.797zm.718-2.973c.922.094 1.521 1.151 1.901 2.339c-.464.151-.979.307-1.542.484v-.333c0-1.005-.13-1.828-.359-2.495zm3.99 1.718c-.031 0-.083.026-.104.026c-.026 0-.385.099-.953.281C19.63 2.442 18.625.927 16.849.927h-.156C16.183.281 15.558 0 15.021 0c-4.141 0-6.12 5.172-6.74 7.797c-1.594.484-2.75.844-2.88.896c-.901.286-.927.313-1.031 1.161c-.099.615-2.438 18.75-2.438 18.75L20.01 32z"/>
   </symbol>
+
   <symbol id="icon-slack" viewBox="0 0 24 24">
     <path fill="currentColor" d="M6.527 14.514A1.973 1.973 0 0 1 4.56 16.48a1.973 1.973 0 0 1-1.968-1.967c0-1.083.885-1.968 1.968-1.968h1.967zm.992 0c0-1.083.885-1.968 1.968-1.968s1.967.885 1.967 1.968v4.927a1.973 1.973 0 0 1-1.967 1.968a1.973 1.973 0 0 1-1.968-1.968zm1.968-7.987A1.973 1.973 0 0 1 7.519 4.56c0-1.083.885-1.967 1.968-1.967s1.967.884 1.967 1.967v1.968zm0 .992c1.083 0 1.967.884 1.967 1.967a1.973 1.973 0 0 1-1.967 1.968H4.56a1.973 1.973 0 0 1-1.968-1.968c0-1.083.885-1.967 1.968-1.967zm7.986 1.967c0-1.083.885-1.967 1.968-1.967s1.968.884 1.968 1.967a1.973 1.973 0 0 1-1.968 1.968h-1.968zm-.991 0a1.973 1.973 0 0 1-1.968 1.968a1.973 1.973 0 0 1-1.968-1.968V4.56c0-1.083.885-1.967 1.968-1.967s1.968.884 1.968 1.967zm-1.968 7.987c1.083 0 1.968.885 1.968 1.968a1.973 1.973 0 0 1-1.968 1.968a1.973 1.973 0 0 1-1.968-1.968v-1.968zm0-.992a1.973 1.973 0 0 1-1.968-1.967c0-1.083.885-1.968 1.968-1.968h4.927c1.083 0 1.968.885 1.968 1.968a1.973 1.973 0 0 1-1.968 1.967z"/>
   </symbol>
diff --git a/config/features.yml b/config/features.yml
index 131456c72..5171b1c01 100644
--- a/config/features.yml
+++ b/config/features.yml
@@ -168,4 +168,11 @@
   enabled: true
 - name: crm_integration
   display_name: CRM Integration
-  enabled: false
\ No newline at end of file
+  enabled: false
+- name: channel_voice
+  display_name: Voice Channel
+  enabled: false
+  chatwoot_internal: true
+- name: notion_integration
+  display_name: Notion Integration
+  enabled: false
diff --git a/config/installation_config.yml b/config/installation_config.yml
index 66538d4ab..a089a4ea7 100644
--- a/config/installation_config.yml
+++ b/config/installation_config.yml
@@ -288,6 +288,25 @@
   type: secret
 ## ------ End of Configs added for Linear ------ ##
 
+## ------ Configs added for Notion ------ ##
+- name: NOTION_CLIENT_ID
+  display_title: 'Notion Client ID'
+  value:
+  locked: false
+  description: 'Notion client ID'
+- name: NOTION_CLIENT_SECRET
+  display_title: 'Notion Client Secret'
+  value:
+  locked: false
+  description: 'Notion client secret'
+  type: secret
+- name: NOTION_VERSION
+  display_title: 'Notion Version'
+  value: '2022-06-28'
+  locked: false
+  description: 'Notion version'
+## ------ End of Configs added for Notion ------ ##
+
 ## ------ Configs added for Slack ------ ##
 - name: SLACK_CLIENT_ID
   display_title: 'Slack Client ID'
diff --git a/config/integration/apps.yml b/config/integration/apps.yml
index 1faf35670..dd5c722a4 100644
--- a/config/integration/apps.yml
+++ b/config/integration/apps.yml
@@ -63,6 +63,12 @@ linear:
   action: https://linear.app/oauth/authorize
   hook_type: account
   allow_multiple_hooks: false
+notion:
+  id: notion
+  logo: notion.png
+  i18n_key: notion
+  hook_type: account
+  allow_multiple_hooks: false
 slack:
   id: slack
   logo: slack.png
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 181a9399f..221f83472 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -257,6 +257,10 @@ en:
       name: 'Linear'
       short_description: 'Create and link Linear issues directly from conversations.'
       description: 'Create issues in Linear directly from your conversation window. Alternatively, link existing Linear issues for a more streamlined and efficient issue tracking process.'
+    notion:
+      name: 'Notion'
+      short_description: 'Integrate databases, documents and pages directly with Captain.'
+      description: 'Connect your Notion workspace to enable Captain to access and generate intelligent responses using content from your databases, documents, and pages to provide more contextual customer support.'
     shopify:
       name: 'Shopify'
       short_description: 'Access order details and customer data from your Shopify store.'
@@ -266,6 +270,7 @@ en:
       short_description: 'Sync your contacts and conversations with LeadSquared CRM.'
       description: 'Sync your contacts and conversations with LeadSquared CRM. This integration automatically creates leads in LeadSquared when new contacts are added, and logs conversation activity to provide your sales team with complete context.'
   captain:
+    copilot_message_required: Message is required
     copilot_error: 'Please connect an assistant to this inbox to use Copilot'
     copilot_limit: 'You are out of Copilot credits. You can buy more credits from the billing section.'
     copilot:
diff --git a/config/routes.rb b/config/routes.rb
index a8055c2e1..a977c613e 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -232,6 +232,10 @@ Rails.application.routes.draw do
             resource :authorization, only: [:create]
           end
 
+          namespace :notion do
+            resource :authorization, only: [:create]
+          end
+
           resources :webhooks, only: [:index, :create, :update, :destroy]
           namespace :integrations do
             resources :apps, only: [:index, :show]
@@ -269,6 +273,11 @@ Rails.application.routes.draw do
                 get :linked_issues
               end
             end
+            resource :notion, controller: 'notion', only: [] do
+              collection do
+                delete :destroy
+              end
+            end
           end
           resources :working_hours, only: [:update]
 
@@ -497,6 +506,7 @@ Rails.application.routes.draw do
   get 'microsoft/callback', to: 'microsoft/callbacks#show'
   get 'google/callback', to: 'google/callbacks#show'
   get 'instagram/callback', to: 'instagram/callbacks#show'
+  get 'notion/callback', to: 'notion/callbacks#show'
   # ----------------------------------------------------------------------
   # Routes for external service verifications
   get '.well-known/assetlinks.json' => 'android_app#assetlinks'
diff --git a/db/migrate/20250620120000_create_channel_voice.rb b/db/migrate/20250620120000_create_channel_voice.rb
new file mode 100644
index 000000000..9e2a25723
--- /dev/null
+++ b/db/migrate/20250620120000_create_channel_voice.rb
@@ -0,0 +1,16 @@
+class CreateChannelVoice < ActiveRecord::Migration[7.0]
+  def change
+    create_table :channel_voice do |t|
+      t.string :phone_number, null: false
+      t.string :provider, null: false, default: 'twilio'
+      t.jsonb :provider_config, null: false
+      t.integer :account_id, null: false
+      t.jsonb :additional_attributes, default: {}
+
+      t.timestamps
+    end
+
+    add_index :channel_voice, :phone_number, unique: true
+    add_index :channel_voice, :account_id
+  end
+end
\ No newline at end of file
diff --git a/db/migrate/20250627195529_add_index_to_messages.rb b/db/migrate/20250627195529_add_index_to_messages.rb
new file mode 100644
index 000000000..eb6b95cdd
--- /dev/null
+++ b/db/migrate/20250627195529_add_index_to_messages.rb
@@ -0,0 +1,22 @@
+class AddIndexToMessages < ActiveRecord::Migration[7.0]
+  disable_ddl_transaction!
+
+  def change
+    # This index is added as a temporary fix for performance issues in the CSAT
+    # responses controller where we query messages with account_id, content_type
+    # and created_at. The current implementation (account.message.input_csat.count)
+    # times out with millions of messages.
+    #
+    # TODO: Create a dedicated csat_survey table and add entries when surveys are
+    # sent, then query this table instead of the entire messages table for better
+    # performance.
+    return if index_exists?(
+      :messages,
+      [:account_id, :content_type, :created_at],
+      name: 'idx_messages_account_content_created'
+    )
+
+    add_index :messages, [:account_id, :content_type, :created_at],
+              name: 'idx_messages_account_content_created', algorithm: :concurrently
+  end
+end
diff --git a/enterprise/app/controllers/api/v1/accounts/captain/copilot_threads_controller.rb b/enterprise/app/controllers/api/v1/accounts/captain/copilot_threads_controller.rb
index 533859b95..8ea85145e 100644
--- a/enterprise/app/controllers/api/v1/accounts/captain/copilot_threads_controller.rb
+++ b/enterprise/app/controllers/api/v1/accounts/captain/copilot_threads_controller.rb
@@ -23,14 +23,25 @@ class Api::V1::Accounts::Captain::CopilotThreadsController < Api::V1::Accounts::
         message: { content: copilot_thread_params[:message] }
       )
 
-      copilot_message.enqueue_response_job(copilot_thread_params[:conversation_id], Current.user.id)
+      build_copilot_response(copilot_message)
     end
   end
 
   private
 
+  def build_copilot_response(copilot_message)
+    if Current.account.usage_limits[:captain][:responses][:current_available].positive?
+      copilot_message.enqueue_response_job(copilot_thread_params[:conversation_id], Current.user.id)
+    else
+      copilot_message.copilot_thread.copilot_messages.create!(
+        message_type: :assistant,
+        message: { content: I18n.t('captain.copilot_limit') }
+      )
+    end
+  end
+
   def ensure_message
-    return render_could_not_create_error('Message is required') if copilot_thread_params[:message].blank?
+    return render_could_not_create_error(I18n.t('captain.copilot_message_required')) if copilot_thread_params[:message].blank?
   end
 
   def assistant
diff --git a/enterprise/app/controllers/enterprise/api/v1/accounts/inboxes_controller.rb b/enterprise/app/controllers/enterprise/api/v1/accounts/inboxes_controller.rb
index b39db609d..396c3a91d 100644
--- a/enterprise/app/controllers/enterprise/api/v1/accounts/inboxes_controller.rb
+++ b/enterprise/app/controllers/enterprise/api/v1/accounts/inboxes_controller.rb
@@ -6,4 +6,28 @@ module Enterprise::Api::V1::Accounts::InboxesController
   def ee_inbox_attributes
     [auto_assignment_config: [:max_assignment_limit]]
   end
+
+  private
+
+  def allowed_channel_types
+    super + ['voice']
+  end
+
+  def channel_type_from_params
+    case permitted_params[:channel][:type]
+    when 'voice'
+      Channel::Voice
+    else
+      super
+    end
+  end
+
+  def account_channels_method
+    case permitted_params[:channel][:type]
+    when 'voice'
+      Current.account.voice_channels
+    else
+      super
+    end
+  end
 end
diff --git a/enterprise/app/helpers/super_admin/features.yml b/enterprise/app/helpers/super_admin/features.yml
index c20de2dfa..e86f66832 100644
--- a/enterprise/app/helpers/super_admin/features.yml
+++ b/enterprise/app/helpers/super_admin/features.yml
@@ -91,6 +91,12 @@ linear:
   enabled: true
   icon: 'icon-linear'
   config_key: 'linear'
+notion:
+  name: 'Notion'
+  description: 'Configuration for setting up Notion Integration'
+  enabled: true
+  icon: 'icon-notion'
+  config_key: 'notion'
 slack:
   name: 'Slack'
   description: 'Configuration for setting up Slack Integration'
diff --git a/enterprise/app/models/channel/voice.rb b/enterprise/app/models/channel/voice.rb
new file mode 100644
index 000000000..a313129e2
--- /dev/null
+++ b/enterprise/app/models/channel/voice.rb
@@ -0,0 +1,64 @@
+# == Schema Information
+#
+# Table name: channel_voice
+#
+#  id                    :bigint           not null, primary key
+#  additional_attributes :jsonb
+#  phone_number          :string           not null
+#  provider              :string           default("twilio"), not null
+#  provider_config       :jsonb            not null
+#  created_at            :datetime         not null
+#  updated_at            :datetime         not null
+#  account_id            :integer          not null
+#
+# Indexes
+#
+#  index_channel_voice_on_account_id    (account_id)
+#  index_channel_voice_on_phone_number  (phone_number) UNIQUE
+#
+class Channel::Voice < ApplicationRecord
+  include Channelable
+
+  self.table_name = 'channel_voice'
+
+  validates :phone_number, presence: true, uniqueness: true
+  validates :provider, presence: true
+  validates :provider_config, presence: true
+
+  # Validate phone number format (E.164 format)
+  validates :phone_number, format: { with: /\A\+[1-9]\d{1,14}\z/ }
+
+  # Provider-specific configs stored in JSON
+  validate :validate_provider_config
+
+  EDITABLE_ATTRS = [:phone_number, :provider, { provider_config: {} }].freeze
+
+  def name
+    "Voice (#{phone_number})"
+  end
+
+  def messaging_window_enabled?
+    false
+  end
+
+  private
+
+  def validate_provider_config
+    return if provider_config.blank?
+
+    case provider
+    when 'twilio'
+      validate_twilio_config
+    end
+  end
+
+  def validate_twilio_config
+    config = provider_config.with_indifferent_access
+    required_keys = %w[account_sid auth_token api_key_sid api_key_secret]
+
+    required_keys.each do |key|
+      errors.add(:provider_config, "#{key} is required for Twilio provider") if config[key].blank?
+    end
+  end
+end
+
diff --git a/enterprise/app/models/enterprise/concerns/account.rb b/enterprise/app/models/enterprise/concerns/account.rb
index 4a573a4c4..c31b6c10e 100644
--- a/enterprise/app/models/enterprise/concerns/account.rb
+++ b/enterprise/app/models/enterprise/concerns/account.rb
@@ -11,5 +11,6 @@ module Enterprise::Concerns::Account
     has_many :captain_documents, dependent: :destroy_async, class_name: 'Captain::Document'
 
     has_many :copilot_threads, dependent: :destroy_async
+    has_many :voice_channels, dependent: :destroy_async, class_name: '::Channel::Voice'
   end
 end
diff --git a/enterprise/app/models/enterprise/inbox.rb b/enterprise/app/models/enterprise/inbox.rb
index 4cd627e41..0ae21ce00 100644
--- a/enterprise/app/models/enterprise/inbox.rb
+++ b/enterprise/app/models/enterprise/inbox.rb
@@ -1,5 +1,7 @@
 module Enterprise::Inbox
   def member_ids_with_assignment_capacity
+    return super unless enable_auto_assignment?
+
     max_assignment_limit = auto_assignment_config['max_assignment_limit']
     overloaded_agent_ids = max_assignment_limit.present? ? get_agent_ids_over_assignment_limit(max_assignment_limit) : []
     super - overloaded_agent_ids
diff --git a/enterprise/app/services/enterprise/billing/create_stripe_customer_service.rb b/enterprise/app/services/enterprise/billing/create_stripe_customer_service.rb
index 76c09a27a..e4df1050b 100644
--- a/enterprise/app/services/enterprise/billing/create_stripe_customer_service.rb
+++ b/enterprise/app/services/enterprise/billing/create_stripe_customer_service.rb
@@ -4,6 +4,8 @@ class Enterprise::Billing::CreateStripeCustomerService
   DEFAULT_QUANTITY = 2
 
   def perform
+    return if existing_subscription?
+
     customer_id = prepare_customer_id
     subscription = Stripe::Subscription.create(
       {
@@ -50,4 +52,18 @@ class Enterprise::Billing::CreateStripeCustomerService
     price_ids = default_plan['price_ids']
     price_ids.first
   end
+
+  def existing_subscription?
+    stripe_customer_id = account.custom_attributes['stripe_customer_id']
+    return false if stripe_customer_id.blank?
+
+    subscriptions = Stripe::Subscription.list(
+      {
+        customer: stripe_customer_id,
+        status: 'active',
+        limit: 1
+      }
+    )
+    subscriptions.data.present?
+  end
 end
diff --git a/enterprise/app/views/fields/account_features_field/_form.html.erb b/enterprise/app/views/fields/account_features_field/_form.html.erb
index 6c3b33ae9..ffdd33091 100644
--- a/enterprise/app/views/fields/account_features_field/_form.html.erb
+++ b/enterprise/app/views/fields/account_features_field/_form.html.erb
@@ -9,7 +9,7 @@
       <% feature_key, display_name = key_array %>
       <div class="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm outline outline-1 outline-n-container">
         <span class="text-sm text-slate-700"><%= display_name %></span>
-        <span><%= check_box "enabled_features", "feature_#{feature_key}", { checked: val, class: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-600" }, true, false %></span>
+        <span><%= check_box "enabled_features", "feature_#{feature_key}", { checked: val, class: "h-4 w-4 rounded border-slate-300 text-violet-600 focus:ring-violet-600" }, true, false %></span>
       </div>
     <% end %>
   </div>
@@ -27,7 +27,7 @@
           <span class="text-sm text-slate-700"><%= display_name %></span>
         </div>
         <% should_disable = ChatwootHub.pricing_plan == 'community' %>
-        <span><%= check_box "enabled_features", "feature_#{feature_key}", { checked: val, disabled: should_disable, class: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-600" }, true, false %></span>
+        <span><%= check_box "enabled_features", "feature_#{feature_key}", { checked: val, disabled: should_disable, class: "h-4 w-4 rounded border-slate-300 text-violet-600 focus:ring-violet-600" }, true, false %></span>
       </div>
     <% end %>
   </div>
diff --git a/enterprise/app/views/fields/manually_managed_features_field/_form.html.erb b/enterprise/app/views/fields/manually_managed_features_field/_form.html.erb
index b84da3d5c..97b21090a 100644
--- a/enterprise/app/views/fields/manually_managed_features_field/_form.html.erb
+++ b/enterprise/app/views/fields/manually_managed_features_field/_form.html.erb
@@ -29,7 +29,7 @@
           <%= check_box_tag "account[manually_managed_features][]", 
                          feature_key, 
                          selected_features.include?(feature_key), 
-                         class: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-600" %>
+                         class: "h-4 w-4 rounded border-slate-300 text-violet-600 focus:ring-violet-600" %>
         </span>
       </div>
     <% end %>
diff --git a/lib/integrations/linear/processor_service.rb b/lib/integrations/linear/processor_service.rb
index a53d17f4c..a3447b79e 100644
--- a/lib/integrations/linear/processor_service.rb
+++ b/lib/integrations/linear/processor_service.rb
@@ -22,8 +22,8 @@ class Integrations::Linear::ProcessorService
     }
   end
 
-  def create_issue(params)
-    response = linear_client.create_issue(params)
+  def create_issue(params, user = nil)
+    response = linear_client.create_issue(params, user)
     return response if response[:error]
 
     {
@@ -33,8 +33,8 @@ class Integrations::Linear::ProcessorService
     }
   end
 
-  def link_issue(link, issue_id, title)
-    response = linear_client.link_issue(link, issue_id, title)
+  def link_issue(link, issue_id, title, user = nil)
+    response = linear_client.link_issue(link, issue_id, title, user)
     return response if response[:error]
 
     {
diff --git a/lib/linear.rb b/lib/linear.rb
index 8bf967fc3..2ffcf8cca 100644
--- a/lib/linear.rb
+++ b/lib/linear.rb
@@ -1,5 +1,6 @@
 class Linear
   BASE_URL = 'https://api.linear.app/graphql'.freeze
+  REVOKE_URL = 'https://api.linear.app/oauth/revoke'.freeze
   PRIORITY_LEVELS = (0..4).to_a
 
   def initialize(access_token)
@@ -45,33 +46,24 @@ class Linear
     process_response(response)
   end
 
-  def create_issue(params)
+  def create_issue(params, user = nil)
     validate_team_and_title(params)
     validate_priority(params[:priority])
     validate_label_ids(params[:label_ids])
 
-    variables = {
-      title: params[:title],
-      teamId: params[:team_id],
-      description: params[:description],
-      assigneeId: params[:assignee_id],
-      priority: params[:priority],
-      labelIds: params[:label_ids],
-      projectId: params[:project_id],
-      stateId: params[:state_id]
-    }.compact
+    variables = build_issue_variables(params, user)
     mutation = Linear::Mutations.issue_create(variables)
     response = post({ query: mutation })
     process_response(response)
   end
 
-  def link_issue(link, issue_id, title)
+  def link_issue(link, issue_id, title, user = nil)
     raise ArgumentError, 'Missing link' if link.blank?
     raise ArgumentError, 'Missing issue id' if issue_id.blank?
 
-    payload = {
-      query: Linear::Mutations.issue_link(issue_id, link, title)
-    }
+    link_params = build_link_params(issue_id, link, title, user)
+    payload = { query: Linear::Mutations.issue_link(link_params) }
+
     response = post(payload)
     process_response(response)
   end
@@ -86,8 +78,52 @@ class Linear
     process_response(response)
   end
 
+  def revoke_token
+    response = HTTParty.post(
+      REVOKE_URL,
+      headers: { 'Authorization' => "Bearer #{@access_token}", 'Content-Type' => 'application/json' }
+    )
+    response.success?
+  end
+
   private
 
+  def build_issue_variables(params, user)
+    variables = {
+      title: params[:title],
+      teamId: params[:team_id],
+      description: params[:description],
+      assigneeId: params[:assignee_id],
+      priority: params[:priority],
+      labelIds: params[:label_ids],
+      projectId: params[:project_id],
+      stateId: params[:state_id]
+    }.compact
+
+    # Add user attribution if available
+    if user&.name.present?
+      variables[:createAsUser] = user.name
+      variables[:displayIconUrl] = user.avatar_url if user.avatar_url.present?
+    end
+
+    variables
+  end
+
+  def build_link_params(issue_id, link, title, user)
+    params = {
+      issue_id: issue_id,
+      link: link,
+      title: title
+    }
+
+    if user.present?
+      params[:user_name] = user.name if user.name.present?
+      params[:user_avatar_url] = user.avatar_url if user.avatar_url.present?
+    end
+
+    params
+  end
+
   def validate_team_and_title(params)
     raise ArgumentError, 'Missing team id' if params[:team_id].blank?
     raise ArgumentError, 'Missing title' if params[:title].blank?
diff --git a/lib/linear/mutations.rb b/lib/linear/mutations.rb
index 04774c705..5f34e602b 100644
--- a/lib/linear/mutations.rb
+++ b/lib/linear/mutations.rb
@@ -32,10 +32,22 @@ module Linear::Mutations
     GRAPHQL
   end
 
-  def self.issue_link(issue_id, link, title)
+  def self.issue_link(params)
+    issue_id = params[:issue_id]
+    link = params[:link]
+    title = params[:title]
+    user_name = params[:user_name]
+    user_avatar_url = params[:user_avatar_url]
+
+    user_params = []
+    user_params << "createAsUser: #{graphql_value(user_name)}" if user_name.present?
+    user_params << "displayIconUrl: #{graphql_value(user_avatar_url)}" if user_avatar_url.present?
+
+    user_params_str = user_params.any? ? ", #{user_params.join(', ')}" : ''
+
     <<~GRAPHQL
       mutation {
-        attachmentLinkURL(url: "#{link}", issueId: "#{issue_id}", title: "#{title}") {
+        attachmentLinkURL(url: "#{link}", issueId: "#{issue_id}", title: "#{title}"#{user_params_str}) {
           success
           attachment {
             id
diff --git a/public/assets/images/dashboard/channels/voice.png b/public/assets/images/dashboard/channels/voice.png
new file mode 100644
index 000000000..7c9481faf
Binary files /dev/null and b/public/assets/images/dashboard/channels/voice.png differ
diff --git a/public/dashboard/images/integrations/notion-dark.png b/public/dashboard/images/integrations/notion-dark.png
new file mode 100644
index 000000000..7d15c715e
Binary files /dev/null and b/public/dashboard/images/integrations/notion-dark.png differ
diff --git a/public/dashboard/images/integrations/notion.png b/public/dashboard/images/integrations/notion.png
new file mode 100644
index 000000000..a358e8a51
Binary files /dev/null and b/public/dashboard/images/integrations/notion.png differ
diff --git a/spec/controllers/api/v1/accounts/integrations/linear_controller_spec.rb b/spec/controllers/api/v1/accounts/integrations/linear_controller_spec.rb
index 851c5dbaf..5f512b2bd 100644
--- a/spec/controllers/api/v1/accounts/integrations/linear_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/integrations/linear_controller_spec.rb
@@ -14,6 +14,12 @@ RSpec.describe 'Linear Integration API', type: :request do
 
   describe 'DELETE /api/v1/accounts/:account_id/integrations/linear' do
     it 'deletes the linear integration' do
+      # Stub the HTTP call to Linear's revoke endpoint
+      allow(HTTParty).to receive(:post).with(
+        'https://api.linear.app/oauth/revoke',
+        anything
+      ).and_return(instance_double(HTTParty::Response, success?: true))
+
       delete "/api/v1/accounts/#{account.id}/integrations/linear",
              headers: agent.create_new_auth_token,
              as: :json
@@ -113,7 +119,7 @@ RSpec.describe 'Linear Integration API', type: :request do
         let(:created_issue) { { data: { identifier: 'ENG-123', title: 'Sample Issue' } } }
 
         it 'returns the created issue' do
-          allow(processor_service).to receive(:create_issue).with(issue_params.stringify_keys).and_return(created_issue)
+          allow(processor_service).to receive(:create_issue).with(issue_params.stringify_keys, agent).and_return(created_issue)
 
           post "/api/v1/accounts/#{account.id}/integrations/linear/create_issue",
                params: issue_params,
@@ -125,7 +131,7 @@ RSpec.describe 'Linear Integration API', type: :request do
         end
 
         it 'creates activity message when conversation is provided' do
-          allow(processor_service).to receive(:create_issue).with(issue_params.stringify_keys).and_return(created_issue)
+          allow(processor_service).to receive(:create_issue).with(issue_params.stringify_keys, agent).and_return(created_issue)
 
           expect do
             post "/api/v1/accounts/#{account.id}/integrations/linear/create_issue",
@@ -144,7 +150,7 @@ RSpec.describe 'Linear Integration API', type: :request do
 
       context 'when issue creation fails' do
         it 'returns error message and does not create activity message' do
-          allow(processor_service).to receive(:create_issue).with(issue_params.stringify_keys).and_return(error: 'error message')
+          allow(processor_service).to receive(:create_issue).with(issue_params.stringify_keys, agent).and_return(error: 'error message')
 
           expect do
             post "/api/v1/accounts/#{account.id}/integrations/linear/create_issue",
@@ -171,7 +177,7 @@ RSpec.describe 'Linear Integration API', type: :request do
         let(:linked_issue) { { data: { 'id' => 'issue1', 'link' => 'https://linear.app/issue1' } } }
 
         it 'returns the linked issue and creates activity message' do
-          allow(processor_service).to receive(:link_issue).with(link, issue_id, title).and_return(linked_issue)
+          allow(processor_service).to receive(:link_issue).with(link, issue_id, title, agent).and_return(linked_issue)
 
           expect do
             post "/api/v1/accounts/#{account.id}/integrations/linear/link_issue",
@@ -193,7 +199,7 @@ RSpec.describe 'Linear Integration API', type: :request do
 
       context 'when issue linking fails' do
         it 'returns error message and does not create activity message' do
-          allow(processor_service).to receive(:link_issue).with(link, issue_id, title).and_return(error: 'error message')
+          allow(processor_service).to receive(:link_issue).with(link, issue_id, title, agent).and_return(error: 'error message')
 
           expect do
             post "/api/v1/accounts/#{account.id}/integrations/linear/link_issue",
diff --git a/spec/controllers/api/v1/accounts/notion/authorization_controller_spec.rb b/spec/controllers/api/v1/accounts/notion/authorization_controller_spec.rb
new file mode 100644
index 000000000..ac4bc2841
--- /dev/null
+++ b/spec/controllers/api/v1/accounts/notion/authorization_controller_spec.rb
@@ -0,0 +1,53 @@
+require 'rails_helper'
+
+RSpec.describe 'Notion Authorization API', type: :request do
+  let(:account) { create(:account) }
+
+  describe 'POST /api/v1/accounts/{account.id}/notion/authorization' do
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        post "/api/v1/accounts/#{account.id}/notion/authorization"
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      let(:agent) { create(:user, account: account, role: :agent) }
+      let(:administrator) { create(:user, account: account, role: :administrator) }
+
+      it 'returns unauthorized for agent' do
+        post "/api/v1/accounts/#{account.id}/notion/authorization",
+             headers: agent.create_new_auth_token,
+             params: { email: administrator.email },
+             as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+
+      it 'creates a new authorization and returns the redirect url' do
+        post "/api/v1/accounts/#{account.id}/notion/authorization",
+             headers: administrator.create_new_auth_token,
+             params: { email: administrator.email },
+             as: :json
+
+        expect(response).to have_http_status(:success)
+
+        # Validate URL components
+        url = response.parsed_body['url']
+        uri = URI.parse(url)
+        params = CGI.parse(uri.query)
+
+        expect(url).to start_with('https://api.notion.com/v1/oauth/authorize')
+        expect(params['response_type']).to eq(['code'])
+        expect(params['owner']).to eq(['user'])
+        expect(params['redirect_uri']).to eq(["#{ENV.fetch('FRONTEND_URL', 'http://localhost:3000')}/notion/callback"])
+
+        # Validate state parameter exists and can be decoded back to the account
+        expect(params['state']).to be_present
+        decoded_account = GlobalID::Locator.locate_signed(params['state'].first, for: 'default')
+        expect(decoded_account).to eq(account)
+      end
+    end
+  end
+end
\ No newline at end of file
diff --git a/spec/controllers/concerns/notion_concern_spec.rb b/spec/controllers/concerns/notion_concern_spec.rb
new file mode 100644
index 000000000..7ae11b17d
--- /dev/null
+++ b/spec/controllers/concerns/notion_concern_spec.rb
@@ -0,0 +1,56 @@
+require 'rails_helper'
+
+RSpec.describe NotionConcern, type: :concern do
+  let(:controller_class) do
+    Class.new do
+      include NotionConcern
+    end
+  end
+
+  let(:controller) { controller_class.new }
+
+  describe '#notion_client' do
+    let(:client_id) { 'test_notion_client_id' }
+    let(:client_secret) { 'test_notion_client_secret' }
+
+    before do
+      allow(GlobalConfigService).to receive(:load).with('NOTION_CLIENT_ID', nil).and_return(client_id)
+      allow(GlobalConfigService).to receive(:load).with('NOTION_CLIENT_SECRET', nil).and_return(client_secret)
+    end
+
+    it 'creates OAuth2 client with correct configuration' do
+      expect(OAuth2::Client).to receive(:new).with(
+        client_id,
+        client_secret,
+        {
+          site: 'https://api.notion.com',
+          authorize_url: 'https://api.notion.com/v1/oauth/authorize',
+          token_url: 'https://api.notion.com/v1/oauth/token',
+          auth_scheme: :basic_auth
+        }
+      )
+
+      controller.notion_client
+    end
+
+    it 'loads client credentials from GlobalConfigService' do
+      expect(GlobalConfigService).to receive(:load).with('NOTION_CLIENT_ID', nil)
+      expect(GlobalConfigService).to receive(:load).with('NOTION_CLIENT_SECRET', nil)
+
+      controller.notion_client
+    end
+
+    it 'returns OAuth2::Client instance' do
+      client = controller.notion_client
+      expect(client).to be_an_instance_of(OAuth2::Client)
+    end
+
+    it 'configures client with Notion-specific endpoints' do
+      client = controller.notion_client
+      expect(client.site).to eq('https://api.notion.com')
+      expect(client.options[:authorize_url]).to eq('https://api.notion.com/v1/oauth/authorize')
+      expect(client.options[:token_url]).to eq('https://api.notion.com/v1/oauth/token')
+      expect(client.options[:auth_scheme]).to eq(:basic_auth)
+    end
+  end
+end
diff --git a/spec/controllers/notion/callbacks_controller_spec.rb b/spec/controllers/notion/callbacks_controller_spec.rb
new file mode 100644
index 000000000..045bbe396
--- /dev/null
+++ b/spec/controllers/notion/callbacks_controller_spec.rb
@@ -0,0 +1,112 @@
+require 'rails_helper'
+
+RSpec.describe Notion::CallbacksController, type: :request do
+  let(:account) { create(:account) }
+  let(:state) { account.to_sgid.to_s }
+  let(:oauth_code) { 'test_oauth_code' }
+  let(:notion_redirect_uri) { "#{ENV.fetch('FRONTEND_URL', 'http://localhost:3000')}/app/accounts/#{account.id}/settings/integrations/notion" }
+
+  let(:notion_response_body) do
+    {
+      'access_token' => 'notion_access_token_123',
+      'token_type' => 'bearer',
+      'workspace_name' => 'Test Workspace',
+      'workspace_id' => 'workspace_123',
+      'workspace_icon' => 'https://notion.so/icon.png',
+      'bot_id' => 'bot_123',
+      'owner' => {
+        'type' => 'user',
+        'user' => {
+          'id' => 'user_123',
+          'name' => 'Test User'
+        }
+      }
+    }
+  end
+
+  describe 'GET /notion/callback' do
+    before do
+      account.enable_features('notion_integration')
+      stub_const('ENV', ENV.to_hash.merge(
+                          'FRONTEND_URL' => 'http://localhost:3000',
+                          'NOTION_CLIENT_ID' => 'test_client_id',
+                          'NOTION_CLIENT_SECRET' => 'test_client_secret'
+                        ))
+
+      controller = described_class.new
+      allow(controller).to receive(:account).and_return(account)
+      allow(controller).to receive(:notion_redirect_uri).and_return(notion_redirect_uri)
+      allow(described_class).to receive(:new).and_return(controller)
+    end
+
+    context 'when OAuth callback is successful' do
+      before do
+        stub_request(:post, 'https://api.notion.com/v1/oauth/token')
+          .to_return(
+            status: 200,
+            body: notion_response_body.to_json,
+            headers: { 'Content-Type' => 'application/json' }
+          )
+      end
+
+      it 'creates a new integration hook' do
+        expect do
+          get '/notion/callback', params: { code: oauth_code, state: state }
+        end.to change(Integrations::Hook, :count).by(1)
+
+        hook = Integrations::Hook.last
+        expect(hook.access_token).to eq('notion_access_token_123')
+        expect(hook.app_id).to eq('notion')
+        expect(hook.status).to eq('enabled')
+      end
+
+      it 'sets correct hook attributes' do
+        get '/notion/callback', params: { code: oauth_code, state: state }
+
+        hook = Integrations::Hook.last
+        expect(hook.account).to eq(account)
+        expect(hook.app_id).to eq('notion')
+        expect(hook.access_token).to eq('notion_access_token_123')
+        expect(hook.status).to eq('enabled')
+      end
+
+      it 'stores notion workspace data in settings' do
+        get '/notion/callback', params: { code: oauth_code, state: state }
+
+        hook = Integrations::Hook.last
+        expect(hook.settings['token_type']).to eq('bearer')
+        expect(hook.settings['workspace_name']).to eq('Test Workspace')
+        expect(hook.settings['workspace_id']).to eq('workspace_123')
+        expect(hook.settings['workspace_icon']).to eq('https://notion.so/icon.png')
+        expect(hook.settings['bot_id']).to eq('bot_123')
+        expect(hook.settings['owner']).to eq(notion_response_body['owner'])
+      end
+
+      it 'handles successful callback and creates hook' do
+        get '/notion/callback', params: { code: oauth_code, state: state }
+
+        # Due to controller mocking limitations in test,
+        # the redirect URL construction fails but hook creation succeeds
+        expect(Integrations::Hook.last.app_id).to eq('notion')
+        expect(response).to be_redirect
+      end
+    end
+
+    context 'when OAuth token request fails' do
+      before do
+        stub_request(:post, 'https://api.notion.com/v1/oauth/token')
+          .to_return(
+            status: 400,
+            body: { error: 'invalid_grant' }.to_json,
+            headers: { 'Content-Type' => 'application/json' }
+          )
+      end
+
+      it 'redirects to home page on error' do
+        get '/notion/callback', params: { code: oauth_code, state: state }
+
+        expect(response).to redirect_to('/')
+      end
+    end
+  end
+end
diff --git a/spec/enterprise/controllers/api/v1/accounts/captain/copilot_threads_controller_spec.rb b/spec/enterprise/controllers/api/v1/accounts/captain/copilot_threads_controller_spec.rb
index b8fc628d1..8b561f22a 100644
--- a/spec/enterprise/controllers/api/v1/accounts/captain/copilot_threads_controller_spec.rb
+++ b/spec/enterprise/controllers/api/v1/accounts/captain/copilot_threads_controller_spec.rb
@@ -86,7 +86,28 @@ RSpec.describe 'Api::V1::Accounts::Captain::CopilotThreads', type: :request do
       end
 
       context 'with valid params' do
+        it 'returns error when usage limit is exceeded' do
+          account.limits = { captain_responses: 2 }
+          account.custom_attributes = { captain_responses_usage: 2 }
+          account.save!
+
+          post "/api/v1/accounts/#{account.id}/captain/copilot_threads",
+               params: valid_params,
+               headers: agent.create_new_auth_token,
+               as: :json
+
+          expect(response).to have_http_status(:success)
+
+          expect(CopilotMessage.last.message['content']).to eq(
+            'You are out of Copilot credits. You can buy more credits from the billing section.'
+          )
+        end
+
         it 'creates a new copilot thread with initial message' do
+          account.limits = { captain_responses: 2 }
+          account.custom_attributes = { captain_responses_usage: 0 }
+          account.save!
+
           expect do
             post "/api/v1/accounts/#{account.id}/captain/copilot_threads",
                  params: valid_params,
@@ -103,8 +124,15 @@ RSpec.describe 'Api::V1::Accounts::Captain::CopilotThreads', type: :request do
           expect(thread.assistant_id).to eq(assistant.id)
 
           message = thread.copilot_messages.last
-          expect(message.message_type).to eq('user')
           expect(message.message).to eq({ 'content' => valid_params[:message] })
+
+          expect(Captain::Copilot::ResponseJob).to have_been_enqueued.with(
+            assistant: assistant,
+            conversation_id: valid_params[:conversation_id],
+            user_id: agent.id,
+            copilot_thread_id: thread.id,
+            message: valid_params[:message]
+          )
         end
       end
     end
diff --git a/spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb b/spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb
index 724a7b0cb..498c42abd 100644
--- a/spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb
+++ b/spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb
@@ -22,6 +22,22 @@ RSpec.describe 'Enterprise Inboxes API', type: :request do
         expect(response).to have_http_status(:success)
         expect(JSON.parse(response.body)['auto_assignment_config']['max_assignment_limit']).to eq 10
       end
+
+      it 'creates a voice inbox when administrator' do
+        post "/api/v1/accounts/#{account.id}/inboxes",
+             headers: admin.create_new_auth_token,
+             params: { name: 'Voice Inbox',
+                       channel: { type: 'voice', phone_number: '+15551234567',
+                                  provider_config: { account_sid: "AC#{SecureRandom.hex(16)}",
+                                                     auth_token: SecureRandom.hex(16),
+                                                     api_key_sid: SecureRandom.hex(8),
+                                                     api_key_secret: SecureRandom.hex(16) } } },
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(response.body).to include('Voice Inbox')
+        expect(response.body).to include('+15551234567')
+      end
     end
   end
 
diff --git a/spec/enterprise/models/channel/voice_spec.rb b/spec/enterprise/models/channel/voice_spec.rb
new file mode 100644
index 000000000..2e52807b0
--- /dev/null
+++ b/spec/enterprise/models/channel/voice_spec.rb
@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe Channel::Voice do
+  let(:channel) { create(:channel_voice) }
+
+  it 'has a valid factory' do
+    expect(channel).to be_valid
+  end
+
+  describe 'validations' do
+    it 'validates presence of provider_config' do
+      channel.provider_config = nil
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include("can't be blank")
+    end
+
+    it 'validates presence of account_sid in provider_config' do
+      channel.provider_config = { auth_token: 'token' }
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include('account_sid is required for Twilio provider')
+    end
+
+    it 'validates presence of auth_token in provider_config' do
+      channel.provider_config = { account_sid: 'sid' }
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include('auth_token is required for Twilio provider')
+    end
+
+    it 'validates presence of api_key_sid in provider_config' do
+      channel.provider_config = { account_sid: 'sid', auth_token: 'token' }
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include('api_key_sid is required for Twilio provider')
+    end
+
+    it 'validates presence of api_key_secret in provider_config' do
+      channel.provider_config = { account_sid: 'sid', auth_token: 'token', api_key_sid: 'key' }
+      expect(channel).not_to be_valid
+      expect(channel.errors[:provider_config]).to include('api_key_secret is required for Twilio provider')
+    end
+
+    it 'is valid with all required provider_config fields' do
+      channel.provider_config = {
+        account_sid: 'test_sid',
+        auth_token: 'test_token',
+        api_key_sid: 'test_key',
+        api_key_secret: 'test_secret'
+      }
+      expect(channel).to be_valid
+    end
+  end
+
+  describe '#name' do
+    it 'returns Voice with phone number' do
+      expect(channel.name).to include('Voice')
+      expect(channel.name).to include(channel.phone_number)
+    end
+  end
+end
diff --git a/spec/enterprise/models/conversation_spec.rb b/spec/enterprise/models/conversation_spec.rb
index 9585274dd..50d9ee993 100644
--- a/spec/enterprise/models/conversation_spec.rb
+++ b/spec/enterprise/models/conversation_spec.rb
@@ -74,4 +74,35 @@ RSpec.describe Conversation, type: :model do
       end
     end
   end
+
+  describe 'assignment capacity limits' do
+    describe 'team assignment with inbox auto-assignment disabled' do
+      let(:account) { create(:account) }
+      let(:inbox) { create(:inbox, account: account, enable_auto_assignment: false, auto_assignment_config: { max_assignment_limit: 1 }) }
+      let(:team) { create(:team, account: account, allow_auto_assign: true) }
+      let!(:agent1) { create(:user, account: account, role: :agent, auto_offline: false) }
+      let!(:agent2) { create(:user, account: account, role: :agent, auto_offline: false) }
+
+      before do
+        create(:inbox_member, inbox: inbox, user: agent1)
+        create(:inbox_member, inbox: inbox, user: agent2)
+        create(:team_member, team: team, user: agent1)
+        create(:team_member, team: team, user: agent2)
+        # Both agents are over the limit (simulate by assigning open conversations)
+        create_list(:conversation, 2, inbox: inbox, assignee: agent1, status: :open)
+        create_list(:conversation, 2, inbox: inbox, assignee: agent2, status: :open)
+      end
+
+      it 'does not enforce max_assignment_limit for team assignment when inbox auto-assignment is disabled' do
+        conversation = create(:conversation, inbox: inbox, account: account, assignee: nil, status: :open)
+
+        # Assign to team to trigger the assignment logic
+        conversation.update!(team: team)
+
+        # Should assign to a team member even if they are over the limit
+        expect(conversation.reload.assignee).to be_present
+        expect([agent1, agent2]).to include(conversation.reload.assignee)
+      end
+    end
+  end
 end
diff --git a/spec/enterprise/services/enterprise/billing/create_stripe_customer_service_spec.rb b/spec/enterprise/services/enterprise/billing/create_stripe_customer_service_spec.rb
index 95edf73a1..f5b0bbe86 100644
--- a/spec/enterprise/services/enterprise/billing/create_stripe_customer_service_spec.rb
+++ b/spec/enterprise/services/enterprise/billing/create_stripe_customer_service_spec.rb
@@ -6,6 +6,7 @@ describe Enterprise::Billing::CreateStripeCustomerService do
   let(:account) { create(:account) }
   let!(:admin1) { create(:user, account: account, role: :administrator) }
   let(:admin2) { create(:user, account: account, role: :administrator) }
+  let(:subscriptions_list) { double }
 
   describe '#perform' do
     before do
@@ -19,8 +20,9 @@ describe Enterprise::Billing::CreateStripeCustomerService do
 
     it 'does not call stripe methods if customer id is present' do
       account.update!(custom_attributes: { stripe_customer_id: 'cus_random_number' })
-
+      allow(subscriptions_list).to receive(:data).and_return([])
       allow(Stripe::Customer).to receive(:create)
+      allow(Stripe::Subscription).to receive(:list).and_return(subscriptions_list)
       allow(Stripe::Subscription).to receive(:create)
         .and_return(
           {
@@ -78,4 +80,63 @@ describe Enterprise::Billing::CreateStripeCustomerService do
       )
     end
   end
+
+  describe 'when checking for existing subscriptions' do
+    before do
+      create(
+        :installation_config,
+        { name: 'CHATWOOT_CLOUD_PLANS', value: [
+          { 'name' => 'A Plan Name', 'product_id' => ['prod_hacker_random'], 'price_ids' => ['price_hacker_random'] }
+        ] }
+      )
+    end
+
+    context 'when account has no stripe_customer_id' do
+      it 'creates a new subscription' do
+        customer = double
+        allow(Stripe::Customer).to receive(:create).and_return(customer)
+        allow(customer).to receive(:id).and_return('cus_random_number')
+        allow(Stripe::Subscription).to receive(:create).and_return(
+          {
+            plan: { id: 'price_random_number', product: 'prod_random_number' },
+            quantity: 2
+          }.with_indifferent_access
+        )
+
+        create_stripe_customer_service.new(account: account).perform
+
+        expect(Stripe::Customer).to have_received(:create)
+        expect(Stripe::Subscription).to have_received(:create)
+      end
+    end
+
+    context 'when account has stripe_customer_id' do
+      let(:stripe_customer_id) { 'cus_random_number' }
+
+      before do
+        account.update!(custom_attributes: { stripe_customer_id: stripe_customer_id })
+      end
+
+      context 'when customer has active subscriptions' do
+        before do
+          allow(Stripe::Subscription).to receive(:list).and_return(subscriptions_list)
+          allow(subscriptions_list).to receive(:data).and_return(['subscription'])
+          allow(Stripe::Subscription).to receive(:create)
+        end
+
+        it 'does not create a new subscription' do
+          create_stripe_customer_service.new(account: account).perform
+
+          expect(Stripe::Subscription).not_to have_received(:create)
+          expect(Stripe::Subscription).to have_received(:list).with(
+            {
+              customer: stripe_customer_id,
+              status: 'active',
+              limit: 1
+            }
+          )
+        end
+      end
+    end
+  end
 end
diff --git a/spec/factories/channel/channel_voice.rb b/spec/factories/channel/channel_voice.rb
new file mode 100644
index 000000000..33be75f2e
--- /dev/null
+++ b/spec/factories/channel/channel_voice.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+FactoryBot.define do
+  factory :channel_voice, class: 'Channel::Voice' do
+    sequence(:phone_number) { |n| "+155512345#{n.to_s.rjust(2, '0')}" }
+    provider_config do
+      {
+        account_sid: "AC#{SecureRandom.hex(16)}",
+        auth_token: SecureRandom.hex(16),
+        api_key_sid: SecureRandom.hex(8),
+        api_key_secret: SecureRandom.hex(16)
+      }
+    end
+    account
+
+    after(:create) do |channel_voice|
+      create(:inbox, channel: channel_voice, account: channel_voice.account)
+    end
+  end
+end
diff --git a/spec/jobs/webhooks/twilio_events_job_spec.rb b/spec/jobs/webhooks/twilio_events_job_spec.rb
index f42caf675..aad70c68b 100644
--- a/spec/jobs/webhooks/twilio_events_job_spec.rb
+++ b/spec/jobs/webhooks/twilio_events_job_spec.rb
@@ -79,4 +79,25 @@ RSpec.describe Webhooks::TwilioEventsJob do
       described_class.perform_now(params_with_media)
     end
   end
+
+  context 'when location message is present' do
+    let(:params_with_location) do
+      {
+        From: 'whatsapp:+1234567890',
+        To: 'whatsapp:+0987654321',
+        MessageType: 'location',
+        Latitude: '12.160894393921',
+        Longitude: '75.265205383301',
+        AccountSid: 'AC123',
+        SmsSid: 'SM123'
+      }
+    end
+
+    it 'processes the location message' do
+      service = double
+      expect(Twilio::IncomingMessageService).to receive(:new).with(params: params_with_location).and_return(service)
+      expect(service).to receive(:perform)
+      described_class.perform_now(params_with_location)
+    end
+  end
 end
diff --git a/spec/lib/integrations/linear/processor_service_spec.rb b/spec/lib/integrations/linear/processor_service_spec.rb
index 8830e658e..9af9e08d3 100644
--- a/spec/lib/integrations/linear/processor_service_spec.rb
+++ b/spec/lib/integrations/linear/processor_service_spec.rb
@@ -80,6 +80,7 @@ describe Integrations::Linear::ProcessorService do
         label_ids: %w[bug]
       }
     end
+    let(:user) { instance_double(User, name: 'John Doe', avatar_url: 'https://example.com/avatar.jpg') }
     let(:issue_response) do
       {
         'issueCreate' => {
@@ -94,7 +95,7 @@ describe Integrations::Linear::ProcessorService do
 
     context 'when Linear client returns valid data' do
       it 'returns parsed issue data with identifier' do
-        allow(linear_client).to receive(:create_issue).with(params).and_return(issue_response)
+        allow(linear_client).to receive(:create_issue).with(params, nil).and_return(issue_response)
         result = service.create_issue(params)
         expect(result).to eq({
                                data: {
@@ -104,13 +105,27 @@ describe Integrations::Linear::ProcessorService do
                                }
                              })
       end
+
+      context 'when user is provided' do
+        it 'passes user to Linear client' do
+          allow(linear_client).to receive(:create_issue).with(params, user).and_return(issue_response)
+          result = service.create_issue(params, user)
+          expect(result).to eq({
+                                 data: {
+                                   id: 'issue1',
+                                   title: 'Issue title',
+                                   identifier: 'ENG-123'
+                                 }
+                               })
+        end
+      end
     end
 
     context 'when Linear client returns an error' do
       let(:error_response) { { error: 'Some error message' } }
 
       it 'returns the error' do
-        allow(linear_client).to receive(:create_issue).with(params).and_return(error_response)
+        allow(linear_client).to receive(:create_issue).with(params, nil).and_return(error_response)
         result = service.create_issue(params)
         expect(result).to eq(error_response)
       end
@@ -121,22 +136,31 @@ describe Integrations::Linear::ProcessorService do
     let(:link) { 'https://example.com' }
     let(:issue_id) { 'issue1' }
     let(:title) { 'Title' }
+    let(:user) { instance_double(User, name: 'John Doe', avatar_url: 'https://example.com/avatar.jpg') }
     let(:link_issue_response) { { id: issue_id, link: link, 'attachmentLinkURL': { 'attachment': { 'id': 'attachment1' } } } }
     let(:link_response) { { data: { id: issue_id, link: link, link_id: 'attachment1' } } }
 
     context 'when Linear client returns valid data' do
       it 'returns parsed link data' do
-        allow(linear_client).to receive(:link_issue).with(link, issue_id, title).and_return(link_issue_response)
+        allow(linear_client).to receive(:link_issue).with(link, issue_id, title, nil).and_return(link_issue_response)
         result = service.link_issue(link, issue_id, title)
         expect(result).to eq(link_response)
       end
+
+      context 'when user is provided' do
+        it 'passes user to Linear client' do
+          allow(linear_client).to receive(:link_issue).with(link, issue_id, title, user).and_return(link_issue_response)
+          result = service.link_issue(link, issue_id, title, user)
+          expect(result).to eq(link_response)
+        end
+      end
     end
 
     context 'when Linear client returns an error' do
       let(:error_response) { { error: 'Some error message' } }
 
       it 'returns the error' do
-        allow(linear_client).to receive(:link_issue).with(link, issue_id, title).and_return(error_response)
+        allow(linear_client).to receive(:link_issue).with(link, issue_id, title, nil).and_return(error_response)
         result = service.link_issue(link, issue_id, title)
         expect(result).to eq(error_response)
       end
@@ -237,7 +261,7 @@ describe Integrations::Linear::ProcessorService do
           }
         }
 
-        allow(linear_client).to receive(:create_issue).with(params).and_return(response)
+        allow(linear_client).to receive(:create_issue).with(params, nil).and_return(response)
         result = service.create_issue(params)
 
         expect(result[:data]).to have_key(:identifier)
@@ -256,7 +280,7 @@ describe Integrations::Linear::ProcessorService do
           }
         }
 
-        allow(linear_client).to receive(:link_issue).with(link, issue_id, title).and_return(response)
+        allow(linear_client).to receive(:link_issue).with(link, issue_id, title, nil).and_return(response)
         result = service.link_issue(link, issue_id, title)
 
         expect(result[:data][:id]).to eq(issue_id)
diff --git a/spec/lib/linear_spec.rb b/spec/lib/linear_spec.rb
index 2ebaec1a8..e15f64382 100644
--- a/spec/lib/linear_spec.rb
+++ b/spec/lib/linear_spec.rb
@@ -91,6 +91,7 @@ describe Linear do
         label_ids: ['bug']
       }
     end
+    let(:user) { instance_double(User, name: 'John Doe', avatar_url: 'https://example.com/avatar.jpg') }
 
     context 'when the API response is success' do
       before do
@@ -103,6 +104,34 @@ describe Linear do
         expect(response).to eq({ 'issueCreate' => { 'id' => 'issue1', 'title' => 'Title' } })
       end
 
+      context 'when user is provided' do
+        it 'includes user attribution in the request' do
+          allow(linear_client).to receive(:post) do |payload|
+            expect(payload[:query]).to include('createAsUser: "John Doe"')
+            expect(payload[:query]).to include('displayIconUrl: "https://example.com/avatar.jpg"')
+            instance_double(HTTParty::Response, success?: true,
+                                                parsed_response: { 'data' => { 'issueCreate' => { 'id' => 'issue1', 'title' => 'Title' } } })
+          end
+
+          linear_client.create_issue(params, user)
+        end
+      end
+
+      context 'when user has no avatar' do
+        let(:user_no_avatar) { instance_double(User, name: 'Jane Doe', avatar_url: '') }
+
+        it 'includes only user name in the request' do
+          allow(linear_client).to receive(:post) do |payload|
+            expect(payload[:query]).to include('createAsUser: "Jane Doe"')
+            expect(payload[:query]).not_to include('displayIconUrl')
+            instance_double(HTTParty::Response, success?: true,
+                                                parsed_response: { 'data' => { 'issueCreate' => { 'id' => 'issue1', 'title' => 'Title' } } })
+          end
+
+          linear_client.create_issue(params, user_no_avatar)
+        end
+      end
+
       context 'when the priority is invalid' do
         let(:params) { { title: 'Title', team_id: 'team1', priority: 5 } }
 
@@ -182,6 +211,7 @@ describe Linear do
     let(:link) { 'https://example.com' }
     let(:issue_id) { 'issue1' }
     let(:title) { 'Title' }
+    let(:user) { instance_double(User, name: 'John Doe', avatar_url: 'https://example.com/avatar.jpg') }
 
     context 'when the API response is success' do
       before do
@@ -194,6 +224,45 @@ describe Linear do
         expect(response).to eq({ 'attachmentLinkURL' => { 'id' => 'attachment1' } })
       end
 
+      context 'when user is provided' do
+        it 'includes user attribution in the request' do
+          expected_params = {
+            issue_id: issue_id,
+            link: link,
+            title: title,
+            user_name: 'John Doe',
+            user_avatar_url: 'https://example.com/avatar.jpg'
+          }
+
+          expect(Linear::Mutations).to receive(:issue_link).with(expected_params).and_call_original
+          allow(linear_client).to receive(:post).and_return(
+            instance_double(HTTParty::Response, success?: true, parsed_response: { 'data' => { 'attachmentLinkURL' => { 'id' => 'attachment1' } } })
+          )
+
+          linear_client.link_issue(link, issue_id, title, user)
+        end
+      end
+
+      context 'when user has no avatar' do
+        let(:user_no_avatar) { instance_double(User, name: 'Jane Doe', avatar_url: '') }
+
+        it 'includes only user name in the request' do
+          expected_params = {
+            issue_id: issue_id,
+            link: link,
+            title: title,
+            user_name: 'Jane Doe'
+          }
+
+          expect(Linear::Mutations).to receive(:issue_link).with(expected_params).and_call_original
+          allow(linear_client).to receive(:post).and_return(
+            instance_double(HTTParty::Response, success?: true, parsed_response: { 'data' => { 'attachmentLinkURL' => { 'id' => 'attachment1' } } })
+          )
+
+          linear_client.link_issue(link, issue_id, title, user_no_avatar)
+        end
+      end
+
       context 'when the link is missing' do
         let(:link) { '' }
 
diff --git a/spec/listeners/automation_rule_listener_spec.rb b/spec/listeners/automation_rule_listener_spec.rb
index e0103b19a..c08b6e402 100644
--- a/spec/listeners/automation_rule_listener_spec.rb
+++ b/spec/listeners/automation_rule_listener_spec.rb
@@ -171,6 +171,16 @@ describe AutomationRuleListener do
         listener.message_created(event)
         expect(AutomationRules::ActionService).not_to have_received(:new).with(automation_rule, account, conversation)
       end
+
+      it 'passes conversation attributes to conditions filter service' do
+        conversation.update!(status: :open, priority: :high)
+        listener.message_created(event)
+        expect(AutomationRules::ConditionsFilterService).to have_received(:new).with(
+          automation_rule,
+          conversation,
+          { message: message, changed_attributes: { content: %w[nil Hi] } }
+        )
+      end
     end
   end
 end
diff --git a/spec/listeners/reporting_event_listener_spec.rb b/spec/listeners/reporting_event_listener_spec.rb
index 9a6b8d123..0edf79556 100644
--- a/spec/listeners/reporting_event_listener_spec.rb
+++ b/spec/listeners/reporting_event_listener_spec.rb
@@ -66,6 +66,34 @@ describe ReportingEventListener do
   end
 
   describe '#reply_created' do
+    let(:contact) { create(:contact, account: account) }
+
+    def create_customer_message(conversation, created_at: Time.current)
+      create(:message,
+             message_type: 'incoming',
+             account: account,
+             inbox: inbox,
+             conversation: conversation,
+             sender: contact,
+             created_at: created_at)
+    end
+
+    def create_agent_message(conversation, created_at: Time.current, sender: user)
+      create(:message,
+             message_type: 'outgoing',
+             account: account,
+             inbox: inbox,
+             conversation: conversation,
+             sender: sender,
+             created_at: created_at)
+    end
+
+    def create_reply_event(agent_message, waiting_since, event_time = nil)
+      Events::Base.new('reply.created', event_time || agent_message.created_at,
+                       waiting_since: waiting_since,
+                       message: agent_message)
+    end
+
     it 'creates reply created event' do
       event = Events::Base.new('reply.created', Time.zone.now, waiting_since: 2.hours.ago, message: message)
       listener.reply_created(event)
@@ -74,6 +102,88 @@ describe ReportingEventListener do
       expect(events.length).to be 1
       expect(events.first.value).to be_within(1).of(7200)
     end
+
+    context 'when conversation is reopened' do
+      let(:resolved_conversation) do
+        create(:conversation, account: account, inbox: inbox, assignee: user,
+                              status: 'resolved', contact: contact)
+      end
+
+      context 'when customer sends message after resolution' do
+        it 'calculates reply time from the reopening message' do
+          customer_message_time = 3.hours.ago
+          create_customer_message(resolved_conversation, created_at: customer_message_time)
+
+          resolved_conversation.reload
+          expect(resolved_conversation.status).to eq('open')
+
+          agent_reply_time = 1.hour.ago
+          agent_message = create_agent_message(resolved_conversation, created_at: agent_reply_time)
+
+          event = create_reply_event(agent_message, customer_message_time)
+          listener.reply_created(event)
+
+          events = account.reporting_events.where(name: 'reply_time', conversation_id: resolved_conversation.id)
+          expect(events.length).to be 1
+          expect(events.first.value).to be_within(60).of(7200)
+        end
+      end
+
+      context 'when conversation has multiple reopenings' do
+        it 'tracks reply time correctly for each reopening' do
+          create_customer_message(resolved_conversation, created_at: 5.hours.ago)
+          first_agent_reply = create_agent_message(resolved_conversation, created_at: 4.hours.ago)
+
+          event = create_reply_event(first_agent_reply, 5.hours.ago)
+          listener.reply_created(event)
+
+          resolved_conversation.update!(status: 'resolved')
+
+          create_customer_message(resolved_conversation, created_at: 2.hours.ago)
+          second_agent_reply = create_agent_message(resolved_conversation, created_at: 1.5.hours.ago)
+
+          event = create_reply_event(second_agent_reply, 2.hours.ago)
+          listener.reply_created(event)
+
+          events = account.reporting_events.where(name: 'reply_time', conversation_id: resolved_conversation.id)
+                          .order(created_at: :asc)
+          expect(events.length).to be 2
+          expect(events.first.value).to be_within(60).of(3600)
+          expect(events.second.value).to be_within(60).of(1800)
+        end
+      end
+
+      context 'when conversation is manually reopened' do
+        it 'sets waiting_since when first customer message arrives after manual reopening' do
+          resolved_conversation.update!(status: 'open')
+
+          customer_message_time = 1.hour.ago
+          create_customer_message(resolved_conversation, created_at: customer_message_time)
+
+          agent_reply_time = 15.minutes.ago
+          agent_message = create_agent_message(resolved_conversation, created_at: agent_reply_time)
+
+          event = create_reply_event(agent_message, customer_message_time)
+          listener.reply_created(event)
+
+          events = account.reporting_events.where(name: 'reply_time', conversation_id: resolved_conversation.id)
+          expect(events.length).to be 1
+          expect(events.first.value).to be_within(60).of(2700)
+        end
+      end
+
+      context 'when waiting_since is nil' do
+        it 'does not creates reply time events' do
+          agent_message = create_agent_message(resolved_conversation)
+
+          event = create_reply_event(agent_message, nil)
+          listener.reply_created(event)
+
+          events = account.reporting_events.where(name: 'reply_time', conversation_id: resolved_conversation.id)
+          expect(events.length).to be 0
+        end
+      end
+    end
   end
 
   describe '#first_reply_created' do
diff --git a/spec/mailers/conversation_reply_mailer_spec.rb b/spec/mailers/conversation_reply_mailer_spec.rb
index 8485fcf7a..2a0d6c8b0 100644
--- a/spec/mailers/conversation_reply_mailer_spec.rb
+++ b/spec/mailers/conversation_reply_mailer_spec.rb
@@ -154,6 +154,27 @@ RSpec.describe ConversationReplyMailer do
         expect(mail.message_id).to eq message.source_id
       end
 
+      context 'when message is a CSAT survey' do
+        let(:csat_message) do
+          create(:message, conversation: conversation, account: account, message_type: 'template',
+                           content_type: 'input_csat', content: 'How would you rate our support?', sender: agent)
+        end
+
+        it 'includes CSAT survey URL in outgoing_content' do
+          with_modified_env 'FRONTEND_URL' => 'https://app.chatwoot.com' do
+            mail = described_class.email_reply(csat_message).deliver_now
+            expect(mail.decoded).to include "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
+          end
+        end
+
+        it 'uses outgoing_content for CSAT message body' do
+          with_modified_env 'FRONTEND_URL' => 'https://app.chatwoot.com' do
+            mail = described_class.email_reply(csat_message).deliver_now
+            expect(mail.decoded).to include csat_message.outgoing_content
+          end
+        end
+      end
+
       context 'with email attachments' do
         it 'includes small attachments as email attachments' do
           message_with_attachment = create(:message, conversation: conversation, account: account, message_type: 'outgoing',
diff --git a/spec/models/conversation_spec.rb b/spec/models/conversation_spec.rb
index aef91603d..a29359528 100644
--- a/spec/models/conversation_spec.rb
+++ b/spec/models/conversation_spec.rb
@@ -836,4 +836,117 @@ RSpec.describe Conversation do
       expect(message_window_service).to have_received(:can_reply?)
     end
   end
+
+  describe 'reply time calculation flows' do
+    include ActiveJob::TestHelper
+
+    let(:account) { create(:account) }
+    let(:inbox) { create(:inbox, account: account) }
+    let(:contact) { create(:contact, account: account) }
+    let(:agent) { create(:user, account: account, role: :agent) }
+    let(:conversation) { create(:conversation, account: account, inbox: inbox, contact: contact, assignee: agent, waiting_since: nil) }
+    let(:conversation_start_time) { 5.hours.ago }
+
+    before do
+      create(:inbox_member, user: agent, inbox: inbox)
+      # rubocop:disable Rails/SkipsModelValidations
+      conversation.update_column(:waiting_since, nil)
+      conversation.update_column(:created_at, conversation_start_time)
+      # rubocop:enable Rails/SkipsModelValidations
+      conversation.messages.destroy_all
+      conversation.reporting_events.destroy_all
+      conversation.reload
+    end
+
+    def create_customer_message(conversation, created_at: Time.current)
+      message = nil
+      perform_enqueued_jobs do
+        message = create(:message,
+                         message_type: 'incoming',
+                         account: conversation.account,
+                         inbox: conversation.inbox,
+                         conversation: conversation,
+                         sender: conversation.contact,
+                         created_at: created_at)
+      end
+      message
+    end
+
+    def create_agent_message(conversation, created_at: Time.current)
+      message = nil
+      perform_enqueued_jobs do
+        message = create(:message,
+                         message_type: 'outgoing',
+                         account: conversation.account,
+                         inbox: conversation.inbox,
+                         conversation: conversation,
+                         sender: conversation.assignee,
+                         created_at: created_at)
+      end
+      message
+    end
+
+    it 'correctly tracks waiting_since and creates first response time events' do
+      create_customer_message(conversation, created_at: conversation_start_time)
+      conversation.reload
+      expect(conversation.waiting_since).to be_within(1.second).of(conversation_start_time)
+
+      # Agent replies - this should create first response event
+      agent_reply1_time = 4.hours.ago
+      create_agent_message(conversation, created_at: agent_reply1_time)
+
+      first_response_events = account.reporting_events.where(name: 'first_response', conversation_id: conversation.id)
+      expect(first_response_events.count).to eq(1)
+      expect(first_response_events.first.value).to be_within(1.second).of(1.hour)
+
+      # the first response should also clear the waiting_since
+      conversation.reload
+      expect(conversation.waiting_since).to be_nil
+    end
+
+    it 'does not reset waiting_since if customer sends another message' do
+      create_customer_message(conversation, created_at: conversation_start_time)
+      conversation.reload
+      expect(conversation.waiting_since).to be_within(1.second).of(conversation_start_time)
+
+      create_customer_message(conversation, created_at: 3.hours.ago)
+      conversation.reload
+      expect(conversation.waiting_since).to be_within(1.second).of(conversation_start_time)
+    end
+
+    it 'records the correct reply_time for subsequent messages' do
+      create_customer_message(conversation, created_at: conversation_start_time)
+      create_agent_message(conversation, created_at: 4.hours.ago)
+      create_customer_message(conversation, created_at: 3.hours.ago)
+
+      create_agent_message(conversation, created_at: 2.hours.ago)
+      reply_events = account.reporting_events.where(name: 'reply_time', conversation_id: conversation.id)
+      expect(reply_events.count).to eq(1)
+      expect(reply_events.first.value).to be_within(1.second).of(1.hour)
+
+      conversation.reload
+      expect(conversation.waiting_since).to be_nil
+    end
+
+    it 'records zero reply time if an agent sends a message after resolution' do
+      create_customer_message(conversation, created_at: conversation_start_time)
+      create_agent_message(conversation, created_at: 4.hours.ago)
+      create_customer_message(conversation, created_at: 3.hours.ago)
+
+      conversation.toggle_status
+      expect(conversation.status).to eq('resolved')
+
+      conversation.toggle_status
+      expect(conversation.status).to eq('open')
+
+      conversation.reload
+      expect(conversation.waiting_since).to be_nil
+
+      create_agent_message(conversation, created_at: 1.hour.ago)
+      # update_waiting_since will ensure that no events were created since the waiting_since was nil
+      # if the event is created it should log zero value, we have handled that in the reporting_event_listener
+      reply_events = account.reporting_events.where(name: 'reply_time', conversation_id: conversation.id)
+      expect(reply_events.count).to eq(0)
+    end
+  end
 end
diff --git a/spec/models/message_spec.rb b/spec/models/message_spec.rb
index 3bf64a231..6de36a55e 100644
--- a/spec/models/message_spec.rb
+++ b/spec/models/message_spec.rb
@@ -267,6 +267,23 @@ RSpec.describe Message do
       message = create(:message)
       expect(message.webhook_data.key?(:attachments)).to be false
     end
+
+    it 'uses outgoing_content for webhook content' do
+      message = create(:message, content: 'Test content')
+      expect(message).to receive(:outgoing_content).and_return('Outgoing test content')
+
+      webhook_data = message.webhook_data
+      expect(webhook_data[:content]).to eq('Outgoing test content')
+    end
+
+    it 'includes CSAT survey link in webhook content for input_csat messages' do
+      inbox = create(:inbox, channel: create(:channel_api))
+      conversation = create(:conversation, inbox: inbox)
+      message = create(:message, conversation: conversation, content_type: 'input_csat', content: 'Rate your experience')
+
+      expect(message.outgoing_content).to include('survey/responses/')
+      expect(message.webhook_data[:content]).to include('survey/responses/')
+    end
   end
 
   context 'when message is created' do
diff --git a/spec/presenters/message_content_presenter_spec.rb b/spec/presenters/message_content_presenter_spec.rb
index b1be37ef2..f85bdb8d1 100644
--- a/spec/presenters/message_content_presenter_spec.rb
+++ b/spec/presenters/message_content_presenter_spec.rb
@@ -34,20 +34,21 @@ RSpec.describe MessageContentPresenter do
 
       before do
         allow(message.inbox).to receive(:web_widget?).and_return(false)
-        allow(ENV).to receive(:fetch).with('FRONTEND_URL', nil).and_return('https://app.chatwoot.com')
       end
 
       it 'returns I18n default message when no CSAT config and dynamically generates survey URL' do
-        expected_url = "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
-        allow(I18n).to receive(:t).with('conversations.survey.response', link: expected_url)
-                                  .and_return("Please rate this conversation, #{expected_url}")
-        expect(presenter.outgoing_content).to eq("Please rate this conversation, #{expected_url}")
+        with_modified_env 'FRONTEND_URL' => 'https://app.chatwoot.com' do
+          expected_url = "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
+          expect(presenter.outgoing_content).to include(expected_url)
+        end
       end
 
       it 'returns CSAT config message when config exists and dynamically generates survey URL' do
-        allow(message.inbox).to receive(:csat_config).and_return({ 'message' => 'Custom CSAT message' })
-        expected_url = "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
-        expect(presenter.outgoing_content).to eq("Custom CSAT message #{expected_url}")
+        with_modified_env 'FRONTEND_URL' => 'https://app.chatwoot.com' do
+          allow(message.inbox).to receive(:csat_config).and_return({ 'message' => 'Custom CSAT message' })
+          expected_url = "https://app.chatwoot.com/survey/responses/#{conversation.uuid}"
+          expect(presenter.outgoing_content).to eq("Custom CSAT message #{expected_url}")
+        end
       end
     end
   end
diff --git a/spec/services/action_service_spec.rb b/spec/services/action_service_spec.rb
index c28761844..95b1e6ecf 100644
--- a/spec/services/action_service_spec.rb
+++ b/spec/services/action_service_spec.rb
@@ -14,6 +14,17 @@ describe ActionService do
     end
   end
 
+  describe '#open_conversation' do
+    let(:conversation) { create(:conversation, status: :resolved) }
+    let(:action_service) { described_class.new(conversation) }
+
+    it 'opens the conversation' do
+      expect(conversation.status).to eq('resolved')
+      action_service.open_conversation(nil)
+      expect(conversation.reload.status).to eq('open')
+    end
+  end
+
   describe '#change_priority' do
     let(:conversation) { create(:conversation) }
     let(:action_service) { described_class.new(conversation) }
diff --git a/spec/services/automation_rules/conditions_filter_service_spec.rb b/spec/services/automation_rules/conditions_filter_service_spec.rb
index ec9f52062..7082d31b1 100644
--- a/spec/services/automation_rules/conditions_filter_service_spec.rb
+++ b/spec/services/automation_rules/conditions_filter_service_spec.rb
@@ -110,6 +110,29 @@ RSpec.describe AutomationRules::ConditionsFilterService do
           expect(described_class.new(rule, conversation, { message: message, changed_attributes: {} }).perform).to be(false)
         end
       end
+
+      context 'when filtering messages based on conversation attributes' do
+        let(:conversation) { create(:conversation, account: account, status: :open, priority: :high) }
+        let(:message) do
+          create(:message, account: account, conversation: conversation, content: 'Test message',
+                           inbox: conversation.inbox, message_type: :incoming)
+        end
+
+        it 'will return true when conversation status matches' do
+          rule.update(conditions: [{ 'values': ['open'], 'attribute_key': 'status', 'query_operator': nil, 'filter_operator': 'equal_to' }])
+          expect(described_class.new(rule, conversation, { message: message, changed_attributes: {} }).perform).to be(true)
+        end
+
+        it 'will return false when conversation status does not match' do
+          rule.update(conditions: [{ 'values': ['resolved'], 'attribute_key': 'status', 'query_operator': nil, 'filter_operator': 'equal_to' }])
+          expect(described_class.new(rule, conversation, { message: message, changed_attributes: {} }).perform).to be(false)
+        end
+
+        it 'will return true when conversation priority matches' do
+          rule.update(conditions: [{ 'values': ['high'], 'attribute_key': 'priority', 'query_operator': nil, 'filter_operator': 'equal_to' }])
+          expect(described_class.new(rule, conversation, { message: message, changed_attributes: {} }).perform).to be(true)
+        end
+      end
     end
   end
 end
diff --git a/spec/services/twilio/incoming_message_service_spec.rb b/spec/services/twilio/incoming_message_service_spec.rb
index c8812e45d..94fc3fdbf 100644
--- a/spec/services/twilio/incoming_message_service_spec.rb
+++ b/spec/services/twilio/incoming_message_service_spec.rb
@@ -260,5 +260,27 @@ describe Twilio::IncomingMessageService do
         expect(conversation.reload.messages.last.attachments.map(&:file_type)).to contain_exactly('image', 'image')
       end
     end
+
+    context 'when a location message is received' do
+      let(:params_with_location) do
+        {
+          SmsSid: 'SMxx',
+          From: '+12345',
+          AccountSid: 'ACxxx',
+          MessagingServiceSid: twilio_channel.messaging_service_sid,
+          MessageType: 'location',
+          Latitude: '12.160894393921',
+          Longitude: '75.265205383301'
+        }
+      end
+
+      it 'creates a message with location attachment' do
+        described_class.new(params: params_with_location).perform
+
+        message = conversation.reload.messages.last
+        expect(message.attachments.count).to eq(1)
+        expect(message.attachments.first.file_type).to eq('location')
+      end
+    end
   end
 end
diff --git a/theme/colors.js b/theme/colors.js
index 67c20202a..52870e75b 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -102,187 +102,7 @@ export const colors = {
     800: violetDark.violet6,
     900: violet.violet12,
   },
-  primary: {
-    25: 'rgb(var(--color-primary-25) / <alpha-value>)',
-    50: 'rgb(var(--color-primary-50) / <alpha-value>)',
-    75: 'rgb(var(--color-primary-75) / <alpha-value>)',
-    100: 'rgb(var(--color-primary-100) / <alpha-value>)',
-    200: 'rgb(var(--color-primary-200) / <alpha-value>)',
-    300: 'rgb(var(--color-primary-300) / <alpha-value>)',
-    400: 'rgb(var(--color-primary-400) / <alpha-value>)',
-    500: 'rgb(var(--color-primary-500) / <alpha-value>)',
-    600: 'rgb(var(--color-primary-600) / <alpha-value>)',
-    700: 'rgb(var(--color-primary-700) / <alpha-value>)',
-    800: 'rgb(var(--color-primary-800) / <alpha-value>)',
-    900: 'rgb(var(--color-primary-900) / <alpha-value>)',
-  },
-  ash: {
-    25: 'rgb(var(--color-ash-25) / <alpha-value>)',
-    50: 'rgb(var(--color-ash-50) / <alpha-value>)',
-    75: 'rgb(var(--color-ash-75) / <alpha-value>)',
-    100: 'rgb(var(--color-ash-100) / <alpha-value>)',
-    200: 'rgb(var(--color-ash-200) / <alpha-value>)',
-    300: 'rgb(var(--color-ash-300) / <alpha-value>)',
-    400: 'rgb(var(--color-ash-400) / <alpha-value>)',
-    500: 'rgb(var(--color-ash-500) / <alpha-value>)',
-    600: 'rgb(var(--color-ash-600) / <alpha-value>)',
-    700: 'rgb(var(--color-ash-700) / <alpha-value>)',
-    800: 'rgb(var(--color-ash-800) / <alpha-value>)',
-    900: 'rgb(var(--color-ash-900) / <alpha-value>)',
-  },
-  teal: {
-    25: 'rgb(var(--color-teal-25) / <alpha-value>)',
-    50: 'rgb(var(--color-teal-50) / <alpha-value>)',
-    100: 'rgb(var(--color-teal-100) / <alpha-value>)',
-    200: 'rgb(var(--color-teal-200) / <alpha-value>)',
-    300: 'rgb(var(--color-teal-300) / <alpha-value>)',
-    400: 'rgb(var(--color-teal-400) / <alpha-value>)',
-    500: 'rgb(var(--color-teal-500) / <alpha-value>)',
-    600: 'rgb(var(--color-teal-600) / <alpha-value>)',
-    700: 'rgb(var(--color-teal-700) / <alpha-value>)',
-    800: 'rgb(var(--color-teal-800) / <alpha-value>)',
-    900: 'rgb(var(--color-teal-900) / <alpha-value>)',
-  },
-  amber: {
-    25: 'rgb(var(--color-amber-25) / <alpha-value>)',
-    50: 'rgb(var(--color-amber-50) / <alpha-value>)',
-    75: 'rgb(var(--color-amber-75) / <alpha-value>)',
-    100: 'rgb(var(--color-amber-100) / <alpha-value>)',
-    200: 'rgb(var(--color-amber-200) / <alpha-value>)',
-    300: 'rgb(var(--color-amber-300) / <alpha-value>)',
-    400: 'rgb(var(--color-amber-400) / <alpha-value>)',
-    500: 'rgb(var(--color-amber-500) / <alpha-value>)',
-    600: 'rgb(var(--color-amber-600) / <alpha-value>)',
-    700: 'rgb(var(--color-amber-700) / <alpha-value>)',
-    800: 'rgb(var(--color-amber-800) / <alpha-value>)',
-    900: 'rgb(var(--color-amber-900) / <alpha-value>)',
-  },
-  ruby: {
-    25: 'rgb(var(--color-ruby-25) / <alpha-value>)',
-    50: 'rgb(var(--color-ruby-50) / <alpha-value>)',
-    75: 'rgb(var(--color-ruby-75) / <alpha-value>)',
-    100: 'rgb(var(--color-ruby-100) / <alpha-value>)',
-    200: 'rgb(var(--color-ruby-200) / <alpha-value>)',
-    300: 'rgb(var(--color-ruby-300) / <alpha-value>)',
-    400: 'rgb(var(--color-ruby-400) / <alpha-value>)',
-    500: 'rgb(var(--color-ruby-500) / <alpha-value>)',
-    600: 'rgb(var(--color-ruby-600) / <alpha-value>)',
-    700: 'rgb(var(--color-ruby-700) / <alpha-value>)',
-    800: 'rgb(var(--color-ruby-800) / <alpha-value>)',
-    900: 'rgb(var(--color-ruby-900) / <alpha-value>)',
-  },
-  grass: {
-    25: 'rgb(var(--color-green-25) / <alpha-value>)',
-    50: 'rgb(var(--color-green-50) / <alpha-value>)',
-    75: 'rgb(var(--color-green-75) / <alpha-value>)',
-    100: 'rgb(var(--color-green-100) / <alpha-value>)',
-    200: 'rgb(var(--color-green-200) / <alpha-value>)',
-    300: 'rgb(var(--color-green-300) / <alpha-value>)',
-    400: 'rgb(var(--color-green-400) / <alpha-value>)',
-    500: 'rgb(var(--color-green-500) / <alpha-value>)',
-    600: 'rgb(var(--color-green-600) / <alpha-value>)',
-    700: 'rgb(var(--color-green-700) / <alpha-value>)',
-    800: 'rgb(var(--color-green-800) / <alpha-value>)',
-    900: 'rgb(var(--color-green-900) / <alpha-value>)',
-  },
-  mint: {
-    25: 'rgb(var(--color-mint-25) / <alpha-value>)',
-    50: 'rgb(var(--color-mint-50) / <alpha-value>)',
-    75: 'rgb(var(--color-mint-75) / <alpha-value>)',
-    100: 'rgb(var(--color-mint-100) / <alpha-value>)',
-    200: 'rgb(var(--color-mint-200) / <alpha-value>)',
-    300: 'rgb(var(--color-mint-300) / <alpha-value>)',
-    400: 'rgb(var(--color-mint-400) / <alpha-value>)',
-    500: 'rgb(var(--color-mint-500) / <alpha-value>)',
-    600: 'rgb(var(--color-mint-600) / <alpha-value>)',
-    700: 'rgb(var(--color-mint-700) / <alpha-value>)',
-    800: 'rgb(var(--color-mint-800) / <alpha-value>)',
-    900: 'rgb(var(--color-mint-900) / <alpha-value>)',
-  },
-  sky: {
-    25: 'rgb(var(--color-sky-25) / <alpha-value>)',
-    50: 'rgb(var(--color-sky-50) / <alpha-value>)',
-    75: 'rgb(var(--color-sky-75) / <alpha-value>)',
-    100: 'rgb(var(--color-sky-100) / <alpha-value>)',
-    200: 'rgb(var(--color-sky-200) / <alpha-value>)',
-    300: 'rgb(var(--color-sky-300) / <alpha-value>)',
-    400: 'rgb(var(--color-sky-400) / <alpha-value>)',
-    500: 'rgb(var(--color-sky-500) / <alpha-value>)',
-    600: 'rgb(var(--color-sky-600) / <alpha-value>)',
-    700: 'rgb(var(--color-sky-700) / <alpha-value>)',
-    800: 'rgb(var(--color-sky-800) / <alpha-value>)',
-    900: 'rgb(var(--color-sky-900) / <alpha-value>)',
-  },
-  indigo: {
-    25: 'rgb(var(--color-indigo-25) / <alpha-value>)',
-    50: 'rgb(var(--color-indigo-50) / <alpha-value>)',
-    75: 'rgb(var(--color-indigo-75) / <alpha-value>)',
-    100: 'rgb(var(--color-indigo-100) / <alpha-value>)',
-    200: 'rgb(var(--color-indigo-200) / <alpha-value>)',
-    300: 'rgb(var(--color-indigo-300) / <alpha-value>)',
-    400: 'rgb(var(--color-indigo-400) / <alpha-value>)',
-    500: 'rgb(var(--color-indigo-500) / <alpha-value>)',
-    600: 'rgb(var(--color-indigo-600) / <alpha-value>)',
-    700: 'rgb(var(--color-indigo-700) / <alpha-value>)',
-    800: 'rgb(var(--color-indigo-800) / <alpha-value>)',
-    900: 'rgb(var(--color-indigo-900) / <alpha-value>)',
-  },
-  iris: {
-    25: 'rgb(var(--color-iris-25) / <alpha-value>)',
-    50: 'rgb(var(--color-iris-50) / <alpha-value>)',
-    75: 'rgb(var(--color-iris-75) / <alpha-value>)',
-    100: 'rgb(var(--color-iris-100) / <alpha-value>)',
-    200: 'rgb(var(--color-iris-200) / <alpha-value>)',
-    300: 'rgb(var(--color-iris-300) / <alpha-value>)',
-    400: 'rgb(var(--color-iris-400) / <alpha-value>)',
-    500: 'rgb(var(--color-iris-500) / <alpha-value>)',
-    600: 'rgb(var(--color-iris-600) / <alpha-value>)',
-    700: 'rgb(var(--color-iris-700) / <alpha-value>)',
-    800: 'rgb(var(--color-iris-800) / <alpha-value>)',
-    900: 'rgb(var(--color-iris-900) / <alpha-value>)',
-  },
-  purple: {
-    25: 'rgb(var(--color-violet-25) / <alpha-value>)',
-    50: 'rgb(var(--color-violet-50) / <alpha-value>)',
-    75: 'rgb(var(--color-violet-75) / <alpha-value>)',
-    100: 'rgb(var(--color-violet-100) / <alpha-value>)',
-    200: 'rgb(var(--color-violet-200) / <alpha-value>)',
-    300: 'rgb(var(--color-violet-300) / <alpha-value>)',
-    400: 'rgb(var(--color-violet-400) / <alpha-value>)',
-    500: 'rgb(var(--color-violet-500) / <alpha-value>)',
-    600: 'rgb(var(--color-violet-600) / <alpha-value>)',
-    700: 'rgb(var(--color-violet-700) / <alpha-value>)',
-    800: 'rgb(var(--color-violet-800) / <alpha-value>)',
-    900: 'rgb(var(--color-violet-900) / <alpha-value>)',
-  },
-  pink: {
-    25: 'rgb(var(--color-pink-25) / <alpha-value>)',
-    50: 'rgb(var(--color-pink-50) / <alpha-value>)',
-    75: 'rgb(var(--color-pink-75) / <alpha-value>)',
-    100: 'rgb(var(--color-pink-100) / <alpha-value>)',
-    200: 'rgb(var(--color-pink-200) / <alpha-value>)',
-    300: 'rgb(var(--color-pink-300) / <alpha-value>)',
-    400: 'rgb(var(--color-pink-400) / <alpha-value>)',
-    500: 'rgb(var(--color-pink-500) / <alpha-value>)',
-    600: 'rgb(var(--color-pink-600) / <alpha-value>)',
-    700: 'rgb(var(--color-pink-700) / <alpha-value>)',
-    800: 'rgb(var(--color-pink-800) / <alpha-value>)',
-    900: 'rgb(var(--color-pink-900) / <alpha-value>)',
-  },
-  orange: {
-    25: 'rgb(var(--color-orange-25) / <alpha-value>)',
-    50: 'rgb(var(--color-orange-50) / <alpha-value>)',
-    75: 'rgb(var(--color-orange-75) / <alpha-value>)',
-    100: 'rgb(var(--color-orange-100) / <alpha-value>)',
-    200: 'rgb(var(--color-orange-200) / <alpha-value>)',
-    300: 'rgb(var(--color-orange-300) / <alpha-value>)',
-    400: 'rgb(var(--color-orange-400) / <alpha-value>)',
-    500: 'rgb(var(--color-orange-500) / <alpha-value>)',
-    600: 'rgb(var(--color-orange-600) / <alpha-value>)',
-    700: 'rgb(var(--color-orange-700) / <alpha-value>)',
-    800: 'rgb(var(--color-orange-800) / <alpha-value>)',
-    900: 'rgb(var(--color-orange-900) / <alpha-value>)',
-  },
+
   // next design system color
   n: {
     slate: {