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 912cbec4b..7ccfd15ea 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-n-brand px-2.5 text-n-slate-12 dark:text-n-slate-12 inline-flex h-10 mb-0 gap-2 font-medium;
+  @apply items-center bg-n-brand px-2.5 text-white inline-flex h-10 mb-0 gap-2 font-medium;
 
   .button__content {
     @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
@@ -43,7 +43,7 @@ button {
   }
 
   &:hover {
-    @apply bg-woot-600 dark:bg-woot-600;
+    @apply bg-n-brand/80 dark:bg-n-brand/80;
   }
 
   &:disabled,
@@ -137,7 +137,7 @@ button {
       @apply hover:bg-n-brand/20 dark:hover:bg-n-brand/30 border-n-brand dark:border-n-brand/60;
 
       &.secondary {
-        @apply border-n-strong text-n-slate-12 dark:text-n-slate-12;
+        @apply border-n-strong text-n-slate-12 dark:text-n-slate-12 hover:bg-n-slate-4 dark:hover:bg-n-solid-2;
       }
 
       &.success {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index b9999fac9..83b4d3acd 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/50 dark:border-n-weak/50;
 }
 
 .tabs {
@@ -34,7 +34,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-slate-3 dark:bg-n-solid-3 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;
   }
 
   &:first-child {
@@ -59,11 +59,11 @@
 
   &.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 dark: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 dark:text-n-blue-text dark:bg-opacity-40;
     }
   }
 }
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index e8a90cc83..8cc91f3df 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -35,13 +35,13 @@ const onToggle = () => {
 <template>
   <div class="-mt-px 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 justify-between w-full px-4 py-2 m-0 border border-l-0 border-r-0 border-solid rounded-none select-none bg-n-slate-3 dark:bg-n-solid-2 border-n-weak dark:border-n-weak cursor-grab drag-handle"
       @click.stop="onToggle"
     >
       <div class="flex justify-between mb-0.5">
         <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"
+          class="py-0 pl-0 pr-2 mb-0 text-sm text-slate-800 dark:text-slate-100"
         >
           {{ title }}
         </h5>
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 5138d5bb8..b8d93534d 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 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-n-weak/50 dark:border-n-weak/50"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index 01a337045..16b42c2c4 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -80,7 +80,7 @@ const toggleConversationLayout = () => {
       </h1>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        class="p-1 my-0.5 mx-1 rounded-md capitalize dark:bg-n-solid-3 hover:bg-n-slate-3 text-xxs text-n-slate-11"
+        class="p-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 dark:bg-n-solid-3 hover:bg-n-slate-3 text-xxs text-n-slate-11"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index c58243ba9..c0dd8c446 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -273,13 +273,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/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index 1cbd6a56a..9e8fa4c84 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -71,7 +71,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
+    class="flex flex-col justify-between w-16 h-full border-r bg-n-solid-2 dark:bg-n-solid-2 dark:border-n-weak border-n-weak/50 rtl:border-l rtl:border-r-0"
   >
     <div class="flex flex-col items-center">
       <Logo
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index c36b6f611..37787d1bd 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -241,7 +241,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
+    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm border-r bg-n-solid-2 dark:bg-n-solid-2 dark:border-n-weak/50 border-n-weak/50 rtl:border-r-0 rtl:border-l"
   >
     <AccountContext @toggle-accounts="toggleAccountModal" />
     <transition-group
diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index 2c7ad01c0..8c2292d8c 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -42,11 +42,11 @@ export default {
 @tailwind components;
 @layer components {
   .avatar-color {
-    background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
+    background-image: linear-gradient(to top, #2781f619 0%, #2781f619 100%);
   }
 
   .dark-avatar-color {
-    background-image: linear-gradient(to top, #135899 0%, #135899 100%);
+    background-image: linear-gradient(to top, #2781f6 0%, #2781f6 100%);
   }
 }
 .avatar-container {
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 58bfe3e13..8fe4f00e1 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -74,7 +74,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
+  <div class="flex justify-between bg-n-slate-2 dark:bg-n-slate-2">
     <div class="button-group">
       <woot-button
         variant="clear"
@@ -132,16 +132,16 @@ export default {
     }
   }
   .button--reply {
-    @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
+    @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-n-strong dark:border-n-strong;
     &:hover,
     &:focus {
-      @apply border-r border-slate-50 dark:border-slate-700;
+      @apply border-r border-n-strong dark:border-n-strong;
     }
   }
   .button--note {
     @apply border-l-0 rounded-none;
     &.is-active {
-      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-slate-50 dark:border-slate-700;
+      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-n-strong dark:border-n-strong;
     }
     &:hover,
     &:active {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 951fbebef..4223973fe 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -125,7 +125,7 @@ export default {
     </woot-tabs>
     <div
       v-show="!activeIndex"
-      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
+      class="flex h-full min-h-0 m-0 bg-n-slate-2 dark:bg-n-solid-2"
     >
       <MessagesView
         v-if="currentChat.id"
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
index 6cd447fab..374c60473 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
@@ -31,7 +31,7 @@ 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-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"
         >
           ⌘
         </Hotkey>
diff --git a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
index 87a1f73b6..fd366859e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
@@ -40,7 +40,7 @@ export default {
 <template>
   <select
     v-model="activeValue"
-    class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
+    class="w-32 h-6 py-0 pl-2 pr-6 mx-1 my-0 text-xs border border-solid bg-n-slate-3 dark:bg-n-solid-3 border-n-weak dark:border-n-strong text-n-slate-11"
     @change="onTabChange()"
   >
     <option v-for="value in items" :key="value" :value="value">
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index ba4d9393f..d7e9ecd41 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -579,7 +579,7 @@ export default {
     }
 
     .reply-box {
-      @apply border border-solid border-slate-75 dark:border-slate-600 max-w-[75rem] w-[70%];
+      @apply border border-solid border-n-strong dark:border-n-strong max-w-[75rem] w-[70%];
     }
 
     .reply-box .reply-box__top {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 3d490894a..019fc60b7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1244,7 +1244,7 @@ export default {
     box-shadow 0.35s cubic-bezier(0.37, 0, 0.63, 1),
     height 2s cubic-bezier(0.37, 0, 0.63, 1);
 
-  @apply relative border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
+  @apply relative border-t border-n-strong dark:border-n-strong bg-white dark:bg-slate-900;
 
   &.is-focused {
     box-shadow:
@@ -1270,7 +1270,7 @@ export default {
 }
 
 .reply-box__top {
-  @apply relative py-0 px-4 -mt-px border-t border-solid border-slate-50 dark:border-slate-700;
+  @apply relative py-0 px-4 -mt-px border-t border-solid border-n-strong dark:border-n-strong;
 
   textarea {
     @apply shadow-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
index fa024d5b5..c8113382a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -89,7 +89,7 @@ export default {
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
         </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+        <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.toEmailsVal.$model"
             type="text"
@@ -106,7 +106,7 @@ export default {
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
         </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+        <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.ccEmailsVal.$model"
             class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
@@ -134,7 +134,7 @@ export default {
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
         </label>
-        <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
+        <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.bccEmailsVal.$model"
             type="text"
@@ -159,7 +159,7 @@ export default {
   @apply text-sm text-red-500 dark:text-red-500;
 }
 .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 dark:border-n-weak my-1 flex items-center gap-2;
 
   .input-group-label {
     @apply border-transparent bg-transparent text-xs font-semibold pl-0;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index e998a85a1..7be4e9ec5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -93,7 +93,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
+    class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-n-weak/50 dark:border-n-weak/50 rtl:border-l-0 rtl:border-r contact--panel"
   >
     <ContactInfo
       :contact="contact"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
index 5b0a33c3a..07d37bfc8 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 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-slate-800 dark:text-slate-100">
       {{ macro.name }}
     </h6>
     <div
@@ -73,7 +73,7 @@ export default {
       <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"
       />
-      <p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
+      <p class="mb-1 text-xs text-slate-500 dark:text-slate-400">
         {{ action.actionName }}
       </p>
       <p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index ffc7155f5..7e5745e34 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -171,7 +171,7 @@ export default {
 </script>
 
 <template>
-  <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
+  <div class="relative items-center w-full p-4 bg-n-background">
     <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
       <div class="flex flex-row justify-between">
         <Thumbnail
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/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/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index 5a2110a8e..9875d43da 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -72,7 +72,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,7 +84,7 @@ 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
@@ -97,7 +97,7 @@ const openInNewTab = url => {
       </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">
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index de6ade331..d64c878cf 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,25 @@ const hasValue = computed(() => {
             :status="selectedItem.availability_status"
             :username="selectedItem.name"
           />
-          <div class="flex justify-between w-full min-w-0 items-center">
+          <div class="flex items-center justify-between w-full min-w-0">
             <h4
               v-if="!hasValue"
-              class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
+              class="text-sm text-ellipsis text-slate-800 dark:text-slate-100"
             >
               {{ 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-slate-800 dark:text-slate-100"
               :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-slate-600"
             />
-            <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-slate-600" />
           </div>
         </div>
       </woot-button>
@@ -99,9 +99,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-slate-800 dark:text-slate-100 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..73ca736b6 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">
       <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 }}
@@ -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>