diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index 05c4d8d14..591267c31 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -10,6 +10,7 @@ import AgentBotRow from './components/AgentBotRow.vue';
 
 import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const router = useRouter();
 const store = useStore();
@@ -68,13 +69,11 @@ const onEditAgentBot = bot => {
         feature-name="agent_bots"
       >
         <template #actions>
-          <woot-button
-            class="rounded-md button nice"
-            icon="add-circle"
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('AGENT_BOTS.ADD.TITLE')"
             @click="onConfigureNewBot"
-          >
-            {{ $t('AGENT_BOTS.ADD.TITLE') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
index f96ed8018..365e4948f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
 import AgentBotType from './AgentBotType.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   agentBot: {
@@ -35,21 +36,21 @@ const isACSMLTypeBot = computed(() => {
     </td>
     <td class="align-middle">
       <div class="flex justify-end gap-1 h-full items-center">
-        <woot-button
+        <Button
           v-if="isACSMLTypeBot"
           v-tooltip.top="$t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
-          variant="smooth"
-          size="tiny"
-          color-scheme="secondary"
-          icon="edit"
+          icon="i-lucide-pen"
+          slate
+          xs
+          faded
           @click="emit('edit', agentBot)"
         />
-        <woot-button
+        <Button
           v-tooltip.top="$t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
-          variant="smooth"
-          color-scheme="alert"
-          size="tiny"
-          icon="dismiss-circle"
+          icon="i-lucide-trash-2"
+          xs
+          ruby
+          faded
           @click="emit('delete', agentBot, index)"
         />
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
index d26bea89e..9c962136d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
@@ -2,9 +2,10 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import CsmlMonacoEditor from './CSMLMonacoEditor.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
-  components: { CsmlMonacoEditor },
+  components: { CsmlMonacoEditor, NextButton },
   props: {
     agentBot: {
       type: Object,
@@ -86,9 +87,10 @@ export default {
                 "
               />
             </label>
-            <woot-button>
-              {{ $t('AGENT_BOTS.CSML_BOT_EDITOR.SUBMIT') }}
-            </woot-button>
+            <NextButton
+              type="submit"
+              :label="$t('AGENT_BOTS.CSML_BOT_EDITOR.SUBMIT')"
+            />
           </div>
         </form>
       </div>