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/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/DocumentForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
index 2a2730e46..d85ba8a06 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
@@ -99,7 +99,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/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/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 ed6d7a20b..6288f7452 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -38,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';
   }
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/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/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..0ff68f79b 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,18 @@ 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">
+          <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 +493,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 +506,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 +517,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 +526,7 @@ export default {
 
 <style scoped lang="scss">
 .modal-mask {
-  @apply absolute;
+  @apply fixed;
 
   &::v-deep {
     .ProseMirror-woot-style {
@@ -650,7 +550,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/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/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/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/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/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/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/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/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/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/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 76a3e3079..64870d31c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -105,7 +105,7 @@ const columns = computed(() => [
         {
           class: ratingObject.emoji
             ? 'emoji-response text-lg'
-            : 'text-slate-300 dark:text-slate-700',
+            : 'text-n-slate-10',
         },
         ratingObject.emoji || '---'
       );
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/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/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/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/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/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/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: {