From 7fd8b4d03a0b96b8ed8234ae1fcf1843dcd1a9cf Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 15 Jan 2025 17:13:03 +0530
Subject: [PATCH] feat: update colors for v4 (#10660)

Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../assets/scss/plugins/_dropdown.scss        |   4 +-
 .../assets/scss/widgets/_buttons.scss         |  92 ++++----------
 .../dashboard/assets/scss/widgets/_tabs.scss  |  12 +-
 .../NewConversation/ComposeConversation.vue   |   5 +-
 .../components-next/avatar/Avatar.vue         |   2 +-
 .../components-next/button/Button.vue         |  23 +++-
 .../components-next/button/constants.js       |   2 +
 .../components-next/dialog/Dialog.vue         |   2 +-
 .../components-next/message/Message.vue       |   6 +-
 .../message/bubbles/BaseAttachment.vue        |   7 +-
 .../message/bubbles/Email/Index.vue           |   2 +-
 .../components-next/message/chips/Audio.vue   |   2 +-
 .../sidebar/SidebarProfileMenu.vue            |   3 +-
 .../components/Accordion/AccordionItem.vue    |  17 ++-
 .../dashboard/components/ChatList.vue         |   2 +-
 .../dashboard/components/ChatListHeader.vue   |   5 +-
 app/javascript/dashboard/components/Code.vue  | 119 ++++++++++--------
 .../dashboard/components/CustomAttribute.vue  |  14 +--
 app/javascript/dashboard/components/Modal.vue |  13 +-
 .../components/buttons/ResolveAction.vue      | 100 +++++++--------
 .../dashboard/components/ui/Banner.vue        |  10 +-
 .../dashboard/components/ui/TimeAgo.vue       |   4 +-
 .../components/widgets/InboxName.vue          |   2 +-
 .../components/widgets/SettingIntroBanner.vue |   4 +-
 .../components/widgets/WootWriter/Editor.vue  |   2 +-
 .../widgets/WootWriter/EditorModeToggle.vue   |   8 +-
 .../widgets/WootWriter/ReplyBottomPanel.vue   |   2 +-
 .../widgets/conversation/ConversationBox.vue  |   5 +-
 .../widgets/conversation/ConversationCard.vue |  48 +++----
 .../conversation/ConversationHeader.vue       |  13 +-
 .../conversation/ConversationSidebar.vue      |   2 +-
 .../EmptyState/FeaturePlaceholder.vue         |   8 +-
 .../widgets/conversation/MessagesView.vue     |  19 ++-
 .../widgets/conversation/MoreActions.vue      |  30 +++--
 .../widgets/conversation/PriorityMark.vue     |   6 +-
 .../widgets/conversation/ReplyBox.vue         |  10 +-
 .../widgets/conversation/ReplyEmailHead.vue   |  24 ++--
 .../widgets/conversation/TagAgents.vue        |  21 ++--
 .../conversation/components/SLACardLabel.vue  |  14 ++-
 .../widgets/mentions/MentionBox.vue           |  16 +--
 .../dashboard/constants/localStorage.js       |   1 -
 .../components/MessageContextMenu.vue         |   2 +-
 .../search/components/MessageContent.vue      |  15 +--
 .../modules/search/components/ReadMore.vue    |  72 ++++-------
 .../search/components/SearchHeader.vue        |  54 +++-----
 .../components/SearchResultContactItem.vue    |  90 +++++++------
 .../components/SearchResultContactsList.vue   |   2 +-
 .../SearchResultConversationItem.vue          |  88 ++++++-------
 .../SearchResultConversationsList.vue         |   2 +-
 .../components/SearchResultMessagesList.vue   |   2 +-
 .../search/components/SearchResultSection.vue |  90 +++++--------
 .../modules/search/components/SearchView.vue  |  71 ++++-------
 .../dashboard/conversation/ContactPanel.vue   |   7 +-
 .../conversation/Macros/MacroPreview.vue      |  10 +-
 .../conversation/contact/ContactInfo.vue      |  95 ++++++--------
 .../conversation/contact/ContactInfoRow.vue   |  19 ++-
 .../customAttributes/CustomAttributes.vue     |  10 +-
 .../components/ArticleSearch/Header.vue       |   2 +-
 .../routes/dashboard/inbox/InboxList.vue      |   4 +-
 .../inbox/components/InboxItemHeader.vue      |   6 +-
 .../inbox/components/InboxListHeader.vue      |  10 +-
 .../inbox/components/PaginationButton.vue     |   4 +-
 .../routes/dashboard/inbox/routes.js          |   4 +-
 .../dashboard/settings/SettingsHeader.vue     |   2 +-
 .../dashboard/settings/SettingsWrapper.vue    |   2 +-
 .../routes/dashboard/settings/Wrapper.vue     |   2 +-
 .../dashboard/settings/agents/Index.vue       |   4 +-
 .../settings/attributes/CustomAttribute.vue   |   2 +-
 .../dashboard/settings/auditlogs/Index.vue    |   6 +-
 .../dashboard/settings/automation/Index.vue   |   6 +-
 .../dashboard/settings/canned/Index.vue       |   6 +-
 .../components/BaseSettingsHeader.vue         |  31 ++---
 .../component/CustomRoleTableBody.vue         |   4 +-
 .../settings/integrations/Webhooks/Index.vue  |   2 +-
 .../dashboard/settings/macros/Index.vue       |   6 +-
 .../settings/macros/MacroProperties.vue       |   2 +-
 .../components/ui/MultiselectDropdown.vue     |  19 ++-
 .../ui/MultiselectDropdownItems.vue           |  16 +--
 .../mixins/keyboardEventListenerMixins.js     |   5 +-
 79 files changed, 660 insertions(+), 795 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
index e08099ae6..9ab51d12a 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
@@ -1,7 +1,7 @@
 .dropdown-pane {
-  @apply border rounded-lg hidden relative invisible shadow-lg border-slate-25 dark:border-slate-700 box-content p-2 w-fit z-[9999];
+  @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-white absolute dark:bg-slate-800 block visible;
+    @apply bg-n-alpha-3 backdrop-blur-[100px] absolute  block visible;
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 640e1395f..729e10368 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -31,7 +31,7 @@ button {
 }
 
 .button {
-  @apply items-center bg-woot-500 dark:bg-woot-500 px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
+  @apply items-center bg-n-brand px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
 
   .button__content {
     @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
@@ -42,8 +42,8 @@ button {
     }
   }
 
-  &:hover {
-    @apply bg-woot-600 dark:bg-woot-600;
+  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(.clear) {
+    @apply bg-n-brand/80 dark:bg-n-brand/80;
   }
 
   &:disabled,
@@ -52,23 +52,23 @@ button {
   }
 
   &.success {
-    @apply bg-[#44ce4b] dark:bg-[#44ce4b] text-white dark:text-white;
+    @apply bg-n-teal-9 text-white dark:text-white;
   }
 
   &.secondary {
-    @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white;
+    @apply bg-n-solid-3 text-white dark:text-white;
   }
 
   &.primary {
-    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white;
+    @apply bg-n-brand text-white dark:text-white;
   }
 
   &.clear {
-    @apply text-woot-500 dark:text-woot-500 bg-transparent dark:bg-transparent;
+    @apply text-n-blue-text dark:text-n-blue-text bg-transparent dark:bg-transparent;
   }
 
   &.alert {
-    @apply bg-red-500 dark:bg-red-500 text-white dark:text-white;
+    @apply bg-n-ruby-9 text-white dark:text-white;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -76,7 +76,7 @@ button {
   }
 
   &.warning {
-    @apply bg-[#ffc532] dark:bg-[#ffc532] text-white dark:text-white;
+    @apply bg-n-amber-9 text-white dark:text-white;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -115,114 +115,74 @@ button {
   }
 
   &.hollow {
-    @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
+    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:bg-n-brand/20;
 
     &.secondary {
-      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
+      @apply text-n-slate-12 border-n-slate-5 hover:bg-n-slate-5;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
+      @apply text-n-teal-9 border-n-teal-8 hover:bg-n-teal-5;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
+      @apply text-n-ruby-9 border-n-ruby-8 hover:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
-    }
-
-    &:hover {
-      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
-
-      &.secondary {
-        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
-      }
-
-      &.success {
-        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
-      }
-
-      &.alert {
-        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
-      }
-
-      &.warning {
-        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
-      }
+      @apply text-n-amber-9 border-n-amber-8 hover:bg-n-amber-5;
     }
   }
 
   // Smooth style
   &.smooth {
-    @apply bg-woot-50 dark:bg-woot-800 text-woot-700 dark:text-woot-100 hover:text-woot-700 dark:hover:text-woot-700 hover:bg-woot-100 dark:hover:bg-woot-900;
+    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/40;
 
     &.secondary {
-      @apply bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800;
+      @apply bg-n-slate-4 text-n-slate-11 hover:text-n-slate-11 hover:bg-n-slate-5;
     }
 
     &.success {
-      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
+      @apply bg-n-teal-4 text-n-teal-11 hover:text-n-teal-11 hover:bg-n-teal-5;
     }
 
     &.alert {
-      @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
+      @apply bg-n-ruby-4 text-n-ruby-11 hover:text-n-ruby-11 hover:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
+      @apply bg-n-amber-4 text-n-amber-11 hover:text-n-amber-11 hover:bg-n-amber-5;
     }
   }
 
   &.clear {
-    @apply text-woot-500 dark:text-woot-500;
+    @apply text-n-blue-text hover:bg-n-brand/10 dark:hover:bg-n-brand/30;
 
     &.secondary {
-      @apply text-slate-700 dark:text-slate-100;
+      @apply text-n-slate-12 hover:bg-n-slate-4;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100;
+      @apply text-n-teal-10 hover:bg-n-teal-4;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-100;
+      @apply text-n-ruby-11 hover:bg-n-ruby-4;
     }
 
     &.warning {
-      @apply text-yellow-700 dark:text-yellow-600;
-    }
-
-    &:hover {
-      @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
-
-      &.secondary {
-        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
-      }
-
-      &.success {
-        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
-      }
-
-      &.alert {
-        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
-      }
-
-      &.warning {
-        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
-      }
+      @apply text-n-amber-11 hover:bg-n-amber-4;
     }
 
     &:active {
       &.secondary {
-        @apply active:bg-slate-100 dark:active:bg-slate-900;
+        @apply active:bg-n-slate-3 dark:active:bg-n-slate-7;
       }
     }
 
     &:focus {
       &.secondary {
-        @apply focus:bg-slate-50 dark:focus:bg-slate-700;
+        @apply focus:bg-n-slate-4 dark:focus:bg-n-slate-6;
       }
     }
   }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index 01ccaf671..72a2e6be8 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -3,7 +3,7 @@
 }
 
 .tabs--container--with-border {
-  @apply border-b border-slate-50 dark:border-slate-800/50;
+  @apply border-b border-n-weak;
 }
 
 .tabs--container--compact.tab--chat-type {
@@ -42,7 +42,7 @@
   @apply flex-shrink-0 my-0 mx-2;
 
   .badge {
-    @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
+    @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 {
@@ -56,22 +56,22 @@
   &:hover,
   &:focus {
     a {
-      @apply text-slate-800 dark:text-slate-100;
+      @apply text-n-slate-12;
     }
   }
 
   a {
-    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
+    @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-woot-500 text-woot-500 dark:text-woot-500;
+      @apply border-b border-n-brand text-n-blue-text;
     }
 
     .badge {
-      @apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
+      @apply bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text;
     }
   }
 }
diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
index 44ab54393..f5b2cb228 100644
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -189,7 +189,10 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <div
     v-on-click-outside="() => (showComposeNewConversation = false)"
-    class="relative z-40"
+    class="relative"
+    :class="{
+      'z-40': showComposeNewConversation,
+    }"
   >
     <slot
       name="trigger"
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index fb23b3cff..65859b1c7 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -174,7 +174,7 @@ watch(
 </script>
 
 <template>
-  <span class="relative inline-flex group/avatar" :style="containerStyles">
+  <span class="relative inline-flex group/avatar z-0" :style="containerStyles">
     <!-- Status Badge -->
     <slot name="badge" :size="size">
       <div
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index fecdbaf9b..fadff67b2 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -6,6 +6,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import {
   VARIANT_OPTIONS,
   COLOR_OPTIONS,
+  JUSTIFY_OPTIONS,
   SIZE_OPTIONS,
   EXCLUDED_ATTRS,
 } from './constants.js';
@@ -27,6 +28,11 @@ const props = defineProps({
     default: null,
     validator: value => SIZE_OPTIONS.includes(value) || value === null,
   },
+  justify: {
+    type: String,
+    default: null,
+    validator: value => JUSTIFY_OPTIONS.includes(value) || value === null,
+  },
   icon: { type: [String, Object, Function], default: '' },
   trailingIcon: { type: Boolean, default: false },
   isLoading: { type: Boolean, default: false },
@@ -81,6 +87,15 @@ const computedSize = computed(() => {
   return 'md';
 });
 
+const computedJustify = computed(() => {
+  if (props.justify) return props.justify;
+  if (attrs.start || attrs.start === '') return 'start';
+  if (attrs.center || attrs.center === '') return 'center';
+  if (attrs.end || attrs.end === '') return 'end';
+
+  return 'center';
+});
+
 const STYLE_CONFIG = {
   colors: {
     blue: {
@@ -151,7 +166,12 @@ const STYLE_CONFIG = {
     md: 'text-sm font-medium',
     lg: 'text-base',
   },
-  base: 'inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
+  justify: {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+  },
+  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };
 
 const variantClasses = computed(() => {
@@ -197,6 +217,7 @@ const linkButtonClasses = computed(() => {
       [STYLE_CONFIG.base]: true,
       [isLink ? linkButtonClasses : buttonClasses]: true,
       [STYLE_CONFIG.fontSize[computedSize]]: true,
+      [STYLE_CONFIG.justify[computedJustify]]: true,
       'flex-row-reverse': trailingIcon && !isIconOnly,
     }"
   >
diff --git a/app/javascript/dashboard/components-next/button/constants.js b/app/javascript/dashboard/components-next/button/constants.js
index e65299420..d463abdd3 100644
--- a/app/javascript/dashboard/components-next/button/constants.js
+++ b/app/javascript/dashboard/components-next/button/constants.js
@@ -1,6 +1,7 @@
 export const VARIANT_OPTIONS = ['solid', 'outline', 'faded', 'link', 'ghost'];
 export const COLOR_OPTIONS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
 export const SIZE_OPTIONS = ['xs', 'sm', 'md', 'lg'];
+export const JUSTIFY_OPTIONS = ['start', 'center', 'end'];
 
 export const EXCLUDED_ATTRS = [
   'variant',
@@ -12,4 +13,5 @@ export const EXCLUDED_ATTRS = [
   ...VARIANT_OPTIONS,
   ...COLOR_OPTIONS,
   ...SIZE_OPTIONS,
+  ...JUSTIFY_OPTIONS,
 ];
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.vue b/app/javascript/dashboard/components-next/dialog/Dialog.vue
index c485549ae..287dfb188 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -150,6 +150,6 @@ defineExpose({ open, close });
 
 <style scoped>
 dialog::backdrop {
-  @apply dark:bg-n-alpha-white bg-n-alpha-black2;
+  @apply bg-n-alpha-black1 backdrop-blur-[4px];
 }
 </style>
diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index 7c76c58c6..78b637e65 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -431,12 +431,12 @@ provideMessageContext({
   <div
     v-if="shouldRenderMessage"
     :id="`message${props.id}`"
-    class="flex w-full message-bubble-container"
+    class="flex w-full message-bubble-container mb-2"
     :data-message-id="props.id"
     :class="[
       flexOrientationClass,
-      shouldGroupWithNext ? 'group-with-next mb-2' : 'mb-4',
       {
+        'group-with-next': shouldGroupWithNext,
         'bg-n-alpha-1': showBackgroundHighlight,
       },
     ]"
@@ -449,7 +449,7 @@ provideMessageContext({
       :class="[
         gridClass,
         {
-          'gap-y-2': !shouldGroupWithNext,
+          'gap-y-2': contentAttributes.externalError,
           'w-full': variant === MESSAGE_VARIANTS.EMAIL,
         },
       ]"
diff --git a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
index 2c814a274..d494de908 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
@@ -28,10 +28,7 @@ const senderName = computed(() => {
 </script>
 
 <template>
-  <BaseBubble
-    class="overflow-hidden p-3 !bg-n-solid-2 shadow-[0px_0px_12px_0px_rgba(0,0,0,0.05)]"
-    data-bubble-name="attachment"
-  >
+  <BaseBubble class="overflow-hidden p-3" data-bubble-name="attachment">
     <div class="grid gap-4 min-w-64">
       <div class="grid gap-3 z-20">
         <div
@@ -57,7 +54,7 @@ const senderName = computed(() => {
           </slot>
         </div>
       </div>
-      <div v-if="action">
+      <div v-if="action" class="mb-2">
         <a
           v-if="action.href"
           :href="action.href"
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
index 07f9c92bd..0edf9a568 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -21,7 +21,7 @@ const showQuotedMessage = ref(false);
 const contentContainer = useTemplateRef('contentContainer');
 
 onMounted(() => {
-  isExpandable.value = contentContainer.value.scrollHeight > 400;
+  isExpandable.value = contentContainer.value?.scrollHeight > 400;
 });
 
 const isOutgoing = computed(() => {
diff --git a/app/javascript/dashboard/components-next/message/chips/Audio.vue b/app/javascript/dashboard/components-next/message/chips/Audio.vue
index 2388c80be..45a307141 100644
--- a/app/javascript/dashboard/components-next/message/chips/Audio.vue
+++ b/app/javascript/dashboard/components-next/message/chips/Audio.vue
@@ -26,7 +26,7 @@ const currentTime = ref(0);
 const duration = ref(0);
 
 const onLoadedMetadata = () => {
-  duration.value = audioPlayer.value.duration;
+  duration.value = audioPlayer.value?.duration;
 };
 
 const formatTime = time => {
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
index 7498ecd91..ba6d84ad1 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -90,7 +90,8 @@ const allowedMenuItems = computed(() => {
 
 <template>
   <DropdownContainer
-    class="relative z-20 w-full min-w-0"
+    class="relative w-full min-w-0"
+    :class="{ 'z-20': isOpen }"
     @close="emit('close')"
   >
     <template #trigger="{ toggle, isOpen }">
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index e8a90cc83..e7a608a72 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -33,22 +33,21 @@ const onToggle = () => {
 </script>
 
 <template>
-  <div class="-mt-px text-sm">
+  <div class="text-sm">
     <button
-      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      class="flex items-center select-none w-full rounded-lg bg-n-slate-2 border border-n-weak m-0 cursor-grab justify-between py-2 px-4 drag-handle"
+      :class="{ 'rounded-bl-none rounded-br-none': isOpen }"
       @click.stop="onToggle"
     >
-      <div class="flex justify-between mb-0.5">
+      <div class="flex justify-between">
         <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
-        <h5
-          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
-        >
+        <h5 class="text-n-slate-12 text-sm mb-0 py-0 pr-2 pl-0">
           {{ title }}
         </h5>
       </div>
       <div class="flex flex-row">
         <slot name="button" />
-        <div class="flex justify-end w-3 text-woot-500">
+        <div class="flex justify-end w-3 text-n-blue-text cursor-pointer">
           <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
           <fluent-icon v-else size="24" icon="add" type="solid" />
         </div>
@@ -56,8 +55,8 @@ const onToggle = () => {
     </button>
     <div
       v-if="isOpen"
-      class="bg-white dark:bg-slate-900"
-      :class="compact ? 'p-0' : 'p-4'"
+      class="bg-n-background border border-n-weak dark:border-n-slate-2 border-t-0 rounded-br-lg rounded-bl-lg overflow-hidden"
+      :class="compact ? 'p-0' : 'px-2 py-4'"
     >
       <slot />
     </div>
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 0438d24af..1d2ff5bd4 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -782,7 +782,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 conversations-list-wrap"
+    class="flex flex-col flex-shrink-0 bg-n-solid-1 conversations-list-wrap"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'w-[360px] 2xl:w-[420px]',
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index 7390bba46..286d6d6c5 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -80,10 +80,11 @@ const toggleConversationLayout = () => {
 
 <template>
   <div
-    class="flex items-center justify-between gap-2 px-4 pb-0 mb-2"
+    class="flex items-center justify-between gap-2 px-4"
     :class="{
       'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
-      'pt-2.5': showV4View,
+      'pt-3 pb-2': showV4View,
+      'mb-2 pb-0': !showV4View,
     }"
   >
     <div class="flex items-center justify-center min-w-0">
diff --git a/app/javascript/dashboard/components/Code.vue b/app/javascript/dashboard/components/Code.vue
index e6061182a..5823ec937 100644
--- a/app/javascript/dashboard/components/Code.vue
+++ b/app/javascript/dashboard/components/Code.vue
@@ -1,60 +1,61 @@
-<script>
+<script setup>
+import { computed } from 'vue';
 import 'highlight.js/styles/default.css';
 import 'highlight.js/lib/common';
-
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
 
-export default {
-  props: {
-    script: {
-      type: String,
-      default: '',
-    },
-    lang: {
-      type: String,
-      default: 'javascript',
-    },
-    enableCodePen: {
-      type: Boolean,
-      default: false,
-    },
-    codepenTitle: {
-      type: String,
-      default: 'Chatwoot Codepen',
-    },
+const props = defineProps({
+  script: {
+    type: String,
+    default: '',
   },
-  computed: {
-    codepenScriptValue() {
-      const lang = this.lang === 'javascript' ? 'js' : this.lang;
-      return JSON.stringify({
-        title: this.codepenTitle,
-        private: true,
-        [lang]: this.scrubbedScript,
-      });
-    },
-    scrubbedScript() {
-      // remove trailing and leading extra lines and not spaces
-      const scrubbed = this.script.replace(/^\s*[\r\n]/gm, '');
-      const lines = scrubbed.split('\n');
+  lang: {
+    type: String,
+    default: 'javascript',
+  },
+  enableCodePen: {
+    type: Boolean,
+    default: false,
+  },
+  codepenTitle: {
+    type: String,
+    default: 'Chatwoot Codepen',
+  },
+});
 
-      // remove extra indentations
-      const minIndent = lines.reduce((min, line) => {
-        if (line.trim().length === 0) return min;
-        const indent = line.match(/^\s*/)[0].length;
-        return Math.min(min, indent);
-      }, Infinity);
+const { t } = useI18n();
 
-      return lines.map(line => line.slice(minIndent)).join('\n');
-    },
-  },
-  methods: {
-    async onCopy(e) {
-      e.preventDefault();
-      await copyTextToClipboard(this.scrubbedScript);
-      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
-    },
-  },
+const scrubbedScript = computed(() => {
+  // remove trailing and leading extra lines and not spaces
+  const scrubbed = props.script.replace(/^\s*[\r\n]/gm, '');
+  const lines = scrubbed.split('\n');
+
+  // remove extra indentations
+  const minIndent = lines.reduce((min, line) => {
+    if (line.trim().length === 0) return min;
+    const indent = line.match(/^\s*/)[0].length;
+    return Math.min(min, indent);
+  }, Infinity);
+
+  return lines.map(line => line.slice(minIndent)).join('\n');
+});
+
+const codepenScriptValue = computed(() => {
+  const lang = props.lang === 'javascript' ? 'js' : props.lang;
+  return JSON.stringify({
+    title: props.codepenTitle,
+    private: true,
+    [lang]: scrubbedScript.value,
+  });
+});
+
+const onCopy = async e => {
+  e.preventDefault();
+  await copyTextToClipboard(scrubbedScript.value);
+  useAlert(t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
 };
 </script>
 
@@ -69,13 +70,21 @@ export default {
         target="_blank"
       >
         <input type="hidden" name="data" :value="codepenScriptValue" />
-        <button type="submit" class="button secondary tiny">
-          {{ $t('COMPONENTS.CODE.CODEPEN') }}
-        </button>
+        <NextButton
+          slate
+          xs
+          type="submit"
+          faded
+          :label="t('COMPONENTS.CODE.CODEPEN')"
+        />
       </form>
-      <button type="button" class="button secondary tiny" @click="onCopy">
-        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-      </button>
+      <NextButton
+        slate
+        xs
+        faded
+        :label="t('COMPONENTS.CODE.BUTTON_TEXT')"
+        @click="onCopy"
+      />
     </div>
     <highlightjs v-if="script" :language="lang" :code="scrubbedScript" />
   </div>
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index c58243ba9..e3cb79e18 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -209,9 +209,7 @@ export default {
           <span
             class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
             :class="
-              v$.editedValue.$error
-                ? 'text-red-400 dark:text-red-500'
-                : 'text-slate-800 dark:text-slate-100'
+              v$.editedValue.$error ? 'text-n-ruby-11' : 'text-n-slate-12'
             "
           >
             {{ label }}
@@ -228,7 +226,7 @@ export default {
             size="medium"
             color-scheme="secondary"
             icon="delete"
-            class-names="flex justify-end w-4"
+            class-names="flex justify-end !w-fit"
             @click="onDelete"
           />
         </div>
@@ -251,14 +249,14 @@ export default {
             <woot-button
               size="small"
               icon="checkmark"
-              class="rounded-l-none rtl:rounded-r-none"
+              class="ltr:rounded-l-none rtl:rounded-r-none"
               @click="onUpdate"
             />
           </div>
         </div>
         <span
           v-if="shouldShowErrorMessage"
-          class="block w-full -mt-px text-sm font-normal text-red-400 dark:text-red-500"
+          class="block w-full -mt-px text-sm font-normal text-n-ruby-11"
         >
           {{ errorMessage }}
         </span>
@@ -273,13 +271,13 @@ export default {
           :href="hrefURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ urlValue }}
         </a>
         <p
           v-else
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
         >
           {{ displayValue || '---' }}
         </p>
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 5f65c34dd..ecb5758d7 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -75,7 +75,7 @@ onMounted(() => {
       @mousedown="handleMouseDown"
     >
       <div
-        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
+        class="relative max-h-full overflow-auto bg-n-alpha-3 backdrop-blur-[100px] shadow-md modal-container rtl:text-right skip-context-menu"
         :class="{
           'rounded-xl w-[37.5rem]': !fullWidth,
           'items-center rounded-none flex h-full justify-center w-full':
@@ -101,39 +101,48 @@ onMounted(() => {
 
 <style lang="scss">
 .modal-mask {
-  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
+  @apply flex items-center justify-center bg-n-alpha-black2 backdrop-blur-[4px] z-[9990] h-full left-0 fixed top-0 w-full;
+
   .modal-container {
     &.medium {
       @apply max-w-[80%] w-[56.25rem];
     }
+
     // .content-box {
     //   @apply h-auto p-0;
     // }
     .content {
       @apply p-8;
     }
+
     form,
     .modal-content {
       @apply pt-4 pb-8 px-8 self-center;
+
       a {
         @apply p-4;
       }
     }
   }
 }
+
 .modal-big {
   @apply w-full;
 }
+
 .modal-mask.right-aligned {
   @apply justify-end;
+
   .modal-container {
     @apply rounded-none h-full w-[30rem];
   }
 }
+
 .modal-enter,
 .modal-leave {
   @apply opacity-0;
 }
+
 .modal-enter .modal-container,
 .modal-leave .modal-container {
   transform: scale(1.1);
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 4197440a7..7c7a9c262 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -15,6 +15,8 @@ import {
   CMD_RESOLVE_CONVERSATION,
 } from 'dashboard/helper/commandbar/events';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const store = useStore();
 const getters = useStoreGetters();
 const { t } = useI18n();
@@ -41,13 +43,6 @@ const isSnoozed = computed(
   () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
 );
 
-const buttonClass = computed(() => {
-  if (isPending.value) return 'primary';
-  if (isOpen.value) return 'success';
-  if (isResolved.value) return 'warning';
-  return '';
-});
-
 const showAdditionalActions = computed(
   () => !isPending.value && !isSnoozed.value
 );
@@ -138,76 +133,77 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 
 <template>
   <div class="relative flex items-center justify-end resolve-actions">
-    <div class="button-group">
-      <woot-button
+    <div
+      class="rounded-lg shadow button-group outline-1 outline"
+      :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
+    >
+      <Button
         v-if="isOpen"
-        class-names="resolve"
-        color-scheme="success"
-        icon="checkmark"
-        emoji="✅"
+        :label="t('CONVERSATION.HEADER.RESOLVE_ACTION')"
+        size="sm"
+        color="slate"
+        class="ltr:rounded-r-none rtl:rounded-l-none !outline-0"
         :is-loading="isLoading"
         @click="onCmdResolveConversation"
-      >
-        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
-      </woot-button>
-      <woot-button
+      />
+      <Button
         v-else-if="isResolved"
-        class-names="resolve"
-        color-scheme="warning"
-        icon="arrow-redo"
-        emoji="👀"
+        :label="t('CONVERSATION.HEADER.REOPEN_ACTION')"
+        size="sm"
+        color="slate"
+        class="ltr:rounded-r-none rtl:rounded-l-none !outline-0"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
-      >
-        {{ t('CONVERSATION.HEADER.REOPEN_ACTION') }}
-      </woot-button>
-      <woot-button
+      />
+      <Button
         v-else-if="showOpenButton"
-        class-names="resolve"
-        color-scheme="primary"
-        icon="person"
+        :label="t('CONVERSATION.HEADER.OPEN_ACTION')"
+        size="sm"
+        color="slate"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
-      >
-        {{ t('CONVERSATION.HEADER.OPEN_ACTION') }}
-      </woot-button>
-      <woot-button
+      />
+      <Button
         v-if="showAdditionalActions"
         ref="arrowDownButtonRef"
-        :color-scheme="buttonClass"
+        icon="i-lucide-chevron-down"
         :disabled="isLoading"
-        icon="chevron-down"
-        emoji="🔽"
+        size="sm"
+        class="ltr:rounded-l-none rtl:rounded-r-none !outline-0"
+        color="slate"
+        trailing-icon
         @click="openDropdown"
       />
     </div>
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem]"
+      class="dropdown-pane dropdown-pane--open left-auto top-full mt-0.5 ltr:right-0 rtl:left-0 max-w-[12.5rem] min-w-[9.75rem]"
     >
       <WootDropdownMenu class="mb-0">
         <WootDropdownItem v-if="!isPending">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="snooze"
+          <Button
+            :label="t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL')"
+            ghost
+            slate
+            sm
+            start
+            icon="i-lucide-alarm-clock-minus"
+            class="w-full"
             @click="() => openSnoozeModal()"
-          >
-            {{ t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
-          </woot-button>
+          />
         </WootDropdownItem>
         <WootDropdownItem v-if="!isPending">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="book-clock"
+          <Button
+            :label="t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING')"
+            ghost
+            slate
+            sm
+            start
+            icon="i-lucide-circle-dot-dashed"
+            class="w-full"
             @click="() => toggleStatus(wootConstants.STATUS_TYPE.PENDING)"
-          >
-            {{ t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
-          </woot-button>
+          />
         </WootDropdownItem>
       </WootDropdownMenu>
     </div>
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index eb0a5d28a..bd5ac5e00 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -123,14 +123,18 @@ export default {
   }
 
   &.alert {
-    @apply bg-red-500 dark:bg-red-500;
+    @apply bg-n-ruby-3 text-n-ruby-12;
     .banner-action__button {
-      @apply bg-red-700 dark:bg-red-700 border-none text-white dark:text-white;
+      @apply border-none text-n-ruby-12 bg-n-ruby-5;
 
       &:hover {
-        @apply bg-red-800 dark:bg-red-800;
+        @apply bg-n-ruby-4;
       }
     }
+
+    a {
+      @apply text-n-ruby-12;
+    }
   }
 
   &.warning {
diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index 05f1127bc..6cf3202d6 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -110,10 +110,10 @@ export default {
   <div
     v-tooltip.top="{
       content: tooltipText,
-      delay: { show: 1500, hide: 0 },
+      delay: { show: 1000, hide: 0 },
       hideOnClick: true,
     }"
-    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
+    class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-slate-11"
   >
     <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue
index da8e8d509..693162f95 100644
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -20,7 +20,7 @@ export default {
 
 <template>
   <div
-    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-n-slate-11 text-xs my-0 mx-2.5"
   >
     <fluent-icon
       class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index c2e6c48c3..db165da7e 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -14,9 +14,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
-  >
+  <div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak">
     <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
       {{ headerTitle }}
     </h2>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 8a616c505..74f981c95 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -783,7 +783,7 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 
 .is-private {
   .prosemirror-mention-node {
-    @apply font-medium bg-yellow-100 dark:bg-yellow-800 text-slate-900 dark:text-slate-25 py-0 px-1;
+    @apply font-medium bg-n-amber-2/80 dark:bg-n-amber-2/80 text-slate-900 dark:text-slate-25 py-0 px-1;
   }
 
   .ProseMirror-menubar-wrapper {
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue b/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue
index 43eb1c101..b05df863b 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue
@@ -52,7 +52,7 @@ const translateValue = computed(() => {
 
 <template>
   <button
-    class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out"
+    class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0"
     @click="$emit('toggleMode')"
   >
     <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
@@ -62,11 +62,7 @@ const translateValue = computed(() => {
       {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
     </div>
     <div
-      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] transition-all duration-300 ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)]"
-      :class="{
-        'bg-n-solid-1': !isPrivate,
-        'bg-n-amber-2': isPrivate,
-      }"
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] transition-all duration-300 ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
       :style="{
         '--chip-width': width,
         '--translate-x': translateValue,
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 2dac9f7f5..5d516e111 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -328,7 +328,7 @@ export default {
       <NextButton
         v-if="hasWhatsappTemplates"
         v-tooltip.top-end="$t('CONVERSATION.FOOTER.WHATSAPP_TEMPLATES')"
-        icon="i-ph-whatsapp"
+        icon="i-ph-whatsapp-logo"
         slate
         faded
         sm
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 46cdaf221..b0f5eb21f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -125,10 +125,7 @@ export default {
         :show-badge="false"
       />
     </woot-tabs>
-    <div
-      v-show="!activeIndex"
-      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
-    >
+    <div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
       <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index f422609e3..4575dde78 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -241,9 +241,9 @@ export default {
 
 <template>
   <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
     :class="{
-      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 border-n-weak':
         isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,
@@ -272,57 +272,58 @@ export default {
       size="40px"
     />
     <div
-      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-slate-50 dark:border-slate-800/75 w-[calc(100%-40px)]"
+      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 w-[calc(100%-40px)]"
     >
-      <div class="flex justify-between">
+      <div class="flex justify-between conversation-card--meta">
         <InboxName v-if="showInboxName" :inbox="inbox" />
         <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
           <span
             v-if="showAssignee && assignee.name"
-            class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
+            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
           >
-            <fluent-icon
-              icon="person"
-              size="12"
-              class="text-slate-500 dark:text-slate-400"
-            />
+            <fluent-icon icon="person" size="12" class="text-n-slate-11" />
             {{ assignee.name }}
           </span>
           <PriorityMark :priority="chat.priority" />
         </div>
       </div>
       <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis font-medium overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-slate-900 dark:text-slate-100"
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-n-slate-12"
+        :class="hasUnread ? 'font-semibold' : 'font-medium'"
       >
         {{ currentContact.name }}
       </h4>
       <MessagePreview
         v-if="lastMessageInChat"
         :message="lastMessageInChat"
-        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm text-slate-700 dark:text-slate-200"
+        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm"
+        :class="hasUnread ? 'font-medium text-n-slate-12' : 'text-n-slate-11'"
       />
       <p
         v-else
-        class="conversation--message text-slate-700 dark:text-slate-200 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        class="conversation--message text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        :class="hasUnread ? 'font-medium text-n-slate-12' : 'text-n-slate-11'"
       >
         <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-10"
           icon="info"
         />
         <span>
           {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
       </p>
-      <div class="absolute flex flex-col conversation--meta right-4 top-4">
-        <span class="ml-auto font-normal leading-4 text-black-600 text-xxs">
+      <div
+        class="absolute flex flex-col conversation--meta ltr:right-4 rtl:left-4 top-4"
+      >
+        <span class="ml-auto font-normal leading-4 text-xxs">
           <TimeAgo
             :last-activity-timestamp="chat.timestamp"
             :created-at-timestamp="chat.created_at"
           />
         </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-green-400"
+          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"
         >
           {{ unreadCount > 9 ? '9+' : unreadCount }}
         </span>
@@ -362,16 +363,15 @@ export default {
     .unread {
       @apply block;
     }
-    .conversation--message {
-      @apply font-semibold;
-    }
-    .conversation--user {
-      @apply font-semibold;
-    }
   }
 
   &.compact {
     @apply pl-0;
+
+    .conversation-card--meta {
+      @apply ltr:pr-4 rtl:pl-4;
+    }
+
     .conversation--details {
       @apply rounded-sm ml-0 pl-5 pr-2;
     }
@@ -389,9 +389,11 @@ export default {
     &::v-deep .user-thumbnail-box {
       @apply mt-8;
     }
+
     .checkbox-wrapper {
       @apply mt-8;
     }
+
     .conversation--meta {
       @apply mt-4;
     }
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index ae03e6a8b..4f6b31721 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -130,7 +130,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
+    class="flex flex-col items-center justify-between px-4 py-2 border-b bg-n-background border-n-weak md:flex-row"
   >
     <div
       class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
@@ -160,9 +160,7 @@ export default {
               class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
               @click.prevent="$emit('contactPanelToggle')"
             >
-              <span
-                class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
-              >
+              <span class="text-base font-medium leading-tight text-n-slate-12">
                 {{ currentContact.name }}
               </span>
             </woot-button>
@@ -170,7 +168,7 @@ export default {
               v-if="!isHMACVerified"
               v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
               size="14"
-              class="text-yellow-600 dark:text-yellow-500 my-0 mx-0 min-w-[14px]"
+              class="text-n-amber-10 my-0 mx-0 min-w-[14px]"
               icon="warning"
             />
           </div>
@@ -179,10 +177,7 @@ export default {
             class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
           >
             <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
-            <span
-              v-if="isSnoozed"
-              class="font-medium text-yellow-600 dark:text-yellow-500"
-            >
+            <span v-if="isSnoozed" class="font-medium text-n-amber-10">
               {{ snoozedDisplayText }}
             </span>
             <woot-button
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index 2ec43af36..8313ab5fe 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -53,7 +53,7 @@ const showCopilotTab = computed(() =>
 
 <template>
   <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[300px] w-[300px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[320px] w-[320px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
   >
     <div v-if="showCopilotTab" class="p-2">
       <TabBar
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
index 6cd447fab..275f31a44 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
@@ -31,19 +31,17 @@ export default {
     >
       <div class="flex items-center gap-2">
         <Hotkey
-          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-7000 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
+          custom-class="w-8 h-6 text-lg font-medium text-n-slate-12 outline outline-n-container outline-1 bg-n-alpha-3"
         >
           ⌘
         </Hotkey>
         <Hotkey
-          custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
+          custom-class="w-8 h-6 text-xs font-medium text-n-slate-12 outline outline-n-container outline-1 bg-n-alpha-3"
         >
           {{ keyShortcut.key }}
         </Hotkey>
       </div>
-      <span
-        class="text-sm font-medium text-center text-slate-700 dark:text-slate-300"
-      >
+      <span class="text-sm font-medium text-center text-n-slate-12">
         {{ keyShortcut.description }}
       </span>
     </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 05245bd60..862857cb4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -4,6 +4,7 @@ import { ref } 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';
@@ -34,6 +35,7 @@ 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';
 
 export default {
   components: {
@@ -82,8 +84,14 @@ export default {
       fetchLabelSuggestions,
     } = useAI();
 
-    const showNextBubbles = LocalStorage.get(
-      LOCAL_STORAGE_KEYS.USE_NEXT_BUBBLE
+    const currentAccountId = useMapGetter('getCurrentAccountId');
+    const isFeatureEnabledonAccount = useMapGetter(
+      'accounts/isFeatureEnabledonAccount'
+    );
+
+    const showNextBubbles = isFeatureEnabledonAccount.value(
+      currentAccountId.value,
+      FEATURE_FLAGS.CHATWOOT_V4
     );
 
     return {
@@ -465,6 +473,7 @@ export default {
     <Banner
       v-if="!currentChat.can_reply"
       color-scheme="alert"
+      class="mt-2 mx-2 rounded-lg overflow-hidden"
       :banner-message="replyWindowBannerMessage"
       :href-link="replyWindowLink"
       :href-link-text="replyWindowLinkText"
@@ -474,7 +483,7 @@ export default {
         variant="smooth"
         size="tiny"
         color-scheme="secondary"
-        class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc dark:bg-slate-700 border-slate-50 dark:border-slate-600"
+        class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc border-n-weak"
         :class="isInboxView ? 'top-52 md:top-40' : 'top-32'"
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
@@ -584,7 +593,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-slate-800 dark:text-slate-100 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-slate-700 text-n-slate-11 text-xs font-semibold my-2.5 mx-auto"
         >
           {{ typingUserNames }}
           <img
@@ -596,7 +605,6 @@ export default {
       </div>
       <ReplyBox
         v-model:popout-reply-box="isPopOutReplyBox"
-        :conversation-id="currentChat.id"
         @toggle-popout="showPopOutReplyBox"
       />
     </div>
@@ -605,6 +613,7 @@ export default {
 
 <style scoped>
 @tailwind components;
+
 @layer components {
   .rounded-bl-calc {
     border-bottom-left-radius: calc(1.5rem + 1px);
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 39667eb85..9c7997976 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -4,6 +4,8 @@ import { useAlert } from 'dashboard/composables';
 import { emitter } from 'shared/helpers/mitt';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+
 import {
   CMD_MUTE_CONVERSATION,
   CMD_SEND_TRANSCRIPT,
@@ -14,6 +16,7 @@ export default {
   components: {
     EmailTranscriptModal,
     ResolveAction,
+    ButtonV4,
   },
   data() {
     return {
@@ -51,27 +54,30 @@ export default {
 
 <template>
   <div class="relative flex items-center gap-2 actions--container">
-    <woot-button
+    <ButtonV4
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-mute"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-volume-off"
       @click="mute"
     />
-    <woot-button
+    <ButtonV4
       v-else
       v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="speaker-1"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-volume-1"
       @click="unmute"
     />
-    <woot-button
+    <ButtonV4
       v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      variant="clear"
-      color-scheme="secondary"
-      icon="share"
+      size="sm"
+      variant="ghost"
+      color="slate"
+      icon="i-lucide-share"
       @click="toggleEmailActionsModal"
     />
     <ResolveAction
diff --git a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
index a59ba5be9..d000937e0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -40,10 +40,8 @@ export default {
     }"
     class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
     :class="{
-      'bg-red-50 dark:bg-red-700 dark:bg-opacity-30 text-red-500 dark:text-red-600':
-        isUrgent,
-      'bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-200':
-        !isUrgent,
+      'bg-n-ruby-5 text-n-ruby-11': isUrgent,
+      'bg-n-slate-5 text-n-slate-11': !isUrgent,
     }"
   >
     <fluent-icon
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index a12e8c23c..d3675dbac 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1,6 +1,6 @@
 <script>
 // [TODO] The popout events are needlessly complex and should be simplified
-import { defineAsyncComponent, defineModel } from 'vue';
+import { defineAsyncComponent, defineModel, useTemplateRef } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -80,12 +80,15 @@ export default {
       default: false,
     });
 
+    const replyEditor = useTemplateRef('replyEditor');
+
     return {
       uiSettings,
       popoutReplyBox,
       updateUISettings,
       isEditorHotKeyEnabled,
       fetchSignatureFlagFromUISettings,
+      replyEditor,
     };
   },
   data() {
@@ -553,6 +556,9 @@ export default {
         this.$store.dispatch('draftMessages/delete', { key });
       }
     },
+    getElementToBind() {
+      return this.replyEditor;
+    },
     getKeyboardEvents() {
       return {
         Escape: {
@@ -1081,7 +1087,7 @@ export default {
     :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
     @primary-action="onClickSelfAssign"
   />
-  <div class="reply-box" :class="replyBoxClass">
+  <div ref="replyEditor" class="reply-box" :class="replyBoxClass">
     <ReplyTopPanel
       :mode="replyType"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
index b573a087f..740ad5f29 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -1,8 +1,12 @@
 <script>
 import { validEmailsByComma } from './helpers/emailHeadHelper';
 import { useVuelidate } from '@vuelidate/core';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    ButtonV4,
+  },
   props: {
     ccEmails: {
       type: String,
@@ -116,14 +120,14 @@ export default {
             @blur="onBlur"
           />
         </div>
-        <woot-button
+        <ButtonV4
           v-if="!showBcc"
-          variant="clear"
-          size="small"
+          :label="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC')"
+          ghost
+          xs
+          primary
           @click="handleAddBcc"
-        >
-          {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
-        </woot-button>
+        />
       </div>
       <span v-if="v$.ccEmailsVal.$error" class="message">
         {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
@@ -156,10 +160,10 @@ export default {
 
 <style lang="scss" scoped>
 .input-group-wrap .message {
-  @apply text-sm text-red-500 dark:text-red-500;
+  @apply text-sm text-n-ruby-8;
 }
 .input-group {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1 flex items-center gap-2;
+  @apply border-b border-solid border-n-weak my-1 flex items-center gap-2;
 
   .input-group-label {
     @apply border-transparent bg-transparent text-xs font-semibold pl-0;
@@ -167,9 +171,9 @@ export default {
 }
 
 .input-group.error {
-  @apply border-b-red-500 dark:border-b-red-500;
+  @apply border-n-ruby-8;
   .input-group-label {
-    @apply text-red-500 dark:text-red-500;
+    @apply text-n-ruby-8;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
index bfbe2775b..793275e3d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -1,4 +1,5 @@
 <script setup>
+import Avatar from 'next/avatar/Avatar.vue';
 import { ref, computed, watch, nextTick } from 'vue';
 import { useStoreGetters } from 'dashboard/composables/store';
 import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
@@ -67,7 +68,7 @@ const onAgentSelect = index => {
     <ul
       v-if="items.length"
       ref="tagAgentsRef"
-      class="vertical dropdown menu mention--box bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-20 pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800"
+      class="vertical dropdown menu mention--box bg-n-solid-1 p-1 rounded-xl text-sm overflow-auto absolute w-full z-20 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border border-solid border-n-strong"
       :class="{
         'border-b-[0.5rem] border-solid border-white dark:!border-slate-700':
           items.length <= 4,
@@ -78,35 +79,31 @@ const onAgentSelect = index => {
         :id="`mention-item-${index}`"
         :key="agent.id"
         :class="{
-          'bg-slate-50 dark:bg-slate-800': index === selectedIndex,
+          'bg-n-alpha-black2': index === selectedIndex,
           'last:mb-0': items.length <= 4,
         }"
-        class="flex items-center p-2 rounded-md last:mb-2"
+        class="flex items-center px-2 py-1 rounded-md"
         @click="onAgentSelect(index)"
         @mouseover="onHover(index)"
       >
         <div class="mr-2">
-          <woot-thumbnail
-            :src="agent.thumbnail"
-            :username="agent.name"
-            size="32px"
-          />
+          <Avatar :src="agent.thumbnail" :name="agent.name" rounded-full />
         </div>
         <div
           class="flex-1 max-w-full overflow-hidden whitespace-nowrap text-ellipsis"
         >
           <h5
-            class="mb-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
+            class="mb-0 overflow-hidden text-sm text-n-slate-11 whitespace-nowrap text-ellipsis"
             :class="{
-              'text-slate-900 dark:text-slate-100': index === selectedIndex,
+              'text-n-slate-12': index === selectedIndex,
             }"
           >
             {{ agent.name }}
           </h5>
           <div
-            class="overflow-hidden text-xs whitespace-nowrap text-ellipsis text-slate-700 dark:text-slate-300"
+            class="overflow-hidden text-xs whitespace-nowrap text-ellipsis text-n-slate-10"
             :class="{
-              'text-slate-800 dark:text-slate-200': index === selectedIndex,
+              'text-n-slate-11': index === selectedIndex,
             }"
           >
             {{ agent.email }}
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
index a551650f2..f9cc888cc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -47,9 +47,7 @@ export default {
       return this.slaStatus?.isSlaMissed;
     },
     slaTextStyles() {
-      return this.isSlaMissed
-        ? 'text-red-400 dark:text-red-300'
-        : 'text-yellow-600 dark:text-yellow-500';
+      return this.isSlaMissed ? 'text-n-ruby-11' : 'text-n-amber-11';
     },
     slaStatusText() {
       const upperCaseType = this.slaStatus?.type?.toUpperCase(); // FRT, NRT, or RT
@@ -107,8 +105,12 @@ export default {
 <template>
   <div
     v-if="hasSlaThreshold"
-    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
-    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
+    class="relative flex items-center cursor-pointer min-w-fit"
+    :class="
+      showExtendedInfo
+        ? 'h-[26px] rounded-lg bg-n-alpha-1'
+        : 'rounded h-5  border border-n-strong'
+    "
   >
     <div
       v-on-clickaway="closeSlaPopover"
@@ -120,7 +122,7 @@ export default {
         class="flex items-center gap-1"
         :class="
           showExtendedInfo &&
-          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
+          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
         "
       >
         <fluent-icon
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index aa12fc6ec..fc4dc5c7e 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -73,36 +73,36 @@ const variableKey = (item = {}) => {
 <template>
   <div
     ref="mentionsListContainerRef"
-    class="bg-white dark:bg-slate-800 rounded-md overflow-auto absolute w-full z-20 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-slate-100 dark:border-slate-700 mention--box"
+    class="bg-n-solid-1 p-1 rounded-xl overflow-auto absolute w-full z-20 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-n-strong mention--box"
   >
     <ul class="mb-0 vertical dropdown menu">
       <woot-dropdown-item
         v-for="(item, index) in items"
         :id="`mention-item-${index}`"
         :key="item.key"
-        class="!mb-0"
+        class="!mb-1"
         @mouseover="onHover(index)"
       >
         <button
-          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start rounded-none py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-x-0 border-t-0 border-b border-solid border-slate-100 dark:border-slate-700"
+          class="flex rounded-lg group flex-col gap-0.5 overflow-hidden cursor-pointer items-start px-3 py-2 justify-center w-full h-full text-left hover:bg-n-alpha-black2"
           :class="{
-            ' bg-woot-25 dark:bg-woot-800': index === selectedIndex,
+            'bg-n-alpha-black2': index === selectedIndex,
           }"
           @click="onListItemSelection(index)"
         >
           <slot :item="item" :index="index" :selected="index === selectedIndex">
             <p
-              class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+              class="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="{
-                'text-woot-500 dark:text-woot-500': index === selectedIndex,
+                'text-n-slate-12': index === selectedIndex,
               }"
             >
               {{ item.description }}
             </p>
             <p
-              class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
+              class="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="{
-                'text-woot-500 dark:text-woot-500': index === selectedIndex,
+                'text-n-slate-12': index === selectedIndex,
               }"
             >
               {{ variableKey(item) }}
diff --git a/app/javascript/dashboard/constants/localStorage.js b/app/javascript/dashboard/constants/localStorage.js
index 4e433707d..ee6a4357a 100644
--- a/app/javascript/dashboard/constants/localStorage.js
+++ b/app/javascript/dashboard/constants/localStorage.js
@@ -5,5 +5,4 @@ export const LOCAL_STORAGE_KEYS = {
   COLOR_SCHEME: 'color_scheme',
   DISMISSED_LABEL_SUGGESTIONS: 'labelSuggestionsDismissed',
   MESSAGE_REPLY_TO: 'messageReplyTo',
-  USE_NEXT_BUBBLE: 'useNextBubble',
 };
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 19380021b..f5688c0bb 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -274,7 +274,7 @@ export default {
   }
 
   hr {
-    @apply m-1 border-b border-solid border-slate-50 dark:border-slate-800/50;
+    @apply m-1 border-b border-solid border-n-strong;
   }
 }
 
diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index 5fb146243..4ea4714c2 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -71,12 +71,9 @@ export default {
 </script>
 
 <template>
-  <blockquote
-    ref="messageContainer"
-    class="message border-l-2 border-slate-100 dark:border-slate-700"
-  >
+  <blockquote ref="messageContainer" class="message border-l-2 border-n-weak">
     <p class="header">
-      <strong class="text-slate-700 dark:text-slate-100">
+      <strong class="text-n-slate-11">
         {{ author }}
       </strong>
       {{ $t('SEARCH.WROTE') }}
@@ -93,18 +90,18 @@ export default {
 }
 .message-content::v-deep p,
 .message-content::v-deep li::marker {
-  @apply text-slate-700 dark:text-slate-100 mb-1;
+  @apply text-n-slate-11 mb-1;
 }
 
 .header {
-  @apply text-slate-500 dark:text-slate-300 mb-1;
+  @apply text-n-slate-11 mb-1;
 }
 
 .message-content {
-  @apply break-words text-slate-600 dark:text-slate-200;
+  @apply break-words text-n-slate-11;
 }
 
 .message-content::v-deep .searchkey--highlight {
-  @apply text-woot-600 dark:text-woot-500 text-sm font-semibold;
+  @apply text-n-slate-12 text-sm font-semibold;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/ReadMore.vue b/app/javascript/dashboard/modules/search/components/ReadMore.vue
index e66a54933..e003a2673 100644
--- a/app/javascript/dashboard/modules/search/components/ReadMore.vue
+++ b/app/javascript/dashboard/modules/search/components/ReadMore.vue
@@ -1,63 +1,35 @@
-<script>
-export default {
-  props: {
-    shrink: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+defineProps({
+  shrink: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['expand'],
-};
+});
+
+defineEmits(['expand']);
 </script>
 
 <template>
-  <div class="read-more">
+  <div>
     <div
       :class="{
-        'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark':
-          shrink,
+        'max-h-[100px] overflow-hidden relative': shrink,
       }"
     >
       <slot />
-      <woot-button
-        v-if="shrink"
-        size="tiny"
-        variant="smooth"
-        color-scheme="primary"
-        class="read-more-button"
-        @click.prevent="$emit('expand')"
+      <div
+        class="bg-n-slate-3 rounded-md dark:bg-n-solid-3 absolute left-0 right-0 z-20 mx-auto mt-0 max-w-max bottom-2 backdrop-blur[100px]"
       >
-        {{ $t('SEARCH.READ_MORE') }}
-      </woot-button>
+        <woot-button
+          v-if="shrink"
+          size="tiny"
+          variant="smooth"
+          color-scheme="primary"
+          @click.prevent="$emit('expand')"
+        >
+          {{ $t('SEARCH.READ_MORE') }}
+        </woot-button>
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-@tailwind components;
-@layer components {
-  .shrink-gradient-light {
-    background: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1) 100%
-    );
-  }
-
-  .shrink-gradient-dark {
-    background: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgb(21, 23, 24) 100%
-    );
-  }
-}
-.shrink-container {
-  @apply max-h-[100px] overflow-hidden relative;
-}
-.shrink-container::after {
-}
-.read-more-button {
-  @apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
-}
-</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index f31f26b75..723e81ea3 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -50,14 +50,28 @@ export default {
 </script>
 
 <template>
-  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
-    <div class="icon-container">
-      <fluent-icon icon="search" class="icon" aria-hidden="true" />
+  <div
+    class="input-container rounded-xl transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-center py-2 px-4 h-14 gap-2 border border-solid"
+    :class="{
+      'border-n-brand': isInputFocused,
+      'border-n-weak': !isInputFocused,
+    }"
+  >
+    <div class="flex items-center">
+      <fluent-icon
+        icon="search"
+        class="icon"
+        aria-hidden="true"
+        :class="{
+          'text-n-blue-text': isInputFocused,
+          'text-n-slate-10': !isInputFocused,
+        }"
+      />
     </div>
     <input
       ref="searchInput"
       type="search"
-      class="dark:bg-slate-900"
+      class="w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none"
       :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
       :value="searchQuery"
       @focus="onFocus"
@@ -68,37 +82,7 @@ export default {
       :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
       :show-close="false"
       small
-      class="helper-label"
+      class="!m-0 whitespace-nowrap !bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong"
     />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.input-container {
-  transition: border-bottom 0.2s ease-in-out;
-  @apply relative flex items-center py-2 px-4 h-14 gap-2 rounded-sm border border-solid border-slate-100 dark:border-slate-800;
-
-  input[type='search'] {
-    @apply w-full m-0 shadow-none border-transparent active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none;
-  }
-
-  &.is-focused {
-    @apply border-woot-100 dark:border-woot-600;
-
-    .icon {
-      color: var(--w-400);
-      @apply text-woot-400 dark:text-woot-500;
-    }
-  }
-}
-.icon-container {
-  @apply flex items-center;
-  .icon {
-    @apply text-slate-400;
-  }
-}
-
-.helper-label {
-  @apply m-0 whitespace-nowrap;
-}
-</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
index 9c38bca85..4ee5d29eb 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -1,69 +1,65 @@
-<script>
+<script setup>
 import { frontendURL } from 'dashboard/helper/URLHelper';
-export default {
-  props: {
-    id: {
-      type: [String, Number],
-      default: 0,
-    },
-    email: {
-      type: String,
-      default: '',
-    },
-    phone: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      default: '',
-    },
-    thumbnail: {
-      type: String,
-      default: '',
-    },
-    accountId: {
-      type: [String, Number],
-      default: 0,
-    },
+import { computed } from 'vue';
+
+const props = defineProps({
+  id: {
+    type: [String, Number],
+    default: 0,
   },
-  computed: {
-    navigateTo() {
-      return frontendURL(`accounts/${this.accountId}/contacts/${this.id}`);
-    },
+  email: {
+    type: String,
+    default: '',
   },
-};
+  phone: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  thumbnail: {
+    type: String,
+    default: '',
+  },
+  accountId: {
+    type: [String, Number],
+    default: 0,
+  },
+});
+
+const navigateTo = computed(() => {
+  return frontendURL(`accounts/${props.accountId}/contacts/${props.id}`);
+});
 </script>
 
 <template>
-  <router-link :to="navigateTo" class="contact-item">
+  <router-link
+    :to="navigateTo"
+    class="flex items-center p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
+  >
     <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
     <div class="ml-2 rtl:mr-2 rtl:ml-0">
-      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
+      <h5 class="text-sm name text-n-slate-12 dark:text-n-slate-12">
         {{ name }}
       </h5>
       <p
-        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
+        class="flex items-center gap-1 m-0 text-sm text-slate-600 dark:text-slate-200"
       >
-        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
+        <span v-if="email" class="email text-n-slate-12 dark:text-n-slate-12">{{
           email
         }}</span>
-        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
+        <span
+          v-if="phone"
+          class="separator text-n-slate-10 dark:text-n-slate-10"
+        >
           •
         </span>
-        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
+        <span v-if="phone" class="phone text-n-slate-12 dark:text-n-slate-12">
           {{ phone }}
         </span>
       </p>
     </div>
   </router-link>
 </template>
-
-<style scoped lang="scss">
-.contact-item {
-  @apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
-}
-.contact-details {
-  @apply ml-2 rtl:mr-2 rtl:ml-0;
-}
-</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
index 872ef1b27..6294ca701 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
@@ -43,7 +43,7 @@ export default {
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul v-if="contacts.length" class="search-list">
+    <ul v-if="contacts.length" class="space-y-1.5">
       <li v-for="contact in contacts" :key="contact.id">
         <SearchResultContactItem
           :id="contact.id"
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index cd4ead3ad..0c5e23728 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -56,37 +56,62 @@ export default {
 </script>
 
 <template>
-  <router-link :to="navigateTo" class="conversation-item">
-    <div class="icon-wrap">
+  <router-link
+    :to="navigateTo"
+    class="flex p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
+  >
+    <div
+      class="flex items-center justify-center flex-shrink-0 w-6 h-6 rounded bg-n-brand/10 dark:bg-n-brand/40 text-n-blue-text dark:text-n-blue-text"
+    >
       <fluent-icon icon="chat-multiple" :size="14" />
     </div>
-    <div class="conversation-details">
-      <div class="meta-wrap">
+    <div class="flex-grow min-w-0 ml-2">
+      <div class="flex items-center justify-between mb-1">
         <div class="flex">
           <woot-label
-            class="conversation-id"
+            class="!bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong m-0"
             :title="`#${id}`"
             :show-close="false"
             small
           />
-          <div class="inbox-name-wrap">
-            <InboxName :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
+          <div
+            class="flex items-center justify-center h-5 ml-1 rounded bg-n-slate-3 dark:bg-n-solid-3 w-fit rtl:ml-0 rtl:mr-1"
+          >
+            <InboxName
+              :inbox="inbox"
+              class="mr-2 rtl:mr-0 rtl:ml-2 bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-11 dark:text-n-slate-11"
+            />
           </div>
         </div>
         <div>
-          <span class="created-at">{{ createdAtTime }}</span>
+          <span
+            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
+          >
+            {{ createdAtTime }}
+          </span>
         </div>
       </div>
-      <div class="user-details">
-        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
-          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
+      <div class="flex gap-2">
+        <h5
+          v-if="name"
+          class="m-0 text-sm text-n-slate-12 dark:text-n-slate-12"
+        >
+          <span
+            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
+          >
+            {{ $t('SEARCH.FROM') }}:
+          </span>
           {{ name }}
         </h5>
         <h5
           v-if="email"
-          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+          class="m-0 overflow-hidden text-sm text-n-slate-12 dark:text-n-slate-12 whitespace-nowrap text-ellipsis"
         >
-          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
+          <span
+            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
+          >
+            {{ $t('SEARCH.EMAIL') }}:
+          </span>
           {{ email }}
         </h5>
       </div>
@@ -94,40 +119,3 @@ export default {
     </div>
   </router-link>
 </template>
-
-<style scoped lang="scss">
-.conversation-item {
-  @apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;
-}
-
-.meta-wrap {
-  @apply flex items-center justify-between mb-1;
-}
-.icon-wrap {
-  @apply w-6 h-6 flex-shrink-0  bg-woot-75 dark:bg-woot-600/50 flex items-center justify-center rounded text-woot-600 dark:text-woot-500;
-}
-
-.inbox-name-wrap {
-  @apply bg-slate-25 dark:bg-slate-800 h-5 flex justify-center items-center rounded w-fit ml-1 rtl:ml-0 rtl:mr-1;
-}
-.conversation-details {
-  @apply ml-2 flex-grow min-w-0;
-}
-
-.name {
-  @apply flex-shrink-0;
-}
-.conversation-id,
-.name,
-.email {
-  @apply m-0;
-}
-.created-at,
-.pre-text {
-  @apply text-slate-600 dark:text-slate-100 text-xs font-normal;
-}
-
-.user-details {
-  @apply flex gap-2;
-}
-</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
index c7f369e44..82ff0b51f 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
@@ -42,7 +42,7 @@ export default {
     :show-title="showTitle || isFetching"
     :is-fetching="isFetching"
   >
-    <ul v-if="conversations.length" class="search-list">
+    <ul v-if="conversations.length" class="space-y-1.5">
       <li v-for="conversation in conversations" :key="conversation.id">
         <SearchResultConversationItem
           :id="conversation.id"
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
index 92e813e99..eea73023c 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
@@ -51,7 +51,7 @@ export default {
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul v-if="messages.length" class="search-list">
+    <ul v-if="messages.length" class="space-y-1.5">
       <li v-for="message in messages" :key="message.id">
         <SearchResultConversationItem
           :id="message.conversation_id"
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
index 8a417db90..47999fbdd 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -1,72 +1,50 @@
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    empty: {
-      type: Boolean,
-      default: false,
-    },
-    query: {
-      type: String,
-      default: '',
-    },
-    showTitle: {
-      type: Boolean,
-      default: true,
-    },
-    isFetching: {
-      type: Boolean,
-      default: true,
-    },
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
   },
-  computed: {
-    titleCase() {
-      return this.title.toLowerCase();
-    },
+  empty: {
+    type: Boolean,
+    default: false,
   },
-};
+  query: {
+    type: String,
+    default: '',
+  },
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+  isFetching: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const titleCase = computed(() => props.title.toLowerCase());
 </script>
 
 <template>
-  <section class="result-section">
-    <div v-if="showTitle" class="header">
-      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
+  <section class="mx-0 my-2">
+    <div v-if="showTitle" class="sticky top-0 p-2 z-50 mb-0.5 bg-n-background">
+      <h3 class="text-sm text-n-slate-12">{{ title }}</h3>
     </div>
     <woot-loading-state
       v-if="isFetching"
       :message="$t('SEARCH.SEARCHING_DATA')"
     />
     <slot v-else />
-    <div v-if="empty && !isFetching" class="empty">
-      <fluent-icon icon="info" size="16px" class="icon" />
-      <p class="empty-state__text">
+    <div
+      v-if="empty && !isFetching"
+      class="flex items-center justify-center px-4 py-6 m-2 rounded-md bg-n-slate-2 dark:bg-n-solid-3"
+    >
+      <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
+      <p class="mx-2 my-0 text-center text-n-slate-11">
         {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
       </p>
     </div>
   </section>
 </template>
-
-<style scoped lang="scss">
-.result-section {
-  @apply my-2 mx-0;
-}
-.search-list {
-  @apply m-0 py-4 px-0 list-none;
-}
-.header {
-  @apply sticky top-0 p-2 z-50 bg-white dark:bg-slate-900 mb-0.5;
-}
-
-.empty {
-  @apply flex items-center justify-center py-6 px-4 m-2 bg-slate-25 dark:bg-slate-800 rounded-md;
-  .icon {
-    @apply text-slate-500 dark:text-slate-300;
-  }
-  .empty-state__text {
-    @apply text-slate-500 dark:text-slate-300 text-center my-0 mx-2;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index 9c65e10cd..aa9a583ee 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -4,6 +4,7 @@ import SearchTabs from './SearchTabs.vue';
 import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
 import { useTrack } from 'dashboard/composables';
 import Policy from 'dashboard/components/policy.vue';
 import {
@@ -27,6 +28,7 @@ export default {
     SearchResultConversationsList,
     SearchResultMessagesList,
     Policy,
+    ButtonV4,
   },
   data() {
     return {
@@ -201,19 +203,20 @@ export default {
 </script>
 
 <template>
-  <div class="search-page">
-    <div class="page-header">
-      <woot-button
-        icon="chevron-left"
-        variant="smooth"
-        size="small "
-        class="back-button"
+  <div class="flex flex-col w-full bg-n-background">
+    <div class="flex p-4">
+      <ButtonV4
+        :label="$t('GENERAL_SETTINGS.BACK')"
+        icon="i-lucide-chevron-left"
+        faded
+        primary
+        sm
         @click="onBack"
-      >
-        {{ $t('GENERAL_SETTINGS.BACK') }}
-      </woot-button>
+      />
     </div>
-    <section class="search-root">
+    <section
+      class="flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-n-background"
+    >
       <header>
         <SearchHeader @search="onSearch" />
         <SearchTabs
@@ -223,7 +226,7 @@ export default {
           @tab-change="tab => (selectedTab = tab)"
         />
       </header>
-      <div class="search-results">
+      <div class="flex-grow h-full px-2 py-0 overflow-y-auto">
         <div v-if="showResultsSection">
           <Policy :permissions="[...rolePermissions, contactPermissions]">
             <SearchResultContactsList
@@ -259,17 +262,23 @@ export default {
             />
           </Policy>
         </div>
-        <div v-else-if="showEmptySearchResults" class="empty">
-          <fluent-icon icon="info" size="16px" class="icon" />
-          <p class="empty-state__text">
+        <div
+          v-else-if="showEmptySearchResults"
+          class="flex flex-col items-center justify-center px-4 py-6 mt-8 rounded-md"
+        >
+          <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
+          <p class="m-2 text-center text-n-slate-11">
             {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
           </p>
         </div>
-        <div v-else class="text-center empty">
+        <div
+          v-else
+          class="flex flex-col items-center justify-center px-4 py-6 mt-8 text-center rounded-md"
+        >
           <p class="text-center margin-bottom-0">
-            <fluent-icon icon="search" size="24px" class="icon" />
+            <fluent-icon icon="search" size="24px" class="text-n-slate-11" />
           </p>
-          <p class="empty-state__text">
+          <p class="m-2 text-center text-n-slate-11">
             {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
           </p>
         </div>
@@ -277,29 +286,3 @@ export default {
     </section>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.search-page {
-  @apply flex flex-col w-full bg-white dark:bg-slate-900;
-}
-.page-header {
-  @apply flex p-4;
-}
-.search-root {
-  @apply flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-white dark:bg-slate-900;
-
-  .search-results {
-    @apply flex-grow h-full overflow-y-auto py-0 px-2;
-  }
-}
-
-.empty {
-  @apply flex flex-col items-center justify-center py-6 px-4 rounded-md mt-8;
-  .icon {
-    @apply text-slate-500 dark:text-slate-400;
-  }
-  .empty-state__text {
-    @apply text-center text-slate-500 dark:text-slate-400 m-2;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 8739b4f26..8782b323a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -98,18 +98,19 @@ onMounted(() => {
       :channel-type="channelType"
       @toggle-panel="onPanelToggle"
     />
-    <div class="list-group">
+    <div class="list-group pb-8">
       <Draggable
         :list="conversationSidebarItems"
         animation="200"
         ghost-class="ghost"
         handle=".drag-handle"
         item-key="name"
+        class="flex flex-col gap-3"
         @start="dragging = true"
         @end="onDragEnd"
       >
         <template #item="{ element }">
-          <div :key="element.name" class="bg-white dark:bg-gray-800">
+          <div :key="element.name" class="px-2">
             <div
               v-if="element.name === 'conversation_actions'"
               class="conversation--actions"
@@ -227,10 +228,12 @@ onMounted(() => {
   .contact--profile {
     @apply pb-3 border-b border-solid border-slate-75 dark:border-slate-700;
   }
+
   .conversation--actions .multiselect-wrap--small {
     .multiselect {
       @apply box-border pl-6;
     }
+
     .multiselect__element {
       span {
         @apply w-full;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
index 5b0a33c3a..38154dc98 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
@@ -56,9 +56,9 @@ export default {
 
 <template>
   <div
-    class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
+    class="macro-preview absolute border border-n-weak max-h-[22.5rem] z-50 w-64 rounded-md bg-n-alpha-3 backdrop-blur-[100px] shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
   >
-    <h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
+    <h6 class="mb-4 text-sm text-n-slate-12">
       {{ macro.name }}
     </h6>
     <div
@@ -71,12 +71,12 @@ export default {
         class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
       />
       <div
-        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 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-slate-600"
       />
-      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
+      <p class="mb-1 text-xs text-n-slate-11">
         {{ action.actionName }}
       </p>
-      <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
+      <p class="text-n-slate-12 text-sm">{{ action.actionValue }}</p>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index f42672ddd..0de55a92e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -10,6 +10,8 @@ import EditContact from './EditContact.vue';
 import NewConversation from './NewConversation.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 import {
   isAConversationRoute,
   isAInboxViewRoute,
@@ -19,6 +21,7 @@ import { emitter } from 'shared/helpers/mitt';
 
 export default {
   components: {
+    NextButton,
     ContactInfoRow,
     EditContact,
     Thumbnail,
@@ -35,16 +38,8 @@ export default {
       type: Boolean,
       default: true,
     },
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-    closeIconName: {
-      type: String,
-      default: 'chevron-right',
-    },
   },
-  emits: ['togglePanel', 'panelClose'],
+  emits: ['panelClose'],
   setup() {
     const { isAdmin } = useAdmin();
     return {
@@ -102,9 +97,6 @@ export default {
     toggleEditModal() {
       this.showEditModal = !this.showEditModal;
     },
-    onPanelToggle() {
-      this.$emit('togglePanel');
-    },
     toggleConversationModal() {
       this.showConversationModal = !this.showConversationModal;
       emitter.emit(
@@ -180,49 +172,36 @@ export default {
         <Thumbnail
           v-if="showAvatar"
           :src="contact.thumbnail"
-          size="56px"
+          size="48px"
           :username="contact.name"
           :status="contact.availability_status"
         />
-        <woot-button
-          v-if="showCloseButton"
-          :icon="closeIconName"
-          class="clear secondary rtl:rotate-180"
-          @click="onPanelToggle"
-        />
       </div>
 
       <div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
-        <div v-if="showAvatar" class="flex items-start w-full min-w-0 gap-2">
+        <div v-if="showAvatar" class="flex items-center w-full min-w-0 gap-3">
           <h3
-            class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-slate-800 dark:text-slate-100"
+            class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-n-slate-12"
           >
             {{ contact.name }}
           </h3>
-          <div class="flex flex-row items-center gap-1">
-            <fluent-icon
+          <div class="flex flex-row items-center gap-2">
+            <span
               v-if="contact.created_at"
               v-tooltip.left="
                 `${$t('CONTACT_PANEL.CREATED_AT_LABEL')} ${dynamicTime(
                   contact.created_at
                 )}`
               "
-              icon="info"
-              size="14"
-              class="mt-0.5"
+              class="i-lucide-info text-sm text-n-slate-10"
             />
             <a
               :href="contactProfileLink"
-              class="text-base"
               target="_blank"
               rel="noopener nofollow noreferrer"
+              class="leading-3"
             >
-              <woot-button
-                size="tiny"
-                icon="open"
-                variant="clear"
-                color-scheme="secondary"
-              />
+              <span class="i-lucide-external-link text-sm text-n-slate-10" />
             </a>
           </div>
         </div>
@@ -271,39 +250,39 @@ export default {
         </div>
       </div>
       <div class="flex items-center w-full mt-0.5 gap-2">
-        <woot-button
-          v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          :title="$t('CONTACT_PANEL.NEW_MESSAGE')"
-          icon="chat"
-          size="small"
+        <NextButton
+          v-tooltip.top-end="$t('CONTACT_PANEL.NEW_MESSAGE')"
+          icon="i-ph-chat-circle-dots"
+          slate
+          faded
+          sm
           @click="toggleConversationModal"
         />
-        <woot-button
-          v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          :title="$t('EDIT_CONTACT.BUTTON_LABEL')"
-          icon="edit"
-          variant="smooth"
-          size="small"
+        <NextButton
+          v-tooltip.top-end="$t('EDIT_CONTACT.BUTTON_LABEL')"
+          icon="i-ph-pencil-simple"
+          slate
+          faded
+          sm
           @click="toggleEditModal"
         />
-        <woot-button
-          v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          :title="$t('CONTACT_PANEL.MERGE_CONTACT')"
-          icon="merge"
-          variant="smooth"
-          size="small"
-          color-scheme="secondary"
+        <NextButton
+          v-tooltip.top-end="$t('CONTACT_PANEL.MERGE_CONTACT')"
+          icon="i-ph-arrows-merge"
+          slate
+          faded
+          sm
           :disabled="uiFlags.isMerging"
           @click="openMergeModal"
         />
-        <woot-button
+        <NextButton
           v-if="isAdmin"
-          v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          :title="$t('DELETE_CONTACT.BUTTON_LABEL')"
-          icon="delete"
-          variant="smooth"
-          size="small"
-          color-scheme="alert"
+          v-tooltip.top-end="$t('DELETE_CONTACT.BUTTON_LABEL')"
+          icon="i-ph-trash"
+          slate
+          faded
+          sm
+          ruby
           :disabled="uiFlags.isDeleting"
           @click="toggleDeleteModal"
         />
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 80383b840..69cfe5b82 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -44,7 +44,7 @@ export default {
     <a
       v-if="href"
       :href="href"
-      class="flex items-center gap-2 text-slate-800 dark:text-slate-100 hover:underline"
+      class="flex items-center gap-2 text-n-slate-11 hover:underline"
     >
       <EmojiOrIcon
         :icon="icon"
@@ -59,9 +59,9 @@ export default {
       >
         {{ value }}
       </span>
-      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
-        $t('CONTACT_PANEL.NOT_AVAILABLE')
-      }}</span>
+      <span v-else class="text-sm text-n-slate-11">
+        {{ $t('CONTACT_PANEL.NOT_AVAILABLE') }}
+      </span>
 
       <woot-button
         v-if="showCopy"
@@ -75,10 +75,7 @@ export default {
       />
     </a>
 
-    <div
-      v-else
-      class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
-    >
+    <div v-else class="flex items-center gap-2 text-n-slate-11">
       <EmojiOrIcon
         :icon="icon"
         :emoji="emoji"
@@ -90,9 +87,9 @@ export default {
         v-dompurify-html="value"
         class="overflow-hidden text-sm whitespace-nowrap text-ellipsis"
       />
-      <span v-else class="text-sm text-slate-300 dark:text-slate-600">{{
-        $t('CONTACT_PANEL.NOT_AVAILABLE')
-      }}</span>
+      <span v-else class="text-sm text-n-slate-11">
+        {{ $t('CONTACT_PANEL.NOT_AVAILABLE') }}
+      </span>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 63f6ce229..74a6e9ec4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -166,12 +166,12 @@ onMounted(() => {
 });
 
 const evenClass = [
-  '[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
-  'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
+  '[&>*:nth-child(odd)]:!bg-n-background [&>*:nth-child(even)]:!bg-n-slate-2',
+  'dark:[&>*:nth-child(odd)]:!bg-n-background dark:[&>*:nth-child(even)]:!bg-n-solid-1',
 ];
 const oddClass = [
-  '[&>*:nth-child(odd)]:!bg-slate-25 [&>*:nth-child(even)]:!bg-white',
-  'dark:[&>*:nth-child(odd)]:!bg-slate-800/50 dark:[&>*:nth-child(even)]:!bg-slate-900',
+  '[&>*:nth-child(odd)]:!bg-n-slate-2 [&>*:nth-child(even)]:!bg-n-background',
+  'dark:[&>*:nth-child(odd)]:!bg-n-solid-1 dark:[&>*:nth-child(even)]:!bg-n-background',
 ];
 
 const wrapperClass = computed(() => {
@@ -195,7 +195,7 @@ const wrapperClass = computed(() => {
       :attribute-regex="attribute.regex_pattern"
       :regex-cue="attribute.regex_cue"
       :contact-id="contactId"
-      class="border-b border-solid border-slate-50 dark:border-slate-700/50"
+      class="border-b border-solid border-n-weak/50 dark:border-n-weak/90"
       @update="onUpdate"
       @delete="onDelete"
       @copy="onCopy"
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 e237a4a48..7ee206c02 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -68,7 +68,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-slate-700 !bg-slate-25 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 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-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"
         :value="searchQuery"
         @input="onInput"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index f65b2fe1d..660147cf3 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -206,7 +206,7 @@ export default {
 <template>
   <section class="flex w-full h-full bg-n-solid-1">
     <div
-      class="flex flex-col h-full w-full lg:min-w-[400px] lg:max-w-[400px] ltr:border-r rtl:border-l border-slate-50 dark:border-slate-800/50"
+      class="flex flex-col h-full w-full lg:min-w-[400px] lg:max-w-[400px] ltr:border-r rtl:border-l border-n-weak"
       :class="!currentNotificationId ? 'flex' : 'hidden xl:flex'"
     >
       <InboxListHeader
@@ -216,7 +216,7 @@ export default {
       />
       <div
         ref="notificationList"
-        class="flex flex-col gap-px w-full h-[calc(100%-56px)] pb-3 overflow-x-hidden px-3 overflow-y-auto divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*.active]:!border-y-transparent [&>*:hover+*]:!border-t-transparent [&>*.active+*]:!border-t-transparent"
+        class="flex flex-col gap-px w-full h-[calc(100%-56px)] pb-3 overflow-x-hidden px-3 overflow-y-auto divide-y divide-n-weak [&>*:hover]:!border-y-transparent [&>*.active]:!border-y-transparent [&>*:hover+*]:!border-t-transparent [&>*.active+*]:!border-t-transparent"
       >
         <InboxCard
           v-for="notificationItem in notificationsV4"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
index 246559bbb..43ae0dc2e 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -109,7 +109,7 @@ export default {
 
 <template>
   <div
-    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-slate-50 dark:border-slate-800/50"
+    class="flex items-center justify-between w-full gap-2 py-2 border-b ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r border-n-weak"
   >
     <div class="flex items-center gap-4">
       <BackButton
@@ -131,7 +131,7 @@ export default {
         icon="i-lucide-bell-minus"
         slate
         xs
-        outline
+        faded
         class="[&>.truncate]:hidden md:[&>.truncate]:block"
         @click="openSnoozeNotificationModal"
       />
@@ -140,7 +140,7 @@ export default {
         icon="i-lucide-trash-2"
         slate
         xs
-        outline
+        faded
         class="[&>.truncate]:hidden md:[&>.truncate]:block"
         @click="deleteNotification"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 8e2cd92c2..aa981eba5 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -79,13 +79,9 @@ export default {
 </script>
 
 <template>
-  <div
-    class="flex items-center justify-between w-full gap-1 pt-4 pb-2 h-14 ltr:pl-6 rtl:pl-3 rtl:pr-6 ltr:pr-3"
-  >
-    <div class="flex items-center gap-1.5 min-w-0 flex-1">
-      <h1
-        class="min-w-0 text-xl font-medium truncate text-slate-900 dark:text-slate-25"
-      >
+  <div class="flex items-center justify-between w-full gap-1 h-14 px-4 mb-2">
+    <div class="flex items-center gap-2 min-w-0 flex-1">
+      <h1 class="min-w-0 text-lg font-medium truncate text-n-slate-12">
         {{ $t('INBOX.LIST.TITLE') }}
       </h1>
       <div class="relative">
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
index 793f78a51..7de846424 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue
@@ -46,7 +46,7 @@ export default {
         icon="i-lucide-chevron-up"
         xs
         slate
-        outline
+        faded
         :disabled="isUpDisabled"
         @click="handleUpClick"
       />
@@ -54,7 +54,7 @@ export default {
         icon="i-lucide-chevron-down"
         xs
         slate
-        outline
+        faded
         :disabled="isDownDisabled"
         @click="handleDownClick"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/routes.js b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
index b11c09ea6..28ffa2ebf 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -20,7 +20,7 @@ export const routes = [
         component: InboxEmptyStateView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          featureFlag: FEATURE_FLAGS.INBOX_VIEW,
+          featureFlag: FEATURE_FLAGS.CHATWOOT_V4,
         },
       },
       {
@@ -29,7 +29,7 @@ export const routes = [
         component: InboxDetailView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          featureFlag: FEATURE_FLAGS.INBOX_VIEW,
+          featureFlag: FEATURE_FLAGS.CHATWOOT_V4,
         },
       },
     ],
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index dfc79f820..2a7ac0300 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -54,7 +54,7 @@ export default {
 
 <template>
   <div
-    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
+    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-n-background border-b border-n-weak"
   >
     <h1
       class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
index 19f696d60..b0df877b1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <div
-    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-white dark:bg-slate-900 font-inter"
+    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-background font-inter"
   >
     <div class="flex items-start w-full max-w-6xl mx-auto">
       <router-view v-slot="{ Component }">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index eb59734ff..a3c460f3f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -23,7 +23,7 @@ const showNewButton = computed(
 
 <template>
   <div
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
+    class="flex flex-1 h-full justify-between flex-col m-0 bg-n-background overflow-auto"
   >
     <SettingsHeader
       button-route="new"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 739a0b719..a4e3a5a19 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -161,9 +161,7 @@ const confirmDeletion = () => {
     </template>
     <template #body>
       <table class="divide-y divide-slate-75 dark:divide-slate-700">
-        <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-        >
+        <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">
               <div class="flex flex-row items-center gap-4">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index b91824ad8..12d82e523 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -93,7 +93,7 @@ const tableHeaders = computed(() => {
         <th
           v-for="tableHeader in tableHeaders"
           :key="tableHeader"
-          class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+          class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11"
         >
           {{ tableHeader }}
         </th>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index bf385084e..cbba4de05 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -100,14 +100,12 @@ const tableHeaders = computed(() => {
             <th
               v-for="thHeader in tableHeaders"
               :key="thHeader"
-              class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+              class="py-4 pr-4 text-left font-semibold text-n-slate-11"
             >
               {{ thHeader }}
             </th>
           </thead>
-          <tbody
-            class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-          >
+          <tbody class="divide-y divide-n-weak text-n-slate-11">
             <tr v-for="auditLogItem in records" :key="auditLogItem.id">
               <td class="py-4 pr-4 break-all whitespace-nowrap">
                 {{ generateLogText(auditLogItem) }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 476ca04c3..f38c528b0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -201,14 +201,12 @@ const tableHeaders = computed(() => {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+            class="py-4 pr-4 text-left font-semibold text-n-slate-11"
           >
             {{ thHeader }}
           </th>
         </thead>
-        <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-        >
+        <tbody class="divide-y divide-n-weak text-n-slate-11">
           <AutomationRuleRow
             v-for="automation in records"
             :key="automation.id"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 7b6da8f02..4ac8d16c3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -153,7 +153,7 @@ const tableHeaders = computed(() => {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300 last:text-right"
+            class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right"
           >
             <span v-if="thHeader !== tableHeaders[0]">
               {{ thHeader }}
@@ -173,9 +173,7 @@ const tableHeaders = computed(() => {
             </button>
           </th>
         </thead>
-        <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-        >
+        <tbody class="divide-y divide-n-weak text-n-slate-11">
           <tr
             v-for="(cannedItem, index) in records"
             :key="cannedItem.short_code"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index 5a2110a8e..38a145fc3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -2,6 +2,9 @@
 import CustomBrandPolicyWrapper from 'dashboard/components/CustomBrandPolicyWrapper.vue';
 import { getHelpUrlForFeature } from '../../../../helper/featureHelper';
 import BackButton from '../../../../components/widgets/BackButton.vue';
+import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
 const props = defineProps({
   title: {
     type: String,
@@ -72,7 +75,7 @@ const openInNewTab = url => {
         <slot name="actions" />
       </div>
     </div>
-    <div class="flex flex-col gap-3 text-slate-600 dark:text-slate-300 w-full">
+    <div class="flex flex-col w-full gap-3 text-slate-600 dark:text-slate-300">
       <p
         class="mb-0 text-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
       >
@@ -84,32 +87,30 @@ const openInNewTab = url => {
           :href="helpURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium hover:underline"
+          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-brand dark:text-n-brand hover:underline"
         >
           {{ linkText }}
-          <fluent-icon
-            size="16"
-            icon="chevron-right"
-            type="outline"
-            class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+          <Icon
+            icon="i-lucide-chevron-right"
+            class="flex-shrink-0 text-n-blue-text size-4"
           />
         </a>
       </CustomBrandPolicyWrapper>
     </div>
     <div
-      class="flex items-start justify-start w-full gap-3 sm:hidden flex-wrap"
+      class="flex flex-wrap items-start justify-start w-full gap-3 sm:hidden"
     >
       <slot name="actions" />
       <CustomBrandPolicyWrapper :show-on-custom-branded-instance="false">
-        <woot-button
+        <ButtonV4
           v-if="helpURL && linkText"
-          color-scheme="secondary"
-          icon="arrow-outwards"
-          class="flex-row-reverse rounded-md min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
+          link
+          primary
+          icon="i-lucide-chevron-right"
+          trailing-icon
+          :label="linkText"
           @click="openInNewTab(helpURL)"
-        >
-          {{ linkText }}
-        </woot-button>
+        />
       </CustomBrandPolicyWrapper>
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
index 95e0b770c..f8cbf1cf8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
@@ -25,9 +25,7 @@ const getFormattedPermissions = role => {
 </script>
 
 <template>
-  <tbody
-    class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-  >
+  <tbody class="divide-y divide-n-weak text-n-slate-11">
     <tr v-for="(customRole, index) in roles" :key="index">
       <td
         class="max-w-xs py-4 pr-4 font-medium truncate align-baseline"
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 ea76dc3bf..c1c02de5e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -119,7 +119,7 @@ export default {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-slate-700 dark:text-slate-300 last:text-right last:pr-4"
+            class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right last:pr-4"
           >
             {{ thHeader }}
           </th>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 15a529641..80f8b5e2c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -90,14 +90,12 @@ const tableHeaders = computed(() => {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-slate-700 dark:text-slate-300"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11"
           >
             {{ thHeader }}
           </th>
         </thead>
-        <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-        >
+        <tbody class="divide-y divide-n-weak text-n-slate-11">
           <MacrosTableRow
             v-for="(macro, index) in records"
             :key="index"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index 86fd27ca3..bc8353b49 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -30,7 +30,7 @@ export default {
 
 <template>
   <div
-    class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-slate-50 dark:border-slate-800/50"
+    class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-n-weak"
   >
     <div>
       <woot-input
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index de6ade331..37e2b41ff 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -60,7 +60,7 @@ const hasValue = computed(() => {
       <woot-button
         variant="hollow"
         color-scheme="secondary"
-        class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
+        class="w-full px-2 border border-solid !border-n-weak dark:!border-n-weak hover:!border-n-strong dark:hover:!border-n-strong"
         @click="
           () => toggleDropdown() // ensure that the event is not passed to the button
         "
@@ -73,25 +73,22 @@ const hasValue = computed(() => {
             :status="selectedItem.availability_status"
             :username="selectedItem.name"
           />
-          <div class="flex justify-between w-full min-w-0 items-center">
-            <h4
-              v-if="!hasValue"
-              class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
-            >
+          <div class="flex items-center justify-between w-full min-w-0">
+            <h4 v-if="!hasValue" class="text-sm text-ellipsis text-n-slate-12">
               {{ multiselectorPlaceholder }}
             </h4>
             <h4
               v-else
-              class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+              class="items-center overflow-hidden text-sm leading-tight whitespace-nowrap text-ellipsis text-n-slate-12"
               :title="selectedItem.name"
             >
               {{ selectedItem.name }}
             </h4>
             <i
               v-if="showSearchDropdown"
-              class="icon i-lucide-chevron-up text-slate-600 mr-1"
+              class="mr-1 icon i-lucide-chevron-up text-n-slate-10"
             />
-            <i v-else class="icon i-lucide-chevron-down text-slate-600 mr-1" />
+            <i v-else class="mr-1 icon i-lucide-chevron-down text-n-slate-10" />
           </div>
         </div>
       </woot-button>
@@ -99,9 +96,9 @@ const hasValue = computed(() => {
         :class="{ 'dropdown-pane--open': showSearchDropdown }"
         class="dropdown-pane"
       >
-        <div class="flex justify-between items-center mb-1">
+        <div class="flex items-center justify-between mb-1">
           <h4
-            class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
+            class="m-0 overflow-hidden text-sm text-n-slate-11 whitespace-nowrap text-ellipsis"
           >
             {{ multiselectorTitle }}
           </h4>
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index 8874a42a2..ef1d5d8b2 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -71,7 +71,7 @@ export default {
 
 <template>
   <div class="dropdown-wrap">
-    <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
+    <div class="flex-auto flex-grow-0 flex-shrink-0 mb-2 max-h-8">
       <input
         ref="searchbar"
         v-model="search"
@@ -81,7 +81,7 @@ export default {
         :placeholder="inputPlaceholder"
       />
     </div>
-    <div class="flex justify-start items-start flex-auto overflow-auto">
+    <div class="flex items-start justify-start flex-auto overflow-auto mt-2">
       <div class="w-full max-h-[10rem]">
         <WootDropdownMenu>
           <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
@@ -107,7 +107,7 @@ export default {
                   class="flex items-center justify-between w-full min-w-0 gap-2"
                 >
                   <span
-                    class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+                    class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
                     :title="option.name"
                   >
                     {{ option.name }}
@@ -120,7 +120,7 @@ export default {
         </WootDropdownMenu>
         <h4
           v-if="noResult"
-          class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
+          class="w-full justify-center items-center flex text-n-slate-10 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
         >
           {{ noSearchResult }}
         </h4>
@@ -142,15 +142,11 @@ export default {
   @apply justify-between w-full;
 
   &.active {
-    @apply bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-900 font-medium;
-  }
-
-  &:focus {
-    @apply bg-slate-25 dark:bg-slate-700;
+    @apply bg-n-slate-2 dark:bg-n-solid-3 border-n-weak/50 dark:border-n-weak font-medium;
   }
 
   &:hover {
-    @apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100;
+    @apply bg-n-slate-2 dark:bg-n-solid-3 text-slate-800 dark:text-slate-100;
   }
 }
 </style>
diff --git a/app/javascript/shared/mixins/keyboardEventListenerMixins.js b/app/javascript/shared/mixins/keyboardEventListenerMixins.js
index f8154d640..3cc1b49d9 100644
--- a/app/javascript/shared/mixins/keyboardEventListenerMixins.js
+++ b/app/javascript/shared/mixins/keyboardEventListenerMixins.js
@@ -24,7 +24,7 @@ export default {
   methods: {
     addEventHandler(keydownHandler) {
       const indexToAppend = taggedHandlers.push(keydownHandler) - 1;
-      const root = this.$el;
+      const root = this.getElementToBind();
       if (root && root.dataset) {
         // For the components with a top level v-if Vue renders it as an empty comment in the DOM
         // so we need to check if the root element has a dataset property to ensure it is a valid element
@@ -32,6 +32,9 @@ export default {
         root.dataset.keydownHandlerIndex = indexToAppend;
       }
     },
+    getElementToBind() {
+      return this.$el;
+    },
     getKeyboardEvents() {
       return null;
     },