diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss
index 36679fc60..4f5f4b843 100644
--- a/app/javascript/dashboard/assets/scss/_rtl.scss
+++ b/app/javascript/dashboard/assets/scss/_rtl.scss
@@ -81,28 +81,6 @@
         margin-left: var(--space-small);
       }
     }
-
-    // Conversation sidebar close button
-    .close-button--rtl {
-      transform: rotate(180deg);
-    }
-
-    // Resolve actions button
-    .resolve-actions {
-      .button-group .button:first-child {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: var(--border-radius-normal);
-        border-top-left-radius: 0;
-        border-top-right-radius: var(--border-radius-normal);
-      }
-
-      .button-group .button:last-child {
-        border-bottom-left-radius: var(--border-radius-normal);
-        border-bottom-right-radius: 0;
-        border-top-left-radius: var(--border-radius-normal);
-        border-top-right-radius: 0;
-      }
-    }
   }
 
   // Conversation list
@@ -177,71 +155,6 @@
     }
   }
 
-  //   Help center
-  .article-container .row--article-block {
-    td:last-child {
-      direction: initial;
-    }
-  }
-
-  .portal-popover__container .portal {
-    .actions-container {
-      margin-left: unset;
-      margin-right: var(--space-one);
-    }
-  }
-
-  .edit-article--container {
-    .header-right--wrap {
-      .button-group .button:first-child {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: var(--border-radius-normal);
-        border-top-left-radius: 0;
-        border-top-right-radius: var(--border-radius-normal);
-      }
-
-      .button-group .button:last-child {
-        border-bottom-left-radius: var(--border-radius-normal);
-        border-bottom-right-radius: 0;
-        border-top-left-radius: var(--border-radius-normal);
-        border-top-right-radius: 0;
-      }
-    }
-
-    .header-left--wrap {
-      .back-button {
-        direction: initial;
-      }
-    }
-
-    .article--buttons {
-      .dropdown-pane {
-        left: 0;
-        position: absolute;
-        right: unset;
-      }
-    }
-
-    .sidebar-button {
-      transform: rotate(180deg);
-    }
-  }
-
-  .article-settings--container {
-    border-left: 0;
-    border-right: 1px solid var(--color-border-light);
-    flex-direction: row-reverse;
-    margin-left: 0;
-    margin-right: var(--space-normal);
-    padding-left: 0;
-    padding-right: var(--space-normal);
-  }
-
-  .category-list--container .header-left--wrap {
-    direction: initial;
-    justify-content: flex-end;
-  }
-
   // Toggle switch
   .toggle-button {
     &.small {
@@ -264,11 +177,6 @@
     }
   }
 
-  // Widget builder
-  .widget-builder-container .widget-preview {
-    direction: initial;
-  }
-
   // Modal
   .modal-container {
     text-align: right;
@@ -282,7 +190,6 @@
   }
 
   // Other changes
-
   .colorpicker--chrome {
     direction: initial;
   }
@@ -291,14 +198,6 @@
     direction: initial;
   }
 
-  .contact--details .contact--bio {
-    direction: ltr;
-  }
-
-  .merge-contacts .child-contact-wrap {
-    direction: ltr;
-  }
-
   .contact--form .input-group {
     direction: initial;
   }
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 004d8bf59..622eb4085 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -29,7 +29,6 @@
 @import 'rtl';
 
 @import 'widgets/base';
-@import 'widgets/buttons';
 @import 'widgets/conversation-view';
 @import 'widgets/tabs';
 @import 'widgets/woot-tables';
diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index b2c271173..9c4ccf126 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -40,6 +40,12 @@ dl:not(.reset-base) {
   @apply mb-0;
 }
 
+// Button base
+button {
+  font-family: inherit;
+  @apply inline-block text-center align-middle cursor-pointer text-sm m-0 py-1 px-2.5 transition-all duration-200 ease-in-out border-0 border-none rounded-lg disabled:opacity-50;
+}
+
 // Form elements
 // -------------------------
 label {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
deleted file mode 100644
index 133e07bd1..000000000
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-// scss-lint:disable SpaceAfterPropertyColon
-// scss-lint:disable MergeableSelector
-button {
-  font-family: inherit;
-  transition:
-    background-color 0.25s ease-out,
-    color 0.25s ease-out;
-  @apply inline-block items-center mb-0 text-center align-middle cursor-pointer text-sm mt-0 mx-0 py-1 px-2.5 border border-solid border-transparent dark:border-transparent rounded-[0.3125rem];
-
-  &:disabled,
-  &.disabled {
-    @apply opacity-40 cursor-not-allowed;
-  }
-}
-
-.button-group {
-  @apply mb-0 flex flex-nowrap items-stretch;
-
-  .button {
-    flex: 0 0 auto;
-    @apply m-0 text-sm rounded-none first:rounded-tl-[0.3125rem] first:rounded-bl-[0.3125rem] last:rounded-tr-[0.3125rem] last:rounded-br-[0.3125rem] rtl:space-x-reverse;
-  }
-
-  .button--only-icon {
-    @apply w-10 justify-center pl-0 pr-0;
-  }
-}
-
-.back-button {
-  @apply m-0;
-}
-
-.button {
-  @apply items-center bg-n-brand px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
-
-  .button__content {
-    @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
-
-    img,
-    svg {
-      @apply inline-block;
-    }
-  }
-
-  &: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;
-  }
-
-  &:disabled,
-  &.disabled {
-    @apply opacity-40 cursor-not-allowed;
-  }
-
-  &.success {
-    @apply bg-n-teal-9 text-white dark:text-white;
-  }
-
-  &.secondary {
-    @apply bg-n-solid-3 text-white dark:text-white;
-  }
-
-  &.primary {
-    @apply bg-n-brand text-white dark:text-white;
-  }
-
-  &.clear {
-    @apply text-n-blue-text dark:text-n-blue-text bg-transparent dark:bg-transparent;
-  }
-
-  &.alert {
-    @apply bg-n-ruby-9 text-white dark:text-white;
-
-    &.clear {
-      @apply bg-transparent dark:bg-transparent;
-    }
-  }
-
-  &.warning {
-    @apply bg-n-amber-9 text-white dark:text-white;
-
-    &.clear {
-      @apply bg-transparent dark:bg-transparent;
-    }
-  }
-
-  &.tiny {
-    @apply h-6 text-[10px];
-  }
-
-  &.small {
-    @apply h-8 text-xs;
-  }
-
-  .spinner {
-    @apply px-2 py-0;
-  }
-
-  // @TODDO - Remove after moving all buttons to woot-button
-  .icon + .button__content {
-    @apply w-auto;
-  }
-
-  &.expanded {
-    @apply flex justify-center text-center;
-  }
-
-  &.round {
-    @apply rounded-full;
-  }
-
-  // @TODO Use with link
-
-  &.compact {
-    @apply pb-0 pt-0;
-  }
-
-  &.hollow {
-    @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:enabled:bg-n-slate-5;
-    }
-
-    &.success {
-      @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:enabled:bg-n-ruby-5;
-    }
-
-    &.warning {
-      @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:enabled:bg-n-brand/20 dark:hover:enabled:bg-n-brand/40;
-
-    &.secondary {
-      @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:enabled:text-n-teal-11 hover:enabled:bg-n-teal-5;
-    }
-
-    &.alert {
-      @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:enabled:text-n-amber-11 hover:enabled:bg-n-amber-5;
-    }
-  }
-
-  &.clear {
-    @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:enabled:bg-n-slate-4;
-    }
-
-    &.success {
-      @apply text-n-teal-10 hover:enabled:bg-n-teal-4;
-    }
-
-    &.alert {
-      @apply text-n-ruby-11 hover:enabled:bg-n-ruby-4;
-    }
-
-    &.warning {
-      @apply text-n-amber-11 hover:enabled:bg-n-amber-4;
-    }
-
-    &:active {
-      &.secondary {
-        @apply active:bg-n-slate-3 dark:active:bg-n-slate-7;
-      }
-    }
-
-    &:focus {
-      &.secondary {
-        @apply focus:bg-n-slate-4 dark:focus:bg-n-slate-6;
-      }
-    }
-  }
-
-  // Sizes
-  &.tiny {
-    @apply h-6;
-  }
-
-  &.small {
-    @apply h-8 pb-1 pt-1;
-  }
-
-  &.large {
-    @apply h-12;
-  }
-
-  &.button--only-icon {
-    @apply justify-center pl-0 pr-0 w-10;
-
-    &.tiny {
-      @apply w-6;
-    }
-
-    &.small {
-      @apply w-8;
-    }
-
-    &.large {
-      @apply w-12;
-    }
-  }
-
-  &.link {
-    @apply h-auto m-0 p-0;
-
-    &:hover {
-      @apply underline;
-    }
-  }
-}
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index b13d5b5c2..a8e789b46 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -35,7 +35,7 @@ const onToggle = () => {
 <template>
   <div class="text-sm">
     <button
-      class="flex items-center select-none w-full rounded-lg bg-n-slate-2 border border-n-weak m-0 cursor-grab justify-between py-2 px-4 drag-handle"
+      class="flex items-center select-none w-full rounded-lg bg-n-slate-2 outline outline-1 outline-n-weak m-0 cursor-grab justify-between py-2 px-4 drag-handle"
       :class="{ 'rounded-bl-none rounded-br-none': isOpen }"
       @click.stop="onToggle"
     >
@@ -55,7 +55,7 @@ const onToggle = () => {
     </button>
     <div
       v-if="isOpen"
-      class="bg-n-background border border-n-weak dark:border-n-slate-2 border-t-0 rounded-br-lg rounded-bl-lg"
+      class="bg-n-background outline outline-1 outline-n-weak -mt-[-1px] border-t-0 rounded-br-lg rounded-bl-lg"
       :class="compact ? 'p-0' : 'px-2 py-4'"
     >
       <slot />
diff --git a/app/javascript/dashboard/components/buttons/Button.vue b/app/javascript/dashboard/components/buttons/Button.vue
deleted file mode 100644
index 64b5ecb9a..000000000
--- a/app/javascript/dashboard/components/buttons/Button.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    Spinner,
-  },
-  props: {
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    buttonIconClass: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'button',
-    },
-    variant: {
-      type: String,
-      default: 'primary',
-    },
-  },
-  created() {
-    if (import.meta.env.DEV) {
-      // eslint-disable-next-line
-      console.warn(
-        '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
-      );
-    }
-  },
-};
-</script>
-
-<template>
-  <button :type="type" class="button nice" :class="variant">
-    <fluent-icon
-      v-if="!isLoading && icon"
-      class="icon"
-      :class="buttonIconClass"
-      :icon="icon"
-    />
-    <Spinner v-if="isLoading" />
-    <slot />
-  </button>
-</template>
diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
deleted file mode 100644
index 283387e7c..000000000
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-
-export default {
-  components: {
-    Spinner,
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    buttonText: {
-      type: String,
-      default: '',
-    },
-    buttonClass: {
-      type: String,
-      default: '',
-    },
-    iconClass: {
-      type: String,
-      default: '',
-    },
-    spinnerClass: {
-      type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'submit',
-    },
-  },
-  computed: {
-    computedClass() {
-      return `button nice gap-2 ${this.buttonClass || ' '}`;
-    },
-  },
-};
-</script>
-
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-  >
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <span>{{ buttonText }}</span>
-    <Spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
-  </button>
-</template>
-
-<style lang="scss" scoped>
-button:disabled {
-  @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
-  &:hover {
-    @apply bg-woot-100 dark:bg-woot-500/25;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 7c7a9c262..4c537aaac 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -134,7 +134,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 <template>
   <div class="relative flex items-center justify-end resolve-actions">
     <div
-      class="rounded-lg shadow button-group outline-1 outline"
+      class="rounded-lg shadow outline-1 outline"
       :class="!showOpenButton ? 'outline-n-container' : 'outline-transparent'"
     >
       <Button
diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js
index 2f807d2ef..dffb42914 100644
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@@ -17,7 +17,6 @@ import ModalHeader from './ModalHeader.vue';
 import Modal from './Modal.vue';
 import SidemenuIcon from './SidemenuIcon.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import SubmitButton from './buttons/FormSubmitButton.vue';
 import Tabs from './ui/Tabs/Tabs.vue';
 import TabsItem from './ui/Tabs/TabsItem.vue';
 import Thumbnail from './widgets/Thumbnail.vue';
@@ -41,7 +40,6 @@ const WootUIKit = {
   ModalHeader,
   SidemenuIcon,
   Spinner,
-  SubmitButton,
   Tabs,
   TabsItem,
   Thumbnail,
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index e96465f23..463958f99 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -3,8 +3,12 @@ import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     show: {
       type: Boolean,
@@ -86,19 +90,24 @@ export default {
             />
           </label>
         </div>
-        <div class="w-full">
-          <div class="w-full">
-            <woot-submit-button
-              :disabled="
-                v$.accountName.$invalid ||
-                v$.accountName.$invalid ||
-                uiFlags.isCreating
-              "
-              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
-              :loading="uiFlags.isCreating"
-              button-class="large expanded"
-            />
-          </div>
+        <div class="w-full flex justify-end gap-2 items-center">
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('CREATE_ACCOUNT.FORM.CANCEL')"
+            @click.prevent="() => $emit('closeAccountCreateModal')"
+          />
+          <NextButton
+            type="submit"
+            :label="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+            :is-loading="uiFlags.isCreating"
+            :disabled="
+              v$.accountName.$invalid ||
+              v$.accountName.$invalid ||
+              uiFlags.isCreating
+            "
+          />
         </div>
       </form>
     </div>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 0b75be50b..23ef82b5e 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -106,43 +106,3 @@ export default {
     />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.button-group {
-  @apply flex border-0 p-0 m-0;
-
-  .button {
-    @apply text-sm font-medium py-2.5 px-4 m-0 relative z-10;
-
-    &.is-active {
-      @apply bg-white dark:bg-slate-900;
-    }
-  }
-
-  .button--reply {
-    @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
-
-    &:hover,
-    &:focus {
-      @apply border-r border-slate-50 dark:border-slate-700;
-    }
-  }
-
-  .button--note {
-    @apply border-l-0 rounded-none;
-
-    &.is-active {
-      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-slate-50 dark:border-slate-700;
-    }
-
-    &:hover,
-    &:active {
-      @apply text-yellow-700 dark:text-yellow-700;
-    }
-  }
-}
-
-.button--note {
-  @apply text-yellow-600 dark:text-yellow-600 bg-transparent dark:bg-transparent;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
index a1c99b69e..5c1c79d23 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
@@ -2,8 +2,12 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     show: {
       type: Boolean,
@@ -153,13 +157,18 @@ export default {
           </div>
         </div>
         <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <woot-submit-button
-            :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t('EMAIL_TRANSCRIPT.CANCEL')"
+            @click.prevent="onCancel"
+          />
+          <NextButton
+            type="submit"
+            :label="$t('EMAIL_TRANSCRIPT.SUBMIT')"
             :disabled="!isFormValid"
           />
-          <button class="button clear" @click.prevent="onCancel">
-            {{ $t('EMAIL_TRANSCRIPT.CANCEL') }}
-          </button>
         </div>
       </form>
     </div>
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 7108c1610..10a21245b 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -387,7 +387,8 @@
         "LABEL": "Company Name",
         "PLACEHOLDER": "Wayne Enterprises"
       },
-      "SUBMIT": "Submit"
+      "SUBMIT": "Submit",
+      "CANCEL": "Cancel"
     }
   },
   "KEYBOARD_SHORTCUTS": {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index 952d43c8e..810872cac 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -1,7 +1,7 @@
 <script>
 import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 export default {
   components: {
@@ -47,28 +47,25 @@ export default {
 </script>
 
 <template>
-  <div class="contact-conversation--panel">
-    <div v-if="!uiFlags.isFetching" class="contact-conversation__wrap">
-      <div
-        v-if="!previousConversations.length"
-        class="no-label-message px-4 p-3"
-      >
-        <span>
-          {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
-        </span>
-      </div>
-      <div v-else class="contact-conversation--list">
-        <ConversationCard
-          v-for="conversation in previousConversations"
-          :key="conversation.id"
-          :chat="conversation"
-          :hide-inbox-name="false"
-          hide-thumbnail
-          class="compact"
-        />
-      </div>
+  <div v-if="!uiFlags.isFetching" class="">
+    <div v-if="!previousConversations.length" class="no-label-message px-4 p-3">
+      <span>
+        {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
+      </span>
     </div>
-    <Spinner v-else />
+    <div v-else class="contact-conversation--list">
+      <ConversationCard
+        v-for="conversation in previousConversations"
+        :key="conversation.id"
+        :chat="conversation"
+        :hide-inbox-name="false"
+        hide-thumbnail
+        class="compact"
+      />
+    </div>
+  </div>
+  <div v-else class="flex items-center justify-center py-5">
+    <Spinner />
   </div>
 </template>
 
@@ -79,6 +76,7 @@ export default {
 
 ::v-deep .conversation {
   @apply pr-0;
+
   .conversation--details {
     @apply pl-2;
   }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
index 995e003bd..2b7637ee2 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -53,9 +53,11 @@ const closeMacroPreview = () => {
 
 <template>
   <div
-    class="relative flex items-center justify-between leading-4 rounded-md button secondary clear"
+    class="relative flex items-center justify-between leading-4 rounded-md h-10 pl-3 pr-2"
   >
-    <span class="overflow-hidden whitespace-nowrap text-ellipsis">
+    <span
+      class="overflow-hidden whitespace-nowrap text-ellipsis font-medium text-n-slate-12"
+    >
       {{ macro.name }}
     </span>
     <div class="flex items-center gap-1 justify-end">
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 7eda1efb3..f5075f201 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -9,8 +9,12 @@ import { useVuelidate } from '@vuelidate/core';
 import countries from 'shared/constants/countries.js';
 import { isPhoneNumberValid } from 'shared/helpers/Validators';
 import parsePhoneNumber from 'libphonenumber-js';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     contact: {
       type: Object,
@@ -401,16 +405,19 @@ export default {
         />
       </div>
     </div>
-    <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-      <div class="w-full">
-        <woot-submit-button
-          :loading="inProgress"
-          :button-text="$t('CONTACT_FORM.FORM.SUBMIT')"
-        />
-        <button class="button clear" @click.prevent="onCancel">
-          {{ $t('CONTACT_FORM.FORM.CANCEL') }}
-        </button>
-      </div>
+    <div class="flex flex-row justify-start w-full gap-2 px-0 py-2">
+      <NextButton
+        type="submit"
+        :label="$t('CONTACT_FORM.FORM.SUBMIT')"
+        :is-loading="inProgress"
+      />
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('CONTACT_FORM.FORM.CANCEL')"
+        @click.prevent="onCancel"
+      />
     </div>
   </form>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index 4fd4331d6..b7b59c445 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -4,12 +4,14 @@ import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import { mapGetters } from 'vuex';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
     EmptyState,
+    NextButton,
   },
   props: {
     notifications: {
@@ -49,17 +51,22 @@ export default {
 
 <template>
   <section
-    class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-white dark:bg-slate-900"
+    class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-n-background"
   >
-    <woot-submit-button
-      v-if="notificationMetadata.unreadCount"
-      class="button nice success button--fixed-top"
-      :button-text="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
-      :loading="isUpdating"
-      @click="onMarkAllDoneClick"
-    />
-
-    <table class="woot-table notifications-table">
+    <div class="flex w-full items-center justify-between gap-2 mb-4">
+      <h6 class="text-xl font-medium text-n-slate-12">
+        {{ $t('NOTIFICATIONS_PAGE.HEADER') }}
+      </h6>
+      <NextButton
+        v-if="notificationMetadata.unreadCount"
+        type="submit"
+        sm
+        :label="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
+        :is-loading="isUpdating"
+        @click="onMarkAllDoneClick"
+      />
+    </div>
+    <table class="woot-table notifications-table overflow-auto">
       <tbody v-show="!isLoading">
         <tr
           v-for="notificationItem in notifications"
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/routes.js b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
index e5125f2cf..0e532362d 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -8,8 +8,8 @@ export const routes = [
     path: frontendURL('accounts/:accountId/notifications'),
     component: SettingsWrapper,
     props: {
-      headerTitle: 'NOTIFICATIONS_PAGE.HEADER',
-      icon: 'alert',
+      headerTitle: '',
+      icon: '',
       showNewButton: false,
       showSidemenuIcon: false,
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index f59235767..b5772db54 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,10 +1,12 @@
 <script>
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import BackButton from '../../../components/widgets/BackButton.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     BackButton,
+    NextButton,
   },
   props: {
     headerTitle: {
@@ -70,15 +72,14 @@ export default {
         {{ headerTitle }}
       </span>
     </h1>
-    <router-link
-      v-if="showNewButton && isAdmin"
-      :to="buttonRoute"
-      class="button success button--fixed-top rounded-[5px] flex gap-2"
-    >
-      <fluent-icon icon="add-circle" />
-      <span class="button__content">
-        {{ buttonText }}
-      </span>
+    <!-- TODO: Remove this when we are not using this -->
+    <router-link v-if="showNewButton && isAdmin" :to="buttonRoute">
+      <NextButton
+        teal
+        icon="i-lucide-circle-plus"
+        class="button--fixed-top"
+        :label="buttonText"
+      />
     </router-link>
   </div>
 </template>
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 c5415ba9f..3a622425a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
@@ -4,10 +4,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';
 
 export default {
+  components: {
+    NextButton,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -115,9 +119,10 @@ export default {
     </div>
 
     <div class="w-full">
-      <woot-submit-button
-        :loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+      <NextButton
+        type="submit"
+        :label="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+        :is-loading="uiFlags.isCreating"
       />
     </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 d4da535ae..70932b81c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -1,8 +1,12 @@
 <script>
 import { useAlert } from 'dashboard/composables';
 import twitterClient from '../../../../../api/channel/twitterClient';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
+  components: {
+    NextButton,
+  },
   data() {
     return { isRequestingAuthorization: false };
   },
@@ -31,11 +35,11 @@ export default {
   >
     <div class="login-init h-full text-center">
       <form @submit.prevent="requestAuthorization">
-        <woot-submit-button
-          icon="brand-twitter"
-          button-text="Sign in with Twitter"
+        <NextButton
           type="submit"
-          :loading="isRequestingAuthorization"
+          icon="i-ri-twitter-x-fill"
+          label="Sign in with Twitter"
+          :is-loading="isRequestingAuthorization"
         />
       </form>
       <p>{{ $t('INBOX_MGMT.ADD.TWITTER.HELP') }}</p>