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