diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
index 96a5764a2..0d2316c21 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
@@ -5,6 +5,7 @@ import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import CustomRoleModal from './component/CustomRoleModal.vue';
 import CustomRoleTableBody from './component/CustomRoleTableBody.vue';
 import CustomRolePaywall from './component/CustomRolePaywall.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
@@ -134,14 +135,12 @@ const confirmDeletion = () => {
         feature-name="canned_responses"
       >
         <template #actions>
-          <woot-button
-            class="rounded-md button nice"
-            icon="add-circle"
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('CUSTOM_ROLE.HEADER_BTN_TXT')"
             :disabled="isBehindAPaywall"
             @click="openAddModal"
-          >
-            {{ $t('CUSTOM_ROLE.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>
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 e1715f1cb..cddbddd32 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
@@ -12,7 +12,7 @@ import {
   CONVERSATION_PARTICIPATING_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
-import WootSubmitButton from 'dashboard/components/buttons/FormSubmitButton.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   mode: {
@@ -160,13 +160,12 @@ const isSubmitDisabled = computed(
     />
     <form class="flex flex-col w-full" @submit.prevent="handleCustomRole">
       <div class="w-full">
-        <label>
+        <label :class="{ error: v$.name.$error }">
           {{ $t('CUSTOM_ROLE.FORM.NAME.LABEL') }}
           <input
             ref="nameInput"
             v-model.trim="name"
             type="text"
-            :class="{ error: v$.name.$error }"
             :placeholder="$t('CUSTOM_ROLE.FORM.NAME.PLACEHOLDER')"
             @blur="v$.name.$touch"
           />
@@ -174,13 +173,12 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="w-full">
-        <label>
+        <label :class="{ error: v$.description.$error }">
           {{ $t('CUSTOM_ROLE.FORM.DESCRIPTION.LABEL') }}
 
           <textarea
             v-model="description"
             :rows="3"
-            :class="{ error: v$.description.$error }"
             :placeholder="$t('CUSTOM_ROLE.FORM.DESCRIPTION.PLACEHOLDER')"
             @blur="v$.description.$touch"
           />
@@ -213,14 +211,19 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <WootSubmitButton
-          :disabled="isSubmitDisabled"
-          :button-text="submitButtonText"
-          :loading="addCustomRole.showLoading"
+        <Button
+          faded
+          slate
+          type="reset"
+          :label="$t('CUSTOM_ROLE.FORM.CANCEL_BUTTON_TEXT')"
+          @click.prevent="emit('close')"
+        />
+        <Button
+          type="submit"
+          :label="submitButtonText"
+          :disabled="isSubmitDisabled"
+          :is-loading="addCustomRole.showLoading"
         />
-        <button class="button clear" @click.prevent="emit('close')">
-          {{ $t('CUSTOM_ROLE.FORM.CANCEL_BUTTON_TEXT') }}
-        </button>
       </div>
     </form>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
index 891adce40..3a080a0c1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
@@ -2,6 +2,8 @@
 import { useI18n } from 'vue-i18n';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 defineProps({
   roles: {
     type: Array,
@@ -44,22 +46,20 @@ const getFormattedPermissions = role => {
         {{ getFormattedPermissions(customRole) }}
       </td>
       <td class="flex justify-end gap-1 py-4">
-        <woot-button
+        <Button
           v-tooltip.top="$t('CUSTOM_ROLE.EDIT.BUTTON_TEXT')"
-          variant="smooth"
-          size="tiny"
-          color-scheme="secondary"
-          class-names="grey-btn"
-          icon="edit"
+          icon="i-lucide-pen"
+          slate
+          xs
+          faded
           @click="emit('edit', customRole)"
         />
-        <woot-button
+        <Button
           v-tooltip.top="$t('CUSTOM_ROLE.DELETE.BUTTON_TEXT')"
-          variant="smooth"
-          color-scheme="alert"
-          size="tiny"
-          icon="dismiss-circle"
-          class-names="grey-btn"
+          icon="i-lucide-trash-2"
+          xs
+          ruby
+          faded
           :is-loading="loading[customRole.id]"
           @click="emit('delete', customRole)"
         />