From 229f56d6e3422979ef52bcd2d9093df8aeb8303c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 17 Feb 2026 16:40:12 +0530
Subject: [PATCH 01/26] chore: Remove `vue-multiselect` and migrate to next
 components (#13506)

# Pull Request Template

## Description

This PR includes:
1. Removes multiselect usage from the Merge Contact modal (Conversation
sidebar) and replaces it with the existing component used on the Contact
Details page.
2. Replaces legacy form and multiselect elements in Add and Edit
automations flows with next components.**(Also check Macros)**
3. Replace multiselect with ComboBox in contact form country field.
4. Replace multiselect with TagInput in create/edit attribute form.
5. Replace multiselect with TagInput for agent selection in inbox
creation.
6. Replace multiselect with ComboBox in Facebook channel page selection

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

**Screenshots**

1. **Merge modal**
<img width="741" height="449" alt="image"
src="https://github.com/user-attachments/assets/a05a96ec-0692-4d94-9e27-d3e85fd143e4"
/>
<img width="741" height="449" alt="image"
src="https://github.com/user-attachments/assets/fc1dc977-689d-4440-869d-2124e4ca9083"
/>

2. **Automations**
<img width="849" height="1089" alt="image"
src="https://github.com/user-attachments/assets/b0155f06-ab21-4f90-a2c8-5bfbd97b08f7"
/>
<img width="813" height="879" alt="image"
src="https://github.com/user-attachments/assets/0921ac4a-88f5-49ac-a776-cc02941b479c"
/>
<img width="849" height="826" alt="image"
src="https://github.com/user-attachments/assets/44358dae-a076-4e10-b7ba-a4e40ccd817f"
/>

3. **Country field**
<img width="462" height="483" alt="image"
src="https://github.com/user-attachments/assets/d5db9aa1-b859-4327-9960-957d7091678f"
/>

4. **Add/Edit attribute form**
<img width="619" height="646" alt="image"
src="https://github.com/user-attachments/assets/6ab2ea94-73e5-40b8-ac29-399c0543fa7b"
/>
<img width="619" height="646" alt="image"
src="https://github.com/user-attachments/assets/b4c5bb0e-baa0-4ef7-a6a2-adb0f0203243"
/>
<img width="635" height="731" alt="image"
src="https://github.com/user-attachments/assets/74890c80-b213-4567-bf5f-4789dda39d2d"
/>

5. **Agent selection in inbox creation**
<img width="635" height="534" alt="image"
src="https://github.com/user-attachments/assets/0003bad1-1a75-4f20-b014-587e1c19a620"
/>
<img width="809" height="602" alt="image"
src="https://github.com/user-attachments/assets/5e7ab635-7340-420a-a191-e6cd49c02704"
/>

7. **Facebook channel page selection**
<img width="597" height="444" alt="image"
src="https://github.com/user-attachments/assets/f7ec8d84-0a7d-4bc6-92a1-a1365178e319"
/>
<img width="597" height="444" alt="image"
src="https://github.com/user-attachments/assets/d0596c4d-94c1-4544-8b50-e7103ff207a6"
/>
<img width="597" height="444" alt="image"
src="https://github.com/user-attachments/assets/be097921-011b-4dbe-b5f1-5d1306e25349"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../ContactListHeaderWrapper.vue              |   3 +-
 .../components/EmailOptions.vue               |   2 +
 .../components-next/combobox/ComboBox.vue     |   9 +-
 .../components-next/dialog/Dialog.vue         |  22 +-
 .../dropdown-menu/base/DropdownSection.vue    |   9 +-
 .../components-next/filter/ConditionRow.vue   |  16 +-
 .../filter/inputs/FilterSelect.vue            |  27 +-
 .../filter/inputs/MultiSelect.vue             |   8 +-
 .../filter/inputs/SingleSelect.vue            |  16 +-
 .../components-next/taginput/TagInput.vue     |  59 ++-
 .../helper/spec/tagInputHelper.spec.js        |  65 +++
 .../taginput/helper/tagInputHelper.js         |  14 +-
 .../widgets/AutomationActionInput.vue         | 264 ++++-------
 .../AutomationActionTeamMessageInput.vue      |  58 +--
 .../widgets/AutomationFileInput.vue           |   2 +-
 .../components/widgets/FilterInput/Index.vue  | 305 -------------
 .../dashboard/composables/useAutomation.js    |  16 +-
 .../dashboard/helper/automationHelper.js      |   8 +-
 .../modules/contact/ContactMergeModal.vue     | 162 +++----
 .../components/ContactDropdownItem.vue        |  87 ----
 .../contact/components/MergeContact.vue       | 268 ++++--------
 .../conversation/contact/ContactForm.vue      |  53 ++-
 .../conversation/contact/ContactInfo.vue      |  13 +-
 .../settings/attributes/AddAttribute.vue      |  86 ++--
 .../settings/attributes/EditAttribute.vue     |  78 ++--
 .../settings/automation/AddAutomationRule.vue | 381 +++-------------
 .../automation/AutomationRuleForm.vue         | 414 ++++++++++++++++++
 .../automation/EditAutomationRule.vue         | 401 +++--------------
 .../dashboard/settings/automation/Index.vue   |  43 +-
 .../dashboard/settings/inbox/AddAgents.vue    |  71 ++-
 .../settings/inbox/channels/Facebook.vue      |  44 +-
 31 files changed, 1209 insertions(+), 1795 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/widgets/FilterInput/Index.vue
 delete mode 100644 app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleForm.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
index 0b4880264..3d4b5c8a5 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -68,8 +68,7 @@ const hasActiveSegments = computed(
 );
 const activeSegmentName = computed(() => props.activeSegment?.name);
 
-const openCreateNewContactDialog = async () => {
-  await createNewContactDialogRef.value?.contactsFormRef.resetValidation();
+const openCreateNewContactDialog = () => {
   createNewContactDialogRef.value?.dialogRef.open();
 };
 const openContactImportDialog = () =>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue b/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
index ac7e8d659..4e0c71adb 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/EmailOptions.vue
@@ -95,6 +95,7 @@ const inputClass = computed(() => {
           :show-dropdown="showCcEmailsDropdown"
           :is-loading="isLoading"
           type="email"
+          allow-create
           class="flex-1 min-h-7"
           @focus="emit('updateDropdown', 'cc', true)"
           @input="emit('searchCcEmails', $event)"
@@ -127,6 +128,7 @@ const inputClass = computed(() => {
         :show-dropdown="showBccEmailsDropdown"
         :is-loading="isLoading"
         type="email"
+        allow-create
         class="flex-1 min-h-7"
         focus-on-mount
         @focus="emit('updateDropdown', 'bcc', true)"
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
index d50134e88..58d9e634d 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -56,8 +56,13 @@ const selectedLabel = computed(() => {
 });
 
 const selectOption = option => {
-  selectedValue.value = option.value;
-  emit('update:modelValue', option.value);
+  if (selectedValue.value === option.value) {
+    selectedValue.value = '';
+    emit('update:modelValue', '');
+  } else {
+    selectedValue.value = option.value;
+    emit('update:modelValue', option.value);
+  }
   open.value = false;
   search.value = '';
 };
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.vue b/app/javascript/dashboard/components-next/dialog/Dialog.vue
index 78ca5206b..8a5439554 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -53,6 +53,11 @@ const props = defineProps({
     default: 'lg',
     validator: value => ['3xl', '2xl', 'xl', 'lg', 'md', 'sm'].includes(value),
   },
+  position: {
+    type: String,
+    default: 'center',
+    validator: value => ['center', 'top'].includes(value),
+  },
 });
 
 const emit = defineEmits(['confirm', 'close']);
@@ -61,6 +66,7 @@ const { t } = useI18n();
 
 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
+const isOpen = ref(false);
 
 const maxWidthClass = computed(() => {
   const classesMap = {
@@ -75,13 +81,19 @@ const maxWidthClass = computed(() => {
   return classesMap[props.width] ?? 'max-w-md';
 });
 
+const positionClass = computed(() =>
+  props.position === 'top' ? 'dialog-position-top' : ''
+);
+
 const open = () => {
+  isOpen.value = true;
   dialogRef.value?.showModal();
 };
 
 const close = () => {
   emit('close');
   dialogRef.value?.close();
+  isOpen.value = false;
 };
 
 const confirm = () => {
@@ -98,6 +110,7 @@ defineExpose({ open, close });
       class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
       :class="[
         maxWidthClass,
+        positionClass,
         overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
       ]"
       @close="close"
@@ -105,7 +118,7 @@ defineExpose({ open, close });
       <OnClickOutside @trigger="close">
         <form
           ref="dialogContentRef"
-          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-start align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
           @submit.prevent="confirm"
           @click.stop
         >
@@ -119,7 +132,7 @@ defineExpose({ open, close });
               </p>
             </slot>
           </div>
-          <slot />
+          <slot v-if="isOpen" />
           <!-- Dialog content will be injected here -->
           <slot name="footer">
             <div
@@ -156,4 +169,9 @@ defineExpose({ open, close });
 dialog::backdrop {
   @apply bg-n-alpha-black1 backdrop-blur-[4px];
 }
+
+.dialog-position-top {
+  margin-top: clamp(2rem, 5vh, 5rem);
+  margin-bottom: auto;
+}
 </style>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
index 54872c440..5fc63b85c 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
@@ -4,6 +4,10 @@ defineProps({
     type: String,
     default: '',
   },
+  height: {
+    type: String,
+    default: 'max-h-96',
+  },
 });
 </script>
 
@@ -15,7 +19,10 @@ defineProps({
     >
       {{ title }}
     </div>
-    <ul class="gap-2 grid reset-base list-none px-2 max-h-96 overflow-y-auto">
+    <ul
+      class="gap-2 grid reset-base list-none px-2 overflow-y-auto"
+      :class="height"
+    >
       <slot />
     </ul>
   </div>
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
index c74879a58..510ddbde3 100644
--- a/app/javascript/dashboard/components-next/filter/ConditionRow.vue
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -50,12 +50,12 @@ const currentFilter = computed(() =>
 );
 
 const getOperator = (filter, selectedOperator) => {
-  const operatorFromOptions = filter.filterOperators.find(
+  const operatorFromOptions = filter?.filterOperators?.find(
     operator => operator.value === selectedOperator
   );
 
   if (!operatorFromOptions) {
-    return filter.filterOperators[0];
+    return filter?.filterOperators?.[0];
   }
 
   return operatorFromOptions;
@@ -138,7 +138,11 @@ const validate = () => {
   return !validationError.value;
 };
 
-defineExpose({ validate });
+const resetValidation = () => {
+  showErrors.value = false;
+};
+
+defineExpose({ validate, resetValidation });
 </script>
 
 <template>
@@ -166,18 +170,20 @@ defineExpose({ validate });
       <FilterSelect
         v-model="filterOperator"
         variant="ghost"
-        :options="currentFilter.filterOperators"
+        :options="currentFilter?.filterOperators"
       />
-      <template v-if="currentOperator.hasInput">
+      <template v-if="currentOperator?.hasInput">
         <MultiSelect
           v-if="inputType === 'multiSelect'"
           v-model="values"
           :options="currentFilter.options"
+          dropdown-max-height="max-h-72"
         />
         <SingleSelect
           v-else-if="inputType === 'searchSelect'"
           v-model="values"
           :options="currentFilter.options"
+          dropdown-max-height="max-h-64"
         />
         <SingleSelect
           v-else-if="inputType === 'booleanSelect'"
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
index a5c97b456..58db5ecef 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
@@ -45,7 +45,7 @@ const { height } = useWindowSize();
 const { height: dropdownHeight } = useElementBounding(dropdownRef);
 
 const selectedOption = computed(() => {
-  return props.options.find(o => o.value === selected.value) || {};
+  return props.options?.find(o => o.value === selected.value) || {};
 });
 
 const iconToRender = computed(() => {
@@ -87,18 +87,25 @@ const updateSelected = newValue => {
     </template>
     <DropdownBody
       ref="dropdownRef"
-      class="min-w-48 z-50"
+      class="min-w-56 z-50"
       :class="dropdownPosition"
       strong
     >
-      <DropdownSection class="[&>ul]:max-h-80">
-        <DropdownItem
-          v-for="option in options"
-          :key="option.value"
-          :label="option.label"
-          :icon="option.icon"
-          @click="updateSelected(option.value)"
-        />
+      <DropdownSection class="[&>ul]:max-h-72">
+        <template v-for="option in options" :key="option.value">
+          <li
+            v-if="option.disabled"
+            class="px-2 py-1.5 text-xs font-medium text-n-slate-10 select-none"
+          >
+            {{ option.label }}
+          </li>
+          <DropdownItem
+            v-else
+            :label="option.label"
+            :icon="option.icon"
+            @click="updateSelected(option.value)"
+          />
+        </template>
       </DropdownSection>
     </DropdownBody>
   </DropdownContainer>
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
index 7f6bab135..f64c8eb76 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
@@ -8,7 +8,7 @@ import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 
-const { options, maxChips } = defineProps({
+const { options, maxChips, dropdownMaxHeight } = defineProps({
   options: {
     type: Array,
     required: true,
@@ -17,6 +17,10 @@ const { options, maxChips } = defineProps({
     type: Number,
     default: 3,
   },
+  dropdownMaxHeight: {
+    type: String,
+    default: 'max-h-80',
+  },
 });
 
 const { t } = useI18n();
@@ -123,7 +127,7 @@ const toggleOption = option => {
       </Button>
     </template>
     <DropdownBody class="top-0 min-w-48 z-50" strong>
-      <DropdownSection class="[&>ul]:max-h-80">
+      <DropdownSection :height="dropdownMaxHeight">
         <DropdownItem
           v-for="option in options"
           :key="option.id"
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
index 4c77523c4..b66945c99 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
@@ -12,10 +12,12 @@ import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 const {
   options,
   disableSearch,
+  disableDeselect,
   placeholderIcon,
   placeholder,
   placeholderTrailingIcon,
   searchPlaceholder,
+  dropdownMaxHeight,
 } = defineProps({
   options: {
     type: Array,
@@ -41,6 +43,14 @@ const {
     type: String,
     default: '',
   },
+  dropdownMaxHeight: {
+    type: String,
+    default: 'max-h-80',
+  },
+  disableDeselect: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { t } = useI18n();
@@ -63,6 +73,8 @@ const selectedItem = computed(() => {
   const optionToSearch = Array.isArray(selected.value)
     ? selected.value[0]
     : selected.value;
+
+  if (!optionToSearch) return null;
   // extract the selected item from the options array
   // this ensures that options like icon is also included
   return options.find(option => option.id === optionToSearch.id);
@@ -77,7 +89,7 @@ const toggleSelected = option => {
   };
 
   if (selected.value && selected.value.id === optionToToggle.id) {
-    selected.value = null;
+    if (!disableDeselect) selected.value = null;
   } else {
     selected.value = optionToToggle;
   }
@@ -124,7 +136,7 @@ const toggleSelected = option => {
           :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
         />
       </div>
-      <DropdownSection class="[&>ul]:max-h-80">
+      <DropdownSection :height="dropdownMaxHeight">
         <template v-if="searchResults.length">
           <DropdownItem
             v-for="option in searchResults"
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index 6ef152dab..b0ecb6aff 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -36,6 +36,11 @@ const props = defineProps({
   },
   focusOnMount: { type: Boolean, default: false },
   allowCreate: { type: Boolean, default: false },
+  // Skip label-based dedup when the consumer already filters menuItems by ID.
+  // Prevents removing all same-name items when one is selected (e.g. duplicate agent names).
+  skipLabelDedup: { type: Boolean, default: false },
+  // When false, the dropdown won't auto-open on mount; it opens only on click/focus.
+  autoOpenDropdown: { type: Boolean, default: true },
 });
 
 const emit = defineEmits([
@@ -56,7 +61,7 @@ const modelValue = defineModel({
 const tagInputRef = ref(null);
 const tags = ref(props.modelValue);
 const newTag = ref('');
-const isFocused = ref(true);
+const isFocused = ref(props.autoOpenDropdown);
 
 const rules = computed(() => getValidationRules(props.type));
 const v$ = useVuelidate(rules, { newTag });
@@ -74,11 +79,11 @@ const showInput = computed(() =>
 const showDropdownMenu = computed(() =>
   props.mode === MODE.SINGLE && tags.value.length >= 1
     ? false
-    : props.showDropdown
+    : props.showDropdown && isFocused.value
 );
 
-const filteredMenuItems = computed(() =>
-  buildTagMenuItems({
+const filteredMenuItems = computed(() => {
+  const items = buildTagMenuItems({
     mode: props.mode,
     tags: tags.value,
     menuItems: props.menuItems,
@@ -86,8 +91,14 @@ const filteredMenuItems = computed(() =>
     isLoading: props.isLoading,
     type: props.type,
     isNewTagInValidType: isNewTagInValidType.value,
-  })
-);
+    allowCreate: props.allowCreate,
+    skipLabelDedup: props.skipLabelDedup,
+  });
+  if (props.type !== INPUT_TYPES.TEXT) return items;
+  const query = newTag.value?.trim()?.toLowerCase();
+  if (!query) return items;
+  return items.filter(item => item.label?.toLowerCase().includes(query));
+});
 
 const emitDataOnAdd = value => {
   const matchingMenuItem = findMatchingMenuItem(props.menuItems, value);
@@ -112,10 +123,13 @@ const addTag = async () => {
     return;
   }
 
-  if (
-    [INPUT_TYPES.EMAIL, INPUT_TYPES.TEL].includes(props.type) ||
-    props.allowCreate
-  ) {
+  const isValidatedType = [INPUT_TYPES.EMAIL, INPUT_TYPES.TEL].includes(
+    props.type
+  );
+
+  if (!isValidatedType && !props.allowCreate && props.showDropdown) return;
+
+  if (isValidatedType || props.allowCreate) {
     if (!(await v$.value.$validate())) return;
     emitDataOnAdd(trimmedTag);
   }
@@ -125,28 +139,31 @@ const addTag = async () => {
 const removeTag = index => {
   tags.value.splice(index, 1);
   modelValue.value = tags.value;
-  emit('remove');
+  emit('remove', index);
 };
 
 const handleDropdownAction = async ({
   email: emailAddress,
   phoneNumber,
+  label,
   ...rest
 }) => {
   if (props.mode === MODE.SINGLE && tags.value.length >= 1) return;
   if (!props.showDropdown) return;
 
-  const isEmail = props.type === 'email';
-  newTag.value = isEmail ? emailAddress : phoneNumber;
+  const isEmail = props.type === INPUT_TYPES.EMAIL;
+  const tagValue = isEmail ? emailAddress : phoneNumber || label;
 
-  if (!(await v$.value.$validate())) return;
+  if (isEmail || props.type === INPUT_TYPES.TEL) {
+    newTag.value = tagValue;
+    if (!(await v$.value.$validate())) return;
+  }
 
-  const payload = isEmail
-    ? { email: emailAddress, ...rest }
-    : { phoneNumber, ...rest };
-
-  emit('add', payload);
-  updateValueAndFocus(emailAddress);
+  emit(
+    'add',
+    isEmail ? { email: emailAddress, ...rest } : { phoneNumber, label, ...rest }
+  );
+  updateValueAndFocus(tagValue);
 };
 
 const handleFocus = () => {
@@ -163,7 +180,7 @@ const handleKeydown = event => {
 };
 
 const handleClickOutside = () => {
-  if (tags.value.length) isFocused.value = false;
+  isFocused.value = false;
   emit('onClickOutside');
 };
 
diff --git a/app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js b/app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js
index f1886de22..24ab3339e 100644
--- a/app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js
+++ b/app/javascript/dashboard/components-next/taginput/helper/spec/tagInputHelper.spec.js
@@ -261,6 +261,71 @@ describe('tagInputHelper', () => {
       });
       expect(result).toEqual(menuItems);
     });
+
+    it('does not create suggestion when allowCreate is false', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        type: INPUT_TYPES.EMAIL,
+        newTag: 'test@example.com',
+        allowCreate: false,
+      });
+      expect(result).toEqual([]);
+    });
+
+    it('still returns available menu items when allowCreate is false', () => {
+      const menuItems = [
+        { label: 'Agent 1', value: '1' },
+        { label: 'Agent 2', value: '2' },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        menuItems,
+        newTag: 'Agent',
+        allowCreate: false,
+      });
+      expect(result).toEqual(menuItems);
+    });
+
+    it('creates new item when allowCreate is true (default)', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        type: INPUT_TYPES.EMAIL,
+        newTag: 'test@example.com',
+        allowCreate: true,
+      });
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        label: 'test@example.com',
+        action: 'create',
+      });
+    });
+
+    it('skips label dedup when skipLabelDedup is true', () => {
+      const menuItems = [
+        { label: 'HDMA', value: 1 },
+        { label: 'HDMA', value: 2 },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        tags: ['HDMA'],
+        menuItems,
+        skipLabelDedup: true,
+      });
+      expect(result).toEqual(menuItems);
+    });
+
+    it('filters by label when skipLabelDedup is false (default)', () => {
+      const menuItems = [
+        { label: 'HDMA', value: 1 },
+        { label: 'HDMA', value: 2 },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        tags: ['HDMA'],
+        menuItems,
+      });
+      expect(result).toEqual([]);
+    });
   });
 
   describe('canAddTag', () => {
diff --git a/app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js b/app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js
index fb0af711e..21426ca7b 100644
--- a/app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js
+++ b/app/javascript/dashboard/components-next/taginput/helper/tagInputHelper.js
@@ -84,25 +84,29 @@ export const buildTagMenuItems = ({
   isLoading,
   type,
   isNewTagInValidType,
+  allowCreate = true,
+  skipLabelDedup = false,
 }) => {
   if (mode === MODE.SINGLE && tags.length >= 1) return [];
 
-  const availableMenuItems = menuItems.filter(
-    item => !tags.includes(item.label)
-  );
+  const availableMenuItems = skipLabelDedup
+    ? menuItems
+    : menuItems.filter(item => !tags.includes(item.label));
 
   // Show typed value as suggestion only if:
   // 1. There's a value being typed
   // 2. The value isn't already in the tags
   // 3. Validation passes (email/phone) and There are no menu items available
+  // 4. allowCreate is enabled
   const trimmedNewTag = newTag?.trim();
-  const shouldShowTypedValue =
+  const shouldShowCreateSuggestion =
+    allowCreate &&
     trimmedNewTag &&
     !tags.includes(trimmedNewTag) &&
     !isLoading &&
     !availableMenuItems.length;
 
-  if (shouldShowTypedValue) {
+  if (shouldShowCreateSuggestion) {
     const { isValid, formattedValue } = validateAndFormatNewTag(
       trimmedNewTag,
       type,
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 5f9aa8f0d..b0b30c2fa 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -3,6 +3,9 @@ import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput
 import AutomationActionFileInput from './AutomationFileInput.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import SingleSelect from 'dashboard/components-next/filter/inputs/SingleSelect.vue';
+import MultiSelect from 'dashboard/components-next/filter/inputs/MultiSelect.vue';
+import NextInput from 'dashboard/components-next/input/Input.vue';
 
 export default {
   components: {
@@ -10,6 +13,9 @@ export default {
     AutomationActionFileInput,
     WootMessageEditor,
     NextButton,
+    SingleSelect,
+    MultiSelect,
+    NextInput,
   },
   props: {
     modelValue: {
@@ -40,6 +46,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    dropdownMaxHeight: {
+      type: String,
+      default: 'max-h-80',
+    },
   },
   emits: ['update:modelValue', 'input', 'removeAction', 'resetAction'],
   computed: {
@@ -69,11 +79,21 @@ export default {
       return this.actionTypes.find(action => action.key === this.action_name)
         .inputType;
     },
-    actionInputStyles() {
-      return {
-        'has-error': this.errorMessage,
-        'is-a-macro': this.isMacro,
-      };
+    actionNameAsSelectModel: {
+      get() {
+        if (!this.action_name) return null;
+        const found = this.actionTypes.find(a => a.key === this.action_name);
+        return found ? { id: found.key, name: found.label } : null;
+      },
+      set(value) {
+        this.action_name = value?.id || value;
+      },
+    },
+    actionTypesAsOptions() {
+      return this.actionTypes.map(a => ({ id: a.key, name: a.label }));
+    },
+    isVerticalLayout() {
+      return ['team_message', 'textarea'].includes(this.inputType);
     },
     castMessageVmodel: {
       get() {
@@ -94,203 +114,89 @@ export default {
     resetAction() {
       this.$emit('resetAction');
     },
+    onActionNameChange(value) {
+      this.actionNameAsSelectModel = value;
+      this.resetAction();
+    },
   },
 };
 </script>
 
 <template>
-  <div class="filter" :class="actionInputStyles">
-    <div class="filter-inputs">
-      <select
-        v-model="action_name"
-        class="action__question"
-        :class="{ 'full-width': !showActionInput }"
-        @change="resetAction()"
-      >
-        <option
-          v-for="attribute in actionTypes"
-          :key="attribute.key"
-          :value="attribute.key"
-        >
-          {{ attribute.label }}
-        </option>
-      </select>
-      <div v-if="showActionInput" class="filter__answer--wrap">
-        <div v-if="inputType" class="w-full">
-          <div
+  <li class="list-none py-2 first:pt-0 last:pb-0">
+    <div
+      class="flex flex-col gap-2"
+      :class="{ 'animate-wiggle': errorMessage }"
+    >
+      <div class="flex items-center gap-2">
+        <SingleSelect
+          :model-value="actionNameAsSelectModel"
+          :options="actionTypesAsOptions"
+          :dropdown-max-height="dropdownMaxHeight"
+          disable-deselect
+          class="flex-shrink-0"
+          @update:model-value="onActionNameChange"
+        />
+        <template v-if="showActionInput && !isVerticalLayout">
+          <SingleSelect
             v-if="inputType === 'search_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="action_params"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            >
-              <template #noOptions>
-                {{ $t('FORMS.MULTISELECT.NO_OPTIONS') }}
-              </template>
-            </multiselect>
-          </div>
-          <div
+            v-model="action_params"
+            :options="dropdownValues"
+            :dropdown-max-height="dropdownMaxHeight"
+          />
+          <MultiSelect
             v-else-if="inputType === 'multi_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="action_params"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              multiple
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            >
-              <template #noOptions>
-                {{ $t('FORMS.MULTISELECT.NO_OPTIONS') }}
-              </template>
-            </multiselect>
-          </div>
-          <input
+            v-model="action_params"
+            :options="dropdownValues"
+            :dropdown-max-height="dropdownMaxHeight"
+          />
+          <NextInput
             v-else-if="inputType === 'email'"
             v-model="action_params"
             type="email"
-            class="answer--text-input"
+            size="sm"
             :placeholder="$t('AUTOMATION.ACTION.EMAIL_INPUT_PLACEHOLDER')"
           />
-          <input
+          <NextInput
             v-else-if="inputType === 'url'"
             v-model="action_params"
             type="url"
-            class="answer--text-input"
+            size="sm"
             :placeholder="$t('AUTOMATION.ACTION.URL_INPUT_PLACEHOLDER')"
           />
           <AutomationActionFileInput
-            v-if="inputType === 'attachment'"
+            v-else-if="inputType === 'attachment'"
             v-model="action_params"
             :initial-file-name="initialFileName"
           />
-        </div>
+        </template>
+        <NextButton
+          v-if="!isMacro"
+          sm
+          solid
+          slate
+          icon="i-lucide-trash"
+          class="flex-shrink-0"
+          @click="removeAction"
+        />
       </div>
-      <NextButton
-        v-if="!isMacro"
-        icon="i-lucide-x"
-        slate
-        ghost
-        class="flex-shrink-0"
-        @click="removeAction"
+      <AutomationActionTeamMessageInput
+        v-if="inputType === 'team_message'"
+        v-model="action_params"
+        :teams="dropdownValues"
+        :dropdown-max-height="dropdownMaxHeight"
+      />
+      <WootMessageEditor
+        v-if="inputType === 'textarea'"
+        v-model="castMessageVmodel"
+        rows="4"
+        enable-variables
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+        class="[&_.ProseMirror-menubar]:hidden px-3 py-1 bg-n-alpha-1 rounded-lg outline outline-1 outline-n-weak dark:outline-n-strong"
       />
     </div>
-    <AutomationActionTeamMessageInput
-      v-if="inputType === 'team_message'"
-      v-model="action_params"
-      :teams="dropdownValues"
-    />
-    <WootMessageEditor
-      v-if="inputType === 'textarea'"
-      v-model="castMessageVmodel"
-      rows="4"
-      enable-variables
-      :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
-      class="action-message"
-    />
-    <p v-if="errorMessage" class="filter-error">
+    <span v-if="errorMessage" class="text-sm text-n-ruby-11">
       {{ errorMessage }}
-    </p>
-  </div>
+    </span>
+  </li>
 </template>
-
-<style lang="scss" scoped>
-.filter {
-  @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-background dark:bg-n-solid-1 p-0 border-0 rounded-none;
-  }
-}
-
-.no-margin-bottom {
-  @apply mb-0;
-}
-
-.filter.has-error {
-  @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 gap-1;
-}
-
-.filter-error {
-  @apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
-}
-
-.action__question,
-.filter__operator {
-  @apply mb-0 mr-1;
-}
-
-.action__question {
-  @apply max-w-[50%];
-}
-
-.action__question.full-width {
-  @apply max-w-full;
-}
-
-.filter__answer--wrap {
-  @apply max-w-[50%] flex-grow mr-1 flex w-full items-center justify-start;
-
-  input {
-    @apply mb-0;
-  }
-}
-.filter__answer {
-  &.answer--text-input {
-    @apply mb-0;
-  }
-}
-
-.filter__join-operator-wrap {
-  @apply relative z-20 m-0;
-}
-
-.filter__join-operator {
-  @apply flex items-center justify-center relative my-2.5 mx-0;
-
-  .operator__line {
-    @apply absolute w-full border-b border-solid border-n-weak;
-  }
-
-  .operator__select {
-    margin-bottom: 0 !important;
-    @apply relative w-auto;
-  }
-}
-
-.multiselect {
-  @apply mb-0;
-}
-.action-message {
-  @apply mt-2 mx-0 mb-0;
-}
-// Prosemirror does not have a native way of hiding the menu bar, hence
-::v-deep .ProseMirror-menubar {
-  @apply hidden;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
index 275b292d0..316c9958c 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -1,8 +1,14 @@
 <script>
+import MultiSelect from 'dashboard/components-next/filter/inputs/MultiSelect.vue';
+
 export default {
+  components: {
+    MultiSelect,
+  },
   props: {
     teams: { type: Array, required: true },
     modelValue: { type: Object, required: true },
+    dropdownMaxHeight: { type: String, default: 'max-h-80' },
   },
   emits: ['update:modelValue'],
   data() {
@@ -12,9 +18,9 @@ export default {
     };
   },
   mounted() {
-    const { team_ids: teamIds } = this.modelValue;
-    this.selectedTeams = teamIds;
-    this.message = this.modelValue.message;
+    const { team_ids: teamIds, message } = this.modelValue || {};
+    this.selectedTeams = teamIds || [];
+    this.message = message || '';
   },
   methods: {
     updateValue() {
@@ -28,37 +34,19 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div class="multiselect-wrap--small flex flex-col gap-1 mt-1">
-      <multiselect
-        v-model="selectedTeams"
-        track-by="id"
-        label="name"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
-        multiple
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        deselect-label=""
-        :max-height="160"
-        :options="teams"
-        :allow-empty="false"
-        @update:model-value="updateValue"
-      />
-      <textarea
-        v-model="message"
-        rows="4"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
-        @input="updateValue"
-      />
-    </div>
+  <div class="flex flex-col gap-2">
+    <MultiSelect
+      v-model="selectedTeams"
+      :options="teams"
+      :dropdown-max-height="dropdownMaxHeight"
+      @update:model-value="updateValue"
+    />
+    <textarea
+      v-model="message"
+      class="mb-0 !text-sm"
+      rows="4"
+      :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+      @input="updateValue"
+    />
   </div>
 </template>
-
-<style scoped>
-.multiselect {
-  margin: 0.25rem 0;
-}
-textarea {
-  margin-bottom: 0;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
index 1eff406bf..a184c369a 100644
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -79,7 +79,7 @@ input[type='file'] {
   @apply hidden;
 }
 .input-wrapper {
-  @apply flex h-9 bg-n-background py-1 px-2 items-center text-xs cursor-pointer rounded-sm border border-dashed border-n-strong;
+  @apply flex h-8 bg-n-background py-1 px-2 items-center text-xs cursor-pointer rounded-lg border border-dashed border-n-strong;
 }
 .success-icon {
   @apply text-n-teal-9 mr-2;
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
deleted file mode 100644
index f38bc814b..000000000
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ /dev/null
@@ -1,305 +0,0 @@
-<script>
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  name: 'FilterInput',
-  components: {
-    NextButton,
-  },
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => {},
-    },
-    filterAttributes: {
-      type: Array,
-      default: () => [],
-    },
-    inputType: {
-      type: String,
-      default: 'plain_text',
-    },
-    operators: {
-      type: Array,
-      default: () => [],
-    },
-    dropdownValues: {
-      type: Array,
-      default: () => [],
-    },
-    showQueryOperator: {
-      type: Boolean,
-      default: false,
-    },
-    showUserInput: {
-      type: Boolean,
-      default: true,
-    },
-    groupedFilters: {
-      type: Boolean,
-      default: false,
-    },
-    filterGroups: {
-      type: Array,
-      default: () => [],
-    },
-    customAttributeType: {
-      type: String,
-      default: '',
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue', 'removeFilter', 'resetFilter'],
-  computed: {
-    attributeKey: {
-      get() {
-        if (!this.modelValue) return null;
-        return this.modelValue.attribute_key;
-      },
-      set(value) {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', { ...payload, attribute_key: value });
-      },
-    },
-    filterOperator: {
-      get() {
-        if (!this.modelValue) return null;
-        return this.modelValue.filter_operator;
-      },
-      set(value) {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', { ...payload, filter_operator: value });
-      },
-    },
-    values: {
-      get() {
-        if (!this.modelValue) return null;
-        return this.modelValue.values;
-      },
-      set(value) {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', { ...payload, values: value });
-      },
-    },
-    query_operator: {
-      get() {
-        if (!this.modelValue) return null;
-        return this.modelValue.query_operator;
-      },
-      set(value) {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', { ...payload, query_operator: value });
-      },
-    },
-    custom_attribute_type: {
-      get() {
-        if (!this.customAttributeType) return '';
-        return this.customAttributeType;
-      },
-      set() {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', {
-          ...payload,
-          custom_attribute_type: this.customAttributeType,
-        });
-      },
-    },
-  },
-  watch: {
-    customAttributeType: {
-      handler(value) {
-        if (
-          value === 'conversation_attribute' ||
-          value === 'contact_attribute'
-        ) {
-          // eslint-disable-next-line vue/no-mutating-props
-          this.modelValue.custom_attribute_type = this.customAttributeType;
-          // eslint-disable-next-line vue/no-mutating-props
-        } else this.modelValue.custom_attribute_type = '';
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    removeFilter() {
-      this.$emit('removeFilter');
-    },
-    resetFilter() {
-      this.$emit('resetFilter');
-    },
-    getInputErrorClass(errorMessage) {
-      return errorMessage
-        ? 'bg-n-ruby-8/20 border-n-ruby-5 dark:border-n-ruby-5'
-        : 'bg-n-background border-n-weak dark:border-n-weak';
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <div>
-    <div
-      class="p-2 border border-solid rounded-lg"
-      :class="getInputErrorClass(errorMessage)"
-    >
-      <div class="flex gap-1">
-        <select
-          v-if="groupedFilters"
-          v-model="attributeKey"
-          class="max-w-[30%] mb-0 mr-1"
-          @change="resetFilter()"
-        >
-          <optgroup
-            v-for="(group, i) in filterGroups"
-            :key="i"
-            :label="group.name"
-          >
-            <option
-              v-for="attribute in group.attributes"
-              :key="attribute.key"
-              :value="attribute.key"
-              :selected="true"
-            >
-              {{ attribute.name }}
-            </option>
-          </optgroup>
-        </select>
-        <select
-          v-else
-          v-model="attributeKey"
-          class="max-w-[30%] mb-0 mr-1"
-          @change="resetFilter()"
-        >
-          <option
-            v-for="attribute in filterAttributes"
-            :key="attribute.key"
-            :value="attribute.key"
-            :disabled="attribute.disabled"
-          >
-            {{ attribute.name }}
-          </option>
-        </select>
-
-        <select v-model="filterOperator" class="max-w-[20%] mb-0 mr-1">
-          <option
-            v-for="(operator, o) in operators"
-            :key="o"
-            :value="operator.value"
-          >
-            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
-          </option>
-        </select>
-
-        <div v-if="showUserInput" class="flex-grow mr-1 filter__answer--wrap">
-          <div
-            v-if="inputType === 'multi_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              multiple
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-            >
-              <template #noOptions>
-                {{ $t('FORMS.MULTISELECT.NO_OPTIONS') }}
-              </template>
-            </multiselect>
-          </div>
-          <div
-            v-else-if="inputType === 'search_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            >
-              <template #noOptions>
-                {{ $t('FORMS.MULTISELECT.NO_OPTIONS') }}
-              </template>
-            </multiselect>
-          </div>
-          <div v-else-if="inputType === 'date'" class="multiselect-wrap--small">
-            <input
-              v-model="values"
-              type="date"
-              :editable="false"
-              class="!mb-0 datepicker"
-            />
-          </div>
-          <input
-            v-else
-            v-model="values"
-            type="text"
-            class="!mb-0"
-            :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
-          />
-        </div>
-        <NextButton
-          icon="i-lucide-x"
-          slate
-          ghost
-          class="flex-shrink-0"
-          @click="removeFilter"
-        />
-      </div>
-      <p v-if="errorMessage" class="filter-error">
-        {{ errorMessage }}
-      </p>
-    </div>
-
-    <div
-      v-if="showQueryOperator"
-      class="flex items-center justify-center relative my-2.5 mx-0"
-    >
-      <hr class="absolute w-full border-b border-solid border-n-weak" />
-      <select
-        v-model="query_operator"
-        class="relative w-auto mb-0 bg-n-background text-n-slate-12 border-n-weak"
-      >
-        <option value="and">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
-        </option>
-        <option value="or">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.filter__answer--wrap {
-  input {
-    @apply bg-n-background mb-0 text-n-slate-12 border-n-weak;
-  }
-}
-
-.filter-error {
-  @apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
-}
-
-.multiselect {
-  @apply mb-0;
-}
-</style>
diff --git a/app/javascript/dashboard/composables/useAutomation.js b/app/javascript/dashboard/composables/useAutomation.js
index 09828513f..f70a5bf3b 100644
--- a/app/javascript/dashboard/composables/useAutomation.js
+++ b/app/javascript/dashboard/composables/useAutomation.js
@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue';
+import { ref, reactive, computed } from 'vue';
 import { useStoreGetters } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
@@ -40,7 +40,7 @@ export function useAutomation(startValue = null) {
   } = useAutomationValues();
 
   const automation = ref(startValue);
-  const automationTypes = structuredClone(AUTOMATIONS);
+  const automationTypes = reactive(structuredClone(AUTOMATIONS));
   const eventName = computed(() => automation.value?.event_name);
 
   /**
@@ -160,14 +160,24 @@ export function useAutomation(startValue = null) {
       t('AUTOMATION.CONDITION.CONTACT_CUSTOM_ATTR_LABEL')
     );
 
+    const CUSTOM_ATTR_HEADER_KEYS = new Set([
+      'conversation_custom_attribute',
+      'contact_custom_attribute',
+    ]);
+
     [
       'message_created',
       'conversation_created',
       'conversation_updated',
       'conversation_opened',
     ].forEach(eventToUpdate => {
+      const standardConditions = automationTypes[
+        eventToUpdate
+      ].conditions.filter(
+        c => !c.customAttributeType && !CUSTOM_ATTR_HEADER_KEYS.has(c.key)
+      );
       automationTypes[eventToUpdate].conditions = [
-        ...automationTypes[eventToUpdate].conditions,
+        ...standardConditions,
         ...manifestedCustomAttributes,
       ];
     });
diff --git a/app/javascript/dashboard/helper/automationHelper.js b/app/javascript/dashboard/helper/automationHelper.js
index 3e5f46f90..fa6120c16 100644
--- a/app/javascript/dashboard/helper/automationHelper.js
+++ b/app/javascript/dashboard/helper/automationHelper.js
@@ -169,19 +169,19 @@ export const getFileName = (action, files = []) => {
 
 export const getDefaultConditions = eventName => {
   if (eventName === 'message_created') {
-    return DEFAULT_MESSAGE_CREATED_CONDITION;
+    return structuredClone(DEFAULT_MESSAGE_CREATED_CONDITION);
   }
   if (
     eventName === 'conversation_opened' ||
     eventName === 'conversation_resolved'
   ) {
-    return DEFAULT_CONVERSATION_CONDITION;
+    return structuredClone(DEFAULT_CONVERSATION_CONDITION);
   }
-  return DEFAULT_OTHER_CONDITION;
+  return structuredClone(DEFAULT_OTHER_CONDITION);
 };
 
 export const getDefaultActions = () => {
-  return DEFAULT_ACTIONS;
+  return structuredClone(DEFAULT_ACTIONS);
 };
 
 export const filterCustomAttributes = customAttributes => {
diff --git a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
index 6e5105883..8db16d9e5 100644
--- a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
+++ b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
@@ -1,91 +1,101 @@
-<script>
+<script setup>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
 import { useAlert, useTrack } from 'dashboard/composables';
+import { useMapGetter } from 'dashboard/composables/store';
+
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
-
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ContactAPI from 'dashboard/api/contacts';
-
-import { mapGetters } from 'vuex';
 import { CONTACTS_EVENTS } from '../../helper/AnalyticsHelper/events';
 
-export default {
-  components: { MergeContact },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    primaryContact: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ['close', 'update:show'],
-  data() {
-    return {
-      isSearching: false,
-      searchResults: [],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'contacts/getUIFlags',
-    }),
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
+const props = defineProps({
+  primaryContact: {
+    type: Object,
+    required: true,
   },
+});
 
-  methods: {
-    onClose() {
-      this.$emit('close');
-    },
-    async onContactSearch(query) {
-      this.isSearching = true;
-      this.searchResults = [];
+const emit = defineEmits(['close']);
 
-      try {
-        const {
-          data: { payload },
-        } = await ContactAPI.search(query);
-        this.searchResults = payload.filter(
-          contact => contact.id !== this.primaryContact.id
-        );
-      } catch (error) {
-        useAlert(this.$t('MERGE_CONTACTS.SEARCH.ERROR_MESSAGE'));
-      } finally {
-        this.isSearching = false;
-      }
-    },
-    async onMergeContacts(parentContactId) {
-      useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
-      try {
-        await this.$store.dispatch('contacts/merge', {
-          childId: this.primaryContact.id,
-          parentId: parentContactId,
-        });
-        useAlert(this.$t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
-        this.onClose();
-      } catch (error) {
-        useAlert(this.$t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
-      }
-    },
-  },
+const { t } = useI18n();
+const store = useStore();
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const dialogRef = ref(null);
+const isSearching = ref(false);
+const searchResults = ref([]);
+
+watch(
+  () => props.primaryContact.id,
+  () => {
+    isSearching.value = false;
+    searchResults.value = [];
+  }
+);
+
+const open = () => {
+  dialogRef.value?.open();
+};
+
+const close = () => {
+  dialogRef.value?.close();
+};
+
+defineExpose({ open, close });
+
+const onClose = () => {
+  close();
+  emit('close');
+};
+
+const onContactSearch = async query => {
+  isSearching.value = true;
+  searchResults.value = [];
+
+  try {
+    const {
+      data: { payload },
+    } = await ContactAPI.search(query);
+    searchResults.value = payload.filter(
+      contact => contact.id !== props.primaryContact.id
+    );
+  } catch (error) {
+    useAlert(t('MERGE_CONTACTS.SEARCH.ERROR_MESSAGE'));
+  } finally {
+    isSearching.value = false;
+  }
+};
+
+const onMergeContacts = async parentContactId => {
+  useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
+  try {
+    await store.dispatch('contacts/merge', {
+      childId: props.primaryContact.id,
+      parentId: parentContactId,
+    });
+    useAlert(t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
+    close();
+    emit('close');
+  } catch (error) {
+    useAlert(t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
+  }
 };
 </script>
 
 <template>
-  <woot-modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('MERGE_CONTACTS.TITLE')"
-      :header-content="$t('MERGE_CONTACTS.DESCRIPTION')"
-    />
-
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    width="2xl"
+    :title="$t('MERGE_CONTACTS.TITLE')"
+    :description="$t('MERGE_CONTACTS.DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
     <MergeContact
+      :key="primaryContact.id"
       :primary-contact="primaryContact"
       :is-searching="isSearching"
       :is-merging="uiFlags.isMerging"
@@ -94,5 +104,5 @@ export default {
       @cancel="onClose"
       @submit="onMergeContacts"
     />
-  </woot-modal>
+  </Dialog>
 </template>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
deleted file mode 100644
index 29f38f11f..000000000
--- a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup>
-import Avatar from 'next/avatar/Avatar.vue';
-
-defineProps({
-  name: {
-    type: String,
-    default: '',
-  },
-  thumbnail: {
-    type: String,
-    default: '',
-  },
-  email: {
-    type: String,
-    default: '',
-  },
-  phoneNumber: {
-    type: String,
-    default: '',
-  },
-  identifier: {
-    type: [String, Number],
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div class="option-item--user">
-    <Avatar :src="thumbnail" :size="28" :name="name" rounded-full />
-    <div class="option__user-data">
-      <h5 class="option__title">
-        {{ name }}
-        <span v-if="identifier" class="user-identifier">
-          {{ $t('MERGE_CONTACTS.DROPDOWN_ITEM.ID', { identifier }) }}
-        </span>
-      </h5>
-      <p class="option__body">
-        <span v-if="email" class="email-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
-          {{ email }}
-        </span>
-        <span v-if="phoneNumber" class="phone-icon-wrap">
-          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
-          {{ phoneNumber }}
-        </span>
-        <span v-if="!phoneNumber && !email">{{ '---' }}</span>
-      </p>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.option-item--user {
-  @apply flex items-center;
-}
-.user-identifier {
-  @apply text-xs ml-0.5 text-n-slate-12;
-}
-.option__user-data {
-  @apply flex flex-col flex-grow ml-2 mr-2;
-}
-.option__body,
-.option__title {
-  @apply flex items-center justify-start leading-[1.2] text-sm;
-}
-.option__body .icon {
-  @apply relative top-px mr-0.5 rtl:mr-0 rtl:ml-0.5;
-}
-.option__title {
-  @apply text-n-slate-12 font-medium mb-0.5;
-}
-.option__body {
-  @apply text-xs text-n-slate-12 mt-1;
-}
-
-.option__user-data .option__body {
-  > .phone-icon-wrap,
-  > .email-icon-wrap {
-    @apply w-auto flex items-center;
-  }
-}
-
-.merge-contact--icon {
-  @apply -mb-0.5 mr-0.5;
-}
-</style>
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index 85fda4464..29dc6b62d 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -1,174 +1,105 @@
-<script>
+<script setup>
+import { ref, computed } from 'vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
 
 import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
-import ContactDropdownItem from './ContactDropdownItem.vue';
+import ContactMergeForm from 'dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  components: { MergeContactSummary, ContactDropdownItem, NextButton },
-  props: {
-    primaryContact: {
-      type: Object,
-      required: true,
-    },
-    isSearching: {
-      type: Boolean,
-      default: false,
-    },
-    isMerging: {
-      type: Boolean,
-      default: false,
-    },
-    searchResults: {
-      type: Array,
-      default: () => [],
-    },
+const props = defineProps({
+  primaryContact: {
+    type: Object,
+    required: true,
   },
-  emits: ['search', 'submit', 'cancel'],
-  setup() {
-    return { v$: useVuelidate() };
+  isSearching: {
+    type: Boolean,
+    default: false,
   },
-  validations: {
-    primaryContact: {
-      required,
-    },
-    parentContact: {
-      required,
-    },
+  isMerging: {
+    type: Boolean,
+    default: false,
   },
-  data() {
-    return {
-      parentContact: undefined,
-    };
+  searchResults: {
+    type: Array,
+    default: () => [],
   },
+});
 
-  computed: {
-    parentContactName() {
-      return this.parentContact ? this.parentContact.name : '';
+const emit = defineEmits(['search', 'submit', 'cancel']);
+
+const { t } = useI18n();
+
+const parentContactId = ref(null);
+
+const validationRules = {
+  parentContactId: { required },
+};
+
+const v$ = useVuelidate(validationRules, { parentContactId });
+
+const parentContact = computed(() => {
+  if (!parentContactId.value) return null;
+  return props.searchResults.find(
+    contact => contact.id === parentContactId.value
+  );
+});
+
+const parentContactName = computed(() => {
+  return parentContact.value ? parentContact.value.name : '';
+});
+
+const primaryContactList = computed(() => {
+  return props.searchResults.map(contact => ({
+    id: contact.id,
+    label: contact.name,
+    value: contact.id,
+    meta: {
+      thumbnail: contact.thumbnail,
+      email: contact.email,
+      phoneNumber: contact.phone_number,
     },
-  },
-  methods: {
-    searchChange(query) {
-      this.$emit('search', query);
-    },
-    onSubmit() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      this.$emit('submit', this.parentContact.id);
-    },
-    onCancel() {
-      this.$emit('cancel');
-    },
-  },
+  }));
+});
+
+const hasValidationError = computed(() => v$.value.parentContactId.$error);
+const validationErrorMessage = computed(() => {
+  if (v$.value.parentContactId.$error) {
+    return t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR');
+  }
+  return '';
+});
+
+const onSearch = query => {
+  emit('search', query);
+};
+
+const onSubmit = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    return;
+  }
+  emit('submit', parentContactId.value);
+};
+
+const onCancel = () => {
+  emit('cancel');
 };
 </script>
 
 <template>
   <form @submit.prevent="onSubmit">
-    <div>
-      <div>
-        <div
-          class="mt-1 multiselect-wrap--medium"
-          :class="{ error: v$.parentContact.$error }"
-        >
-          <label class="multiselect__label">
-            {{ $t('MERGE_CONTACTS.PARENT.TITLE') }}
-            <woot-label
-              :title="$t('MERGE_CONTACTS.PARENT.HELP_LABEL')"
-              color-scheme="success"
-              small
-              class="ml-2"
-            />
-          </label>
-          <multiselect
-            v-model="parentContact"
-            :options="searchResults"
-            label="name"
-            track-by="id"
-            :internal-search="false"
-            :clear-on-select="false"
-            :show-labels="false"
-            :placeholder="$t('MERGE_CONTACTS.PARENT.PLACEHOLDER')"
-            allow-empty
-            :loading="isSearching"
-            :max-height="150"
-            open-direction="top"
-            @search-change="searchChange"
-          >
-            <template #singleLabel="props">
-              <ContactDropdownItem
-                :thumbnail="props.option.thumbnail"
-                :identifier="props.option.id"
-                :name="props.option.name"
-                :email="props.option.email"
-                :phone-number="props.option.phone_number"
-              />
-            </template>
-            <template #option="props">
-              <ContactDropdownItem
-                :thumbnail="props.option.thumbnail"
-                :identifier="props.option.id"
-                :name="props.option.name"
-                :email="props.option.email"
-                :phone-number="props.option.phone_number"
-              />
-            </template>
-            <template #noResult>
-              <span>
-                {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
-              </span>
-            </template>
-          </multiselect>
-          <span v-if="v$.parentContact.$error" class="message">
-            {{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
-          </span>
-        </div>
-      </div>
-      <div class="flex multiselect-wrap--medium">
-        <div
-          class="w-8 relative text-base text-n-strong after:content-[''] after:h-12 after:w-0 ltr:after:left-4 rtl:after:right-4 after:absolute after:border-l after:border-solid after:border-n-strong before:content-[''] before:h-0 before:w-4 ltr:before:left-4 rtl:before:right-4 before:top-12 before:absolute before:border-b before:border-solid before:border-n-strong"
-        >
-          <fluent-icon
-            icon="arrow-up"
-            class="absolute -top-1 ltr:left-2 rtl:right-2"
-            size="17"
-          />
-        </div>
-        <div class="flex flex-col w-full ltr:pl-8 rtl:pr-8">
-          <label class="multiselect__label">
-            {{ $t('MERGE_CONTACTS.PRIMARY.TITLE') }}
-            <woot-label
-              :title="$t('MERGE_CONTACTS.PRIMARY.HELP_LABEL')"
-              color-scheme="alert"
-              small
-              class="ml-2"
-            />
-          </label>
-          <multiselect
-            :model-value="primaryContact"
-            disabled
-            :options="[]"
-            :show-labels="false"
-            label="name"
-            track-by="id"
-          >
-            <template #singleLabel="props">
-              <ContactDropdownItem
-                :thumbnail="props.option.thumbnail"
-                :name="props.option.name"
-                :identifier="props.option.id"
-                :email="props.option.email"
-                :phone-number="props.option.phoneNumber"
-              />
-            </template>
-          </multiselect>
-        </div>
-      </div>
-    </div>
+    <ContactMergeForm
+      :selected-contact="primaryContact"
+      :primary-contact-id="parentContactId"
+      :primary-contact-list="primaryContactList"
+      :is-searching="isSearching"
+      :has-error="hasValidationError"
+      :error-message="validationErrorMessage"
+      @update:primary-contact-id="parentContactId = $event"
+      @search="onSearch"
+    />
     <MergeContactSummary
       :primary-contact-name="primaryContact.name"
       :parent-contact-name="parentContactName"
@@ -189,32 +120,3 @@ export default {
     </div>
   </form>
 </template>
-
-<style lang="scss" scoped>
-/* TDOD: Clean errors in forms style */
-.error .message {
-  @apply mt-0;
-}
-
-::v-deep {
-  .multiselect {
-    @apply rounded-md;
-  }
-
-  .multiselect--disabled {
-    @apply border-0;
-
-    .multiselect__tags {
-      @apply border;
-    }
-  }
-
-  .multiselect__tags {
-    @apply h-auto;
-  }
-
-  .multiselect__select {
-    @apply mt-px mr-1;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 6298a3f2d..77d4b9773 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -11,11 +11,13 @@ import { isPhoneNumberValid } from 'shared/helpers/Validators';
 import parsePhoneNumber from 'libphonenumber-js';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'next/avatar/Avatar.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 
 export default {
   components: {
     NextButton,
     Avatar,
+    ComboBox,
   },
   props: {
     contact: {
@@ -133,6 +135,12 @@ export default {
       if (!name && !id) return '';
       return `${name} (${id})`;
     },
+    onCountryChange(value) {
+      const selected = this.countries.find(c => c.id === value);
+      this.country = selected
+        ? { id: selected.id, name: selected.name }
+        : { id: '', name: '' };
+    },
     setDialCode() {
       if (
         this.phoneNumber !== '' &&
@@ -363,26 +371,23 @@ export default {
       :label="$t('CONTACT_FORM.FORM.COMPANY_NAME.LABEL')"
       :placeholder="$t('CONTACT_FORM.FORM.COMPANY_NAME.PLACEHOLDER')"
     />
-    <div>
-      <div class="w-full">
-        <label>
-          {{ $t('CONTACT_FORM.FORM.COUNTRY.LABEL') }}
-        </label>
-        <multiselect
-          v-model="country"
-          track-by="id"
-          label="name"
-          :placeholder="$t('CONTACT_FORM.FORM.COUNTRY.PLACEHOLDER')"
-          selected-label
-          :select-label="$t('CONTACT_FORM.FORM.COUNTRY.SELECT_PLACEHOLDER')"
-          :deselect-label="$t('CONTACT_FORM.FORM.COUNTRY.REMOVE')"
-          :custom-label="countryNameWithCode"
-          :max-height="160"
-          :options="countries"
-          allow-empty
-          :option-height="104"
-        />
-      </div>
+    <div class="w-full mb-4">
+      <label>
+        {{ $t('CONTACT_FORM.FORM.COUNTRY.LABEL') }}
+      </label>
+      <ComboBox
+        :model-value="country.id"
+        :options="
+          countries.map(c => ({
+            value: c.id,
+            label: countryNameWithCode(c),
+          }))
+        "
+        class="[&>div>button]:!bg-n-alpha-black2"
+        :placeholder="$t('CONTACT_FORM.FORM.COUNTRY.PLACEHOLDER')"
+        :search-placeholder="$t('CONTACT_FORM.FORM.COUNTRY.SELECT_PLACEHOLDER')"
+        @update:model-value="onCountryChange"
+      />
     </div>
     <woot-input
       v-model="city"
@@ -426,11 +431,3 @@ export default {
     </div>
   </form>
 </template>
-
-<style scoped lang="scss">
-::v-deep {
-  .multiselect .multiselect__tags .multiselect__single {
-    @apply pl-0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index d1c43b3f2..7392bea78 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -51,7 +51,6 @@ export default {
   data() {
     return {
       showEditModal: false,
-      showMergeModal: false,
       showDeleteModal: false,
     };
   },
@@ -167,11 +166,8 @@ export default {
         );
       }
     },
-    closeMergeModal() {
-      this.showMergeModal = false;
-    },
     openMergeModal() {
-      this.showMergeModal = true;
+      this.$refs.mergeModal?.open();
     },
   },
 };
@@ -324,12 +320,7 @@ export default {
         :contact="contact"
         @cancel="toggleEditModal"
       />
-      <ContactMergeModal
-        v-if="showMergeModal"
-        :primary-contact="contact"
-        :show="showMergeModal"
-        @close="closeMergeModal"
-      />
+      <ContactMergeModal ref="mergeModal" :primary-contact="contact" />
     </div>
     <woot-delete-modal
       v-if="showDeleteModal"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index 006d5cdaf..9b097f6a1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -7,10 +7,12 @@ import { convertToAttributeSlug } from 'dashboard/helper/commons.js';
 import { ATTRIBUTE_MODELS, ATTRIBUTE_TYPES } from './constants';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 
 export default {
   components: {
     NextButton,
+    TagInput,
   },
   props: {
     onClose: {
@@ -41,9 +43,8 @@ export default {
       regexCue: null,
       regexEnabled: false,
       values: [],
-      options: [],
       show: true,
-      isTouched: false,
+      tagInputTouched: false,
     };
   },
 
@@ -63,21 +64,21 @@ export default {
         option: this.$t(`ATTRIBUTES_MGMT.ATTRIBUTE_TYPES.${item.key}`),
       }));
     },
-    isMultiselectInvalid() {
-      return this.isTouched && this.values.length === 0;
-    },
-    isTagInputInvalid() {
+    isTagInputEmpty() {
       return this.isAttributeTypeList && this.values.length === 0;
     },
+    isTagInputInvalid() {
+      return this.tagInputTouched && this.isTagInputEmpty;
+    },
     attributeListValues() {
-      return this.values.map(item => item.name);
+      return this.values;
     },
     isButtonDisabled() {
       return (
         this.v$.displayName.$invalid ||
         this.v$.description.$invalid ||
         this.uiFlags.isCreating ||
-        this.isTagInputInvalid
+        this.isTagInputEmpty
       );
     },
     keyErrorMessage() {
@@ -119,17 +120,14 @@ export default {
     },
   },
 
+  watch: {
+    attributeType() {
+      this.tagInputTouched = false;
+      this.values = [];
+    },
+  },
+
   methods: {
-    addTagValue(tagValue) {
-      const tag = {
-        name: tagValue,
-      };
-      this.values.push(tag);
-      this.$refs.tagInput.$el.focus();
-    },
-    onTouch() {
-      this.isTouched = true;
-    },
     onDisplayNameChange() {
       this.attributeKey = convertToAttributeSlug(this.displayName);
     },
@@ -237,27 +235,25 @@ export default {
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
             </span>
           </label>
-          <div v-if="isAttributeTypeList" class="multiselect--wrap">
-            <label>
+          <div v-if="isAttributeTypeList" class="mb-4">
+            <label class="mb-1 block">
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
             </label>
-            <multiselect
-              ref="tagInput"
-              v-model="values"
-              :placeholder="
-                $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
-              "
-              label="name"
-              track-by="name"
-              :class="{ invalid: isMultiselectInvalid }"
-              :options="options"
-              multiple
-              taggable
-              @close="onTouch"
-              @tag="addTagValue"
-            />
+            <div
+              class="rounded-xl border px-3 py-2"
+              :class="isTagInputInvalid ? 'border-n-ruby-9' : 'border-n-weak'"
+            >
+              <TagInput
+                v-model="values"
+                :placeholder="
+                  $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
+                "
+                allow-create
+                @blur="tagInputTouched = true"
+              />
+            </div>
             <label
-              v-show="isMultiselectInvalid"
+              v-show="isTagInputInvalid"
               class="text-n-ruby-9 dark:text-n-ruby-9 text-sm font-normal mt-1"
             >
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
@@ -312,22 +308,4 @@ export default {
   padding: 0 0.5rem 0.5rem 0;
   font-family: monospace;
 }
-
-.multiselect--wrap {
-  margin-bottom: 1rem;
-}
-
-::v-deep {
-  .multiselect {
-    margin-bottom: 0;
-  }
-
-  .multiselect__content-wrapper {
-    display: none;
-  }
-
-  .multiselect--active .multiselect__tags {
-    border-radius: 0.3125rem;
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
index a25be5b8b..35cba6a86 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -5,10 +5,12 @@ import { required, minLength } from '@vuelidate/validators';
 import { getRegexp } from 'shared/helpers/Validators';
 import { ATTRIBUTE_TYPES } from './constants';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 
 export default {
   components: {
     NextButton,
+    TagInput,
   },
   props: {
     selectedAttribute: {
@@ -35,8 +37,7 @@ export default {
       show: true,
       attributeKey: '',
       values: [],
-      options: [],
-      isTouched: true,
+      tagInputTouched: false,
     };
   },
   validations: {
@@ -65,20 +66,19 @@ export default {
       }));
     },
     setAttributeListValue() {
-      return this.selectedAttribute.attribute_values.map(values => ({
-        name: values,
-      }));
+      return this.selectedAttribute.attribute_values || [];
     },
     updatedAttributeListValues() {
-      return this.values.map(item => item.name);
+      return this.values;
     },
     isButtonDisabled() {
-      return this.v$.description.$invalid || this.isMultiselectInvalid;
+      return this.v$.description.$invalid || this.isTagInputEmpty;
     },
-    isMultiselectInvalid() {
-      return (
-        this.isAttributeTypeList && this.isTouched && this.values.length === 0
-      );
+    isTagInputEmpty() {
+      return this.isAttributeTypeList && this.values.length === 0;
+    },
+    isTagInputInvalid() {
+      return this.tagInputTouched && this.isTagInputEmpty;
     },
 
     pageTitle() {
@@ -116,13 +116,6 @@ export default {
     onClose() {
       this.$emit('onClose');
     },
-    addTagValue(tagValue) {
-      const tag = {
-        name: tagValue,
-      };
-      this.values.push(tag);
-      this.$refs.tagInput.$el.focus();
-    },
     setFormValues() {
       const regexPattern = this.selectedAttribute.regex_pattern
         ? getRegexp(this.selectedAttribute.regex_pattern).source
@@ -225,24 +218,25 @@ export default {
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
           </span>
         </label>
-        <div v-if="isAttributeTypeList" class="multiselect--wrap">
-          <label>
+        <div v-if="isAttributeTypeList" class="mb-4">
+          <label class="mb-1 block">
             {{ $t('ATTRIBUTES_MGMT.EDIT.TYPE.LIST.LABEL') }}
           </label>
-          <multiselect
-            ref="tagInput"
-            v-model="values"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')"
-            label="name"
-            track-by="name"
-            :class="{ invalid: isMultiselectInvalid }"
-            :options="options"
-            multiple
-            taggable
-            @tag="addTagValue"
-          />
+          <div
+            class="rounded-xl border px-3 py-2"
+            :class="isTagInputInvalid ? 'border-n-ruby-9' : 'border-n-weak'"
+          >
+            <TagInput
+              v-model="values"
+              :placeholder="
+                $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
+              "
+              allow-create
+              @blur="tagInputTouched = true"
+            />
+          </div>
           <label
-            v-show="isMultiselectInvalid"
+            v-show="isTagInputInvalid"
             class="text-n-ruby-9 dark:text-n-ruby-9 text-sm font-normal mt-1"
           >
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
@@ -297,22 +291,4 @@ export default {
   padding: 0 0.5rem 0.5rem 0;
   font-family: monospace;
 }
-
-.multiselect--wrap {
-  margin-bottom: 1rem;
-}
-
-::v-deep {
-  .multiselect {
-    margin-bottom: 0;
-  }
-
-  .multiselect__content-wrapper {
-    display: none;
-  }
-
-  .multiselect--active .multiselect__tags {
-    border-radius: 0.3125rem;
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index 1cd0e9069..472dfe08e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -1,21 +1,12 @@
-<script>
-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';
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useStore } from 'dashboard/composables/store';
 import { useAutomation } from 'dashboard/composables/useAutomation';
-import { validateAutomation } from 'dashboard/helper/validations';
-import {
-  generateAutomationPayload,
-  getAttributes,
-  getInputType,
-  getOperators,
-  getCustomAttributeType,
-  showActionInput,
-} from 'dashboard/helper/automationHelper';
-import { AUTOMATION_RULE_EVENTS, AUTOMATION_ACTION_TYPES } from './constants';
+import AutomationRuleForm from './AutomationRuleForm.vue';
 
-const start_value = {
+const emit = defineEmits(['saveAutomation']);
+
+const START_VALUE = {
   name: null,
   description: null,
   event_name: 'conversation_created',
@@ -36,318 +27,60 @@ const start_value = {
   ],
 };
 
-export default {
-  components: {
-    FilterInputBox,
-    AutomationActionInput,
-    NextButton,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  emits: ['saveAutomation'],
-  setup() {
-    const {
-      automation,
-      automationTypes,
-      onEventChange,
-      getConditionDropdownValues,
-      appendNewCondition,
-      appendNewAction,
-      removeFilter,
-      removeAction,
-      resetFilter,
-      resetAction,
-      getActionDropdownValues,
-      manifestCustomAttributes,
-    } = useAutomation(start_value);
-    return {
-      automation,
-      automationTypes,
-      onEventChange,
-      getConditionDropdownValues,
-      appendNewCondition,
-      appendNewAction,
-      removeFilter,
-      removeAction,
-      resetFilter,
-      resetAction,
-      getActionDropdownValues,
-      manifestCustomAttributes,
-    };
-  },
-  data() {
-    return {
-      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
-      automationMutated: false,
-      show: true,
-      showDeleteConfirmationModal: false,
-      allCustomAttributes: [],
-      mode: 'create',
-      errors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    automationRuleEvents() {
-      return AUTOMATION_RULE_EVENTS.map(event => ({
-        ...event,
-        value: this.$t(`AUTOMATION.EVENTS.${event.value}`),
-      }));
-    },
-    hasAutomationMutated() {
-      if (
-        this.automation.conditions[0].values ||
-        this.automation.actions[0].action_params.length
-      )
-        return true;
-      return false;
-    },
-    automationActionTypes() {
-      const actionTypes = this.isFeatureEnabled('sla')
-        ? AUTOMATION_ACTION_TYPES
-        : AUTOMATION_ACTION_TYPES.filter(({ key }) => key !== 'add_sla');
+const store = useStore();
+const formRef = ref(null);
 
-      return actionTypes.map(action => ({
-        ...action,
-        label: this.$t(`AUTOMATION.ACTIONS.${action.label}`),
-      }));
-    },
-  },
-  mounted() {
-    this.$store.dispatch('inboxes/get');
-    this.$store.dispatch('agents/get');
-    this.$store.dispatch('contacts/get');
-    this.$store.dispatch('teams/get');
-    this.$store.dispatch('labels/get');
-    this.$store.dispatch('campaigns/get');
-    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-    this.manifestCustomAttributes();
-  },
-  methods: {
-    getAttributes,
-    getInputType,
-    getOperators,
-    getCustomAttributeType,
-    showActionInput,
-    isFeatureEnabled(flag) {
-      return this.isFeatureEnabledonAccount(this.accountId, flag);
-    },
-    emitSaveAutomation() {
-      this.errors = validateAutomation(this.automation);
-      if (Object.keys(this.errors).length === 0) {
-        const automation = generateAutomationPayload(this.automation);
-        this.$emit('saveAutomation', automation, this.mode);
-      }
-    },
-    getTranslatedAttributes(type, event) {
-      return getAttributes(type, event).map(attribute => {
-        // Skip translation
-        // 1. If customAttributeType key is present then its rendering attributes from API
-        // 2. If contact_custom_attribute or conversation_custom_attribute is present then its rendering section title
-        const skipTranslation =
-          attribute.customAttributeType ||
-          [
-            'contact_custom_attribute',
-            'conversation_custom_attribute',
-          ].includes(attribute.key);
+const {
+  automation,
+  automationTypes,
+  onEventChange,
+  getConditionDropdownValues,
+  appendNewCondition,
+  appendNewAction,
+  removeFilter,
+  removeAction,
+  resetAction,
+  getActionDropdownValues,
+  manifestCustomAttributes,
+} = useAutomation(START_VALUE);
 
-        return {
-          ...attribute,
-          name: skipTranslation
-            ? attribute.name
-            : this.$t(`AUTOMATION.ATTRIBUTES.${attribute.name}`),
-        };
-      });
-    },
-  },
+const open = () => {
+  automation.value = structuredClone(START_VALUE);
+  manifestCustomAttributes();
+  formRef.value?.open();
 };
+const close = () => formRef.value?.close();
+
+const onSave = (payload, mode) => {
+  emit('saveAutomation', payload, mode);
+};
+
+onMounted(() => {
+  store.dispatch('inboxes/get');
+  store.dispatch('agents/get');
+  store.dispatch('contacts/get');
+  store.dispatch('teams/get');
+  store.dispatch('labels/get');
+  store.dispatch('campaigns/get');
+});
+
+defineExpose({ open, close });
 </script>
 
 <template>
-  <div>
-    <woot-modal-header :header-title="$t('AUTOMATION.ADD.TITLE')" />
-    <div class="flex flex-col modal-content">
-      <div class="w-full">
-        <woot-input
-          v-model="automation.name"
-          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
-          type="text"
-          :class="{ error: errors.name }"
-          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
-          :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
-        />
-        <woot-input
-          v-model="automation.description"
-          :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
-          type="text"
-          :class="{ error: errors.description }"
-          :error="
-            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
-          "
-          :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
-        />
-        <div class="mb-6">
-          <label :class="{ error: errors.event_name }">
-            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select
-              v-model="automation.event_name"
-              class="m-0"
-              @change="onEventChange(automation)"
-            >
-              <option
-                v-for="event in automationRuleEvents"
-                :key="event.key"
-                :value="event.key"
-              >
-                {{ event.value }}
-              </option>
-            </select>
-            <span v-if="errors.event_name" class="message">
-              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
-            </span>
-          </label>
-          <p
-            v-if="hasAutomationMutated"
-            class="text-xs text-right text-n-teal-10 pt-1"
-          >
-            {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
-          </p>
-        </div>
-        <!-- // Conditions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
-          >
-            <FilterInputBox
-              v-for="(condition, i) in automation.conditions"
-              :key="i"
-              v-model="automation.conditions[i]"
-              :filter-attributes="
-                getTranslatedAttributes(automationTypes, automation.event_name)
-              "
-              :input-type="
-                getInputType(
-                  allCustomAttributes,
-                  automationTypes,
-                  automation,
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :operators="
-                getOperators(
-                  allCustomAttributes,
-                  automationTypes,
-                  automation,
-                  mode,
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :dropdown-values="
-                getConditionDropdownValues(
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :show-query-operator="i !== automation.conditions.length - 1"
-              :custom-attribute-type="
-                getCustomAttributeType(
-                  automationTypes,
-                  automation,
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :error-message="
-                errors[`condition_${i}`]
-                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
-                  : ''
-              "
-              @reset-filter="resetFilter(i, automation.conditions[i])"
-              @remove-filter="removeFilter(i)"
-            />
-            <div class="mt-4">
-              <NextButton
-                icon="i-lucide-plus"
-                blue
-                faded
-                sm
-                :label="$t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL')"
-                @click="appendNewCondition"
-              />
-            </div>
-          </div>
-        </section>
-        <!-- // Conditions End -->
-        <!-- // Actions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
-          >
-            <AutomationActionInput
-              v-for="(action, i) in automation.actions"
-              :key="i"
-              v-model="automation.actions[i]"
-              :action-types="automationActionTypes"
-              :dropdown-values="
-                getActionDropdownValues(automation.actions[i].action_name)
-              "
-              :show-action-input="
-                showActionInput(
-                  automationActionTypes,
-                  automation.actions[i].action_name
-                )
-              "
-              :error-message="
-                errors[`action_${i}`]
-                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
-                  : ''
-              "
-              @reset-action="resetAction(i)"
-              @remove-action="removeAction(i)"
-            />
-            <div class="mt-4">
-              <NextButton
-                icon="i-lucide-plus"
-                blue
-                faded
-                sm
-                :label="$t('AUTOMATION.ADD.ACTION_BUTTON_LABEL')"
-                @click="appendNewAction"
-              />
-            </div>
-          </div>
-        </section>
-        <!-- // Actions End -->
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <NextButton
-              faded
-              slate
-              type="reset"
-              :label="$t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT')"
-              @click.prevent="onClose"
-            />
-            <NextButton
-              solid
-              blue
-              type="submit"
-              :label="$t('AUTOMATION.ADD.SUBMIT')"
-              @click="emitSaveAutomation"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <AutomationRuleForm
+    ref="formRef"
+    v-model:automation="automation"
+    mode="create"
+    :automation-types="automationTypes"
+    :get-condition-dropdown-values="getConditionDropdownValues"
+    :get-action-dropdown-values="getActionDropdownValues"
+    :append-new-condition="appendNewCondition"
+    :append-new-action="appendNewAction"
+    :remove-filter="removeFilter"
+    :remove-action="removeAction"
+    :reset-action="resetAction"
+    :on-event-change="onEventChange"
+    @save="onSave"
+  />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleForm.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleForm.vue
new file mode 100644
index 000000000..d78c40749
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleForm.vue
@@ -0,0 +1,414 @@
+<script setup>
+import { ref, computed, h, useTemplateRef, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useOperators } from 'dashboard/components-next/filter/operators';
+import ConditionRow from 'dashboard/components-next/filter/ConditionRow.vue';
+import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import {
+  generateAutomationPayload,
+  getAttributes,
+  getFileName,
+  showActionInput,
+} from 'dashboard/helper/automationHelper';
+import { validateAutomation } from 'dashboard/helper/validations';
+import { AUTOMATION_RULE_EVENTS, AUTOMATION_ACTION_TYPES } from './constants';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['create', 'edit'].includes(value),
+  },
+  automationTypes: {
+    type: Object,
+    required: true,
+  },
+  getConditionDropdownValues: {
+    type: Function,
+    required: true,
+  },
+  getActionDropdownValues: {
+    type: Function,
+    required: true,
+  },
+  appendNewCondition: {
+    type: Function,
+    required: true,
+  },
+  appendNewAction: {
+    type: Function,
+    required: true,
+  },
+  removeFilter: {
+    type: Function,
+    required: true,
+  },
+  removeAction: {
+    type: Function,
+    required: true,
+  },
+  resetAction: {
+    type: Function,
+    required: true,
+  },
+  onEventChange: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['save']);
+const automation = defineModel('automation', { type: Object, default: null });
+
+const INPUT_TYPE_MAP = {
+  multi_select: 'multiSelect',
+  search_select: 'searchSelect',
+  plain_text: 'plainText',
+  comma_separated_plain_text: 'plainText',
+  date: 'date',
+};
+
+const { t } = useI18n();
+const { isCloudFeatureEnabled } = useAccount();
+const { operators } = useOperators();
+
+const dialogRef = ref(null);
+const conditionsRef = useTemplateRef('conditionsRef');
+const errors = ref({});
+
+const isEditMode = computed(() => props.mode === 'edit');
+
+const titleKey = computed(() =>
+  isEditMode.value ? 'AUTOMATION.EDIT.TITLE' : 'AUTOMATION.ADD.TITLE'
+);
+const cancelKey = computed(() =>
+  isEditMode.value
+    ? 'AUTOMATION.EDIT.CANCEL_BUTTON_TEXT'
+    : 'AUTOMATION.ADD.CANCEL_BUTTON_TEXT'
+);
+const submitKey = computed(() =>
+  isEditMode.value ? 'AUTOMATION.EDIT.SUBMIT' : 'AUTOMATION.ADD.SUBMIT'
+);
+
+const getTranslatedAttributes = (type, event) => {
+  return getAttributes(type, event).map(attribute => {
+    const skipTranslation =
+      attribute.customAttributeType ||
+      ['contact_custom_attribute', 'conversation_custom_attribute'].includes(
+        attribute.key
+      );
+    return {
+      ...attribute,
+      name: skipTranslation
+        ? attribute.name
+        : t(`AUTOMATION.ATTRIBUTES.${attribute.name}`),
+    };
+  });
+};
+
+const eventName = computed(() => automation.value?.event_name);
+
+const filterTypes = computed(() => {
+  const event = eventName.value;
+  if (!event || !props.automationTypes[event]) return [];
+
+  const attributes = getTranslatedAttributes(props.automationTypes, event);
+
+  return attributes.map(attr => {
+    if (attr.disabled) {
+      return { value: attr.key, label: attr.name, disabled: true };
+    }
+
+    const mappedInputType = INPUT_TYPE_MAP[attr.inputType] || 'plainText';
+    const options = props.getConditionDropdownValues(attr.key) || [];
+
+    const filterOperators = (attr.filterOperators || []).map(op => {
+      const enriched = operators.value[op.value];
+      if (enriched) return enriched;
+      return {
+        value: op.value,
+        label: t(`FILTER.OPERATOR_LABELS.${op.value}`),
+        hasInput: true,
+        inputOverride: null,
+        icon: h('span', { class: 'i-ph-equals-bold !text-n-blue-11' }),
+      };
+    });
+
+    return {
+      attributeKey: attr.key,
+      value: attr.key,
+      attributeName: attr.name,
+      label: attr.name,
+      inputType: mappedInputType,
+      options,
+      filterOperators,
+      dataType: 'text',
+      attributeModel: attr.customAttributeType || 'standard',
+    };
+  });
+});
+
+const automationRuleEvents = computed(() =>
+  AUTOMATION_RULE_EVENTS.map(event => ({
+    ...event,
+    value: t(`AUTOMATION.EVENTS.${event.value}`),
+  }))
+);
+
+const hasAutomationMutated = computed(() => {
+  return Boolean(
+    automation.value?.conditions[0]?.values ||
+      automation.value?.actions[0]?.action_params?.length
+  );
+});
+
+const automationActionTypes = computed(() => {
+  const actionTypes = isCloudFeatureEnabled('sla')
+    ? AUTOMATION_ACTION_TYPES
+    : AUTOMATION_ACTION_TYPES.filter(({ key }) => key !== 'add_sla');
+
+  return actionTypes.map(action => ({
+    ...action,
+    label: t(`AUTOMATION.ACTIONS.${action.label}`),
+  }));
+});
+
+const hasConditionErrors = computed(() =>
+  Object.keys(errors.value).some(key => key.startsWith('condition_'))
+);
+
+const hasActionErrors = computed(() =>
+  Object.keys(errors.value).some(key => key.startsWith('action_'))
+);
+
+watch(
+  () => automation.value,
+  () => {
+    if (Object.keys(errors.value).length) {
+      errors.value = {};
+    }
+  },
+  { deep: true }
+);
+
+const isConditionsValid = () => {
+  if (!conditionsRef.value) return true;
+  return conditionsRef.value.every(condition => condition.validate());
+};
+
+const resetValidation = () => {
+  errors.value = {};
+  conditionsRef.value?.forEach(c => c.resetValidation());
+};
+
+const syncCustomAttributeTypes = () => {
+  automation.value.conditions.forEach(condition => {
+    const filterType = filterTypes.value.find(
+      ft => ft.attributeKey === condition.attribute_key
+    );
+    condition.custom_attribute_type =
+      filterType?.attributeModel === 'standard'
+        ? ''
+        : filterType?.attributeModel || '';
+  });
+};
+
+const open = () => {
+  resetValidation();
+  dialogRef.value?.open();
+};
+
+const close = () => {
+  resetValidation();
+  dialogRef.value?.close();
+};
+
+const emitSaveAutomation = () => {
+  syncCustomAttributeTypes();
+  const conditionsValid = isConditionsValid();
+  errors.value = validateAutomation(automation.value);
+  if (Object.keys(errors.value).length === 0 && conditionsValid) {
+    const payload = generateAutomationPayload(automation.value);
+    emit('save', payload, props.mode);
+  }
+};
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    width="3xl"
+    position="top"
+    :title="$t(titleKey)"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+    overflow-y-auto
+  >
+    <div v-if="automation" class="flex flex-col w-full">
+      <woot-input
+        v-model="automation.name"
+        :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
+        type="text"
+        :class="{ error: errors.name }"
+        :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
+        :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
+      />
+      <woot-input
+        v-model="automation.description"
+        :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
+        type="text"
+        :class="{ error: errors.description }"
+        :error="errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''"
+        :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
+      />
+      <div class="mb-6">
+        <label :class="{ error: errors.event_name }">
+          {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
+          <select
+            v-model="automation.event_name"
+            class="m-0"
+            @change="onEventChange()"
+          >
+            <option
+              v-for="event in automationRuleEvents"
+              :key="event.key"
+              :value="event.key"
+            >
+              {{ event.value }}
+            </option>
+          </select>
+          <span v-if="errors.event_name" class="message">
+            {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
+          </span>
+        </label>
+        <p
+          v-if="!isEditMode && hasAutomationMutated"
+          class="text-xs text-right text-n-teal-10 pt-1"
+        >
+          {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
+        </p>
+      </div>
+      <!-- Conditions Start -->
+      <section class="mb-5">
+        <label>
+          {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
+        </label>
+        <ul
+          class="grid gap-4 list-none p-3 mb-4 outline outline-1 rounded-xl -outline-offset-1"
+          :class="
+            hasConditionErrors
+              ? 'outline-n-ruby-5 bg-n-ruby-2/50'
+              : 'outline-n-weak dark:outline-n-strong'
+          "
+        >
+          <template v-for="(condition, i) in automation.conditions" :key="i">
+            <ConditionRow
+              v-if="i === 0"
+              ref="conditionsRef"
+              v-model:attribute-key="automation.conditions[i].attribute_key"
+              v-model:filter-operator="automation.conditions[i].filter_operator"
+              v-model:values="automation.conditions[i].values"
+              :filter-types="filterTypes"
+              :show-query-operator="false"
+              @remove="removeFilter(i)"
+            />
+            <ConditionRow
+              v-else
+              ref="conditionsRef"
+              v-model:attribute-key="automation.conditions[i].attribute_key"
+              v-model:filter-operator="automation.conditions[i].filter_operator"
+              v-model:query-operator="
+                automation.conditions[i - 1].query_operator
+              "
+              v-model:values="automation.conditions[i].values"
+              :filter-types="filterTypes"
+              show-query-operator
+              @remove="removeFilter(i)"
+            />
+          </template>
+          <div>
+            <NextButton
+              icon="i-lucide-plus"
+              blue
+              faded
+              sm
+              :label="$t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL')"
+              @click="appendNewCondition"
+            />
+          </div>
+        </ul>
+      </section>
+      <!-- Conditions End -->
+      <!-- Actions Start -->
+      <section>
+        <label>
+          {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
+        </label>
+        <ul
+          class="grid list-none p-3 mb-4 outline outline-1 rounded-xl -outline-offset-1 border-solid"
+          :class="
+            hasActionErrors
+              ? 'outline-n-ruby-5 bg-n-ruby-2/50'
+              : 'outline-n-weak dark:outline-n-strong'
+          "
+        >
+          <AutomationActionInput
+            v-for="(action, i) in automation.actions"
+            :key="i"
+            v-model="automation.actions[i]"
+            :action-types="automationActionTypes"
+            dropdown-max-height="max-h-[7.5rem]"
+            :dropdown-values="getActionDropdownValues(action.action_name)"
+            :show-action-input="
+              showActionInput(automationActionTypes, action.action_name)
+            "
+            :error-message="
+              errors[`action_${i}`]
+                ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
+                : ''
+            "
+            :initial-file-name="
+              isEditMode ? getFileName(action, automation.files) : ''
+            "
+            @reset-action="resetAction(i)"
+            @remove-action="removeAction(i)"
+          />
+          <div class="pt-2">
+            <NextButton
+              icon="i-lucide-plus"
+              blue
+              faded
+              sm
+              :label="$t('AUTOMATION.ADD.ACTION_BUTTON_LABEL')"
+              @click="appendNewAction"
+            />
+          </div>
+        </ul>
+      </section>
+      <!-- Actions End -->
+      <div class="w-full mt-8">
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-4">
+          <NextButton
+            faded
+            slate
+            type="reset"
+            :label="$t(cancelKey)"
+            @click.prevent="close"
+          />
+          <NextButton
+            solid
+            blue
+            type="submit"
+            :label="$t(submitKey)"
+            @click="emitSaveAutomation"
+          />
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index aac65302b..864497f32 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -1,345 +1,80 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, watch } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useAutomation } from 'dashboard/composables/useAutomation';
 import { useEditableAutomation } from 'dashboard/composables/useEditableAutomation';
-import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
-import {
-  getFileName,
-  generateAutomationPayload,
-  getAttributes,
-  getInputType,
-  getOperators,
-  getCustomAttributeType,
-  showActionInput,
-} from 'dashboard/helper/automationHelper';
-import { validateAutomation } from 'dashboard/helper/validations';
+import AutomationRuleForm from './AutomationRuleForm.vue';
+import { AUTOMATION_ACTION_TYPES } from './constants';
 
-import { AUTOMATION_RULE_EVENTS, AUTOMATION_ACTION_TYPES } from './constants';
+const props = defineProps({
+  selectedResponse: {
+    type: Object,
+    default: () => ({}),
+  },
+});
 
-export default {
-  components: {
-    FilterInputBox,
-    NextButton,
-    AutomationActionInput,
-  },
-  props: {
-    onClose: {
-      type: Function,
-      default: () => {},
-    },
-    selectedResponse: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: ['saveAutomation'],
-  setup() {
-    const {
-      automation,
+const emit = defineEmits(['saveAutomation']);
+
+const allCustomAttributes = useMapGetter('attributes/getAttributes');
+const formRef = ref(null);
+
+const {
+  automation,
+  automationTypes,
+  onEventChange,
+  getConditionDropdownValues,
+  appendNewCondition,
+  appendNewAction,
+  removeFilter,
+  removeAction,
+  resetAction,
+  getActionDropdownValues,
+  manifestCustomAttributes,
+} = useAutomation();
+
+const { formatAutomation } = useEditableAutomation();
+
+const open = () => formRef.value?.open();
+const close = () => formRef.value?.close();
+
+const onSave = (payload, mode) => {
+  emit('saveAutomation', payload, mode);
+};
+
+watch(
+  () => props.selectedResponse,
+  value => {
+    if (!value?.conditions) return;
+
+    manifestCustomAttributes();
+
+    automation.value = formatAutomation(
+      value,
+      allCustomAttributes.value,
       automationTypes,
-      onEventChange,
-      getConditionDropdownValues,
-      appendNewCondition,
-      appendNewAction,
-      removeFilter,
-      removeAction,
-      resetFilter,
-      resetAction,
-      getActionDropdownValues,
-      manifestCustomAttributes,
-    } = useAutomation();
-    const { formatAutomation } = useEditableAutomation();
-    return {
-      automation,
-      automationTypes,
-      onEventChange,
-      getConditionDropdownValues,
-      appendNewCondition,
-      appendNewAction,
-      removeFilter,
-      removeAction,
-      resetFilter,
-      resetAction,
-      getActionDropdownValues,
-      formatAutomation,
-      manifestCustomAttributes,
-    };
-  },
-  data() {
-    return {
-      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
-      automationMutated: false,
-      show: true,
-      showDeleteConfirmationModal: false,
-      allCustomAttributes: [],
-      mode: 'edit',
-      errors: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    automationRuleEvents() {
-      return AUTOMATION_RULE_EVENTS.map(event => ({
-        ...event,
-        value: this.$t(`AUTOMATION.EVENTS.${event.value}`),
-      }));
-    },
-    hasAutomationMutated() {
-      if (
-        this.automation.conditions[0].values ||
-        this.automation.actions[0].action_params.length
-      )
-        return true;
-      return false;
-    },
-    automationActionTypes() {
-      const actionTypes = this.isFeatureEnabled('sla')
-        ? AUTOMATION_ACTION_TYPES
-        : AUTOMATION_ACTION_TYPES.filter(({ key }) => key !== 'add_sla');
-
-      return actionTypes.map(action => ({
-        ...action,
-        label: this.$t(`AUTOMATION.ACTIONS.${action.label}`),
-      }));
-    },
-  },
-  mounted() {
-    this.manifestCustomAttributes();
-    this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
-
-    this.automation = this.formatAutomation(
-      this.selectedResponse,
-      this.allCustomAttributes,
-      this.automationTypes,
-      this.automationActionTypes
+      AUTOMATION_ACTION_TYPES
     );
   },
-  methods: {
-    getFileName,
-    getAttributes,
-    getInputType,
-    getOperators,
-    getCustomAttributeType,
-    showActionInput,
-    isFeatureEnabled(flag) {
-      return this.isFeatureEnabledonAccount(this.accountId, flag);
-    },
-    emitSaveAutomation() {
-      this.errors = validateAutomation(this.automation);
-      if (Object.keys(this.errors).length === 0) {
-        const automation = generateAutomationPayload(this.automation);
-        this.$emit('saveAutomation', automation, this.mode);
-      }
-    },
-    getTranslatedAttributes(type, event) {
-      return getAttributes(type, event).map(attribute => {
-        // Skip translation
-        // 1. If customAttributeType key is present then its rendering attributes from API
-        // 2. If contact_custom_attribute or conversation_custom_attribute is present then its rendering section title
-        const skipTranslation =
-          attribute.customAttributeType ||
-          [
-            'contact_custom_attribute',
-            'conversation_custom_attribute',
-          ].includes(attribute.key);
+  { immediate: true }
+);
 
-        return {
-          ...attribute,
-          name: skipTranslation
-            ? attribute.name
-            : this.$t(`AUTOMATION.ATTRIBUTES.${attribute.name}`),
-        };
-      });
-    },
-  },
-};
+defineExpose({ open, close });
 </script>
 
 <template>
-  <div>
-    <woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
-    <div class="flex flex-col modal-content">
-      <div v-if="automation" class="w-full">
-        <woot-input
-          v-model="automation.name"
-          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
-          type="text"
-          :class="{ error: errors.name }"
-          :error="errors.name ? $t('AUTOMATION.ADD.FORM.NAME.ERROR') : ''"
-          :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
-        />
-        <woot-input
-          v-model="automation.description"
-          :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
-          type="text"
-          :class="{ error: errors.description }"
-          :error="
-            errors.description ? $t('AUTOMATION.ADD.FORM.DESC.ERROR') : ''
-          "
-          :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
-        />
-        <div class="event_wrapper">
-          <label :class="{ error: errors.event_name }">
-            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
-            <select
-              v-model="automation.event_name"
-              @change="onEventChange(automation)"
-            >
-              <option
-                v-for="event in automationRuleEvents"
-                :key="event.key"
-                :value="event.key"
-              >
-                {{ event.value }}
-              </option>
-            </select>
-            <span v-if="errors.event_name" class="message">
-              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
-            </span>
-          </label>
-        </div>
-        <!-- // Conditions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
-          >
-            <FilterInputBox
-              v-for="(condition, i) in automation.conditions"
-              :key="i"
-              v-model="automation.conditions[i]"
-              :filter-attributes="
-                getTranslatedAttributes(automationTypes, automation.event_name)
-              "
-              :input-type="
-                getInputType(
-                  allCustomAttributes,
-                  automationTypes,
-                  automation,
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :operators="
-                getOperators(
-                  allCustomAttributes,
-                  automationTypes,
-                  automation,
-                  mode,
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :dropdown-values="
-                getConditionDropdownValues(
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :custom-attribute-type="
-                getCustomAttributeType(
-                  automationTypes,
-                  automation,
-                  automation.conditions[i].attribute_key
-                )
-              "
-              :show-query-operator="i !== automation.conditions.length - 1"
-              :error-message="
-                errors[`condition_${i}`]
-                  ? $t(`AUTOMATION.ERRORS.${errors[`condition_${i}`]}`)
-                  : ''
-              "
-              @reset-filter="resetFilter(i, automation.conditions[i])"
-              @remove-filter="removeFilter(i)"
-            />
-            <div class="mt-4">
-              <NextButton
-                icon="i-lucide-plus"
-                blue
-                faded
-                sm
-                :label="$t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL')"
-                @click="appendNewCondition"
-              />
-            </div>
-          </div>
-        </section>
-        <!-- // Conditions End -->
-        <!-- // Actions Start -->
-        <section>
-          <label>
-            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
-          </label>
-          <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
-          >
-            <AutomationActionInput
-              v-for="(action, i) in automation.actions"
-              :key="i"
-              v-model="automation.actions[i]"
-              :action-types="automationActionTypes"
-              :dropdown-values="getActionDropdownValues(action.action_name)"
-              :show-action-input="
-                showActionInput(automationActionTypes, action.action_name)
-              "
-              :error-message="
-                errors[`action_${i}`]
-                  ? $t(`AUTOMATION.ERRORS.${errors[`action_${i}`]}`)
-                  : ''
-              "
-              :initial-file-name="getFileName(action, automation.files)"
-              @reset-action="resetAction(i)"
-              @remove-action="removeAction(i)"
-            />
-            <div class="mt-4">
-              <NextButton
-                icon="i-lucide-plus"
-                blue
-                faded
-                sm
-                :label="$t('AUTOMATION.ADD.ACTION_BUTTON_LABEL')"
-                @click="appendNewAction"
-              />
-            </div>
-          </div>
-        </section>
-        <!-- // Actions End -->
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <NextButton
-              faded
-              slate
-              type="reset"
-              :label="$t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT')"
-              @click.prevent="onClose"
-            />
-            <NextButton
-              solid
-              blue
-              type="submit"
-              :label="$t('AUTOMATION.EDIT.SUBMIT')"
-              @click="emitSaveAutomation"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <AutomationRuleForm
+    ref="formRef"
+    v-model:automation="automation"
+    mode="edit"
+    :automation-types="automationTypes"
+    :get-condition-dropdown-values="getConditionDropdownValues"
+    :get-action-dropdown-values="getActionDropdownValues"
+    :append-new-condition="appendNewCondition"
+    :append-new-action="appendNewAction"
+    :remove-filter="removeFilter"
+    :remove-action="removeAction"
+    :reset-action="resetAction"
+    :on-event-change="onEventChange"
+    @save="onSave"
+  />
 </template>
-
-<style lang="scss" scoped>
-.event_wrapper {
-  select {
-    @apply m-0;
-  }
-  .info-message {
-    @apply text-xs text-n-teal-10  text-right;
-  }
-
-  @apply mb-6;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 3d0e82d88..835a1d482 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -16,8 +16,8 @@ const { t } = useI18n();
 const confirmDialog = ref(null);
 
 const loading = ref({});
-const showAddPopup = ref(false);
-const showEditPopup = ref(false);
+const addDialogRef = ref(null);
+const editDialogRef = ref(null);
 const showDeleteConfirmationPopup = ref(false);
 const selectedAutomation = ref({});
 const toggleModalTitle = ref(t('AUTOMATION.TOGGLE.ACTIVATION_TITLE'));
@@ -57,18 +57,18 @@ onMounted(() => {
 });
 
 const openAddPopup = () => {
-  showAddPopup.value = true;
+  addDialogRef.value?.open();
 };
 const hideAddPopup = () => {
-  showAddPopup.value = false;
+  addDialogRef.value?.close();
 };
 
 const openEditPopup = response => {
-  selectedAutomation.value = response;
-  showEditPopup.value = true;
+  selectedAutomation.value = { ...response };
+  editDialogRef.value?.open();
 };
 const hideEditPopup = () => {
-  showEditPopup.value = false;
+  editDialogRef.value?.close();
 };
 
 const openDeletePopup = response => {
@@ -221,17 +221,7 @@ const tableHeaders = computed(() => {
       </table>
     </template>
 
-    <woot-modal
-      v-model:show="showAddPopup"
-      size="medium"
-      :on-close="hideAddPopup"
-    >
-      <AddAutomationRule
-        v-if="showAddPopup"
-        :on-close="hideAddPopup"
-        @save-automation="submitAutomation"
-      />
-    </woot-modal>
+    <AddAutomationRule ref="addDialogRef" @save-automation="submitAutomation" />
 
     <woot-delete-modal
       v-model:show="showDeleteConfirmationPopup"
@@ -244,18 +234,11 @@ const tableHeaders = computed(() => {
       :reject-text="deleteRejectText"
     />
 
-    <woot-modal
-      v-model:show="showEditPopup"
-      size="medium"
-      :on-close="hideEditPopup"
-    >
-      <EditAutomationRule
-        v-if="showEditPopup"
-        :on-close="hideEditPopup"
-        :selected-response="selectedAutomation"
-        @save-automation="submitAutomation"
-      />
-    </woot-modal>
+    <EditAutomationRule
+      ref="editDialogRef"
+      :selected-response="selectedAutomation"
+      @save-automation="submitAutomation"
+    />
     <woot-confirm-modal
       ref="confirmDialog"
       :title="toggleModalTitle"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
index c05c6724b..8be54e19b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -5,6 +5,7 @@ import { useAlert } from 'dashboard/composables';
 
 import InboxMembersAPI from '../../../../api/inboxMembers';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -13,11 +14,12 @@ export default {
   components: {
     PageHeader,
     NextButton,
+    TagInput,
   },
   validations: {
-    selectedAgents: {
+    selectedAgentIds: {
       isEmpty() {
-        return !!this.selectedAgents.length;
+        return !!this.selectedAgentIds.length;
       },
     },
   },
@@ -26,7 +28,7 @@ export default {
   },
   data() {
     return {
-      selectedAgents: [],
+      selectedAgentIds: [],
       isCreating: false,
     };
   },
@@ -34,18 +36,43 @@ export default {
     ...mapGetters({
       agentList: 'agents/getAgents',
     }),
+    selectedAgentNames() {
+      return this.selectedAgentIds.map(
+        id => this.agentList.find(a => a.id === id)?.name ?? ''
+      );
+    },
+    agentMenuItems() {
+      return this.agentList
+        .filter(({ id }) => !this.selectedAgentIds.includes(id))
+        .map(({ id, name, thumbnail, avatar_url }) => ({
+          label: name,
+          value: id,
+          action: 'select',
+          thumbnail: { name, src: thumbnail || avatar_url || '' },
+        }));
+    },
   },
   mounted() {
     this.$store.dispatch('agents/get');
   },
   methods: {
+    handleAgentAdd({ value }) {
+      if (!this.selectedAgentIds.includes(value)) {
+        this.selectedAgentIds.push(value);
+      }
+    },
+    handleAgentRemove(index) {
+      this.selectedAgentIds.splice(index, 1);
+    },
     async addAgents() {
       this.isCreating = true;
       const inboxId = this.$route.params.inbox_id;
-      const selectedAgents = this.selectedAgents.map(x => x.id);
 
       try {
-        await InboxMembersAPI.update({ inboxId, agentList: selectedAgents });
+        await InboxMembersAPI.update({
+          inboxId,
+          agentList: this.selectedAgentIds,
+        });
         router.replace({
           name: 'settings_inbox_finish',
           params: {
@@ -72,25 +99,23 @@ export default {
         />
       </div>
       <div>
-        <div class="w-full">
-          <label :class="{ error: v$.selectedAgents.$error }">
+        <div class="w-full mb-4">
+          <label :class="{ error: v$.selectedAgentIds.$error }">
             {{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
-            <multiselect
-              v-model="selectedAgents"
-              :options="agentList"
-              track-by="id"
-              label="name"
-              multiple
-              :close-on-select="false"
-              :clear-on-select="false"
-              hide-selected
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-              :placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
-              @select="v$.selectedAgents.$touch"
-            />
-            <span v-if="v$.selectedAgents.$error" class="message">
+            <div
+              class="rounded-xl outline outline-1 -outline-offset-1 outline-n-weak hover:outline-n-strong px-2 py-2"
+            >
+              <TagInput
+                :model-value="selectedAgentNames"
+                :placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
+                :menu-items="agentMenuItems"
+                show-dropdown
+                skip-label-dedup
+                @add="handleAgentAdd"
+                @remove="handleAgentRemove"
+              />
+            </div>
+            <span v-if="v$.selectedAgentIds.$error" class="message">
               {{ $t('INBOX_MGMT.ADD.AGENTS.VALIDATION_ERROR') }}
             </span>
           </label>
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 db1928ea8..39e0df818 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -12,6 +12,7 @@ import PageHeader from '../../SettingsSubPageHeader.vue';
 import router from '../../../../index';
 import { useBranding } from 'shared/composables/useBranding';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 
 import { loadScript } from 'dashboard/helper/DOMHelpers';
 import * as Sentry from '@sentry/vue';
@@ -21,6 +22,7 @@ export default {
     LoadingState,
     PageHeader,
     NextButton,
+    ComboBox,
   },
   setup() {
     const { accountId } = useAccount();
@@ -67,6 +69,12 @@ export default {
     getSelectablePages() {
       return this.pageList.filter(item => !item.exists);
     },
+    comboBoxPageOptions() {
+      return this.getSelectablePages.map(({ id, name }) => ({
+        value: id,
+        label: name,
+      }));
+    },
   },
 
   mounted() {
@@ -94,9 +102,16 @@ export default {
       }
     },
 
-    setPageName({ name }) {
+    setPageName(pageId) {
+      const page = this.pageList.find(p => p.id === pageId);
+      if (page) {
+        this.selectedPage = page;
+        this.pageName = page.name;
+      } else {
+        this.selectedPage = { name: null, id: null };
+        this.pageName = '';
+      }
       this.v$.selectedPage.$touch();
-      this.pageName = name;
     },
 
     initChannelAuth(channel) {
@@ -245,23 +260,20 @@ export default {
           />
         </div>
         <div class="w-3/5">
-          <div class="w-full">
+          <div class="w-full mb-2">
             <div class="input-wrap" :class="{ error: v$.selectedPage.$error }">
-              {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
-              <multiselect
-                v-model="selectedPage"
-                close-on-select
-                allow-empty
-                :options="getSelectablePages"
-                track-by="id"
-                label="name"
-                :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-                :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+              <span class="text-n-slate-12 text-start">
+                {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
+              </span>
+              <ComboBox
+                :model-value="selectedPage.id"
+                :options="comboBoxPageOptions"
                 :placeholder="$t('INBOX_MGMT.ADD.FB.PICK_A_VALUE')"
-                selected-label
-                @select="setPageName"
+                :has-error="v$.selectedPage.$error"
+                class="[&>div>button]:!bg-n-alpha-black2 mt-1"
+                @update:model-value="setPageName"
               />
-              <span v-if="v$.selectedPage.$error" class="message">
+              <span v-if="v$.selectedPage.$error" class="message mt-0.5">
                 {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PLACEHOLDER') }}
               </span>
             </div>

From e75e8a77f6ef6bdcc61e6847ed8157395f801bbc Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Tue, 17 Feb 2026 16:52:13 +0530
Subject: [PATCH 02/26] feat(shopify): Add mandatory compliance webhooks with
 HMAC verification (#13549)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes
https://linear.app/chatwoot/issue/CW-6494/add-shopify-mandatory-compliance-webhooks-for-app-store-listing

Shopify requires all public apps to handle three GDPR compliance
webhooks before they can be listed on the App Store. Their automated
review checks for these endpoints and verifies that apps validate HMAC
signatures on incoming requests. We were failing both checks.

This PR adds a single webhook endpoint at `POST /webhooks/shopify` that
receives all three compliance events. When Shopify sends a webhook, it
signs the payload with our app's client secret and includes the
signature in the `X-Shopify-Hmac-SHA256` header. Our controller reads
the raw body, computes the expected HMAC-SHA256 digest, and rejects
mismatched requests with a 401.

Shopify identifies the event type through the `X-Shopify-Topic` header.
For `customers/data_request` and `customers/redact`, we simply
acknowledge with a 200—Chatwoot doesn't persist any Shopify customer
data. All order lookups happen as live API calls at query time. For
`shop/redact`, which Shopify sends after a merchant uninstalls the app,
we delete the integration hook for that shop domain and remove the
stored access token and configuration.


### How to test via Rails console
```
secret = GlobalConfigService.load('SHOPIFY_CLIENT_SECRET', nil)
body = '{"shop_domain":"test.myshopify.com"}'
valid_hmac = Base64.strict_encode64(OpenSSL::HMAC.digest('SHA256', secret, body))
```

  #### Test 1: No HMAC → 401
```
app.post '/webhooks/shopify', params: body, headers: { 'Content-Type' => 'application/json', 'X-Shopify-Topic' => 'customers/data_request' }
app.response.code  # => "401"
```
  ####  Test 2: Invalid HMAC → 401
```
app.post '/webhooks/shopify', params: body, headers: { 'Content-Type' => 'application/json', 'X-Shopify-Hmac-SHA256' => 'invalid', 'X-Shopify-Topic' => 'customers/data_request' }
app.response.code  # => "401"
```
  ####  Test 3: Valid HMAC, customers/data_request → 200
```
app.post '/webhooks/shopify', params: body, headers: { 'Content-Type' => 'application/json', 'X-Shopify-Hmac-SHA256' => valid_hmac, 'X-Shopify-Topic' => 'customers/data_request' }
app.response.code  # => "200"
```

####  Test 4: Valid HMAC, customers/redact → 200
```
app.post '/webhooks/shopify', params: body, headers: { 'Content-Type' => 'application/json', 'X-Shopify-Hmac-SHA256' => valid_hmac, 'X-Shopify-Topic' => 'customers/redact' }
app.response.code  # => "200"
```

#### Test 5: Valid HMAC, shop/redact → 200 (deletes hook)
```
# First check if a hook exists for this domain:
Integrations::Hook.where(app_id: 'shopify', reference_id: 'test.myshopify.com').count
app.post '/webhooks/shopify', params: body, headers: { 'Content-Type' => 'application/json', 'X-Shopify-Hmac-SHA256' => valid_hmac, 'X-Shopify-Topic' => 'shop/redact' }
app.response.code  # => "200"
```

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../webhooks/shopify_controller.rb            | 35 +++++++++++++++++++
 config/routes.rb                              |  1 +
 2 files changed, 36 insertions(+)
 create mode 100644 app/controllers/webhooks/shopify_controller.rb

diff --git a/app/controllers/webhooks/shopify_controller.rb b/app/controllers/webhooks/shopify_controller.rb
new file mode 100644
index 000000000..efc6a5122
--- /dev/null
+++ b/app/controllers/webhooks/shopify_controller.rb
@@ -0,0 +1,35 @@
+class Webhooks::ShopifyController < ActionController::API
+  before_action :verify_hmac!
+
+  def events
+    case request.headers['X-Shopify-Topic']
+    when 'shop/redact'
+      handle_shop_redact
+    end
+
+    head :ok
+  end
+
+  private
+
+  def verify_hmac!
+    secret = GlobalConfigService.load('SHOPIFY_CLIENT_SECRET', nil)
+    return head :unauthorized if secret.blank?
+
+    data = request.body.read
+    request.body.rewind
+
+    hmac_header = request.headers['X-Shopify-Hmac-SHA256']
+    return head :unauthorized if hmac_header.blank?
+
+    computed = Base64.strict_encode64(OpenSSL::HMAC.digest('SHA256', secret, data))
+    return head :unauthorized unless ActiveSupport::SecurityUtils.secure_compare(computed, hmac_header)
+  end
+
+  def handle_shop_redact
+    shop_domain = params[:shop_domain]
+    return if shop_domain.blank?
+
+    Integrations::Hook.where(app_id: 'shopify', reference_id: shop_domain).destroy_all
+  end
+end
diff --git a/config/routes.rb b/config/routes.rb
index cab069201..38c93b91e 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -564,6 +564,7 @@ Rails.application.routes.draw do
   get 'webhooks/instagram', to: 'webhooks/instagram#verify'
   post 'webhooks/instagram', to: 'webhooks/instagram#events'
   post 'webhooks/tiktok', to: 'webhooks/tiktok#events'
+  post 'webhooks/shopify', to: 'webhooks/shopify#events'
 
   namespace :twitter do
     resource :callback, only: [:show]

From dae4f3ee13161793c73f26e0f13de77cc584dfb7 Mon Sep 17 00:00:00 2001
From: Aakash Bakhle <48802744+aakashb95@users.noreply.github.com>
Date: Tue, 17 Feb 2026 18:12:14 +0530
Subject: [PATCH 03/26] fix: move llm call of captain outside transaction
 (#13559)

# Pull Request Template

## Description

Please include a summary of the change and issue(s) fixed. Also, mention
relevant motivation, context, and any dependencies that this change
requires.
Fixes:

The LLM call was wrapped in a transaction. This is an anti-pattern and
caused idle-connections which PG eventually terminated with
`PQconsumeInput() FATAL: terminating connection due to
idle-in-transaction timeout`

This resulted in activity messages being missing in some conversations
on captain handoff, failures queueing up for retry and captain
responding long after conversation was marked open/snoozed.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration.
locally and specs


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../conversation/response_builder_job.rb       | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/enterprise/app/jobs/captain/conversation/response_builder_job.rb b/enterprise/app/jobs/captain/conversation/response_builder_job.rb
index 297e78181..698ec56e7 100644
--- a/enterprise/app/jobs/captain/conversation/response_builder_job.rb
+++ b/enterprise/app/jobs/captain/conversation/response_builder_job.rb
@@ -13,9 +13,7 @@ class Captain::Conversation::ResponseBuilderJob < ApplicationJob
     if captain_v2_enabled?
       generate_response_with_v2
     else
-      ActiveRecord::Base.transaction do
-        generate_and_process_response
-      end
+      generate_and_process_response
     end
   rescue StandardError => e
     raise e if e.is_a?(ActiveStorage::FileNotFoundError) || e.is_a?(Faraday::BadRequestError)
@@ -44,11 +42,15 @@ class Captain::Conversation::ResponseBuilderJob < ApplicationJob
   end
 
   def process_response
-    return process_action('handoff') if handoff_requested?
-
-    create_messages
-    Rails.logger.info("[CAPTAIN][ResponseBuilderJob] Incrementing response usage for #{account.id}")
-    account.increment_response_usage
+    ActiveRecord::Base.transaction do
+      if handoff_requested?
+        process_action('handoff')
+      else
+        create_messages
+        Rails.logger.info("[CAPTAIN][ResponseBuilderJob] Incrementing response usage for #{account.id}")
+        account.increment_response_usage
+      end
+    end
   end
 
   def collect_previous_messages

From e8152642f2c3151c5d58847fcee60913291361a1 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 17 Feb 2026 15:35:20 -0800
Subject: [PATCH 04/26] Bump version to 4.11.0

---
 VERSION_CW     | 2 +-
 config/app.yml | 2 +-
 package.json   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/VERSION_CW b/VERSION_CW
index ad96464c4..a162ea75a 100644
--- a/VERSION_CW
+++ b/VERSION_CW
@@ -1 +1 @@
-4.10.1
+4.11.0
diff --git a/config/app.yml b/config/app.yml
index c81f2102f..9f7a3980c 100644
--- a/config/app.yml
+++ b/config/app.yml
@@ -1,5 +1,5 @@
 shared: &shared
-  version: '4.10.1'
+  version: '4.11.0'
 
 development:
   <<: *shared
diff --git a/package.json b/package.json
index 04821480d..b062495a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "4.10.1",
+  "version": "4.11.0",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/**/*.{js,vue}",

From 594333a1833ca7773e7ac509cad570970bb30ab6 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 17 Feb 2026 16:12:58 -0800
Subject: [PATCH 05/26] chore(deps): bump rack from 3.2.3 to 3.2.5 (#13569)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps [rack](https://github.com/rack/rack) from 3.2.3 to 3.2.5.
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/rack/rack/blob/main/CHANGELOG.md">rack's
changelog</a>.</em></p>
<blockquote>
<h1>Changelog</h1>
<p>All notable changes to this project will be documented in this file.
For info on how to format all future additions to this file please
reference <a href="https://keepachangelog.com/en/1.0.0/">Keep A
Changelog</a>.</p>
<h2>Unreleased</h2>
<h3>Security</h3>
<ul>
<li><a
href="https://github.com/advisories/GHSA-r657-rxjc-j557">CVE-2025-61780</a>
Improper handling of headers in <code>Rack::Sendfile</code> may allow
proxy bypass.</li>
<li><a
href="https://github.com/advisories/GHSA-6xw4-3v39-52mm">CVE-2025-61919</a>
Unbounded read in <code>Rack::Request</code> form parsing can lead to
memory exhaustion.</li>
<li><a
href="https://github.com/advisories/GHSA-whrj-4476-wvmp">CVE-2026-25500</a>
XSS injection via malicious filename in
<code>Rack::Directory</code>.</li>
<li><a
href="https://github.com/advisories/GHSA-mxw3-3hh2-x2mh">CVE-2026-22860</a>
Directory traversal via root prefix bypass in
<code>Rack::Directory</code>.</li>
</ul>
<h3>SPEC Changes</h3>
<ul>
<li>Define <code>rack.response_finished</code> callback arguments more
strictly. (<a
href="https://redirect.github.com/rack/rack/pull/2365">#2365</a>, <a
href="https://github.com/skipkayhil"><code>@​skipkayhil</code></a>)</li>
</ul>
<h3>Added</h3>
<ul>
<li>Add <code>Rack::Files#assign_headers</code> to allow overriding how
the configured file headers are set. (<a
href="https://redirect.github.com/rack/rack/pull/2377">#2377</a>, <a
href="https://github.com/codergeek121"><code>@​codergeek121</code></a>)</li>
<li>Add support for <code>rack.response_finished</code> to
<code>Rack::TempfileReaper</code>. (<a
href="https://redirect.github.com/rack/rack/pull/2363">#2363</a>, <a
href="https://github.com/skipkayhil"><code>@​skipkayhil</code></a>)</li>
<li>Add support for streaming bodies when using
<code>Rack::Events</code>. (<a
href="https://redirect.github.com/rack/rack/blob/main/redirect.github.com/rack/rack/pull/2375">#2375</a>,
<a href="https://github.com/unflxw"><code>@​unflxw</code></a>)</li>
<li>Add <code>deflaters</code> option to <code>Rack::Deflater</code> to
enable custom compression algorithms like zstd. (<a
href="https://redirect.github.com/rack/rack/issues/2168">#2168</a>, <a
href="https://github.com/alexanderadam"><code>@​alexanderadam</code></a>)</li>
<li>Add <code>Rack::Request#prefetch?</code> for identifying requests
with <code>Sec-Purpose: prefetch</code> header set. (<a
href="https://redirect.github.com/rack/rack/pull/2405">#2405</a>, <a
href="https://github.com/glaszig"><code>@​glaszig</code></a>)</li>
<li>Add <code>rack.request.trusted_proxy</code> environment key to
indicate whether the request is coming from a trusted proxy.</li>
</ul>
<h3>Changed</h3>
<ul>
<li>Raise before exceeding a part limit, not after. (<a
href="https://redirect.github.com/rack/rack/pull/2362">#2362</a>, <a
href="https://github.com/matthew-puku"><code>@​matthew-puku</code></a>)</li>
<li>Rack::Deflater now uses a fixed GZip mtime value. (<a
href="https://redirect.github.com/rack/rack/pull/2372">#2372</a>, <a
href="https://github.com/bensheldon"><code>@​bensheldon</code></a>)</li>
<li>Multipart parser drops support for RFC 2231 <code>filename*</code>
parameter (prohibited by RFC 7578) and now properly handles UTF-8
encoded filenames via percent-encoding and direct UTF-8 bytes. (<a
href="https://redirect.github.com/rack/rack/pull/2398">#2398</a>, <a
href="https://github.com/wtn"><code>@​wtn</code></a>)</li>
<li>The query parser now raises
<code>Rack::QueryParser::IncompatibleEncodingError</code> if we try to
parse params that are not ASCII compatible. (<a
href="https://redirect.github.com/rack/rack/pull/2416">#2416</a>, <a
href="https://github.com/bquorning"><code>@​bquorning</code></a>)</li>
</ul>
<h3>Fixed</h3>
<ul>
<li>Multipart parser: limit MIME header size check to the unread buffer
region to avoid false <code>multipart mime part header too large</code>
errors when previously read data accumulates in the scan buffer. (<a
href="https://redirect.github.com/rack/rack/pull/2392">#2392</a>, <a
href="https://github.com/alpaca-tc"><code>@​alpaca-tc</code></a>, <a
href="https://github.com/willnet"><code>@​willnet</code></a>, <a
href="https://github.com/krororo"><code>@​krororo</code></a>)</li>
<li>Fix <code>Rack::MockResponse#body</code> when the body is a Proc.
(<a href="https://redirect.github.com/rack/rack/pull/2420">#2420</a>, <a
href="https://redirect.github.com/rack/rack/pull/2423">#2423</a>, <a
href="https://github.com/tavianator"><code>@​tavianator</code></a>, [<a
href="https://github.com/ioquatix"><code>@​ioquatix</code></a>])</li>
</ul>
<h2>[3.2.4] - 2025-11-03</h2>
<h3>Fixed</h3>
<ul>
<li>Multipart parser: limit MIME header size check to the unread buffer
region to avoid false <code>multipart mime part header too large</code>
errors when previously read data accumulates in the scan buffer. (<a
href="https://redirect.github.com/rack/rack/pull/2392">#2392</a>, <a
href="https://github.com/alpaca-tc"><code>@​alpaca-tc</code></a>, <a
href="https://github.com/willnet"><code>@​willnet</code></a>, <a
href="https://github.com/krororo"><code>@​krororo</code></a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/rack/rack/commit/bb5f3555bd12b9065112353e829298b3b5623ceb"><code>bb5f355</code></a>
Bump patch version.</li>
<li><a
href="https://github.com/rack/rack/commit/f9bde3bc2dde2771185ac1a7b7602a4d9fa0a0d8"><code>f9bde3b</code></a>
Prevent directory traversal via root prefix bypass.</li>
<li><a
href="https://github.com/rack/rack/commit/93a68f58aa82aa48f09b751501f19f5e760dd406"><code>93a68f5</code></a>
XSS injection via malicious filename in
<code>Rack::Directory</code>.</li>
<li><a
href="https://github.com/rack/rack/commit/3b8b0d22d68a7fb30fdea40f838d0f95a05c134d"><code>3b8b0d2</code></a>
Fix MockResponse#body when the body is a Proc (<a
href="https://redirect.github.com/rack/rack/issues/2420">#2420</a>)</li>
<li><a
href="https://github.com/rack/rack/commit/4c24539777db8833d78f881680cd245878cfba31"><code>4c24539</code></a>
Bump patch version.</li>
<li><a
href="https://github.com/rack/rack/commit/3ba5e4f22f55abac21037bb137e56e5c8e36b673"><code>3ba5e4f</code></a>
Allow Multipart head to span read boundary. (<a
href="https://redirect.github.com/rack/rack/issues/2392">#2392</a>)</li>
<li>See full diff in <a
href="https://github.com/rack/rack/compare/v3.2.3...v3.2.5">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=rack&package-manager=bundler&previous-version=3.2.3&new-version=3.2.5)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 Gemfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index cc1f9e253..717ec2a02 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -677,7 +677,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (3.2.3)
+    rack (3.2.5)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)

From 2ab117e8eb0341748cbfbc6f5a0008ecbee91d0f Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Wed, 18 Feb 2026 22:10:06 -0800
Subject: [PATCH 06/26] feat(cloud-billing): cancel subscriptions at period end
 on deletion mark (#13580)

## How to reproduce
In Chatwoot Cloud, mark an account for deletion from account settings
while the account has an active Stripe subscription. Before this change,
deletion marking did not explicitly mark subscriptions to stop renewing
at period end.

## What changed
This PR adds `Enterprise::Billing::CancelCloudSubscriptionsService` and
calls it from the delete action path in
`Enterprise::Api::V1::AccountsController`. The service lists only active
Stripe subscriptions for the customer and sets `cancel_at_period_end:
true` when needed. The account deletion schedule remains unchanged
(existing static 7-day behavior), and Stripe deleted-event fallback
behavior remains unchanged.

## How this was tested
Added and updated specs:
-
`spec/enterprise/services/enterprise/billing/cancel_cloud_subscriptions_service_spec.rb`
-
`spec/enterprise/controllers/enterprise/api/v1/accounts_controller_spec.rb`

Executed:
- `bundle exec rspec
spec/enterprise/services/enterprise/billing/cancel_cloud_subscriptions_service_spec.rb`
- `bundle exec rspec
spec/enterprise/controllers/enterprise/api/v1/accounts_controller_spec.rb:363`
---
 .../enterprise/api/v1/accounts_controller.rb  |  8 +++
 .../cancel_cloud_subscriptions_service.rb     | 24 +++++++++
 .../api/v1/accounts_controller_spec.rb        | 24 ++++++++-
 ...cancel_cloud_subscriptions_service_spec.rb | 51 +++++++++++++++++++
 4 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 enterprise/app/services/enterprise/billing/cancel_cloud_subscriptions_service.rb
 create mode 100644 spec/enterprise/services/enterprise/billing/cancel_cloud_subscriptions_service_spec.rb

diff --git a/enterprise/app/controllers/enterprise/api/v1/accounts_controller.rb b/enterprise/app/controllers/enterprise/api/v1/accounts_controller.rb
index 0f829b973..d176db597 100644
--- a/enterprise/app/controllers/enterprise/api/v1/accounts_controller.rb
+++ b/enterprise/app/controllers/enterprise/api/v1/accounts_controller.rb
@@ -102,6 +102,8 @@ class Enterprise::Api::V1::AccountsController < Api::BaseController
     reason = 'manual_deletion'
 
     if @account.mark_for_deletion(reason)
+      cancel_cloud_subscriptions_for_deletion
+
       render json: { message: 'Account marked for deletion' }, status: :ok
     else
       render json: { message: @account.errors.full_messages.join(', ') }, status: :unprocessable_entity
@@ -125,6 +127,12 @@ class Enterprise::Api::V1::AccountsController < Api::BaseController
     render_redirect_url(session.url)
   end
 
+  def cancel_cloud_subscriptions_for_deletion
+    Enterprise::Billing::CancelCloudSubscriptionsService.new(account: @account).perform
+  rescue Stripe::StripeError => e
+    Rails.logger.warn("Failed to cancel cloud subscriptions for account #{@account.id}: #{e.class} - #{e.message}")
+  end
+
   def render_redirect_url(redirect_url)
     render json: { redirect_url: redirect_url }
   end
diff --git a/enterprise/app/services/enterprise/billing/cancel_cloud_subscriptions_service.rb b/enterprise/app/services/enterprise/billing/cancel_cloud_subscriptions_service.rb
new file mode 100644
index 000000000..53032c8ca
--- /dev/null
+++ b/enterprise/app/services/enterprise/billing/cancel_cloud_subscriptions_service.rb
@@ -0,0 +1,24 @@
+class Enterprise::Billing::CancelCloudSubscriptionsService
+  pattr_initialize [:account!]
+
+  def perform
+    return if stripe_customer_id.blank?
+    return unless ChatwootApp.chatwoot_cloud?
+
+    subscriptions.each do |subscription|
+      next if subscription.cancel_at_period_end
+
+      Stripe::Subscription.update(subscription.id, cancel_at_period_end: true)
+    end
+  end
+
+  private
+
+  def subscriptions
+    Stripe::Subscription.list(customer: stripe_customer_id, status: 'active', limit: 100).data
+  end
+
+  def stripe_customer_id
+    account.custom_attributes['stripe_customer_id']
+  end
+end
diff --git a/spec/enterprise/controllers/enterprise/api/v1/accounts_controller_spec.rb b/spec/enterprise/controllers/enterprise/api/v1/accounts_controller_spec.rb
index e79cbd237..9089b089a 100644
--- a/spec/enterprise/controllers/enterprise/api/v1/accounts_controller_spec.rb
+++ b/spec/enterprise/controllers/enterprise/api/v1/accounts_controller_spec.rb
@@ -357,10 +357,32 @@ RSpec.describe 'Enterprise Billing APIs', type: :request do
       context 'when it is an admin' do
         before do
           # Create the installation config for cloud environment
-          InstallationConfig.where(name: 'DEPLOYMENT_ENV').first_or_create(value: 'cloud')
+          InstallationConfig.where(name: 'DEPLOYMENT_ENV').first_or_initialize.update!(value: 'cloud')
         end
 
         it 'marks the account for deletion when action is delete' do
+          cancellation_service = instance_double(Enterprise::Billing::CancelCloudSubscriptionsService, perform: true)
+          allow(Enterprise::Billing::CancelCloudSubscriptionsService).to receive(:new).with(account: account)
+                                                                                      .and_return(cancellation_service)
+
+          post "/enterprise/api/v1/accounts/#{account.id}/toggle_deletion",
+               headers: admin.create_new_auth_token,
+               params: { action_type: 'delete' },
+               as: :json
+
+          expect(response).to have_http_status(:ok)
+          expect(account.reload.custom_attributes['marked_for_deletion_at']).to be_present
+          expect(account.custom_attributes['marked_for_deletion_reason']).to eq('manual_deletion')
+          expect(Enterprise::Billing::CancelCloudSubscriptionsService).to have_received(:new).with(account: account)
+          expect(cancellation_service).to have_received(:perform)
+        end
+
+        it 'returns success even if stripe cancellation fails' do
+          cancellation_service = instance_double(Enterprise::Billing::CancelCloudSubscriptionsService)
+          allow(Enterprise::Billing::CancelCloudSubscriptionsService).to receive(:new).with(account: account)
+                                                                                      .and_return(cancellation_service)
+          allow(cancellation_service).to receive(:perform).and_raise(Stripe::APIError.new('stripe unavailable'))
+
           post "/enterprise/api/v1/accounts/#{account.id}/toggle_deletion",
                headers: admin.create_new_auth_token,
                params: { action_type: 'delete' },
diff --git a/spec/enterprise/services/enterprise/billing/cancel_cloud_subscriptions_service_spec.rb b/spec/enterprise/services/enterprise/billing/cancel_cloud_subscriptions_service_spec.rb
new file mode 100644
index 000000000..f9eab281b
--- /dev/null
+++ b/spec/enterprise/services/enterprise/billing/cancel_cloud_subscriptions_service_spec.rb
@@ -0,0 +1,51 @@
+require 'rails_helper'
+
+RSpec.describe Enterprise::Billing::CancelCloudSubscriptionsService do
+  subject(:service) { described_class.new(account: account) }
+
+  let(:account) { create(:account, custom_attributes: custom_attributes) }
+  let(:custom_attributes) { { 'stripe_customer_id' => 'cus_123' } }
+
+  describe '#perform' do
+    context 'when deployment is not cloud' do
+      it 'does not call stripe subscriptions api' do
+        allow(ChatwootApp).to receive(:chatwoot_cloud?).and_return(false)
+        allow(Stripe::Subscription).to receive(:list)
+
+        service.perform
+
+        expect(Stripe::Subscription).not_to have_received(:list)
+      end
+    end
+
+    context 'when stripe customer id is missing' do
+      let(:custom_attributes) { {} }
+
+      it 'does not call stripe subscriptions api' do
+        allow(ChatwootApp).to receive(:chatwoot_cloud?).and_return(true)
+        allow(Stripe::Subscription).to receive(:list)
+
+        service.perform
+
+        expect(Stripe::Subscription).not_to have_received(:list)
+      end
+    end
+
+    context 'when account is cloud with active subscriptions' do
+      let(:subscription_response) { Struct.new(:data).new([sub_1, sub_2]) }
+      let(:sub_1) { instance_double(Stripe::Subscription, id: 'sub_1', cancel_at_period_end: false) }
+      let(:sub_2) { instance_double(Stripe::Subscription, id: 'sub_2', cancel_at_period_end: true) }
+
+      it 'marks only active subscriptions that are not yet set to cancel at period end' do
+        allow(ChatwootApp).to receive(:chatwoot_cloud?).and_return(true)
+        allow(Stripe::Subscription).to receive(:list).and_return(subscription_response)
+        allow(Stripe::Subscription).to receive(:update)
+
+        service.perform
+
+        expect(Stripe::Subscription).to have_received(:list).with(customer: 'cus_123', status: 'active', limit: 100)
+        expect(Stripe::Subscription).to have_received(:update).with('sub_1', cancel_at_period_end: true).once
+      end
+    end
+  end
+end

From c9619eaed2c03509491525385e1771dca673d294 Mon Sep 17 00:00:00 2001
From: Aakash Bakhle <48802744+aakashb95@users.noreply.github.com>
Date: Thu, 19 Feb 2026 13:55:15 +0530
Subject: [PATCH 07/26] chore: ignore .claude directory in gitignore (#13584)

# Pull Request Template
adds .claude to gitignore

Co-authored-by: Tanmay Deep Sharma <32020192+tds-1@users.noreply.github.com>
---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index dbdd35bcd..017c5c224 100644
--- a/.gitignore
+++ b/.gitignore
@@ -95,6 +95,7 @@ yarn-debug.log*
 .claude/settings.local.json
 .cursor
 .codex/
+.claude/
 CLAUDE.local.md
 
 # Histoire deployment

From 7b2b3ac37d5e6bae7c37c0c7c8cf94cd8ef4d3b0 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 19 Feb 2026 15:04:40 +0530
Subject: [PATCH 08/26] feat(V5): Update settings pages UI (#13396)

# Pull Request Template

## Description

This PR updates settings page UI


## Type of change

- [x] New feature (non-breaking change which adds functionality)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../dashboard/assets/scss/_base.scss          |    2 +-
 .../dashboard/assets/scss/_woot.scss          |   80 ++
 .../AgentCapacityPolicyCard.vue               |    4 +-
 .../AssignmentCard/AssignmentCard.vue         |    6 +-
 .../AssignmentPolicyCard.vue                  |   32 +-
 .../components/ExclusionRules.vue             |    2 +-
 .../AssignmentPolicy/components/RadioCard.vue |   60 +-
 .../Campaigns/CampaignLayout.vue              |   10 +-
 .../dashboard/components-next/CardLayout.vue  |    2 +-
 .../CompaniesHeader/CompanyHeader.vue         |    6 +-
 .../Companies/CompaniesListLayout.vue         |    7 +-
 .../Contacts/ContactLabels/ContactLabels.vue  |    4 +-
 .../Contacts/ContactsHeader/ContactHeader.vue |    4 +-
 .../ContactsActiveFiltersPreview.vue          |    2 +-
 .../Contacts/ContactsListLayout.vue           |    7 +-
 .../AttributeListItem.vue                     |   91 +-
 .../ConversationRequiredAttributeItem.vue     |    8 +-
 .../ConversationRequiredAttributes.vue        |    4 +-
 .../CustomAttributes/AttributeBadge.vue       |   16 +-
 .../components-next/EmptyStateLayout.vue      |    2 +-
 .../HelpCenter/HelpCenterLayout.vue           |   11 +-
 .../Pages/LocalePage/AddLocaleDialog.vue      |    1 +
 .../specs/composeConversationHelper.spec.js   |    2 +-
 .../Settings/SettingsAccordion.vue            |   31 +
 .../Settings/SettingsFieldSection.vue         |   37 +
 .../Settings/SettingsToggleSection.vue        |   45 +
 .../components-next/avatar/Avatar.vue         |   22 +-
 .../components-next/captain/PageLayout.vue    |   11 +-
 .../captain/pageComponents/Paywall.vue        |    2 +-
 .../combobox/ComboBoxDropdown.vue             |    4 +-
 .../FeatureSpotlightPopover.vue               |    2 +-
 .../components-next/icon/provider.js          |    4 +-
 .../icon/specs/provider.spec.js               |    4 +-
 .../dashboard/components-next/input/Input.vue |    4 +-
 .../{Label => label}/AddLabel.vue             |    0
 .../dashboard/components-next/label/Label.vue |   71 ++
 .../{Label => label}/LabelItem.vue            |    0
 .../{Label => label}/story/AddLabel.story.vue |    0
 .../{Label => label}/story/Label.story.vue    |    0
 .../{Label => label}/story/fixtures.js        |    0
 .../pagination/PaginationFooter.vue           |   12 +-
 .../components-next/select/Select.vue         |   97 ++
 .../components-next/sidebar/ChannelLeaf.vue   |    4 +-
 .../components-next/sidebar/Sidebar.vue       |   33 +-
 .../sidebar/SidebarGroupLeaf.vue              |    6 +-
 .../components-next/switch/Switch.vue         |   16 +-
 .../components-next/table/BaseTable.story.vue |  175 +++
 .../components-next/table/BaseTable.vue       |   60 +
 .../components-next/table/BaseTableCell.vue   |   22 +
 .../components-next/table/BaseTableRow.vue    |   14 +
 .../dashboard/components-next/table/index.js  |    3 +
 .../year-in-review/ShareModal.vue             |    2 +-
 .../dashboard/components/FormSection.vue      |   31 -
 .../components/widgets/InboxName.vue          |    9 +-
 .../components/widgets/LoadingState.vue       |    2 +-
 .../components/widgets/SettingIntroBanner.vue |    2 +-
 .../components/widgets/forms/Input.vue        |    6 +-
 app/javascript/dashboard/helper/inbox.js      |   22 +-
 .../dashboard/helper/specs/inbox.spec.js      |    8 +-
 .../dashboard/i18n/locale/en/agentBots.json   |    6 +-
 .../dashboard/i18n/locale/en/agentMgmt.json   |    3 +
 .../i18n/locale/en/attributesMgmt.json        |    3 +
 .../dashboard/i18n/locale/en/automation.json  |    9 +-
 .../dashboard/i18n/locale/en/cannedMgmt.json  |    3 +
 .../dashboard/i18n/locale/en/customRole.json  |    3 +
 .../dashboard/i18n/locale/en/inboxMgmt.json   |   21 +-
 .../i18n/locale/en/integrationApps.json       |    4 +
 .../i18n/locale/en/integrations.json          |   18 +-
 .../dashboard/i18n/locale/en/labelsMgmt.json  |    6 +-
 .../dashboard/i18n/locale/en/macros.json      |    6 +-
 .../dashboard/i18n/locale/en/mfa.json         |    2 +-
 .../dashboard/i18n/locale/en/sla.json         |   13 +-
 .../i18n/locale/en/teamsSettings.json         |    7 +-
 .../widget-preview/components/Widget.vue      |  489 +++++---
 .../pages/CampaignsPageRouteView.vue          |    2 +-
 .../companies/pages/CompaniesIndex.vue        |    2 +-
 .../contacts/pages/ContactsIndex.vue          |    2 +-
 .../inbox/components/InboxListHeader.vue      |   12 +-
 .../routes/dashboard/notifications/routes.js  |    7 +-
 .../dashboard/settings/SettingsHeader.vue     |    4 +-
 .../dashboard/settings/SettingsLayout.vue     |    2 +-
 .../settings/SettingsSubPageHeader.vue        |    6 +-
 .../dashboard/settings/SettingsWrapper.vue    |   12 +-
 .../routes/dashboard/settings/Wrapper.vue     |   37 +-
 .../dashboard/settings/account/Index.vue      |    3 +-
 .../account/components/AutoResolve.vue        |    4 +-
 .../account/components/SectionLayout.vue      |   17 +-
 .../dashboard/settings/agentBots/Index.vue    |  154 ++-
 .../dashboard/settings/agents/Index.vue       |  202 +--
 .../settings/assignmentPolicy/Index.vue       |    2 +-
 .../pages/AgentAssignmentCreatePage.vue       |    4 +-
 .../pages/AgentAssignmentEditPage.vue         |    7 +-
 .../pages/AgentAssignmentIndexPage.vue        |    4 +-
 .../pages/AgentCapacityCreatePage.vue         |    4 +-
 .../pages/AgentCapacityEditPage.vue           |    7 +-
 .../pages/AgentCapacityIndexPage.vue          |    4 +-
 .../components/AgentAssignmentPolicyForm.vue  |   11 +-
 .../dashboard/settings/attributes/Index.vue   |   50 +-
 .../dashboard/settings/auditlogs/Index.vue    |  121 +-
 .../settings/automation/AutomationRuleRow.vue |   98 +-
 .../dashboard/settings/automation/Index.vue   |   45 +-
 .../dashboard/settings/canned/Index.vue       |  211 ++--
 .../components/BaseSettingsHeader.vue         |  113 +-
 .../settings/conversationWorkflow/index.vue   |    2 +-
 .../dashboard/settings/customRoles/Index.vue  |   57 +-
 .../component/CustomRolePaywall.vue           |    2 +-
 .../component/CustomRoleTableBody.vue         |   85 +-
 .../dashboard/settings/inbox/ChannelList.vue  |    2 +-
 .../dashboard/settings/inbox/ImapSettings.vue |  134 +-
 .../settings/inbox/InboxChannels.vue          |    2 +-
 .../routes/dashboard/settings/inbox/Index.vue |  152 +--
 .../inbox/PreChatForm/PreChatFields.vue       |  117 +-
 .../settings/inbox/PreChatForm/Settings.vue   |  264 ++--
 .../dashboard/settings/inbox/Settings.vue     | 1078 ++++++++++-------
 .../dashboard/settings/inbox/SmtpSettings.vue |  176 +--
 .../settings/inbox/WidgetBuilder.vue          |  443 -------
 .../inbox/channels/google/Reauthorize.vue     |    5 +-
 .../inbox/channels/instagram/Reauthorize.vue  |    5 +-
 .../inbox/channels/microsoft/Reauthorize.vue  |    5 +-
 .../inbox/channels/tiktok/Reauthorize.vue     |    5 +-
 .../inbox/channels/whatsapp/Reauthorize.vue   |    2 +-
 .../inbox/components/AccountHealth.vue        |   24 +-
 .../inbox/components/BotConfiguration.vue     |   93 +-
 .../settings/inbox/components/BusinessDay.vue |  161 ++-
 .../components/SenderNameExamplePreview.vue   |  176 ++-
 .../inbox/components/WeeklyAvailability.vue   |  173 +--
 .../settings/inbox/facebook/Reauthorize.vue   |    2 +-
 .../dashboard/settings/inbox/inbox.routes.js  |    4 +-
 .../inbox/settingsPage/CollaboratorsPage.vue  |  309 ++---
 .../inbox/settingsPage/ConfigurationPage.vue  |  265 ++--
 .../settingsPage/CustomerSatisfactionPage.vue |  329 +++--
 .../DashboardApps/DashboardAppsRow.vue        |   81 +-
 .../integrations/DashboardApps/Index.vue      |  107 +-
 .../dashboard/settings/integrations/Index.vue |   25 +-
 .../settings/integrations/Integration.vue     |    6 +-
 .../integrations/IntegrationHooks.vue         |   55 +-
 .../settings/integrations/IntegrationItem.vue |   30 +-
 .../settings/integrations/Linear.vue          |   22 +-
 .../integrations/MultipleIntegrationHooks.vue |  211 ++--
 .../settings/integrations/Notion.vue          |   22 +-
 .../settings/integrations/Shopify.vue         |  124 +-
 .../integrations/SingleIntegrationHooks.vue   |    6 +-
 .../dashboard/settings/integrations/Slack.vue |   67 +-
 .../Slack/SelectChannelWarning.vue            |    6 +-
 .../Slack/SlackIntegrationHelpText.vue        |    9 +-
 .../settings/integrations/Webhooks/Index.vue  |   47 +-
 .../integrations/Webhooks/WebhookRow.vue      |   83 +-
 .../integrations/integrations.routes.js       |   24 +-
 .../dashboard/settings/labels/Index.vue       |  133 +-
 .../dashboard/settings/macros/Index.vue       |   49 +-
 .../dashboard/settings/macros/MacroEditor.vue |    2 +-
 .../dashboard/settings/macros/MacroForm.vue   |    6 +-
 .../settings/macros/MacroProperties.vue       |   63 +-
 .../settings/macros/MacrosTableRow.vue        |  105 +-
 .../settings/profile/AudioAlertCondition.vue  |    6 +-
 .../dashboard/settings/profile/HotKeyCard.vue |    8 +-
 .../dashboard/settings/profile/Index.vue      |  118 +-
 .../settings/profile/MfaSettings.vue          |   21 +-
 .../settings/profile/MfaSettingsCard.vue      |    4 +-
 .../profile/NotificationPreferences.vue       |   18 +-
 .../settings/profile/profile.routes.js        |    4 +-
 .../reports/components/ReportHeader.vue       |   13 +-
 .../reports/components/ReportsWrapper.vue     |    2 +-
 .../dashboard/settings/security/Index.vue     |    5 +-
 .../security/components/SamlPaywall.vue       |    2 +-
 .../security/components/SamlSettings.vue      |    1 +
 .../routes/dashboard/settings/sla/Index.vue   |  212 +++-
 .../{components => }/SLAPaywallEnterprise.vue |    5 +-
 .../sla/components/BaseEmptyState.vue         |   33 -
 .../sla/components/SLABusinessHoursLabel.vue  |   32 -
 .../settings/sla/components/SLAEmptyState.vue |   21 -
 .../settings/sla/components/SLAHeader.vue     |   30 -
 .../settings/sla/components/SLAListItem.vue   |   71 --
 .../sla/components/SLAListItemLoading.vue     |   41 -
 .../sla/components/SLAResponseTime.vue        |   37 -
 .../settings/teams/AgentSelector.vue          |  253 ++--
 .../dashboard/settings/teams/Create/Index.vue |    4 +-
 .../settings/teams/Edit/EditAgents.vue        |    6 +-
 .../dashboard/settings/teams/Edit/Index.vue   |    4 +-
 .../routes/dashboard/settings/teams/Index.vue |  166 ++-
 .../shared/components/GreetingsEditor.vue     |    8 +-
 theme/icons.js                                |  140 ++-
 182 files changed, 5187 insertions(+), 4297 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Settings/SettingsAccordion.vue
 create mode 100644 app/javascript/dashboard/components-next/Settings/SettingsFieldSection.vue
 create mode 100644 app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue
 rename app/javascript/dashboard/components-next/{Label => label}/AddLabel.vue (100%)
 create mode 100644 app/javascript/dashboard/components-next/label/Label.vue
 rename app/javascript/dashboard/components-next/{Label => label}/LabelItem.vue (100%)
 rename app/javascript/dashboard/components-next/{Label => label}/story/AddLabel.story.vue (100%)
 rename app/javascript/dashboard/components-next/{Label => label}/story/Label.story.vue (100%)
 rename app/javascript/dashboard/components-next/{Label => label}/story/fixtures.js (100%)
 create mode 100644 app/javascript/dashboard/components-next/select/Select.vue
 create mode 100644 app/javascript/dashboard/components-next/table/BaseTable.story.vue
 create mode 100644 app/javascript/dashboard/components-next/table/BaseTable.vue
 create mode 100644 app/javascript/dashboard/components-next/table/BaseTableCell.vue
 create mode 100644 app/javascript/dashboard/components-next/table/BaseTableRow.vue
 create mode 100644 app/javascript/dashboard/components-next/table/index.js
 delete mode 100644 app/javascript/dashboard/components/FormSection.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
 rename app/javascript/dashboard/routes/dashboard/settings/sla/{components => }/SLAPaywallEnterprise.vue (87%)
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue

diff --git a/app/javascript/dashboard/assets/scss/_base.scss b/app/javascript/dashboard/assets/scss/_base.scss
index 14ae2a9d4..d3d3f6726 100644
--- a/app/javascript/dashboard/assets/scss/_base.scss
+++ b/app/javascript/dashboard/assets/scss/_base.scss
@@ -66,7 +66,7 @@ textarea {
 // 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;
+    @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-sm 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;
   }
 
   .field-disabled {
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 40ca7b436..81a4569b5 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -66,4 +66,84 @@ body {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
+  /**
+   * ============================================================================
+   * TYPOGRAPHY UTILITIES
+   * ============================================================================
+   *
+   * | Class              | Use Case                                           |
+   * |--------------------|----------------------------------------------------|
+   * | .text-body-main    | <p>, <span>, general body text                     |
+   * | .text-body-para    | <p> for paragraphs, larger text blocks             |
+   * | .text-heading-1    | <h1>, page titles, panel headers                   |
+   * | .text-heading-2    | <h2>, section headings, card titles                |
+   * | .text-heading-3    | <h3>, card headings, breadcrumbs, subsections      |
+   * | .text-label        | <label>, form labels, field names                  |
+   * | .text-label-small  | <small>, footnotes, tags, badges, captions         |
+   * | .text-button       | <button>, standard button text                     |
+   * | .text-button-small | <button>, small/compact button text                |
+   */
+
+  /* body-text-main: Main text style for general body text */
+  .text-body-main {
+    @apply font-inter text-sm font-420;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.28px;
+  }
+
+  /* body-text-paragraph: For paragraphs or larger blocks of text */
+  .text-body-para {
+    @apply font-inter text-sm font-420;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.21px;
+  }
+
+  /* heading-1: Large heading for pages and panels */
+  .text-heading-1 {
+    @apply font-inter text-lg font-520;
+    line-height: 24px; /* 133.333% */
+    letter-spacing: -0.27px;
+  }
+
+  /* heading-2: Secondary heading for sections */
+  .text-heading-2 {
+    @apply font-inter text-base font-medium;
+    line-height: 24px; /* 133.333% */
+    letter-spacing: -0.27px;
+  }
+
+  /* heading-3: For card headings, breadcrumbs, subsections */
+  .text-heading-3 {
+    @apply font-inter text-sm font-medium;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.27px;
+  }
+
+  /* label: Standard label text for form fields */
+  .text-label {
+    @apply font-inter text-sm font-medium;
+    line-height: 21px; /* 150% */
+  }
+
+  /* label-small: Smallest font for labels, footnotes, tags */
+  .text-label-small {
+    @apply font-inter text-xs font-440;
+    line-height: 16px; /* 133.333% */
+    letter-spacing: -0.24px;
+  }
+
+  /* button-text: Text for standard size buttons */
+  .text-button {
+    @apply font-inter text-sm font-460;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.28px;
+  }
+
+  /* button-text-small: Text for smaller buttons */
+  .text-button-small {
+    @apply font-inter text-xs font-440;
+    line-height: 18px; /* 150% */
+    letter-spacing: -0.24px;
+  }
 }
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue
index 3c749e751..aad1c2153 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue
@@ -49,7 +49,7 @@ const handleFetchUsers = () => {
     <div class="flex flex-col gap-2 relative justify-between w-full">
       <div class="flex items-center gap-3 justify-between w-full">
         <div class="flex items-center gap-3">
-          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
+          <h3 class="text-heading-2 text-n-slate-12 line-clamp-1">
             {{ name }}
           </h3>
           <CardPopover
@@ -78,7 +78,7 @@ const handleFetchUsers = () => {
           <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
         </div>
       </div>
-      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
+      <p class="text-n-slate-11 text-body-para line-clamp-1 mb-0 py-1">
         {{ description }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue
index 1e477eafe..eb94d1ddd 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue
@@ -20,7 +20,7 @@ const handleClick = () => {
   <CardLayout class="[&>div]:px-5 cursor-pointer" @click="handleClick">
     <div class="flex flex-col items-start gap-2">
       <div class="flex justify-between w-full items-center">
-        <h3 class="text-n-slate-12 text-base font-medium">{{ title }}</h3>
+        <h3 class="text-n-slate-12 text-heading-2">{{ title }}</h3>
         <Button
           xs
           slate
@@ -29,14 +29,14 @@ const handleClick = () => {
           @click.stop="handleClick"
         />
       </div>
-      <p class="text-n-slate-11 text-sm mb-0">{{ description }}</p>
+      <p class="text-n-slate-11 text-body-para mb-0">{{ description }}</p>
     </div>
 
     <ul class="flex flex-col items-start gap-3 mt-3">
       <li
         v-for="feature in features"
         :key="feature.id"
-        class="flex items-center gap-3 text-sm"
+        class="flex items-center gap-3 text-body-para"
       >
         <Icon
           :icon="feature.icon"
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue
index cedfb0009..45311ece6 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue
@@ -60,23 +60,19 @@ const handleFetchInboxes = () => {
     <div class="flex flex-col gap-2 relative justify-between w-full">
       <div class="flex items-center gap-3 justify-between w-full">
         <div class="flex items-center gap-3">
-          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
+          <h3 class="text-heading-2 text-n-slate-12 line-clamp-1">
             {{ name }}
           </h3>
-          <div class="flex items-center gap-2">
-            <CardPopover
-              :title="
-                t(
-                  'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.POPOVER'
-                )
-              "
-              icon="i-lucide-inbox"
-              :count="assignedInboxCount"
-              :items="inboxes"
-              :is-fetching="isFetchingInboxes"
-              @fetch="handleFetchInboxes"
-            />
-          </div>
+          <CardPopover
+            :title="
+              t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.POPOVER')
+            "
+            icon="i-lucide-inbox"
+            :count="assignedInboxCount"
+            :items="inboxes"
+            :is-fetching="isFetchingInboxes"
+            @fetch="handleFetchInboxes"
+          />
         </div>
         <div class="flex items-center gap-2">
           <Button
@@ -93,18 +89,18 @@ const handleFetchInboxes = () => {
           <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
         </div>
       </div>
-      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
+      <p class="text-n-slate-11 text-body-para line-clamp-1 mb-0 py-1">
         {{ description }}
       </p>
       <div class="flex items-center gap-3 py-1.5">
-        <span v-if="order" class="text-n-slate-11 text-sm">
+        <span v-if="order" class="text-n-slate-11 text-body-para">
           {{
             `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ORDER')}:`
           }}
           <span class="text-n-slate-12">{{ order }}</span>
         </span>
         <div v-if="order" class="w-px h-3 bg-n-strong" />
-        <span v-if="priority" class="text-n-slate-11 text-sm">
+        <span v-if="priority" class="text-n-slate-11 text-body-para">
           {{
             `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.PRIORITY')}:`
           }}
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
index 965f532f4..3ac7dfd5f 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
@@ -2,7 +2,7 @@
 import { computed, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
-import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
 import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
 import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
 
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/RadioCard.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/RadioCard.vue
index ded6cb930..182325ed8 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/RadioCard.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/RadioCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import Label from 'dashboard/components-next/label/Label.vue';
 
 const props = defineProps({
   id: {
@@ -22,6 +22,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  disabledLabel: {
+    type: String,
+    default: '',
+  },
   disabledMessage: {
     type: String,
     default: '',
@@ -30,8 +34,6 @@ const props = defineProps({
 
 const emit = defineEmits(['select']);
 
-const { t } = useI18n();
-
 const handleChange = () => {
   if (!props.isActive && !props.disabled) {
     emit('select', props.id);
@@ -41,7 +43,7 @@ const handleChange = () => {
 
 <template>
   <div
-    class="relative rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6"
+    class="cursor-pointer rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6"
     :class="[
       disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
       isActive ? 'outline-n-blue-9' : 'outline-n-weak',
@@ -49,39 +51,29 @@ const handleChange = () => {
     ]"
     @click="handleChange"
   >
-    <div class="absolute top-4 right-4">
-      <input
-        :id="`${id}`"
-        :checked="isActive"
-        :value="id"
-        :name="id"
-        :disabled="disabled"
-        type="radio"
-        class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0"
-        @change="handleChange"
-      />
-    </div>
-
-    <!-- Content -->
-    <div class="flex flex-col gap-3 items-start">
-      <div class="flex items-center gap-2">
-        <h3 class="text-sm font-medium text-n-slate-12">
-          {{ label }}
-        </h3>
-        <span
-          v-if="disabled"
-          class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-n-yellow-3 text-n-yellow-11"
-        >
-          {{
-            t(
-              'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_BADGE'
-            )
-          }}
-        </span>
+    <div class="flex flex-col gap-2 items-start">
+      <div class="flex items-center justify-between w-full gap-3">
+        <div class="flex items-center gap-2">
+          <h3 class="text-heading-3 text-n-slate-12">
+            {{ label }}
+          </h3>
+          <Label v-if="disabled" :label="disabledLabel" color="amber" compact />
+        </div>
+        <input
+          :id="`${id}`"
+          :checked="isActive"
+          :value="id"
+          :name="id"
+          :disabled="disabled"
+          type="radio"
+          class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0 flex-shrink-0"
+          @change="handleChange"
+        />
       </div>
-      <p class="text-sm text-n-slate-11">
+      <p class="text-body-main text-n-slate-11">
         {{ disabled && disabledMessage ? disabledMessage : description }}
       </p>
+      <slot />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
index 01a207797..49dc11aa2 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
@@ -21,10 +21,10 @@ const handleButtonClick = () => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
-    <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto">
+    <header class="sticky top-0 z-10 px-6">
+      <div class="w-full max-w-5xl mx-auto">
         <div class="flex items-center justify-between w-full h-20 gap-2">
-          <span class="text-xl font-medium text-n-slate-12">
+          <span class="text-heading-1 text-n-slate-12">
             {{ headerTitle }}
           </span>
           <div
@@ -43,8 +43,8 @@ const handleButtonClick = () => {
         </div>
       </div>
     </header>
-    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
+    <main class="flex-1 px-6 overflow-y-auto">
+      <div class="w-full max-w-5xl mx-auto py-4">
         <slot name="default" />
       </div>
     </main>
diff --git a/app/javascript/dashboard/components-next/CardLayout.vue b/app/javascript/dashboard/components-next/CardLayout.vue
index 166f5ea4c..44762e5b7 100644
--- a/app/javascript/dashboard/components-next/CardLayout.vue
+++ b/app/javascript/dashboard/components-next/CardLayout.vue
@@ -19,7 +19,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="flex flex-col w-full outline-1 outline outline-n-container group/cardLayout rounded-xl bg-n-solid-2"
+    class="flex flex-col w-full outline-1 outline outline-n-container -outline-offset-1 group/cardLayout rounded-xl bg-n-solid-2"
   >
     <div
       class="flex w-full gap-3 py-5"
diff --git a/app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue b/app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue
index f0dc4255f..0eeb42233 100644
--- a/app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue
+++ b/app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue
@@ -15,11 +15,11 @@ const emit = defineEmits(['search', 'update:sort']);
 </script>
 
 <template>
-  <header class="sticky top-0 z-10">
+  <header class="sticky top-0 z-10 px-6">
     <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
     >
-      <span class="text-xl font-medium truncate text-n-slate-12">
+      <span class="text-heading-1 truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
       <div class="flex items-center flex-row flex-shrink-0 gap-2">
diff --git a/app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue b/app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue
index 7e9bcbacb..dce8c6af1 100644
--- a/app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue
+++ b/app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue
@@ -32,17 +32,18 @@ const updateCurrentPage = page => {
         @search="emit('search', $event)"
         @update:sort="emit('update:sort', $event)"
       />
-      <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[60rem]">
+      <main class="flex-1 px-6 overflow-y-auto">
+        <div class="w-full mx-auto max-w-5xl py-4">
           <slot name="default" />
         </div>
       </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0">
         <PaginationFooter
           current-page-info="COMPANIES_LAYOUT.PAGINATION_FOOTER.SHOWING"
           :current-page="currentPage"
           :total-items="totalItems"
           :items-per-page="25"
+          class="max-w-[67rem]"
           @update:current-page="updateCurrentPage"
         />
       </footer>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
index bc1370a0a..48225d2cd 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
@@ -3,8 +3,8 @@ import { computed, watch, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 
-import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
-import AddLabel from 'dashboard/components-next/Label/AddLabel.vue';
+import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
+import AddLabel from 'dashboard/components-next/label/AddLabel.vue';
 
 const props = defineProps({
   contactId: {
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index b3590b51e..7f9047f8d 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -32,9 +32,9 @@ const emit = defineEmits([
 </script>
 
 <template>
-  <header class="sticky top-0 z-10">
+  <header class="sticky top-0 z-10 px-6">
     <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
index 88ee94604..4daf52e39 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
@@ -62,7 +62,7 @@ const activeFilterQueryData = computed(() => {
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
     "
     :show-clear-button="!hasActiveSegments"
-    class="max-w-[60rem] px-6"
+    class="max-w-5xl"
     @open-filter="emit('openFilter')"
     @clear-filters="emit('clearFilters')"
   />
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
index 0646387fb..b38f44018 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -98,8 +98,8 @@ const showPagination = computed(() => {
         @apply-filter="emit('applyFilter', $event)"
         @clear-filters="emit('clearFilters')"
       />
-      <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[60rem]">
+      <main class="flex-1 overflow-y-auto px-6">
+        <div class="w-full mx-auto max-w-5xl">
           <ContactsActiveFiltersPreview
             v-if="showActiveFiltersPreview"
             :active-segment="activeSegment"
@@ -114,11 +114,12 @@ const showPagination = computed(() => {
           />
         </div>
       </main>
-      <footer v-if="showPagination" class="sticky bottom-0 z-0 px-4 pb-4">
+      <footer v-if="showPagination" class="sticky bottom-0 z-0">
         <PaginationFooter
           current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
           :current-page="currentPage"
           :total-items="totalItems"
+          class="max-w-[67rem]"
           :items-per-page="itemsPerPage"
           @update:current-page="updateCurrentPage"
         />
diff --git a/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue b/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue
index f5822f67d..624ba2981 100644
--- a/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue
+++ b/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue
@@ -1,8 +1,10 @@
 <script setup>
+import { computed } from 'vue';
+
 import Button from 'dashboard/components-next/button/Button.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
 import AttributeBadge from 'dashboard/components-next/CustomAttributes/AttributeBadge.vue';
-import { computed } from 'vue';
 
 const props = defineProps({
   attribute: {
@@ -18,7 +20,7 @@ const props = defineProps({
 const emit = defineEmits(['edit', 'delete']);
 
 const iconByType = {
-  text: 'i-lucide-align-justify',
+  text: 'i-lucide-menu',
   checkbox: 'i-lucide-circle-check-big',
   list: 'i-lucide-list',
   date: 'i-lucide-calendar',
@@ -28,61 +30,60 @@ const iconByType = {
 
 const attributeIcon = computed(() => {
   const typeKey = props.attribute.type?.toLowerCase();
-  return iconByType[typeKey] || 'i-lucide-align-justify';
+  return iconByType[typeKey] || 'i-lucide-menu';
 });
 </script>
 
 <template>
-  <div
-    class="flex flex-col gap-2 p-4 bg-n-solid-1 rounded-2xl outline outline-1 outline-n-container"
-  >
-    <div class="flex flex-wrap gap-2 justify-between items-center">
-      <div class="flex flex-wrap gap-2 items-center min-w-0">
-        <h4 class="text-sm font-medium truncate text-n-slate-12">
-          {{ attribute.label }}
-        </h4>
-        <div class="w-px h-3 bg-n-strong" />
-        <div class="flex gap-2 items-center text-sm text-n-slate-11">
-          <div class="flex items-center gap-1.5 text-n-slate-11">
-            <Icon :icon="attributeIcon" class="size-4" />
-            <span class="text-sm">{{ attribute.type }}</span>
+  <div class="flex flex-col py-4 min-w-0">
+    <div class="flex justify-between flex-row items-center gap-4 min-w-0">
+      <div class="flex items-center gap-4 min-w-0">
+        <div
+          class="flex items-center flex-shrink-0 size-10 justify-center rounded-xl outline outline-1 outline-n-weak -outline-offset-1"
+        >
+          <Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
+        </div>
+        <div class="flex flex-col gap-1.5 items-start min-w-0 overflow-hidden">
+          <div class="flex items-center gap-2 min-w-0">
+            <h4 class="text-heading-3 truncate text-n-slate-12 min-w-0">
+              {{ attribute.label }}
+            </h4>
+            <div class="flex items-center gap-1.5">
+              <Label :label="attribute.type" compact />
+              <AttributeBadge
+                v-for="badge in badges"
+                :key="badge.type"
+                :type="badge.type"
+              />
+            </div>
           </div>
-          <div class="w-px h-3 bg-n-weak" />
-          <div class="flex items-center gap-1.5 text-n-slate-11">
-            <Icon icon="i-lucide-key-round" class="size-4" />
-            <span class="line-clamp-1 text-sm">{{ attribute.value }}</span>
+          <div class="grid grid-cols-[auto_1fr] items-center gap-1.5">
+            <Icon icon="i-lucide-key-round" class="size-3.5 text-n-slate-11" />
+            <div class="flex items-center gap-2 min-w-0">
+              <span class="text-body-main text-n-slate-11 truncate">
+                {{ attribute.value }}
+              </span>
+              <template
+                v-if="attribute.attribute_description || attribute.description"
+              >
+                <div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
+                <span class="text-body-main text-n-slate-11 truncate">
+                  {{ attribute.attribute_description || attribute.description }}
+                </span>
+              </template>
+            </div>
           </div>
         </div>
       </div>
-      <div class="flex gap-2 items-center">
-        <AttributeBadge
-          v-for="badge in badges"
-          :key="badge.type"
-          :type="badge.type"
-        />
-        <div
-          v-if="badges.length > 0"
-          class="w-px h-3 bg-n-strong ltr:ml-1.5 rtl:mr-1.5"
-        />
+      <div class="flex gap-3 justify-end flex-shrink-0">
         <Button
-          icon="i-lucide-pencil-line"
-          size="sm"
-          color="slate"
-          ghost
+          icon="i-woot-edit-pen"
+          slate
+          sm
           @click="emit('edit', attribute)"
         />
-        <div class="w-px h-3 bg-n-strong" />
-        <Button
-          icon="i-lucide-trash"
-          size="sm"
-          color="slate"
-          ghost
-          @click="emit('delete', attribute)"
-        />
+        <Button icon="i-woot-bin" slate sm @click="emit('delete', attribute)" />
       </div>
     </div>
-    <p class="mb-0 text-sm text-n-slate-11">
-      {{ attribute.attribute_description || attribute.description || '' }}
-    </p>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue b/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue
index 70b4a7af5..4697a15d7 100644
--- a/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue
+++ b/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue
@@ -35,18 +35,20 @@ const handleDelete = () => {
 <template>
   <div class="flex justify-between items-center px-4 py-3 w-full">
     <div class="flex gap-3 items-center">
-      <h5 class="text-sm font-medium text-n-slate-12 line-clamp-1">
+      <h5 class="text-heading-3 text-n-slate-12 line-clamp-1">
         {{ attribute.label }}
       </h5>
       <div class="w-px h-2.5 bg-n-slate-5" />
       <div class="flex gap-1.5 items-center">
         <Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
-        <span class="text-sm text-n-slate-11">{{ attribute.type }}</span>
+        <span class="text-body-para text-n-slate-11">{{ attribute.type }}</span>
       </div>
       <div class="w-px h-2.5 bg-n-slate-5" />
       <div class="flex gap-1.5 items-center">
         <Icon icon="i-lucide-key-round" class="size-4 text-n-slate-11" />
-        <span class="text-sm text-n-slate-11">{{ attribute.value }}</span>
+        <span class="text-body-para text-n-slate-11">{{
+          attribute.value
+        }}</span>
       </div>
     </div>
     <div class="flex gap-2 items-center">
diff --git a/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue b/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue
index e611dd637..019e3fb69 100644
--- a/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue
+++ b/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue
@@ -129,10 +129,10 @@ const handleDelete = attribute => {
     <div class="flex flex-col gap-2 items-start px-5 py-4">
       <div class="flex justify-between items-center w-full">
         <div class="flex flex-col gap-2">
-          <h3 class="text-base font-medium text-n-slate-12">
+          <h3 class="text-heading-2 text-n-slate-12">
             {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.TITLE') }}
           </h3>
-          <p class="mb-0 text-sm text-n-slate-11">
+          <p class="mb-0 text-body-para text-n-slate-11">
             {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.DESCRIPTION') }}
           </p>
         </div>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/AttributeBadge.vue b/app/javascript/dashboard/components-next/CustomAttributes/AttributeBadge.vue
index fb0c9867a..a0494f44b 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/AttributeBadge.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/AttributeBadge.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
 
 const props = defineProps({
   type: {
@@ -18,11 +19,13 @@ const attributeConfig = {
     colorClass: 'text-n-blue-11',
     icon: 'i-lucide-message-circle',
     labelKey: 'ATTRIBUTES_MGMT.BADGES.PRE_CHAT',
+    color: 'slate',
   },
   resolution: {
     colorClass: 'text-n-teal-11',
     icon: 'i-lucide-circle-check-big',
     labelKey: 'ATTRIBUTES_MGMT.BADGES.RESOLUTION',
+    color: 'slate',
   },
 };
 const config = computed(
@@ -31,12 +34,9 @@ const config = computed(
 </script>
 
 <template>
-  <div
-    class="flex gap-1 justify-center items-center px-1.5 py-1 rounded-md shadow outline-1 outline outline-n-container bg-n-solid-2"
-  >
-    <Icon :icon="config.icon" class="size-4" :class="config.colorClass" />
-    <span class="text-xs" :class="config.colorClass">{{
-      t(config.labelKey)
-    }}</span>
-  </div>
+  <Label :label="t(config.labelKey)" :color="config.color" compact>
+    <template #icon>
+      <Icon :icon="config.icon" class="size-3.5 text-n-slate-12" />
+    </template>
+  </Label>
 </template>
diff --git a/app/javascript/dashboard/components-next/EmptyStateLayout.vue b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
index 4c506dd14..f782886e8 100644
--- a/app/javascript/dashboard/components-next/EmptyStateLayout.vue
+++ b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
@@ -26,7 +26,7 @@ defineProps({
     class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
   >
     <div
-      class="relative w-full max-w-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
+      class="relative w-full max-w-5xl mx-auto overflow-hidden h-full max-h-[28rem]"
     >
       <div
         v-if="showBackdrop"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index 1f509d2c6..5b6399da7 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -59,8 +59,8 @@ const togglePortalSwitcher = () => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
-    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto lg:px-6">
+    <header class="sticky top-0 z-10 px-6 pb-3">
+      <div class="w-full max-w-5xl mx-auto">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
@@ -95,16 +95,17 @@ const togglePortalSwitcher = () => {
         <slot name="header-actions" />
       </div>
     </header>
-    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-3 lg:px-6">
+    <main class="flex-1 px-6 overflow-y-auto">
+      <div class="w-full max-w-5xl mx-auto py-3">
         <slot name="content" />
       </div>
     </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
       <PaginationFooter
         :current-page="currentPage"
         :total-items="totalItems"
         :items-per-page="itemsPerPage"
+        class="max-w-[67rem]"
         @update:current-page="updateCurrentPage"
       />
     </footer>
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 696cc837a..30044a564 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
@@ -62,6 +62,7 @@ const onCreate = async () => {
       from: route.name,
     });
 
+    selectedLocale.value = '';
     dialogRef.value?.close();
     useAlert(
       t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.SUCCESS_MESSAGE')
diff --git a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
index 3de1fad0d..105fe46a0 100644
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js
@@ -70,7 +70,7 @@ describe('composeConversationHelper', () => {
       const result = helpers.buildContactableInboxesList(inboxes);
       expect(result[0]).toMatchObject({
         id: 1,
-        icon: 'i-ri-mail-line',
+        icon: 'i-woot-mail',
         label: 'Email Inbox (support@example.com)',
         action: 'inbox',
         value: 1,
diff --git a/app/javascript/dashboard/components-next/Settings/SettingsAccordion.vue b/app/javascript/dashboard/components-next/Settings/SettingsAccordion.vue
new file mode 100644
index 000000000..2bd2f8191
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Settings/SettingsAccordion.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { useToggle } from '@vueuse/core';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  defaultOpen: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const [isOpen, toggle] = useToggle(props.defaultOpen);
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    class="flex items-center justify-between w-full cursor-pointer pb-2 pt-4 border-t border-n-weak"
+    @click="toggle()"
+  >
+    <span class="text-heading-2 text-n-slate-12 w-full">
+      {{ title }}
+    </span>
+  </div>
+  <div v-if="isOpen" class="w-full space-y-4 pt-4 mb-4">
+    <slot />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Settings/SettingsFieldSection.vue b/app/javascript/dashboard/components-next/Settings/SettingsFieldSection.vue
new file mode 100644
index 000000000..2c15e55c5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Settings/SettingsFieldSection.vue
@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  helpText: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="w-full py-2 mb-2 [interpolate-size:allow-keywords]">
+    <div
+      class="grid grid-cols-1 lg:grid-cols-8 gap-1.5 lg:gap-4 items-start lg:items-center"
+    >
+      <label class="text-heading-3 text-n-slate-12 col-span-1 lg:col-span-2">
+        {{ label }}
+      </label>
+      <div class="col-span-1 lg:col-span-6">
+        <slot />
+      </div>
+    </div>
+    <div v-if="helpText" class="grid grid-cols-1 lg:grid-cols-8">
+      <div class="col-span-1 lg:col-span-2 invisible" />
+      <p
+        v-if="helpText"
+        class="mt-1.5 col-span-1 lg:col-span-6 text-label-small text-n-slate-11 ltr:ml-1 rtl:mr-1"
+      >
+        {{ helpText }}
+      </p>
+    </div>
+    <slot name="extra" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue b/app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue
new file mode 100644
index 000000000..62e8b44fa
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue
@@ -0,0 +1,45 @@
+<script setup>
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
+
+defineProps({
+  header: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const modelValue = defineModel({ type: Boolean, default: false });
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-start outline outline-1 -outline-offset-1 outline-n-weak rounded-xl [interpolate-size:allow-keywords]"
+  >
+    <div class="flex flex-col gap-1 items-start w-full px-4 py-3">
+      <div class="flex items-center gap-3 w-full justify-between">
+        <span class="text-heading-3 text-n-slate-12">
+          {{ header }}
+        </span>
+        <ToggleSwitch v-model="modelValue" />
+      </div>
+      <span v-if="description" class="text-body-main text-n-slate-11">
+        {{ description }}
+      </span>
+    </div>
+    <div
+      v-if="$slots.editor"
+      class="w-full border-t border-n-weak"
+      :class="{ 'p-0': compact, 'px-4 pb-4 pt-2': !compact }"
+    >
+      <slot name="editor" />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index 1618cef21..c98c8d43a 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -112,6 +112,19 @@ const containerStyles = computed(() => ({
   height: `${props.size}px`,
 }));
 
+const borderRadiusClass = computed(() => {
+  if (props.roundedFull) {
+    return 'rounded-full';
+  }
+
+  // Approximates 25% of size
+  if (props.size <= 16) return 'rounded'; // 4px
+  if (props.size <= 24) return 'rounded-md'; // 6px
+  if (props.size <= 32) return 'rounded-lg'; // 8px
+  if (props.size <= 48) return 'rounded-xl'; // 12px
+  return 'rounded-2xl'; // 16px
+});
+
 const avatarStyles = computed(() => ({
   ...containerStyles.value,
   backgroundColor:
@@ -184,7 +197,7 @@ watch(
 
 <template>
   <span
-    class="relative inline-flex group/avatar z-0 flex-shrink-0"
+    class="relative inline-flex group/avatar z-0 flex-shrink-0 align-middle"
     :style="containerStyles"
   >
     <!-- Status Badge -->
@@ -216,9 +229,9 @@ watch(
     <!-- Avatar Container -->
     <span
       role="img"
-      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium"
+      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium outline outline-1 -outline-offset-1 outline-[rgb(0_0_0_/_0.03)] dark:outline-[rgb(255_255_255_/_0.04)]"
       :class="[
-        roundedFull ? 'rounded-full' : 'rounded-xl',
+        borderRadiusClass,
         {
           'dark:!bg-[var(--dark-bg)] dark:!text-[var(--dark-text)]':
             !showDefaultAvatar && (!src || !isImageValid),
@@ -267,7 +280,8 @@ watch(
         :handle-image-upload="handleImageUpload"
       >
         <div
-          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+          :class="borderRadiusClass"
           @click="handleUploadAvatar"
         >
           <Icon
diff --git a/app/javascript/dashboard/components-next/captain/PageLayout.vue b/app/javascript/dashboard/components-next/captain/PageLayout.vue
index 2bac5aa97..817608f62 100644
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -117,7 +117,7 @@ const handleCreateAssistant = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
     <header class="sticky top-0 z-10 px-6">
-      <div class="w-full max-w-[60rem] mx-auto">
+      <div class="w-full max-w-5xl mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
         >
@@ -140,7 +140,9 @@ const handleCreateAssistant = () => {
                   >
                     <Button
                       icon="i-lucide-chevron-down"
-                      variant="ghost"
+                      :variant="
+                        showAssistantSwitcherDropdown ? 'faded' : 'ghost'
+                      "
                       color="slate"
                       size="xs"
                       :disabled="isFetchingAssistants"
@@ -204,7 +206,7 @@ const handleCreateAssistant = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto">
-      <div class="w-full max-w-[60rem] h-full mx-auto py-4">
+      <div class="w-full max-w-5xl h-full mx-auto py-4">
         <slot v-if="!showPaywall" name="controls" />
         <div
           v-if="isFetching"
@@ -222,11 +224,12 @@ const handleCreateAssistant = () => {
         <slot />
       </div>
     </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
       <PaginationFooter
         :current-page="currentPage"
         :total-items="totalCount"
         :items-per-page="itemsPerPage"
+        class="max-w-[67rem]"
         @update:current-page="handlePageChange"
       />
     </footer>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue b/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
index b9deb0ff0..2b896a905 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
@@ -27,7 +27,7 @@ const openBilling = () => {
 
 <template>
   <div
-    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
+    class="w-full max-w-5xl mx-auto h-full max-h-[448px] grid place-content-center"
   >
     <BasePaywallModal
       class="mx-auto"
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
index 4cb0b6718..46826a6cd 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
@@ -79,8 +79,8 @@ defineExpose({
       :aria-multiselectable="multiple"
     >
       <li
-        v-for="option in options"
-        :key="option.value"
+        v-for="(option, index) in options"
+        :key="`${option.value}-${index}`"
         class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-alpha-2"
         :class="{
           'bg-n-alpha-2': isSelected(option),
diff --git a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue
index 4ec476a7c..ec937347c 100644
--- a/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue
+++ b/app/javascript/dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue
@@ -50,7 +50,7 @@ const openLink = link => {
       ]"
     >
       <section
-        class="absolute top-full mt-6 ltr:left-0 rtl:right-0 outline outline-1 outline-n-weak bg-n-alpha-3 backdrop-blur-[100px] rounded-xl p-4 w-80"
+        class="absolute top-full mt-6 ltr:left-0 rtl:right-0 outline outline-1 outline-n-weak bg-n-alpha-3 backdrop-blur-[100px] rounded-xl p-4 w-80 z-20"
       >
         <div
           class="absolute -top-[0.77rem] ltr:left-12 rtl:right-12 w-6 h-6 ltr:rotate-45 rtl:-rotate-45 rtl:rounded-tr ltr:rounded-tl rtl:border-r ltr:border-l border-t border-n-weak bg-n-alpha-3 z-10"
diff --git a/app/javascript/dashboard/components-next/icon/provider.js b/app/javascript/dashboard/components-next/icon/provider.js
index 25b54d125..a5b99f84f 100644
--- a/app/javascript/dashboard/components-next/icon/provider.js
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -9,12 +9,12 @@ export function useChannelIcon(inbox) {
     'Channel::Sms': 'i-woot-sms',
     'Channel::Telegram': 'i-woot-telegram',
     'Channel::TwilioSms': 'i-woot-sms',
-    'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
+    'Channel::TwitterProfile': 'i-woot-x',
     'Channel::WebWidget': 'i-woot-website',
     'Channel::Whatsapp': 'i-woot-whatsapp',
     'Channel::Instagram': 'i-woot-instagram',
     'Channel::Tiktok': 'i-woot-tiktok',
-    'Channel::Voice': 'i-ri-phone-fill',
+    'Channel::Voice': 'i-woot-voice',
   };
 
   const providerIconMap = {
diff --git a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
index 7f2319b86..8bccd84cc 100644
--- a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
+++ b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
@@ -22,7 +22,7 @@ describe('useChannelIcon', () => {
   it('returns correct icon for Voice channel', () => {
     const inbox = { channel_type: 'Channel::Voice' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-phone-fill');
+    expect(icon).toBe('i-woot-voice');
   });
 
   it('returns correct icon for Line channel', () => {
@@ -46,7 +46,7 @@ describe('useChannelIcon', () => {
   it('returns correct icon for Twitter channel', () => {
     const inbox = { channel_type: 'Channel::TwitterProfile' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-twitter-x-fill');
+    expect(icon).toBe('i-woot-x');
   });
 
   it('returns correct icon for WebWidget channel', () => {
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index 561f98ffe..e5b5d4aa3 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -108,7 +108,7 @@ onMounted(() => {
     <label
       v-if="label"
       :for="uniqueId"
-      class="mb-0.5 text-sm font-medium text-n-slate-12"
+      class="mb-0.5 text-heading-3 text-n-slate-12"
     >
       {{ label }}
     </label>
@@ -145,7 +145,7 @@ onMounted(() => {
     />
     <p
       v-if="message"
-      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      class="min-w-0 mt-1 mb-0 text-label-small truncate transition-all duration-500 ease-in-out"
       :class="messageClass"
     >
       {{ message }}
diff --git a/app/javascript/dashboard/components-next/Label/AddLabel.vue b/app/javascript/dashboard/components-next/label/AddLabel.vue
similarity index 100%
rename from app/javascript/dashboard/components-next/Label/AddLabel.vue
rename to app/javascript/dashboard/components-next/label/AddLabel.vue
diff --git a/app/javascript/dashboard/components-next/label/Label.vue b/app/javascript/dashboard/components-next/label/Label.vue
new file mode 100644
index 000000000..a945de713
--- /dev/null
+++ b/app/javascript/dashboard/components-next/label/Label.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  label: {
+    type: [Object, String],
+    required: true,
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+  color: {
+    type: String,
+    default: 'slate',
+    validator: value =>
+      ['slate', 'amber', 'teal', 'ruby', 'blue', 'iris'].includes(value),
+  },
+});
+
+const COLOR_CLASSES = {
+  slate: 'bg-n-label-color outline-n-label-border text-n-slate-12',
+  amber: 'bg-n-amber-2 outline-n-amber-4 text-n-amber-11',
+  teal: 'bg-n-teal-2 outline-n-teal-4 text-n-teal-11',
+  ruby: 'bg-n-ruby-2 outline-n-ruby-4 text-n-ruby-11',
+  blue: 'bg-n-blue-2 outline-n-blue-4 text-n-blue-11',
+  iris: 'bg-n-iris-2 outline-n-iris-4 text-n-iris-11',
+};
+
+const isStringLabel = computed(() => typeof props.label === 'string');
+
+const labelTitle = computed(() => {
+  return isStringLabel.value ? props.label : props.label?.title;
+});
+
+const labelDescription = computed(() => {
+  return (!isStringLabel.value && props.label?.description) || '';
+});
+
+const labelColor = computed(() => {
+  return isStringLabel.value ? null : props.label.color;
+});
+
+const colorClasses = computed(() => COLOR_CLASSES[props.color]);
+</script>
+
+<template>
+  <div
+    :title="labelDescription"
+    class="rounded-lg -outline-offset-1 outline outline-1 inline-flex items-center flex-shrink-0"
+    :class="[
+      colorClasses,
+      compact ? 'px-1.5 h-6 gap-1 rounded-md' : 'px-2.5 h-8 gap-1.5 rounded-lg',
+    ]"
+  >
+    <span
+      v-if="labelColor"
+      class="rounded-sm flex-shrink-0"
+      :class="compact ? 'size-1.5' : 'size-2'"
+      :style="{ background: labelColor }"
+    />
+    <slot v-else name="icon" />
+    <span
+      class="whitespace-nowrap"
+      :class="compact ? 'text-label-small' : 'text-label !font-420'"
+    >
+      {{ labelTitle }}
+    </span>
+    <slot name="action" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Label/LabelItem.vue b/app/javascript/dashboard/components-next/label/LabelItem.vue
similarity index 100%
rename from app/javascript/dashboard/components-next/Label/LabelItem.vue
rename to app/javascript/dashboard/components-next/label/LabelItem.vue
diff --git a/app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue b/app/javascript/dashboard/components-next/label/story/AddLabel.story.vue
similarity index 100%
rename from app/javascript/dashboard/components-next/Label/story/AddLabel.story.vue
rename to app/javascript/dashboard/components-next/label/story/AddLabel.story.vue
diff --git a/app/javascript/dashboard/components-next/Label/story/Label.story.vue b/app/javascript/dashboard/components-next/label/story/Label.story.vue
similarity index 100%
rename from app/javascript/dashboard/components-next/Label/story/Label.story.vue
rename to app/javascript/dashboard/components-next/label/story/Label.story.vue
diff --git a/app/javascript/dashboard/components-next/Label/story/fixtures.js b/app/javascript/dashboard/components-next/label/story/fixtures.js
similarity index 100%
rename from app/javascript/dashboard/components-next/Label/story/fixtures.js
rename to app/javascript/dashboard/components-next/label/story/fixtures.js
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index 476ba4d60..6bd0413e0 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -71,10 +71,10 @@ const pageInfo = computed(() => {
 
 <template>
   <div
-    class="flex justify-between h-12 w-full max-w-[calc(60rem-3px)] outline outline-n-container outline-1 -outline-offset-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-surface-1 before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
+    class="flex justify-between h-[3.375rem] w-full border-t border-n-weak mx-auto bg-n-surface-1 py-3 px-6 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-surface-1 before:from-0% before:to-transparent before:h-4 before:pointer-events-none"
   >
     <div class="flex items-center gap-3">
-      <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
+      <span class="min-w-0 text-body-main line-clamp-1 text-n-slate-11">
         {{ currentPageInformation }}
       </span>
     </div>
@@ -97,11 +97,13 @@ const pageInfo = computed(() => {
         :disabled="isFirstPage"
         @click="changePage(currentPage - 1)"
       />
-      <div class="inline-flex items-center gap-2 text-sm text-n-slate-11">
-        <span class="px-3 tabular-nums py-0.5 bg-n-alpha-black2 rounded-md">
+      <div class="inline-flex items-center gap-2 text-sm">
+        <span
+          class="px-3 tabular-nums py-0.5 font-420 bg-n-input-background text-body-main text-n-slate-12 rounded-md"
+        >
           {{ formatFullNumber(currentPage) }}
         </span>
-        <span class="truncate">
+        <span class="truncate text-body-main text-n-slate-11">
           {{ pageInfo }}
         </span>
       </div>
diff --git a/app/javascript/dashboard/components-next/select/Select.vue b/app/javascript/dashboard/components-next/select/Select.vue
new file mode 100644
index 000000000..9fd7af1ed
--- /dev/null
+++ b/app/javascript/dashboard/components-next/select/Select.vue
@@ -0,0 +1,97 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+    validator: options =>
+      options.every(
+        opt => typeof opt === 'object' && 'value' in opt && 'label' in opt
+      ),
+  },
+  groups: {
+    type: Array,
+    default: () => [],
+    validator: groups =>
+      groups.every(
+        group =>
+          'label' in group &&
+          Array.isArray(group.options) &&
+          group.options.every(opt => 'value' in opt && 'label' in opt)
+      ),
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+});
+
+const modelValue = defineModel({
+  type: [String, Number, Boolean],
+  default: '',
+});
+</script>
+
+<template>
+  <div class="w-fit relative">
+    <select
+      v-model="modelValue"
+      :disabled="disabled"
+      class="appearance-none bg-none rounded-lg border-0 outline-1 outline -outline-offset-1 transition-all duration-200 bg-n-surface-1 !mb-0 py-2 px-3 pr-10 text-sm"
+      :class="{
+        'outline-n-weak hover:outline-n-slate-6 focus:outline-n-blue-9':
+          !error && !disabled,
+        'outline-n-red-9 focus:outline-n-red-9': error && !disabled,
+        'outline-n-weak bg-n-slate-2 cursor-not-allowed opacity-60': disabled,
+      }"
+    >
+      <option v-if="placeholder" value="" disabled>
+        {{ placeholder }}
+      </option>
+      <template v-if="groups.length">
+        <optgroup
+          v-for="group in groups"
+          :key="group.label"
+          :label="group.label"
+        >
+          <option
+            v-for="option in group.options"
+            :key="option.value"
+            :value="option.value"
+            :disabled="option.disabled"
+          >
+            {{ option.label }}
+          </option>
+        </optgroup>
+      </template>
+      <template v-else>
+        <option
+          v-for="option in options"
+          :key="option.value"
+          :value="option.value"
+          :disabled="option.disabled"
+        >
+          {{ option.label }}
+        </option>
+      </template>
+    </select>
+    <div
+      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
+    >
+      <Icon
+        icon="i-lucide-chevron-down"
+        class="size-4 text-n-slate-11"
+        :class="{ 'opacity-50': disabled }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
index 3f41a5c41..83d1d4e20 100644
--- a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
@@ -25,8 +25,8 @@ const reauthorizationRequired = computed(() => {
 </script>
 
 <template>
-  <span class="size-5 grid place-content-center rounded-full bg-n-alpha-2">
-    <ChannelIcon :inbox="inbox" class="size-3" />
+  <span class="size-4 grid place-content-center rounded-full">
+    <ChannelIcon :inbox="inbox" class="size-4" />
   </span>
   <div class="flex-1 truncate min-w-0">{{ label }}</div>
   <div
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index c90294dc0..d08147739 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -286,7 +286,7 @@ const menuItems = computed(() => {
           children: sortedInboxes.value.map(inbox => ({
             name: `${inbox.name}-${inbox.id}`,
             label: inbox.name,
-            icon: h(ChannelIcon, { inbox, class: 'size-[12px]' }),
+            icon: h(ChannelIcon, { inbox, class: 'size-[16px]' }),
             to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
             component: leafProps =>
               h(ChannelLeaf, {
@@ -595,6 +595,16 @@ const menuItems = computed(() => {
           name: 'Settings Teams',
           label: t('SIDEBAR.TEAMS'),
           icon: 'i-lucide-users',
+          activeOn: [
+            'settings_teams_list',
+            'settings_teams_new',
+            'settings_teams_finish',
+            'settings_teams_add_agents',
+            'settings_teams_show',
+            'settings_teams_edit',
+            'settings_teams_edit_members',
+            'settings_teams_edit_finish',
+          ],
           to: accountScopedRoute('settings_teams_list'),
         },
         ...(hasAdvancedAssignment.value
@@ -603,6 +613,15 @@ const menuItems = computed(() => {
                 name: 'Settings Agent Assignment',
                 label: t('SIDEBAR.AGENT_ASSIGNMENT'),
                 icon: 'i-lucide-user-cog',
+                activeOn: [
+                  'assignment_policy_index',
+                  'agent_assignment_policy_index',
+                  'agent_assignment_policy_create',
+                  'agent_assignment_policy_edit',
+                  'agent_capacity_policy_index',
+                  'agent_capacity_policy_create',
+                  'agent_capacity_policy_edit',
+                ],
                 to: accountScopedRoute('assignment_policy_index'),
               },
             ]
@@ -611,6 +630,14 @@ const menuItems = computed(() => {
           name: 'Settings Inboxes',
           label: t('SIDEBAR.INBOXES'),
           icon: 'i-lucide-inbox',
+          activeOn: [
+            'settings_inbox_list',
+            'settings_inbox_show',
+            'settings_inbox_new',
+            'settings_inbox_finish',
+            'settings_inboxes_page_channel',
+            'settings_inboxes_add_agents',
+          ],
           to: accountScopedRoute('settings_inbox_list'),
         },
         {
@@ -703,7 +730,7 @@ const menuItems = computed(() => {
       closeMobileSidebar,
       { ignore: ['#mobile-sidebar-launcher'] },
     ]"
-    class="bg-n-background flex flex-col text-sm pb-0.5 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
+    class="bg-n-background flex flex-col text-sm pb-px fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
     :class="[
       {
         'shadow-lg md:shadow-none': isMobileSidebarOpen,
@@ -824,7 +851,7 @@ const menuItems = computed(() => {
         "
       />
       <div
-        class="p-1 flex-shrink-0 flex w-full z-50 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
+        class="px-1 py-1.5 flex-shrink-0 flex w-full z-50 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
         :class="isEffectivelyCollapsed ? 'justify-center' : 'justify-between'"
       >
         <SidebarProfileMenu
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
index f5e6013cf..b1b8dd740 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -44,8 +44,10 @@ const shouldRenderComponent = computed(() => {
         :active
       />
       <template v-else>
-        <Icon v-if="icon" :icon="icon" class="size-4 inline-block" />
-        <div class="flex-1 truncate min-w-0">{{ label }}</div>
+        <span v-if="icon" class="size-4 grid place-content-center rounded-full">
+          <Icon :icon="icon" class="size-4 inline-block" />
+        </span>
+        <div class="flex-1 truncate min-w-0 text-sm">{{ label }}</div>
       </template>
     </component>
   </Policy>
diff --git a/app/javascript/dashboard/components-next/switch/Switch.vue b/app/javascript/dashboard/components-next/switch/Switch.vue
index 7bac2cb9e..93dd8862c 100644
--- a/app/javascript/dashboard/components-next/switch/Switch.vue
+++ b/app/javascript/dashboard/components-next/switch/Switch.vue
@@ -19,20 +19,24 @@ const updateValue = () => {
 <template>
   <button
     type="button"
-    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2 flex-shrink-0"
-    :class="modelValue ? 'bg-n-brand' : 'bg-n-slate-6 disabled:bg-n-slate-6/60'"
+    class="group relative h-4 rounded-full w-7 flex-shrink-0 select-none focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2 transition-colors duration-200 ease-in-out"
+    :class="modelValue ? 'bg-n-brand' : 'bg-n-slate-6'"
     role="switch"
     :aria-checked="modelValue"
     @click="updateValue"
   >
     <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
     <span
-      class="absolute top-0.5 left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-out"
+      class="absolute top-1/2 ltr:left-0.5 rtl:right-0.5 -translate-y-1/2 transition-transform duration-[350ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]"
       :class="
         modelValue
-          ? 'translate-x-3 bg-n-background'
-          : 'translate-x-0 bg-n-background'
+          ? 'ltr:translate-x-3 rtl:-translate-x-3 group-active:ltr:translate-x-[6px] rtl:group-active:-translate-x-[6px]'
+          : 'ltr:translate-x-0 rtl:translate-x-0'
       "
-    />
+    >
+      <span
+        class="block h-3 w-3 rounded-full bg-n-background shadow-md transition-[width] duration-[180ms] ease-in-out group-active:w-[18px]"
+      />
+    </span>
   </button>
 </template>
diff --git a/app/javascript/dashboard/components-next/table/BaseTable.story.vue b/app/javascript/dashboard/components-next/table/BaseTable.story.vue
new file mode 100644
index 000000000..d0115c367
--- /dev/null
+++ b/app/javascript/dashboard/components-next/table/BaseTable.story.vue
@@ -0,0 +1,175 @@
+<script setup>
+import { ref } from 'vue';
+import { BaseTable, BaseTableRow, BaseTableCell } from './index';
+import Button from '../button/Button.vue';
+import Avatar from '../avatar/Avatar.vue';
+import ToggleSwitch from '../switch/Switch.vue';
+
+const automationData = ref([
+  {
+    id: 1,
+    name: 'Welcome Message',
+    description: 'Send welcome message to new contacts',
+    active: true,
+    createdOn: 'Apr 21, 2022',
+  },
+  {
+    id: 2,
+    name: 'Auto-assign to Sales',
+    description: 'Automatically assign sales conversations to sales team',
+    active: false,
+    createdOn: 'May 15, 2022',
+  },
+  {
+    id: 3,
+    name: 'Tag Premium Users',
+    description: 'Add premium tag to conversations from premium users',
+    active: true,
+    createdOn: 'Jun 10, 2022',
+  },
+]);
+
+const agentData = ref([
+  {
+    id: 1,
+    name: 'John Doe',
+    email: 'john@example.com',
+    role: 'Administrator',
+    verified: true,
+    avatarUrl: '',
+  },
+  {
+    id: 2,
+    name: 'Jane Smith',
+    email: 'jane@example.com',
+    role: 'Agent',
+    verified: true,
+    avatarUrl: '',
+  },
+]);
+
+const emptyData = ref([]);
+
+const headers = ['Name', 'Active', 'Created on', 'Actions'];
+const agentHeaders = ['Agent', 'Role', 'Verification', 'Actions'];
+</script>
+
+<template>
+  <Story title="Components/Table" :layout="{ type: 'grid', width: '100%' }">
+    <!-- Basic Table -->
+    <Variant title="Basic Table">
+      <div class="p-4 bg-n-surface-1">
+        <BaseTable :headers="headers" :items="automationData">
+          <template #row="{ items }">
+            <BaseTableRow
+              v-for="automation in items"
+              :key="automation.id"
+              :item="automation"
+            >
+              <template #default>
+                <BaseTableCell>
+                  <div class="flex items-center gap-2 min-w-0 max-w-full">
+                    <span
+                      class="text-body-main text-n-slate-12 truncate min-w-0 flex-1"
+                    >
+                      {{ automation.name }}
+                    </span>
+                    <div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
+                    <span
+                      class="text-body-main text-n-slate-11 truncate min-w-0 flex-1"
+                    >
+                      {{ automation.description }}
+                    </span>
+                  </div>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <div class="flex justify-center">
+                    <ToggleSwitch v-model="automation.active" />
+                  </div>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ automation.createdOn }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell align="end" class="w-24">
+                  <div class="flex gap-3 justify-end flex-shrink-0">
+                    <Button icon="i-woot-edit-pen" slate sm />
+                    <Button icon="i-woot-bin" slate sm />
+                    <Button icon="i-woot-clone" slate sm />
+                  </div>
+                </BaseTableCell>
+              </template>
+            </BaseTableRow>
+          </template>
+        </BaseTable>
+      </div>
+    </Variant>
+
+    <!-- Table with Avatars -->
+    <Variant title="Table with Avatars">
+      <div class="p-4 bg-n-surface-1">
+        <BaseTable :headers="agentHeaders" :items="agentData">
+          <template #row="{ items }">
+            <BaseTableRow v-for="agent in items" :key="agent.id" :item="agent">
+              <template #default>
+                <BaseTableCell>
+                  <div class="flex items-center gap-3 min-w-0">
+                    <Avatar :user="agent" :size="40" class="flex-shrink-0" />
+                    <div class="flex flex-col min-w-0">
+                      <span class="text-body-main text-n-slate-12 truncate">
+                        {{ agent.name }}
+                      </span>
+                      <span class="text-body-main text-n-slate-11 truncate">
+                        {{ agent.email }}
+                      </span>
+                    </div>
+                  </div>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ agent.role }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ agent.verified ? 'Verified' : 'Pending' }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell align="end" class="w-24">
+                  <div class="flex gap-3 justify-end flex-shrink-0">
+                    <Button icon="i-woot-edit-pen" slate sm />
+                    <Button icon="i-woot-bin" slate sm />
+                  </div>
+                </BaseTableCell>
+              </template>
+            </BaseTableRow>
+          </template>
+        </BaseTable>
+      </div>
+    </Variant>
+
+    <!-- Empty State -->
+    <Variant title="Empty State">
+      <div class="p-4 bg-n-surface-1">
+        <BaseTable
+          :headers="headers"
+          :items="emptyData"
+          no-data-message="No automation rules found"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/table/BaseTable.vue b/app/javascript/dashboard/components-next/table/BaseTable.vue
new file mode 100644
index 000000000..9585b1800
--- /dev/null
+++ b/app/javascript/dashboard/components-next/table/BaseTable.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  headers: {
+    type: Array,
+    default: () => [],
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  noDataMessage: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const hasHeaderSlot = computed(() => !!props.headers.length);
+const showHeaders = computed(
+  () => hasHeaderSlot.value && props.items.length > 0
+);
+</script>
+
+<template>
+  <div class="w-full">
+    <table class="min-w-full table-auto divide-y divide-n-weak">
+      <thead v-if="showHeaders" class="border-t border-n-weak">
+        <tr>
+          <th
+            v-for="(header, index) in headers"
+            :key="index"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12 capitalize"
+          >
+            <slot :name="`header-${index}`" :header="header">
+              {{ header }}
+            </slot>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-n-weak text-n-slate-11">
+        <template v-if="items.length">
+          <slot name="row" :items="items" />
+        </template>
+        <tr v-else-if="noDataMessage && !loading">
+          <td
+            :colspan="headers.length || 1"
+            class="py-20 text-center text-body-main !text-base text-n-slate-11"
+          >
+            {{ noDataMessage }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/table/BaseTableCell.vue b/app/javascript/dashboard/components-next/table/BaseTableCell.vue
new file mode 100644
index 000000000..19281a5ee
--- /dev/null
+++ b/app/javascript/dashboard/components-next/table/BaseTableCell.vue
@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  align: {
+    type: String,
+    default: 'start',
+    validator: value => ['start', 'center', 'end'].includes(value),
+  },
+});
+</script>
+
+<template>
+  <td
+    class="py-3 ltr:pr-4 rtl:pl-4 text-body-main"
+    :class="{
+      'text-start': align === 'start',
+      'text-center': align === 'center',
+      'text-end': align === 'end',
+    }"
+  >
+    <slot />
+  </td>
+</template>
diff --git a/app/javascript/dashboard/components-next/table/BaseTableRow.vue b/app/javascript/dashboard/components-next/table/BaseTableRow.vue
new file mode 100644
index 000000000..a844a7bca
--- /dev/null
+++ b/app/javascript/dashboard/components-next/table/BaseTableRow.vue
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <tr>
+    <slot :item="item" />
+  </tr>
+</template>
diff --git a/app/javascript/dashboard/components-next/table/index.js b/app/javascript/dashboard/components-next/table/index.js
new file mode 100644
index 000000000..0c3f4fc55
--- /dev/null
+++ b/app/javascript/dashboard/components-next/table/index.js
@@ -0,0 +1,3 @@
+export { default as BaseTable } from './BaseTable.vue';
+export { default as BaseTableRow } from './BaseTableRow.vue';
+export { default as BaseTableCell } from './BaseTableCell.vue';
diff --git a/app/javascript/dashboard/components-next/year-in-review/ShareModal.vue b/app/javascript/dashboard/components-next/year-in-review/ShareModal.vue
index 12a556b0e..079b98574 100644
--- a/app/javascript/dashboard/components-next/year-in-review/ShareModal.vue
+++ b/app/javascript/dashboard/components-next/year-in-review/ShareModal.vue
@@ -18,7 +18,7 @@ const props = defineProps({
   },
   year: {
     type: [Number, String],
-    required: true,
+    default: '',
   },
 });
 
diff --git a/app/javascript/dashboard/components/FormSection.vue b/app/javascript/dashboard/components/FormSection.vue
deleted file mode 100644
index d622d470d..000000000
--- a/app/javascript/dashboard/components/FormSection.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <div class="flex flex-col items-start w-full gap-6">
-    <div class="flex flex-col w-full gap-4">
-      <h4 v-if="title" class="text-lg font-medium text-n-slate-12">
-        {{ title }}
-      </h4>
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex-grow h-px bg-n-weak" />
-      </div>
-      <p v-if="description" class="mb-0 text-sm font-normal text-n-slate-12">
-        {{ description }}
-      </p>
-    </div>
-    <div class="flex flex-col w-full gap-6">
-      <slot />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue
index ecdaa8a6f..583c912a3 100644
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -10,12 +10,9 @@ defineProps({
 </script>
 
 <template>
-  <div class="flex items-center text-n-slate-11 text-xs min-w-0">
-    <ChannelIcon
-      :inbox="inbox"
-      class="size-3 ltr:mr-1 rtl:ml-1 flex-shrink-0"
-    />
-    <span class="truncate">
+  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+    <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
+    <span class="truncate text-label-small text-n-slate-11">
       {{ inbox.name }}
     </span>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/LoadingState.vue b/app/javascript/dashboard/components/widgets/LoadingState.vue
index b68cd2b6c..c69d1e283 100644
--- a/app/javascript/dashboard/components/widgets/LoadingState.vue
+++ b/app/javascript/dashboard/components/widgets/LoadingState.vue
@@ -11,7 +11,7 @@ defineProps({
     <h6
       class="flex items-center gap-3 text-base text-center w-100 text-n-slate-11"
     >
-      <span class="text-base font-medium text-n-slate-12">
+      <span class="text-body-main !text-base text-n-slate-12">
         {{ message }}
       </span>
       <Spinner class="text-n-brand" />
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index 4f7668604..969303454 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -15,7 +15,7 @@ export default {
 
 <template>
   <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">
+    <div class="max-w-7xl w-full mx-auto pt-4 pb-0 px-6">
       <h2 class="text-2xl text-n-slate-12 mb-1 font-medium">
         {{ headerTitle }}
       </h2>
diff --git a/app/javascript/dashboard/components/widgets/forms/Input.vue b/app/javascript/dashboard/components/widgets/forms/Input.vue
index b6ee69ec8..2b40d10df 100644
--- a/app/javascript/dashboard/components/widgets/forms/Input.vue
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -61,7 +61,7 @@ export default {
 
 <template>
   <label class="input-container">
-    <span v-if="label">{{ label }}</span>
+    <span v-if="label" class="text-heading-3">{{ label }}</span>
     <input
       :value="modelValue"
       :type="type"
@@ -71,7 +71,7 @@ export default {
       @input="onChange"
       @blur="onBlur"
     />
-    <p v-if="helpText" class="help-text">{{ helpText }}</p>
+    <p v-if="helpText" class="help-text text-label-small">{{ helpText }}</p>
     <span v-if="error" class="message">
       {{ error }}
     </span>
@@ -81,7 +81,7 @@ export default {
 
 <style scoped lang="scss">
 .help-text {
-  @apply mt-0.5 text-xs not-italic text-n-slate-11;
+  @apply mt-0.5 not-italic text-n-slate-11;
 }
 
 .message {
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 71cd0aa2c..401739706 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -36,17 +36,17 @@ const INBOX_ICON_MAP_FILL = {
 const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
 
 const INBOX_ICON_MAP_LINE = {
-  [INBOX_TYPES.WEB]: 'i-ri-global-line',
-  [INBOX_TYPES.FB]: 'i-ri-messenger-line',
-  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-line',
-  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-line',
-  [INBOX_TYPES.API]: 'i-ri-cloudy-line',
-  [INBOX_TYPES.EMAIL]: 'i-ri-mail-line',
-  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-line',
-  [INBOX_TYPES.LINE]: 'i-ri-line-line',
-  [INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-line',
-  [INBOX_TYPES.TIKTOK]: 'i-ri-tiktok-line',
-  [INBOX_TYPES.VOICE]: 'i-ri-phone-line',
+  [INBOX_TYPES.WEB]: 'i-woot-website',
+  [INBOX_TYPES.FB]: 'i-woot-messenger',
+  [INBOX_TYPES.TWITTER]: 'i-woot-x',
+  [INBOX_TYPES.WHATSAPP]: 'i-woot-whatsapp',
+  [INBOX_TYPES.API]: 'i-woot-api',
+  [INBOX_TYPES.EMAIL]: 'i-woot-mail',
+  [INBOX_TYPES.TELEGRAM]: 'i-woot-telegram',
+  [INBOX_TYPES.LINE]: 'i-woot-line',
+  [INBOX_TYPES.INSTAGRAM]: 'i-woot-instagram',
+  [INBOX_TYPES.VOICE]: 'i-woot-voice',
+  [INBOX_TYPES.TIKTOK]: 'i-woot-tiktok',
 };
 
 const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
diff --git a/app/javascript/dashboard/helper/specs/inbox.spec.js b/app/javascript/dashboard/helper/specs/inbox.spec.js
index 784681546..775f05d3a 100644
--- a/app/javascript/dashboard/helper/specs/inbox.spec.js
+++ b/app/javascript/dashboard/helper/specs/inbox.spec.js
@@ -99,19 +99,19 @@ describe('#Inbox Helpers', () => {
     describe('line variant', () => {
       it('returns correct line icon for web widget', () => {
         expect(getInboxIconByType(INBOX_TYPES.WEB, null, 'line')).toBe(
-          'i-ri-global-line'
+          'i-woot-website'
         );
       });
 
       it('returns correct line icon for Facebook', () => {
         expect(getInboxIconByType(INBOX_TYPES.FB, null, 'line')).toBe(
-          'i-ri-messenger-line'
+          'i-woot-messenger'
         );
       });
 
       it('returns correct line icon for TikTok', () => {
         expect(getInboxIconByType(INBOX_TYPES.TIKTOK, null, 'line')).toBe(
-          'i-ri-tiktok-line'
+          'i-woot-tiktok'
         );
       });
 
@@ -147,7 +147,7 @@ describe('#Inbox Helpers', () => {
         it('returns WhatsApp line icon for Twilio WhatsApp number', () => {
           expect(
             getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp', 'line')
-          ).toBe('i-ri-whatsapp-line');
+          ).toBe('i-woot-whatsapp');
         });
 
         it('returns SMS line icon for regular Twilio number', () => {
diff --git a/app/javascript/dashboard/i18n/locale/en/agentBots.json b/app/javascript/dashboard/i18n/locale/en/agentBots.json
index d3a0bb991..dc92016ab 100644
--- a/app/javascript/dashboard/i18n/locale/en/agentBots.json
+++ b/app/javascript/dashboard/i18n/locale/en/agentBots.json
@@ -4,6 +4,9 @@
     "LOADING_EDITOR": "Loading editor...",
     "DESCRIPTION": "Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try. You can manage your bots from this page or create new ones using the 'Add Bot' button.",
     "LEARN_MORE": "Learn about agent bots",
+    "COUNT": "{n} bot | {n} bots",
+    "SEARCH_PLACEHOLDER": "Search bots...",
+    "NO_RESULTS": "No bots found matching your search",
     "GLOBAL_BOT": "System bot",
     "GLOBAL_BOT_BADGE": "System",
     "AVATAR": {
@@ -34,7 +37,8 @@
       "LOADING": "Fetching bots...",
       "TABLE_HEADER": {
         "DETAILS": "Bot Details",
-        "URL": "Webhook URL"
+        "URL": "Webhook URL",
+        "ACTIONS": "Actions"
       }
     },
     "DELETE": {
diff --git a/app/javascript/dashboard/i18n/locale/en/agentMgmt.json b/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
index 448994e69..4b66fe864 100644
--- a/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
@@ -9,6 +9,7 @@
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
     },
+    "COUNT": "{n} agent | {n} agents",
     "LIST": {
       "404": "There are no agents associated to this account",
       "TITLE": "Manage agents in your team",
@@ -96,6 +97,8 @@
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       }
     },
+    "SEARCH_PLACEHOLDER": "Search agents...",
+    "NO_RESULTS": "No agents found matching your search",
     "SEARCH": {
       "NO_RESULTS": "No results found."
     },
diff --git a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
index 4c2d5fbe0..e83950b14 100644
--- a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
@@ -5,6 +5,9 @@
     "LOADING": "Fetching custom attributes",
     "DESCRIPTION": "A custom attribute tracks additional details about your contacts or conversations—such as the subscription plan or the date of their first purchase. You can add different types of custom attributes, such as text, lists, or numbers, to capture the specific information you need.",
     "LEARN_MORE": "Learn more about custom attributes",
+    "COUNT": "{n} attribute | {n} attributes",
+    "SEARCH_PLACEHOLDER": "Search attributes...",
+    "NO_RESULTS": "No attributes found matching your search",
     "ATTRIBUTE_MODELS": {
       "CONVERSATION": "Conversation",
       "CONTACT": "Contact"
diff --git a/app/javascript/dashboard/i18n/locale/en/automation.json b/app/javascript/dashboard/i18n/locale/en/automation.json
index 341027299..22a9735f4 100644
--- a/app/javascript/dashboard/i18n/locale/en/automation.json
+++ b/app/javascript/dashboard/i18n/locale/en/automation.json
@@ -3,8 +3,11 @@
     "HEADER": "Automation",
     "DESCRIPTION": "Automation can replace and streamline existing processes that require manual effort, such as adding labels and assigning conversations to the most suitable agent. This allows the team to focus on their strengths while reducing time spent on routine tasks.",
     "LEARN_MORE": "Learn more about automation",
-    "HEADER_BTN_TXT": "Add Automation Rule",
+    "COUNT": "{n} automation | {n} automations",
+    "HEADER_BTN_TXT": "Create Automation",
     "LOADING": "Fetching automation rules",
+    "SEARCH_PLACEHOLDER": "Search automation rules...",
+    "NO_RESULTS": "No automation rules found matching your search",
     "ADD": {
       "TITLE": "Add Automation Rule",
       "SUBMIT": "Create",
@@ -42,9 +45,9 @@
     "LIST": {
       "TABLE_HEADER": {
         "NAME": "Name",
-        "DESCRIPTION": "Description",
         "ACTIVE": "Active",
-        "CREATED_ON": "Created on"
+        "CREATED_ON": "Created on",
+        "ACTIONS": "Actions"
       },
       "404": "No automation rules found"
     },
diff --git a/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json b/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
index 3ff246f06..246d3f5b3 100644
--- a/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/cannedMgmt.json
@@ -3,8 +3,11 @@
     "HEADER": "Canned Responses",
     "LEARN_MORE": "Learn more about canned responses",
     "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
+    "COUNT": "{n} canned response | {n} canned responses",
     "HEADER_BTN_TXT": "Add canned response",
     "LOADING": "Fetching canned responses...",
+    "SEARCH_PLACEHOLDER": "Search canned responses...",
+    "NO_RESULTS": "No canned responses found matching your search",
     "SEARCH_404": "There are no items matching this query.",
     "LIST": {
       "404": "There are no canned responses available in this account.",
diff --git a/app/javascript/dashboard/i18n/locale/en/customRole.json b/app/javascript/dashboard/i18n/locale/en/customRole.json
index b7b48b5e7..f7c1709bd 100644
--- a/app/javascript/dashboard/i18n/locale/en/customRole.json
+++ b/app/javascript/dashboard/i18n/locale/en/customRole.json
@@ -3,8 +3,11 @@
     "HEADER": "Custom Roles",
     "LEARN_MORE": "Learn more about custom roles",
     "DESCRIPTION": "Custom roles are roles that are created by the account owner or admin. These roles can be assigned to agents to define their access and permissions within the account. Custom roles can be created with specific permissions and access levels to suit the requirements of the organization.",
+    "COUNT": "{n} custom role | {n} custom roles",
     "HEADER_BTN_TXT": "Add custom role",
     "LOADING": "Fetching custom roles...",
+    "SEARCH_PLACEHOLDER": "Search custom roles...",
+    "NO_RESULTS": "No custom roles found matching your search",
     "SEARCH_404": "There are no items matching this query.",
     "PAYWALL": {
       "TITLE": "Upgrade to create custom roles",
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index f45e7b4df..f4f62764b 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -3,6 +3,9 @@
     "HEADER": "Inboxes",
     "DESCRIPTION": "A channel is the mode of communication your customer chooses to interact with you. An inbox is where you manage interactions for a specific channel. It can include communications from various sources such as email, live chat, and social media.",
     "LEARN_MORE": "Learn more about inboxes",
+    "COUNT": "{n} inbox | {n} inboxes",
+    "SEARCH_PLACEHOLDER": "Search inboxes...",
+    "NO_RESULTS": "No inboxes found matching your search",
     "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
     "CLICK_TO_RECONNECT": "Click here to reconnect.",
     "WHATSAPP_REGISTRATION_INCOMPLETE": "Your WhatsApp Business registration isn’t complete. Please check your display name status in Meta Business Manager before reconnecting.",
@@ -575,7 +578,7 @@
           "SUBTITLE": "Use only the configured business name as the sender name in the email header."
         },
         "BUSINESS_NAME": {
-          "BUTTON_TEXT": "+ Configure your business name",
+          "BUTTON_TEXT": "Configure your business name",
           "PLACEHOLDER": "Enter your business name",
           "SAVE_BUTTON_TEXT": "Save"
         }
@@ -625,6 +628,8 @@
       "ACCOUNT_HEALTH": "Account Health",
       "CSAT": "CSAT"
     },
+    "CHANNEL_PREFERENCES": "Channel Preferences",
+    "WIDGET_FEATURES": "Widget features",
     "ACCOUNT_HEALTH": {
       "TITLE": "Manage your WhatsApp account",
       "DESCRIPTION": "Review your WhatsApp account status, messaging limits, and quality. Update settings or resolve issues if needed",
@@ -758,6 +763,7 @@
       "LABEL": "Help Center",
       "PLACEHOLDER": "Select Help Center",
       "SELECT_PLACEHOLDER": "Select Help Center",
+      "NONE": "None",
       "REMOVE": "Remove Help Center",
       "SUB_TEXT": "Attach a Help Center with the inbox"
     },
@@ -911,9 +917,11 @@
       "UNAVAILABLE_MESSAGE_LABEL": "Unavailable message for visitors",
       "TOGGLE_HELP": "Enabling business availability will show the available hours on live chat widget even if all the agents are offline. Outside available hours visitors can be warned with a message and a pre-chat form.",
       "DAY": {
+        "DAY": "Day",
+        "AVAILABILITY": "Availability",
+        "HOURS": "Hours",
         "ENABLE": "Enable availability for this day",
         "UNAVAILABLE": "Unavailable",
-        "HOURS": "hours",
         "VALIDATION_ERROR": "Starting time should be before closing time.",
         "CHOOSE": "Choose"
       },
@@ -1020,11 +1028,12 @@
           "IN_A_DAY": "In a day"
         },
         "WIDGET_COLOR_LABEL": "Widget Color",
-        "WIDGET_BUBBLE_POSITION_LABEL": "Widget Bubble Position",
-        "WIDGET_BUBBLE_TYPE_LABEL": "Widget Bubble Type",
+        "WIDGET_BUBBLE": "Bubble",
+        "WIDGET_BUBBLE_POSITION_LABEL": "Position:",
+        "WIDGET_BUBBLE_TYPE_LABEL": "Type:",
         "WIDGET_BUBBLE_LAUNCHER_TITLE": {
           "DEFAULT": "Chat with us",
-          "LABEL": "Widget Bubble Launcher Title",
+          "LABEL": "Launcher Title",
           "PLACE_HOLDER": "Chat with us"
         },
         "UPDATE": {
@@ -1049,7 +1058,7 @@
       },
       "WIDGET_SCREEN": {
         "DEFAULT": "Default",
-        "CHAT": "Chat"
+        "CHAT": "Chat mode"
       },
       "REPLY_TIME": {
         "IN_A_FEW_MINUTES": "Typically replies in a few minutes",
diff --git a/app/javascript/dashboard/i18n/locale/en/integrationApps.json b/app/javascript/dashboard/i18n/locale/en/integrationApps.json
index b91b434f7..828f4ea67 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrationApps.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrationApps.json
@@ -3,6 +3,9 @@
     "FETCHING": "Fetching Integrations",
     "NO_HOOK_CONFIGURED": "There are no {integrationId} integrations configured in this account.",
     "HEADER": "Applications",
+    "COUNT": "{n} integration | {n} integrations",
+    "SEARCH_PLACEHOLDER": "Search...",
+    "NO_RESULTS": "No results found matching your search",
     "STATUS": {
       "ENABLED": "Enabled",
       "DISABLED": "Disabled"
@@ -31,6 +34,7 @@
     "LIST": {
       "FETCHING": "Fetching integration hooks",
       "INBOX": "Inbox",
+      "ACTIONS": "Actions",
       "DELETE": {
         "BUTTON_TEXT": "Delete"
       }
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index da3438f97..8ee990006 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -1,6 +1,7 @@
 {
   "INTEGRATION_SETTINGS": {
     "SHOPIFY": {
+      "HEADER": "Shopify",
       "DELETE": {
         "TITLE": "Delete Shopify Integration",
         "MESSAGE": "Are you sure you want to delete the Shopify integration?"
@@ -19,6 +20,8 @@
     "DESCRIPTION": "Chatwoot integrates with multiple tools and services to improve your team's efficiency. Explore the list below to configure your favorite apps.",
     "LEARN_MORE": "Learn more about integrations",
     "LOADING": "Fetching integrations",
+    "SEARCH_PLACEHOLDER": "Search integrations...",
+    "NO_RESULTS": "No integrations found matching your search",
     "CAPTAIN": {
       "DISABLED": "Captain is not enabled on your account.",
       "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
@@ -28,6 +31,9 @@
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "LEARN_MORE": "Learn more about webhooks",
+      "COUNT": "{n} webhook | {n} webhooks",
+      "SEARCH_PLACEHOLDER": "Search webhooks...",
+      "NO_RESULTS": "No webhooks found matching your search",
       "FORM": {
         "CANCEL": "Cancel",
         "DESC": "Webhook events provide you the realtime information about what's happening in your Chatwoot account. Please enter a valid URL to configure a callback.",
@@ -104,6 +110,7 @@
       }
     },
     "SLACK": {
+      "HEADER": "Slack",
       "DELETE": "Delete",
       "DELETE_CONFIRMATION": {
         "TITLE": "Delete the integration",
@@ -223,10 +230,17 @@
       "SIDEBAR_TXT": "<p><b>Dashboard Apps</b></p><p>Dashboard Apps allow organizations to embed an application inside the Chatwoot dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that inside the dashboard to provide user information, their orders, or their previous payment history.</p><p>When you embed your application using the dashboard in Chatwoot, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context.</p><p>To add a new dashboard app, click on the button 'Add a new dashboard app'.</p>",
       "DESCRIPTION": "Dashboard Apps allow organizations to embed an application inside the dashboard to provide the context for customer support agents. This feature allows you to create an application independently and embed that to provide user information, their orders, or their previous payment history.",
       "LEARN_MORE": "Learn more about Dashboard Apps",
+      "COUNT": "{n} dashboard app | {n} dashboard apps",
+      "SEARCH_PLACEHOLDER": "Search dashboard apps...",
+      "NO_RESULTS": "No dashboard apps found matching your search",
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
-        "TABLE_HEADER": { "NAME": "Name", "ENDPOINT": "Endpoint" },
+        "TABLE_HEADER": {
+          "NAME": "Name",
+          "ENDPOINT": "Endpoint",
+          "ACTIONS": "Actions"
+        },
         "EDIT_TOOLTIP": "Edit app",
         "DELETE_TOOLTIP": "Delete app"
       },
@@ -262,6 +276,7 @@
       }
     },
     "LINEAR": {
+      "HEADER": "Linear",
       "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
       "LOADING": "Fetching linear issues...",
       "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
@@ -356,6 +371,7 @@
       }
     },
     "NOTION": {
+      "HEADER": "Notion",
       "DELETE": {
         "TITLE": "Are you sure you want to delete the Notion integration?",
         "MESSAGE": "Deleting this integration will remove access to your Notion workspace and stop all related functionality.",
diff --git a/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json b/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json
index 705b18d0e..96e272e46 100644
--- a/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/labelsMgmt.json
@@ -5,6 +5,9 @@
     "LOADING": "Fetching labels",
     "DESCRIPTION": "Labels help you categorize and prioritize conversations and leads. You can assign a label to a conversation or contact using the side panel.",
     "LEARN_MORE": "Learn more about labels",
+    "COUNT": "{n} label | {n} labels",
+    "SEARCH_PLACEHOLDER": "Search labels...",
+    "NO_RESULTS": "No labels found matching your search",
     "SEARCH_404": "There are no items matching this query",
     "LIST": {
       "404": "There are no labels available in this account.",
@@ -13,7 +16,8 @@
       "TABLE_HEADER": {
         "NAME": "Name",
         "DESCRIPTION": "Description",
-        "COLOR": "Color"
+        "COLOR": "Color",
+        "ACTION": "Actions"
       }
     },
     "FORM": {
diff --git a/app/javascript/dashboard/i18n/locale/en/macros.json b/app/javascript/dashboard/i18n/locale/en/macros.json
index fcb409f34..e12f0ca73 100644
--- a/app/javascript/dashboard/i18n/locale/en/macros.json
+++ b/app/javascript/dashboard/i18n/locale/en/macros.json
@@ -3,9 +3,12 @@
     "HEADER": "Macros",
     "DESCRIPTION": "A macro is a set of saved actions that help customer service agents easily complete tasks. The agents can define a set of actions like tagging a conversation with a label, sending an email transcript, updating a custom attribute, etc., and they can run these actions in a single click.",
     "LEARN_MORE": "Learn more about macros",
+    "COUNT": "{n} macro | {n} macros",
     "HEADER_BTN_TXT": "Add a new macro",
     "HEADER_BTN_TXT_SAVE": "Save macro",
     "LOADING": "Fetching macros",
+    "SEARCH_PLACEHOLDER": "Search macros...",
+    "NO_RESULTS": "No macros found matching your search",
     "ERROR": "Something went wrong. Please try again",
     "ORDER_INFO": "Macros will run in the order you add your actions. You can rearrange them by dragging them by the handle beside each node.",
     "ADD": {
@@ -29,7 +32,8 @@
         "NAME": "Name",
         "CREATED BY": "Created by",
         "LAST_UPDATED_BY": "Last updated by",
-        "VISIBILITY": "Visibility"
+        "VISIBILITY": "Visibility",
+        "ACTIONS": "Actions"
       },
       "404": "No macros found"
     },
diff --git a/app/javascript/dashboard/i18n/locale/en/mfa.json b/app/javascript/dashboard/i18n/locale/en/mfa.json
index f7556fdcf..b03917bcd 100644
--- a/app/javascript/dashboard/i18n/locale/en/mfa.json
+++ b/app/javascript/dashboard/i18n/locale/en/mfa.json
@@ -1,7 +1,7 @@
 {
   "MFA_SETTINGS": {
     "TITLE": "Two-Factor Authentication",
-    "SUBTITLE": "Secure your account with TOTP-based authentication",
+    "SUBTITLE": "Protect your account from unauthorized access with TOTP-based authentication. This adds an extra layer of security to your account.",
     "DESCRIPTION": "Add an extra layer of security to your account using a time-based one-time password (TOTP)",
     "STATUS_TITLE": "Authentication Status",
     "STATUS_DESCRIPTION": "Manage your two-factor authentication settings and backup recovery codes",
diff --git a/app/javascript/dashboard/i18n/locale/en/sla.json b/app/javascript/dashboard/i18n/locale/en/sla.json
index 0da7873be..9ab41fb82 100644
--- a/app/javascript/dashboard/i18n/locale/en/sla.json
+++ b/app/javascript/dashboard/i18n/locale/en/sla.json
@@ -5,7 +5,12 @@
     "ADD_ACTION_LONG": "Create a new SLA Policy",
     "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
     "LEARN_MORE": "Learn more about SLA",
+    "COUNT": "{n} SLA | {n} SLAs",
     "LOADING": "Fetching SLAs",
+    "SEARCH_PLACEHOLDER": "Search SLA...",
+    "SEARCH": {
+      "NO_RESULTS": "No SLA found matching your search"
+    },
     "PAYWALL": {
       "TITLE": "Upgrade to create SLAs",
       "AVAILABLE_ON": "The SLA feature is only available in the Business and Enterprise plans.",
@@ -20,14 +25,18 @@
     },
     "LIST": {
       "404": "There are no SLAs available in this account.",
+      "TABLE_HEADER": {
+        "SLA": "SLA",
+        "BUSINESS_HOURS": "Business hours"
+      },
       "EMPTY": {
         "TITLE_1": "Enterprise P0",
         "DESC_1": "Issues raised by enterprise customers, that require immediate attention.",
         "TITLE_2": "Enterprise P1",
         "DESC_2": "Issues raised by enterprise customers, that needs to be acknowledged quickly."
       },
-      "BUSINESS_HOURS_ON": "Business hours on",
-      "BUSINESS_HOURS_OFF": "Business hours off",
+      "BUSINESS_HOURS_ON": "Turned on",
+      "BUSINESS_HOURS_OFF": "Turned off",
       "RESPONSE_TYPES": {
         "FRT": "First response time threshold",
         "NRT": "Next response time threshold",
diff --git a/app/javascript/dashboard/i18n/locale/en/teamsSettings.json b/app/javascript/dashboard/i18n/locale/en/teamsSettings.json
index f0a950fd1..f3ce7f167 100644
--- a/app/javascript/dashboard/i18n/locale/en/teamsSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/teamsSettings.json
@@ -5,6 +5,9 @@
     "LOADING": "Fetching teams",
     "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
     "LEARN_MORE": "Learn more about teams",
+    "COUNT": "{n} team | {n} teams",
+    "SEARCH_PLACEHOLDER": "Search teams...",
+    "NO_RESULTS": "No teams found matching your search",
     "LIST": {
       "404": "There are no teams created on this account.",
       "EDIT_TEAM": "Edit team",
@@ -64,8 +67,8 @@
       "ERROR_MESSAGE": "Couldn't save the team details. Try again."
     },
     "AGENTS": {
-      "AGENT": "AGENT",
-      "EMAIL": "EMAIL",
+      "AGENT": "Agent",
+      "EMAIL": "Email",
       "BUTTON_TEXT": "Add agents",
       "ADD_AGENTS": "Adding Agents to your Team...",
       "SELECT": "select",
diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index 198a2ae80..90985a98f 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -1,206 +1,329 @@
-<script>
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
 import WidgetHead from './WidgetHead.vue';
 import WidgetBody from './WidgetBody.vue';
 import WidgetFooter from './WidgetFooter.vue';
-import InputRadioGroup from 'dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue';
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import Code from 'dashboard/components/Code.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
 import { useBranding } from 'shared/composables/useBranding';
-import { mapGetters } from 'vuex';
+import { useMapGetter } from 'dashboard/composables/store';
 
-export default {
-  name: 'Widget',
-  components: {
-    WidgetHead,
-    WidgetBody,
-    WidgetFooter,
-    InputRadioGroup,
+const props = defineProps({
+  welcomeHeading: {
+    type: String,
+    default: '',
   },
-  props: {
-    welcomeHeading: {
-      type: String,
-      default: '',
-    },
-    welcomeTagline: {
-      type: String,
-      default: '',
-    },
-    websiteName: {
-      type: String,
-      required: true,
-    },
-    logo: {
-      type: String,
-      default: '',
-    },
-    isOnline: {
-      type: Boolean,
-      default: true,
-    },
-    replyTime: {
-      type: String,
-      default: '',
-    },
-    color: {
-      type: String,
-      default: '',
-    },
-    widgetBubblePosition: {
-      type: String,
-      default: '',
-    },
-    widgetBubbleLauncherTitle: {
-      type: String,
-      default: '',
-    },
-    widgetBubbleType: {
-      type: String,
-      default: '',
-    },
+  welcomeTagline: {
+    type: String,
+    default: '',
   },
-  setup() {
-    const { replaceInstallationName } = useBranding();
-    return {
-      replaceInstallationName,
-    };
+  websiteName: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      widgetScreens: [
-        {
-          id: 'default',
-          title: this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_SCREEN.DEFAULT'),
-          checked: true,
-        },
-        {
-          id: 'chat',
-          title: this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_SCREEN.CHAT'),
-          checked: false,
-        },
-      ],
-      isDefaultScreen: true,
-      isWidgetVisible: true,
-    };
+  logo: {
+    type: String,
+    default: '',
   },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    getWidgetConfig() {
-      return {
-        welcomeHeading: this.welcomeHeading,
-        welcomeTagline: this.welcomeTagline,
-        websiteName: this.websiteName,
-        logo: this.logo,
-        isDefaultScreen: this.isDefaultScreen,
-        isOnline: this.isOnline,
-        replyTime: this.replyTimeText,
-        color: this.color,
-      };
-    },
-    replyTimeText() {
-      switch (this.replyTime) {
-        case 'in_a_few_minutes':
-          return this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_FEW_MINUTES'
-          );
-        case 'in_a_day':
-          return this.$t('INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_DAY');
-        default:
-          return this.$t('INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_FEW_HOURS');
-      }
-    },
-    getBubblePositionStyle() {
-      return {
-        justifyContent: this.widgetBubblePosition === 'left' ? 'start' : 'end',
-      };
-    },
-    isBubbleExpanded() {
-      return (
-        !this.isWidgetVisible && this.widgetBubbleType === 'expanded_bubble'
-      );
-    },
-    getWidgetBubbleLauncherTitle() {
-      return this.isWidgetVisible || this.widgetBubbleType === 'standard'
-        ? ' '
-        : this.widgetBubbleLauncherTitle;
-    },
+  isOnline: {
+    type: Boolean,
+    default: true,
   },
-  methods: {
-    handleScreenChange(item) {
-      this.isDefaultScreen = item.id === 'default';
-    },
-    toggleWidget() {
-      this.isWidgetVisible = !this.isWidgetVisible;
-      this.isDefaultScreen = true;
-    },
+  replyTime: {
+    type: String,
+    default: '',
   },
+  color: {
+    type: String,
+    default: '',
+  },
+  widgetBubblePosition: {
+    type: String,
+    default: '',
+  },
+  widgetBubbleLauncherTitle: {
+    type: String,
+    default: '',
+  },
+  widgetBubbleType: {
+    type: String,
+    default: '',
+  },
+  webWidgetScript: {
+    type: String,
+    default: '',
+  },
+});
+
+const { t } = useI18n();
+const { replaceInstallationName } = useBranding();
+const globalConfig = useMapGetter('globalConfig/get');
+
+const isChatMode = ref(false);
+const [isWidgetVisible, toggleWidget] = useToggle(true);
+
+const activeTabIndex = ref(0);
+
+const tabs = computed(() => [
+  {
+    label: t(
+      'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_VIEW_OPTION.PREVIEW'
+    ),
+  },
+  {
+    label: t(
+      'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_VIEW_OPTION.SCRIPT'
+    ),
+  },
+]);
+
+const isPreviewTab = computed(() => activeTabIndex.value === 0);
+
+const widgetScript = computed(() => {
+  if (!props.webWidgetScript) return '';
+
+  const options = {
+    position: props.widgetBubblePosition,
+    type: props.widgetBubbleType,
+    launcherTitle: props.widgetBubbleLauncherTitle,
+  };
+
+  const script = props.webWidgetScript;
+  return (
+    script.substring(0, 13) +
+    t('INBOX_MGMT.WIDGET_BUILDER.SCRIPT_SETTINGS', {
+      options: JSON.stringify(options),
+    }) +
+    script.substring(13)
+  );
+});
+
+const replyTimeText = computed(() => {
+  switch (props.replyTime) {
+    case 'in_a_few_minutes':
+      return t('INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_FEW_MINUTES');
+    case 'in_a_day':
+      return t('INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_DAY');
+    default:
+      return t('INBOX_MGMT.WIDGET_BUILDER.REPLY_TIME.IN_A_FEW_HOURS');
+  }
+});
+
+const getWidgetConfig = computed(() => ({
+  welcomeHeading: props.welcomeHeading,
+  welcomeTagline: props.welcomeTagline,
+  websiteName: props.websiteName,
+  logo: props.logo,
+  isDefaultScreen: !isChatMode.value,
+  isOnline: props.isOnline,
+  replyTime: replyTimeText.value,
+  color: props.color,
+}));
+
+const getBubblePositionStyle = computed(() => ({
+  justifyContent: props.widgetBubblePosition === 'left' ? 'start' : 'end',
+}));
+
+const isBubbleExpanded = computed(
+  () => !isWidgetVisible.value && props.widgetBubbleType === 'expanded_bubble'
+);
+
+const getWidgetBubbleLauncherTitle = computed(() =>
+  isWidgetVisible.value || props.widgetBubbleType === 'standard'
+    ? ' '
+    : props.widgetBubbleLauncherTitle
+);
+
+const handleTabChange = tab => {
+  activeTabIndex.value = tabs.value.findIndex(item => item.label === tab.label);
+};
+
+const handleToggleWidget = () => {
+  toggleWidget();
+  if (isWidgetVisible.value) {
+    isChatMode.value = false;
+  }
 };
 </script>
 
 <template>
-  <div>
-    <div v-if="isWidgetVisible" class="flex flex-col items-center">
-      <InputRadioGroup
-        name="widget-screen"
-        :items="widgetScreens"
-        :action="handleScreenChange"
+  <div class="flex flex-col h-full min-h-0 flex-1">
+    <div class="flex items-center justify-between mb-6 flex-shrink-0">
+      <TabBar
+        :tabs="tabs"
+        :initial-active-tab="activeTabIndex"
+        @tab-changed="handleTabChange"
       />
-    </div>
-    <div
-      v-if="isWidgetVisible"
-      class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-n-slate-2 dark:bg-n-solid-1 h-[31.25rem] w-80"
-    >
-      <WidgetHead :config="getWidgetConfig" />
-      <div>
-        <WidgetBody
-          v-if="!getWidgetConfig.isDefaultScreen"
-          :config="getWidgetConfig"
-        />
-        <WidgetFooter :config="getWidgetConfig" />
-        <div class="py-2.5 flex justify-center">
-          <a
-            class="items-center gap-0.5 text-n-slate-11 cursor-pointer flex filter grayscale opacity-90 hover:grayscale-0 hover:opacity-100 text-xxs"
-          >
-            <img
-              class="max-w-2.5 max-h-2.5"
-              :src="globalConfig.logoThumbnail"
-            />
-            <span>
-              {{
-                replaceInstallationName(
-                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT')
-                )
-              }}
-            </span>
-          </a>
-        </div>
+
+      <div v-if="isPreviewTab" class="flex items-center gap-2">
+        <span class="text-heading-3 text-n-slate-11">
+          {{ $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_SCREEN.CHAT') }}
+        </span>
+        <Switch v-model="isChatMode" />
       </div>
     </div>
-    <div class="flex mt-4 w-[320px]" :style="getBubblePositionStyle">
-      <button
-        class="relative flex items-center justify-center rounded-full cursor-pointer"
-        :style="{ background: color }"
-        :class="
-          isBubbleExpanded
-            ? 'w-auto font-medium text-base text-white dark:text-white h-12 px-4'
-            : 'w-16 h-16'
-        "
-        @click="toggleWidget"
+
+    <div class="flex-1 min-h-0 flex flex-col">
+      <div
+        v-if="isPreviewTab"
+        class="flex-1 flex flex-col items-center justify-end pb-4"
       >
-        <img
-          v-if="!isWidgetVisible"
-          src="~dashboard/assets/images/bubble-logo.svg"
-          alt=""
-          draggable="false"
-          class="w-6 h-6 mx-auto"
+        <div
+          v-if="isWidgetVisible"
+          class="widget-wrapper flex flex-1 flex-shrink-0 flex-col justify-between rounded-lg shadow-md bg-n-slate-2 dark:bg-n-solid-1 h-[31.25rem] w-80 mb-4"
+        >
+          <WidgetHead :config="getWidgetConfig" />
+          <div>
+            <WidgetBody
+              v-if="!getWidgetConfig.isDefaultScreen"
+              :config="getWidgetConfig"
+            />
+            <WidgetFooter :config="getWidgetConfig" />
+            <div class="py-2.5 flex justify-center">
+              <a
+                class="items-center gap-0.5 text-n-slate-11 cursor-pointer flex filter grayscale opacity-90 hover:grayscale-0 hover:opacity-100 text-xxs"
+              >
+                <img
+                  class="max-w-2.5 max-h-2.5"
+                  :src="globalConfig.logoThumbnail"
+                />
+                <span>
+                  {{
+                    replaceInstallationName(
+                      $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT')
+                    )
+                  }}
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex w-[320px]" :style="getBubblePositionStyle">
+          <button
+            class="relative flex items-center justify-center rounded-full cursor-pointer"
+            :style="{ background: props.color }"
+            :class="
+              isBubbleExpanded
+                ? 'w-auto font-medium text-base text-white dark:text-white h-12 px-4'
+                : 'w-16 h-16'
+            "
+            @click="handleToggleWidget"
+          >
+            <img
+              v-if="!isWidgetVisible"
+              src="~dashboard/assets/images/bubble-logo.svg"
+              alt=""
+              draggable="false"
+              class="w-6 h-6 mx-auto"
+            />
+            <div v-if="isBubbleExpanded" class="ltr:pl-2.5 rtl:pr-2.5">
+              {{ getWidgetBubbleLauncherTitle }}
+            </div>
+            <div v-if="isWidgetVisible" class="relative">
+              <div
+                class="absolute w-0.5 h-8 rotate-45 -translate-y-1/2 bg-white"
+              />
+              <div
+                class="absolute w-0.5 h-8 -rotate-45 -translate-y-1/2 bg-white"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="flex-1 p-3 rounded-lg [&_code]:!bg-n-slate-2 bg-n-slate-2 min-w-0 overflow-auto [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_code]:whitespace-pre-wrap"
+      >
+        <Code
+          :script="widgetScript"
+          lang="html"
+          class="!text-start"
+          :codepen-title="`${websiteName} - Chatwoot Widget Test`"
+          enable-code-pen
         />
-        <div v-if="isBubbleExpanded" class="ltr:pl-2.5 rtl:pr-2.5">
-          {{ getWidgetBubbleLauncherTitle }}
-        </div>
-        <div v-if="isWidgetVisible" class="relative">
-          <div class="absolute w-0.5 h-8 rotate-45 -translate-y-1/2 bg-white" />
-          <div
-            class="absolute w-0.5 h-8 -rotate-45 -translate-y-1/2 bg-white"
-          />
-        </div>
-      </button>
+      </div>
     </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+// Widget-specific color variables to match actual widget appearance
+.widget-wrapper {
+  // Light mode - widget colors
+  --slate-1: 252 252 253;
+  --slate-2: 249 249 251;
+  --slate-3: 240 240 243;
+  --slate-4: 232 232 236;
+  --slate-5: 224 225 230;
+  --slate-6: 217 217 224;
+  --slate-7: 205 206 214;
+  --slate-8: 185 187 198;
+  --slate-9: 139 141 152;
+  --slate-10: 128 131 141;
+  --slate-11: 96 100 108;
+  --slate-12: 28 32 36;
+
+  --background-color: 253 253 253;
+  --text-blue: 8 109 224;
+  --border-container: 236 236 236;
+  --border-strong: 235 235 235;
+  --border-weak: 234 234 234;
+  --solid-1: 255 255 255;
+  --solid-2: 255 255 255;
+  --solid-3: 255 255 255;
+  --solid-active: 255 255 255;
+  --solid-amber: 252 232 193;
+  --solid-blue: 218 236 255;
+  --solid-iris: 230 231 255;
+
+  --alpha-1: 67, 67, 67, 0.06;
+  --alpha-2: 201, 202, 207, 0.15;
+  --alpha-3: 255, 255, 255, 0.96;
+  --black-alpha-1: 0, 0, 0, 0.12;
+  --black-alpha-2: 0, 0, 0, 0.04;
+  --border-blue: 39, 129, 246, 0.5;
+  --white-alpha: 255, 255, 255, 0.8;
+}
+
+// Dark mode - widget colors
+.dark .widget-wrapper {
+  --slate-1: 17 17 19;
+  --slate-2: 24 25 27;
+  --slate-3: 33 34 37;
+  --slate-4: 39 42 45;
+  --slate-5: 46 49 53;
+  --slate-6: 54 58 63;
+  --slate-7: 67 72 78;
+  --slate-8: 90 97 105;
+  --slate-9: 105 110 119;
+  --slate-10: 119 123 132;
+  --slate-11: 176 180 186;
+  --slate-12: 237 238 240;
+
+  --background-color: 18 18 19;
+  --border-strong: 52 52 52;
+  --border-weak: 38 38 42;
+  --solid-1: 23 23 26;
+  --solid-2: 29 30 36;
+  --solid-3: 44 45 54;
+  --solid-active: 53 57 66;
+  --solid-amber: 42 37 30;
+  --solid-blue: 16 49 91;
+  --solid-iris: 38 42 101;
+  --text-blue: 126 182 255;
+
+  --alpha-1: 36, 36, 36, 0.8;
+  --alpha-2: 139, 147, 182, 0.15;
+  --alpha-3: 36, 38, 45, 0.9;
+  --black-alpha-1: 0, 0, 0, 0.3;
+  --black-alpha-2: 0, 0, 0, 0.2;
+  --border-blue: 39, 129, 246, 0.5;
+  --border-container: 236, 236, 236, 0;
+  --white-alpha: 255, 255, 255, 0.1;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
index 3e84da086..9e8066140 100644
--- a/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
@@ -16,7 +16,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1 px-6"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
   >
     <router-view v-slot="{ Component }">
       <keep-alive v-if="keepAlive">
diff --git a/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue b/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
index 236de594a..28071421c 100644
--- a/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
@@ -154,7 +154,7 @@ onMounted(() => {
         t('COMPANIES.EMPTY_STATE.TITLE')
       }}</span>
     </div>
-    <div v-else class="flex flex-col gap-4 p-4">
+    <div v-else class="flex flex-col gap-4">
       <CompaniesCard
         v-for="company in companies"
         :id="company.id"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
index 0aec1396b..357758e01 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -493,7 +493,7 @@ onMounted(async () => {
             {{ emptyStateMessage }}
           </span>
         </div>
-        <div v-else class="flex flex-col gap-4 px-6 pt-4 pb-6">
+        <div v-else class="flex flex-col gap-4 pt-4 pb-6">
           <ContactsList
             :contacts="contacts"
             :selected-contact-ids="selectedContactIds"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 70dccaa33..56001ea82 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -79,9 +79,11 @@ export default {
 </script>
 
 <template>
-  <div class="flex items-center justify-between w-full gap-1 h-12 px-3">
+  <div
+    class="flex items-center justify-between w-full gap-1 h-[3.25rem] ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3"
+  >
     <div class="flex items-center gap-2 min-w-0 flex-1">
-      <h1 class="min-w-0 text-base font-medium truncate text-n-slate-12">
+      <h1 class="text-heading-2 truncate text-n-slate-12 min-w-0">
         {{ $t('INBOX.LIST.TITLE') }}
       </h1>
       <div class="relative">
@@ -91,7 +93,7 @@ export default {
           trailing-icon
           slate
           xs
-          faded
+          :variant="showInboxDisplayMenu ? 'faded' : 'solid'"
           @click="openInboxDisplayMenu"
         />
         <InboxDisplayMenu
@@ -106,8 +108,8 @@ export default {
       <NextButton
         icon="i-lucide-sliders-vertical"
         slate
-        xs
-        faded
+        sm
+        :variant="showInboxOptionMenu ? 'faded' : 'ghost'"
         @click="openInboxOptionsMenu"
       />
       <InboxOptionMenu
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/routes.js b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
index 76293f347..fd16475ba 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -1,17 +1,12 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-import SettingsWrapper from '../settings/Wrapper.vue';
+import SettingsWrapper from '../settings/SettingsWrapper.vue';
 import NotificationsView from './components/NotificationsView.vue';
 
 export const routes = [
   {
     path: frontendURL('accounts/:accountId/notifications'),
     component: SettingsWrapper,
-    props: {
-      headerTitle: '',
-      icon: '',
-      showNewButton: false,
-    },
     children: [
       {
         path: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index fa7eb10f1..158235bf9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -41,14 +41,14 @@ export default {
 
 <template>
   <div
-    class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-surface-1"
+    class="flex justify-between items-center h-20 min-h-[3.5rem] px-6 py-2 bg-n-surface-1"
   >
     <h1 class="flex items-center mb-0 text-2xl text-n-slate-12">
       <BackButton
         v-if="showBackButton"
         :button-label="backButtonLabel"
         :back-url="backUrl"
-        class="ml-2 mr-4"
+        class="ltr:mr-4 rtl:ml-4"
       />
 
       <slot />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
index 9e34cb384..b70acccad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
@@ -20,7 +20,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full gap-8 font-inter">
+  <div class="flex flex-col w-full h-full gap-4 font-inter">
     <slot name="header" />
     <!-- Added to render any templates that should be rendered before body -->
     <main>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
index 329f1f750..221efc3bf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -8,13 +8,13 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col w-full items-start mb-4">
-    <h2 class="text-xl font-medium mb-1 text-n-slate-12 break-words">
+  <div class="flex flex-col gap-1.5 w-full items-start mb-4">
+    <h2 class="text-heading-1 text-n-slate-12 break-words">
       {{ headerTitle }}
     </h2>
     <p
       v-dompurify-html="headerContent"
-      class="text-sm w-full text-n-slate-11"
+      class="text-body-main w-full text-n-slate-11"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
index 28361e065..72cc147bc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
@@ -1,22 +1,26 @@
 <script setup>
+import { useRoute } from 'vue-router';
+
 defineProps({
   keepAlive: {
     type: Boolean,
     default: true,
   },
 });
+
+const route = useRoute();
 </script>
 
 <template>
   <div
-    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-surface-1 font-inter"
+    class="flex flex-col w-full h-full m-0 pb-8 pt-4 px-6 overflow-auto bg-n-surface-1"
   >
-    <div class="flex items-start w-full max-w-6xl mx-auto">
+    <div class="flex items-start w-full max-w-5xl mx-auto">
       <router-view v-slot="{ Component }">
         <keep-alive v-if="keepAlive">
-          <component :is="Component" />
+          <component :is="Component" :key="route.fullPath" />
         </keep-alive>
-        <component :is="Component" v-else />
+        <component :is="Component" v-else :key="route.fullPath" />
       </router-view>
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 09941f046..ba62100ae 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -8,7 +8,6 @@ const props = defineProps({
   keepAlive: { type: Boolean, default: true },
   showBackButton: { type: Boolean, default: false },
   backUrl: { type: [String, Object], default: '' },
-  fullWidth: { type: Boolean, default: false },
 });
 
 const { t } = useI18n();
@@ -19,27 +18,21 @@ const showSettingsHeader = computed(
 </script>
 
 <template>
-  <div class="flex flex-1 flex-col m-0 bg-n-surface-1 overflow-auto">
-    <div
-      class="mx-auto w-full flex flex-col flex-1"
-      :class="{ 'max-w-6xl': !fullWidth }"
-    >
-      <SettingsHeader
-        v-if="showSettingsHeader"
-        :icon="icon"
-        :header-title="t(headerTitle)"
-        :show-back-button="showBackButton"
-        :back-url="backUrl"
-        class="sticky top-0 z-20"
-        :class="{ 'max-w-6xl w-full mx-auto': fullWidth }"
-      />
+  <div class="flex flex-col h-full m-0 bg-n-surface-1 w-full">
+    <SettingsHeader
+      v-if="showSettingsHeader"
+      :icon="icon"
+      :header-title="t(headerTitle)"
+      :show-back-button="showBackButton"
+      :back-url="backUrl"
+      class="z-20 max-w-7xl w-full mx-auto"
+    />
 
-      <router-view v-slot="{ Component }" class="px-5 flex-1 overflow-hidden">
-        <component :is="Component" v-if="!keepAlive" :key="$route.fullPath" />
-        <keep-alive v-else>
-          <component :is="Component" :key="$route.fullPath" />
-        </keep-alive>
-      </router-view>
-    </div>
+    <router-view v-slot="{ Component }" class="px-4 overflow-hidden">
+      <component :is="Component" v-if="!keepAlive" :key="$route.fullPath" />
+      <keep-alive v-else>
+        <component :is="Component" :key="$route.fullPath" />
+      </keep-alive>
+    </router-view>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index f796635c4..2ec298f98 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -146,12 +146,13 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col max-w-2xl mx-auto w-full">
+  <div class="flex flex-col w-full max-w-2xl ltr:mr-auto rtl:ml-auto">
     <BaseSettingsHeader :title="$t('GENERAL_SETTINGS.TITLE')" />
     <div class="flex-grow flex-shrink min-w-0 mt-3">
       <SectionLayout
         :title="$t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE')"
         :description="$t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE')"
+        class="!pt-0"
       >
         <form
           v-if="!uiFlags.isFetchingItem"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue b/app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue
index 5e9f14f1f..034f40d35 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue
@@ -129,14 +129,14 @@ const toggleAutoResolve = async () => {
   >
     <div class="flex flex-col gap-2 items-start px-5 py-4">
       <div class="flex justify-between items-center w-full">
-        <h3 class="text-base font-medium text-n-slate-12">
+        <h3 class="text-heading-2 text-n-slate-12">
           {{ t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.TITLE') }}
         </h3>
         <div class="flex justify-end">
           <Switch v-model="isEnabled" @change="toggleAutoResolve" />
         </div>
       </div>
-      <p class="mb-0 text-sm text-n-slate-11">
+      <p class="mb-0 text-body-para text-n-slate-11">
         {{ t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE.NOTE') }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/components/SectionLayout.vue b/app/javascript/dashboard/routes/dashboard/settings/account/components/SectionLayout.vue
index a512ea796..a54759971 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/components/SectionLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/components/SectionLayout.vue
@@ -20,8 +20,16 @@ const { t } = useI18n();
     }"
   >
     <header class="grid grid-cols-4">
-      <div class="col-span-3">
-        <h4 class="text-lg font-medium text-n-slate-12 flex items-center gap-2">
+      <div
+        v-if="
+          title || beta || $slots.title || description || $slots.description
+        "
+        class="col-span-3"
+      >
+        <h4
+          v-if="title || beta || $slots.title"
+          class="text-heading-2 text-n-slate-12 flex items-center gap-2"
+        >
           <slot name="title">{{ title }}</slot>
           <div
             v-if="beta"
@@ -31,7 +39,10 @@ const { t } = useI18n();
             {{ t('GENERAL.BETA') }}
           </div>
         </h4>
-        <p class="text-n-slate-11 text-sm mt-2">
+        <p
+          v-if="description || $slots.description"
+          class="text-n-slate-11 text-body-main mt-2"
+        >
           <slot name="description">{{ description }}</slot>
         </p>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index 0d42d15cf..19e04ba85 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+import { picoSearch } from '@scmmishra/pico-search';
 
 import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
@@ -10,6 +11,11 @@ import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import AgentBotModal from './components/AgentBotModal.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import {
+  BaseTable,
+  BaseTableRow,
+  BaseTableCell,
+} from 'dashboard/components-next/table';
 
 const MODAL_TYPES = {
   CREATE: 'create',
@@ -23,6 +29,7 @@ const agentBots = useMapGetter('agentBots/getBots');
 const uiFlags = useMapGetter('agentBots/getUIFlags');
 
 const selectedBot = ref({});
+const searchQuery = ref('');
 const loading = ref({});
 const modalType = ref(MODAL_TYPES.CREATE);
 const agentBotModalRef = ref(null);
@@ -32,11 +39,18 @@ const tableHeaders = computed(() => {
   return [
     t('AGENT_BOTS.LIST.TABLE_HEADER.DETAILS'),
     t('AGENT_BOTS.LIST.TABLE_HEADER.URL'),
+    t('AGENT_BOTS.LIST.TABLE_HEADER.ACTIONS'),
   ];
 });
 
 const selectedBotName = computed(() => selectedBot.value?.name || '');
 
+const filteredAgentBots = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return agentBots.value;
+  return picoSearch(agentBots.value, query, ['name', 'description']);
+});
+
 const openAddModal = () => {
   modalType.value = MODAL_TYPES.CREATE;
   selectedBot.value = {};
@@ -86,87 +100,97 @@ onMounted(() => {
   >
     <template #header>
       <BaseSettingsHeader
+        v-model:search-query="searchQuery"
         :title="t('AGENT_BOTS.HEADER')"
         :description="t('AGENT_BOTS.DESCRIPTION')"
         :link-text="t('AGENT_BOTS.LEARN_MORE')"
+        :search-placeholder="t('AGENT_BOTS.SEARCH_PLACEHOLDER')"
         feature-name="agent_bots"
       >
+        <template v-if="agentBots?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('AGENT_BOTS.COUNT', { n: agentBots.length }) }}
+          </span>
+        </template>
         <template #actions>
           <Button
-            icon="i-lucide-circle-plus"
             :label="$t('AGENT_BOTS.ADD.TITLE')"
+            size="sm"
             @click="openAddModal"
           />
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full overflow-x-auto divide-y divide-n-strong">
-        <thead>
-          <th
-            v-for="thHeader in tableHeaders"
-            :key="thHeader"
-            class="py-4 font-semibold text-left ltr:pr-4 rtl:pl-4 text-n-slate-11"
-          >
-            {{ thHeader }}
-          </th>
-        </thead>
-        <tbody class="flex-1 divide-y divide-n-weak text-n-slate-12">
-          <tr v-for="bot in agentBots" :key="bot.id">
-            <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <div class="flex flex-row items-center gap-4">
-                <Avatar
-                  :name="bot.name"
-                  :src="bot.thumbnail"
-                  :size="40"
-                  rounded-full
-                />
-                <div>
-                  <span class="block font-medium break-words">
-                    {{ bot.name }}
-                    <span
-                      v-if="bot.system_bot"
-                      class="text-xs text-n-slate-12 bg-n-blue-5 inline-block rounded-md py-0.5 px-1 ltr:ml-1 rtl:mr-1"
-                    >
-                      {{ $t('AGENT_BOTS.GLOBAL_BOT_BADGE') }}
+      <BaseTable
+        :headers="tableHeaders"
+        :items="filteredAgentBots"
+        :no-data-message="
+          searchQuery ? t('AGENT_BOTS.NO_RESULTS') : t('AGENT_BOTS.LIST.404')
+        "
+      >
+        <template #row="{ items }">
+          <BaseTableRow v-for="bot in items" :key="bot.id" :item="bot">
+            <template #default>
+              <BaseTableCell class="max-w-0">
+                <div class="flex items-center gap-4 min-w-0">
+                  <Avatar
+                    :name="bot.name"
+                    :src="bot.thumbnail"
+                    :size="40"
+                    class="flex-shrink-0"
+                  />
+                  <div class="min-w-0">
+                    <div class="flex items-center gap-2">
+                      <span class="text-body-main text-n-slate-12 truncate">
+                        {{ bot.name }}
+                      </span>
+                      <span
+                        v-if="bot.system_bot"
+                        class="text-xs text-n-slate-12 bg-n-blue-5 rounded-md py-0.5 px-1 flex-shrink-0"
+                      >
+                        {{ $t('AGENT_BOTS.GLOBAL_BOT_BADGE') }}
+                      </span>
+                    </div>
+                    <span class="text-body-main text-n-slate-11 block truncate">
+                      {{ bot.description }}
                     </span>
-                  </span>
-                  <span class="text-sm text-n-slate-11">
-                    {{ bot.description }}
-                  </span>
+                  </div>
                 </div>
-              </div>
-            </td>
-            <td class="py-4 ltr:pr-4 rtl:pl-4 text-sm">
-              {{ bot.outgoing_url || bot.bot_config?.webhook_url }}
-            </td>
-            <td class="py-4 min-w-xs">
-              <div class="flex gap-1 justify-end">
-                <Button
-                  v-if="!bot.system_bot"
-                  v-tooltip.top="t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
-                  icon="i-lucide-pen"
-                  slate
-                  xs
-                  faded
-                  :is-loading="loading[bot.id]"
-                  @click="openEditModal(bot)"
-                />
-                <Button
-                  v-if="!bot.system_bot"
-                  v-tooltip.top="t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
-                  icon="i-lucide-trash-2"
-                  xs
-                  ruby
-                  faded
-                  :is-loading="loading[bot.id]"
-                  @click="openDeletePopup(bot)"
-                />
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              </BaseTableCell>
+
+              <BaseTableCell class="max-w-0">
+                <span class="text-body-main text-n-slate-11 truncate block">
+                  {{ bot.outgoing_url || bot.bot_config?.webhook_url }}
+                </span>
+              </BaseTableCell>
+
+              <BaseTableCell align="end" class="w-24">
+                <div class="flex gap-3 justify-end flex-shrink-0">
+                  <Button
+                    v-if="!bot.system_bot"
+                    v-tooltip.top="t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
+                    icon="i-woot-edit-pen"
+                    slate
+                    sm
+                    :is-loading="loading[bot.id]"
+                    @click="openEditModal(bot)"
+                  />
+                  <Button
+                    v-if="!bot.system_bot"
+                    v-tooltip.top="t('AGENT_BOTS.DELETE.BUTTON_TEXT')"
+                    icon="i-woot-bin"
+                    slate
+                    sm
+                    :is-loading="loading[bot.id]"
+                    @click="openDeletePopup(bot)"
+                  />
+                </div>
+              </BaseTableCell>
+            </template>
+          </BaseTableRow>
+        </template>
+      </BaseTable>
     </template>
 
     <AgentBotModal
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 7109344d7..7f1376efe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -3,6 +3,7 @@ import { useAlert } from 'dashboard/composables';
 import { computed, onMounted, ref } from 'vue';
 import Avatar from 'next/avatar/Avatar.vue';
 import { useI18n } from 'vue-i18n';
+import { picoSearch } from '@scmmishra/pico-search';
 import {
   useStoreGetters,
   useStore,
@@ -25,6 +26,7 @@ const showDeletePopup = ref(false);
 const showEditPopup = ref(false);
 const agentAPI = ref({ message: '' });
 const currentAgent = ref({});
+const searchQuery = ref('');
 
 const deleteConfirmText = computed(
   () => `${t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${currentAgent.value.name}`
@@ -37,6 +39,13 @@ const deleteMessage = computed(() => {
 });
 
 const agentList = computed(() => getters['agents/getAgents'].value);
+
+const filteredAgentList = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return agentList.value;
+  return picoSearch(agentList.value, query, ['name', 'email']);
+});
+
 const uiFlags = computed(() => getters['agents/getUIFlags'].value);
 const currentUserId = computed(() => getters.getCurrentUserID.value);
 const customRoles = useMapGetter('customRole/getCustomRoles');
@@ -144,112 +153,127 @@ const confirmDeletion = () => {
   >
     <template #header>
       <BaseSettingsHeader
+        v-model:search-query="searchQuery"
         :title="$t('AGENT_MGMT.HEADER')"
         :description="$t('AGENT_MGMT.DESCRIPTION')"
         :link-text="$t('AGENT_MGMT.LEARN_MORE')"
+        :search-placeholder="$t('AGENT_MGMT.SEARCH_PLACEHOLDER')"
         feature-name="agents"
       >
+        <template v-if="agentList?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('AGENT_MGMT.COUNT', { n: agentList.length }) }}
+          </span>
+        </template>
         <template #actions>
           <Button
-            icon="i-lucide-circle-plus"
             :label="$t('AGENT_MGMT.HEADER_BTN_TXT')"
+            size="sm"
             @click="openAddPopup"
           />
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="divide-y divide-n-weak">
-        <tbody class="divide-y divide-n-weak text-n-slate-11">
-          <tr v-for="(agent, index) in agentList" :key="agent.email">
-            <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <div class="flex flex-row items-center gap-4">
-                <Avatar
-                  :src="agent.thumbnail"
-                  :name="agent.name"
-                  :status="agent.availability_status"
-                  :size="40"
-                  hide-offline-status
-                  rounded-full
-                />
-                <div>
-                  <span class="block font-medium capitalize">
-                    {{ agent.name }}
-                  </span>
-                  <span>{{ agent.email }}</span>
-                </div>
-              </div>
-            </td>
-
-            <td class="relative py-4 ltr:pr-4 rtl:pl-4">
-              <span
-                class="block font-medium w-fit"
-                :class="{
-                  'hover:text-gray-900 group cursor-pointer':
-                    agent.custom_role_id,
-                }"
-              >
-                {{ getAgentRoleName(agent) }}
-
-                <div
-                  class="absolute left-0 z-10 hidden max-w-[300px] w-auto bg-white rounded-xl border border-n-weak shadow-lg top-14 md:top-12 dark:bg-n-solid-2"
-                  :class="{ 'group-hover:block': agent.custom_role_id }"
+      <span
+        v-if="!filteredAgentList.length && searchQuery"
+        class="flex-1 flex items-center justify-center py-20 text-center text-body-main !text-base text-n-slate-11"
+      >
+        {{ $t('AGENT_MGMT.NO_RESULTS') }}
+      </span>
+      <div v-else class="divide-y divide-n-weak border-t border-n-weak">
+        <div
+          v-for="(agent, index) in filteredAgentList"
+          :key="agent.email"
+          class="flex justify-between flex-row items-start gap-4 py-4"
+        >
+          <div class="flex items-center gap-4">
+            <Avatar
+              :src="agent.thumbnail"
+              :name="agent.name"
+              :status="agent.availability_status"
+              :size="40"
+              hide-offline-status
+            />
+            <div class="flex flex-col gap-1.5 items-start">
+              <span class="block text-heading-3 text-n-slate-12 capitalize">
+                {{ agent.name }}
+              </span>
+              <div class="flex items-center gap-2">
+                <span class="text-body-main text-n-slate-11">
+                  {{ agent.email }}
+                </span>
+                <div class="w-px h-3 bg-n-strong rounded-lg" />
+                <span
+                  class="block w-fit text-body-main text-n-slate-11 relative"
+                  :class="{
+                    'hover:text-n-slate-12 group cursor-pointer':
+                      agent.custom_role_id,
+                  }"
                 >
-                  <div class="flex flex-col gap-1 p-4">
-                    <span class="font-semibold">
-                      {{ $t('AGENT_MGMT.LIST.AVAILABLE_CUSTOM_ROLE') }}
-                    </span>
-                    <ul class="pl-4 mb-0 list-disc">
-                      <li
-                        v-for="permission in getAgentRolePermissions(agent)"
-                        :key="permission"
-                        class="font-normal"
-                      >
-                        {{
-                          $t(
-                            `CUSTOM_ROLE.PERMISSIONS.${permission.toUpperCase()}`
-                          )
-                        }}
-                      </li>
-                    </ul>
+                  {{ getAgentRoleName(agent) }}
+
+                  <div
+                    class="absolute ltr:left-0 rtl:right-0 z-10 hidden w-[300px] bg-n-alpha-3 backdrop-blur-[100px] rounded-xl outline outline-1 outline-n-container shadow-lg top-14 md:top-12"
+                    :class="{ 'group-hover:block': agent.custom_role_id }"
+                  >
+                    <div class="flex flex-col gap-1 p-4">
+                      <span class="text-heading-3 text-n-slate-12">
+                        {{ $t('AGENT_MGMT.LIST.AVAILABLE_CUSTOM_ROLE') }}
+                      </span>
+                      <ul class="ltr:pl-4 rtl:pr-4 mb-0 list-disc">
+                        <li
+                          v-for="permission in getAgentRolePermissions(agent)"
+                          :key="permission"
+                          class="text-body-main text-n-slate-11"
+                        >
+                          {{
+                            $t(
+                              `CUSTOM_ROLE.PERMISSIONS.${permission.toUpperCase()}`
+                            )
+                          }}
+                        </li>
+                      </ul>
+                    </div>
                   </div>
-                </div>
-              </span>
-            </td>
-            <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <span v-if="agent.confirmed">
-                {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
-              </span>
-              <span v-if="!agent.confirmed">
-                {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
-              </span>
-            </td>
-            <td class="py-4">
-              <div class="flex justify-end gap-1">
-                <Button
-                  v-if="showEditAction(agent)"
-                  v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
-                  icon="i-lucide-pen"
-                  slate
-                  xs
-                  faded
-                  @click="openEditPopup(agent)"
-                />
-                <Button
-                  v-if="showDeleteAction(agent)"
-                  v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
-                  icon="i-lucide-trash-2"
-                  xs
-                  ruby
-                  faded
-                  :is-loading="loading[agent.id]"
-                  @click="openDeletePopup(agent, index)"
-                />
+                </span>
+                <div class="w-px h-3 bg-n-strong rounded-lg" />
+                <span
+                  v-if="agent.confirmed"
+                  class="text-body-main text-n-slate-11"
+                >
+                  {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
+                </span>
+                <span
+                  v-if="!agent.confirmed"
+                  class="text-body-main text-n-slate-11"
+                >
+                  {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
+                </span>
               </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+            </div>
+          </div>
+          <div class="flex justify-end gap-3">
+            <Button
+              v-if="showEditAction(agent)"
+              v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
+              icon="i-woot-edit-pen"
+              slate
+              sm
+              @click="openEditPopup(agent)"
+            />
+            <Button
+              v-if="showDeleteAction(agent)"
+              v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
+              icon="i-woot-bin"
+              slate
+              sm
+              :is-loading="loading[agent.id]"
+              @click="openDeletePopup(agent, index)"
+            />
+          </div>
+        </div>
+      </div>
     </template>
 
     <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/Index.vue
index 850c55676..f081cec2f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/Index.vue
@@ -93,7 +93,7 @@ const handleClick = key => {
     </template>
 
     <template #body>
-      <div class="grid grid-cols-1 2xl:grid-cols-2 gap-6">
+      <div class="grid grid-cols-1 2xl:grid-cols-2 gap-6 mt-4">
         <AssignmentCard
           v-for="item in agentAssignments"
           :key="item.key"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentCreatePage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentCreatePage.vue
index eaab83952..c892e38e4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentCreatePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentCreatePage.vue
@@ -88,9 +88,9 @@ const handleSubmit = async formState => {
 </script>
 
 <template>
-  <SettingsLayout class="xl:px-44">
+  <SettingsLayout class="w-full max-w-2xl ltr:mr-auto rtl:ml-auto">
     <template #header>
-      <div class="flex items-center gap-2 w-full justify-between">
+      <div class="flex items-center gap-2 w-full justify-between mb-4 min-h-10">
         <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
       </div>
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue
index faf790753..dfae60350 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentEditPage.vue
@@ -251,9 +251,12 @@ watch(routeId, fetchPolicyData, { immediate: true });
 </script>
 
 <template>
-  <SettingsLayout :is-loading="uiFlags.isFetchingItem" class="xl:px-44">
+  <SettingsLayout
+    :is-loading="uiFlags.isFetchingItem"
+    class="w-full max-w-2xl ltr:mr-auto rtl:ml-auto"
+  >
     <template #header>
-      <div class="flex items-center gap-2 w-full justify-between">
+      <div class="flex items-center gap-2 w-full justify-between mb-4 min-h-10">
         <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
       </div>
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentIndexPage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentIndexPage.vue
index be5297a16..69c6a7e1a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentIndexPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentAssignmentIndexPage.vue
@@ -96,7 +96,7 @@ onMounted(() => {
     "
   >
     <template #header>
-      <div class="flex items-center gap-2 w-full justify-between">
+      <div class="flex items-center gap-2 w-full justify-between min-h-10">
         <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
         <Button icon="i-lucide-plus" md @click="onClickCreatePolicy">
           {{
@@ -108,7 +108,7 @@ onMounted(() => {
       </div>
     </template>
     <template #body>
-      <div class="flex flex-col gap-4 pt-8">
+      <div class="flex flex-col gap-4 pt-4">
         <AssignmentPolicyCard
           v-for="policy in agentAssignmentsPolicies"
           :key="policy.id"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue
index db184b4ee..421a7882c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue
@@ -67,9 +67,9 @@ const handleSubmit = async formState => {
 </script>
 
 <template>
-  <SettingsLayout class="xl:px-44">
+  <SettingsLayout class="w-full max-w-2xl ltr:mr-auto rtl:ml-auto">
     <template #header>
-      <div class="flex items-center gap-2 w-full justify-between">
+      <div class="flex items-center gap-2 w-full justify-between mb-4 min-h-10">
         <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
       </div>
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
index 43f928f14..390608733 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
@@ -184,9 +184,12 @@ onMounted(() => store.dispatch('agents/get'));
 </script>
 
 <template>
-  <SettingsLayout :is-loading="uiFlags.isFetchingItem" class="xl:px-44">
+  <SettingsLayout
+    :is-loading="uiFlags.isFetchingItem"
+    class="w-full max-w-2xl ltr:mr-auto rtl:ml-auto"
+  >
     <template #header>
-      <div class="flex items-center gap-2 w-full justify-between">
+      <div class="flex items-center gap-2 w-full justify-between mb-4 min-h-10">
         <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
       </div>
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue
index fb94e5fb4..670ea767e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue
@@ -94,7 +94,7 @@ onMounted(() => {
     "
   >
     <template #header>
-      <div class="flex items-center gap-2 w-full justify-between">
+      <div class="flex items-center gap-2 w-full justify-between min-h-10">
         <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
         <Button icon="i-lucide-plus" md @click="onClickCreatePolicy">
           {{
@@ -106,7 +106,7 @@ onMounted(() => {
       </div>
     </template>
     <template #body>
-      <div class="flex flex-col gap-4 pt-8">
+      <div class="flex flex-col gap-4 pt-4">
         <AgentCapacityPolicyCard
           v-for="policy in agentCapacityPolicies"
           :key="policy.id"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
index 4825dd4f6..566b579e1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentAssignmentPolicyForm.vue
@@ -94,7 +94,8 @@ const createOption = (
   key,
   stateKey,
   disabled = false,
-  disabledMessage = ''
+  disabledMessage = '',
+  disabledLabel = ''
 ) => ({
   key,
   label: t(`${BASE_KEY}.FORM.${type}.${key.toUpperCase()}.LABEL`),
@@ -102,6 +103,7 @@ const createOption = (
   isActive: state[stateKey] === key,
   disabled,
   disabledMessage,
+  disabledLabel,
 });
 
 const assignmentOrderOptions = computed(() => {
@@ -116,13 +118,17 @@ const assignmentOrderOptions = computed(() => {
     const disabledMessage = disabled
       ? t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_MESSAGE`)
       : '';
+    const disabledLabel = disabled
+      ? t(`${BASE_KEY}.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_BADGE`)
+      : '';
 
     return createOption(
       'ASSIGNMENT_ORDER',
       key,
       'assignmentOrder',
       disabled,
-      disabledMessage
+      disabledMessage,
+      disabledLabel
     );
   });
 });
@@ -217,6 +223,7 @@ defineExpose({
                 :description="option.description"
                 :is-active="option.isActive"
                 :disabled="option.disabled"
+                :disabled-label="option.disabledLabel"
                 :disabled-message="option.disabledMessage"
                 @select="state[section.key] = $event"
               />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 13b980c75..2aa2f28cd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { useToggle } from '@vueuse/core';
 import { useAlert } from 'dashboard/composables';
+import { picoSearch } from '@scmmishra/pico-search';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import AddAttribute from './AddAttribute.vue';
 import EditAttribute from './EditAttribute.vue';
@@ -26,6 +27,7 @@ const inboxes = useMapGetter('inboxes/getInboxes');
 
 const [showAddPopup, toggleAddPopup] = useToggle(false);
 const selectedTabIndex = ref(0);
+const searchQuery = ref('');
 const uiFlags = computed(() => getters['attributes/getUIFlags'].value);
 const [showEditPopup, toggleEditPopup] = useToggle(false);
 const [showDeletePopup, toggleDeletePopup] = useToggle(false);
@@ -77,6 +79,7 @@ const attributes = computed(() =>
 
 const onClickTabChange = tab => {
   selectedTabIndex.value = tab.key;
+  searchQuery.value = '';
 };
 
 const handleEditAttribute = attribute => {
@@ -144,6 +147,16 @@ const derivedAttributes = computed(() =>
     badges: buildBadges(attribute),
   }))
 );
+
+const filteredAttributes = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return derivedAttributes.value;
+  return picoSearch(derivedAttributes.value, query, [
+    'attribute_display_name',
+    'attribute_key',
+    'attribute_description',
+  ]);
+});
 </script>
 
 <template>
@@ -153,31 +166,48 @@ const derivedAttributes = computed(() =>
   >
     <template #header>
       <BaseSettingsHeader
+        v-model:search-query="searchQuery"
         :title="$t('ATTRIBUTES_MGMT.HEADER')"
         :description="$t('ATTRIBUTES_MGMT.DESCRIPTION')"
         :link-text="$t('ATTRIBUTES_MGMT.LEARN_MORE')"
+        :search-placeholder="$t('ATTRIBUTES_MGMT.SEARCH_PLACEHOLDER')"
         feature-name="custom_attributes"
       >
+        <template v-if="attributes?.length" #count>
+          <span class="text-body-main text-n-slate-11 truncate min-w-0">
+            {{ $t('ATTRIBUTES_MGMT.COUNT', { n: attributes.length }) }}
+          </span>
+        </template>
+        <template #tabs>
+          <TabBar
+            :tabs="tabsForTabBar"
+            :initial-active-tab="selectedTabIndex"
+            @tab-changed="onClickTabChange"
+          />
+        </template>
         <template #actions>
           <Button
-            icon="i-lucide-circle-plus"
             :label="$t('ATTRIBUTES_MGMT.HEADER_BTN_TXT')"
+            size="sm"
             @click="openAddPopup"
           />
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <div class="flex flex-col gap-6">
-        <TabBar
-          :tabs="tabsForTabBar"
-          :initial-active-tab="selectedTabIndex"
-          class="max-w-xl"
-          @tab-changed="onClickTabChange"
-        />
-        <div v-if="derivedAttributes.length" class="grid gap-3">
+      <div class="flex flex-col gap-4">
+        <span
+          v-if="!filteredAttributes.length && searchQuery"
+          class="flex-1 flex items-center justify-center py-20 text-center text-body-main !text-base text-n-slate-11"
+        >
+          {{ $t('ATTRIBUTES_MGMT.NO_RESULTS') }}
+        </span>
+        <div
+          v-else-if="filteredAttributes.length"
+          class="flex flex-col divide-y divide-n-weak border-t border-n-weak"
+        >
           <AttributeListItem
-            v-for="attribute in derivedAttributes"
+            v-for="attribute in filteredAttributes"
             :key="attribute.id"
             :attribute="attribute"
             :badges="attribute.badges"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index f98297f21..d555df2d4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -2,8 +2,14 @@
 import { useAlert } from 'dashboard/composables';
 import { messageTimestamp } from 'shared/helpers/timeHelper';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
+import {
+  BaseTable,
+  BaseTableRow,
+  BaseTableCell,
+} from 'dashboard/components-next/table';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
 import {
   generateTranslationPayload,
   generateLogActionKey,
@@ -75,63 +81,68 @@ const tableHeaders = computed(() => {
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto">
-    <BaseSettingsHeader
-      :title="$t('AUDIT_LOGS.HEADER')"
-      :description="$t('AUDIT_LOGS.DESCRIPTION')"
-      :link-text="$t('AUDIT_LOGS.LEARN_MORE')"
-      feature-name="audit_logs"
-    />
-
-    <div class="mt-6 flex-1 text-n-slate-11">
-      <woot-loading-state
-        v-if="uiFlags.fetchingList"
-        :message="$t('AUDIT_LOGS.LOADING')"
+  <SettingsLayout
+    :is-loading="uiFlags.fetchingList"
+    :loading-message="$t('AUDIT_LOGS.LOADING')"
+    :no-records-found="!records.length"
+    :no-records-message="$t('AUDIT_LOGS.LIST.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('AUDIT_LOGS.HEADER')"
+        :description="$t('AUDIT_LOGS.DESCRIPTION')"
+        :link-text="$t('AUDIT_LOGS.LEARN_MORE')"
+        feature-name="audit_logs"
       />
-      <p
-        v-else-if="!records.length"
-        class="flex flex-col items-center justify-center h-full text-base p-8"
-      >
-        {{ $t('AUDIT_LOGS.LIST.404') }}
-      </p>
-      <div v-else class="min-w-full overflow-x-auto">
-        <table class="divide-y divide-n-weak">
-          <thead>
-            <th
-              v-for="thHeader in tableHeaders"
-              :key="thHeader"
-              class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11"
+    </template>
+    <template #body>
+      <div class="flex flex-col">
+        <BaseTable :headers="tableHeaders" :items="records">
+          <template #row="{ items }">
+            <BaseTableRow
+              v-for="auditLogItem in items"
+              :key="auditLogItem.id"
+              :item="auditLogItem"
             >
-              {{ 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 ltr:pr-4 rtl:pl-4 break-all whitespace-nowrap">
-                {{ generateLogText(auditLogItem) }}
-              </td>
-              <td class="py-4 ltr:pr-4 rtl:pl-4 break-all whitespace-nowrap">
-                {{
-                  messageTimestamp(
-                    auditLogItem.created_at,
-                    'MMM dd, yyyy hh:mm a'
-                  )
-                }}
-              </td>
-              <td class="py-4 w-[8.75rem]">
-                {{ auditLogItem.remote_address }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <TableFooter
+              <template #default>
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ generateLogText(auditLogItem) }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-11 whitespace-nowrap"
+                  >
+                    {{
+                      messageTimestamp(
+                        auditLogItem.created_at,
+                        'MMM dd, yyyy hh:mm a'
+                      )
+                    }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell class="w-36">
+                  <span class="text-body-main text-n-slate-11">
+                    {{ auditLogItem.remote_address }}
+                  </span>
+                </BaseTableCell>
+              </template>
+            </BaseTableRow>
+          </template>
+        </BaseTable>
+        <PaginationFooter
           :current-page="Number(meta.currentPage)"
-          :total-count="meta.totalEntries"
-          :page-size="meta.perPage"
-          class="border-n-weak border-t !px-0 py-4"
-          @page-change="onPageChange"
+          :total-items="meta.totalEntries"
+          :items-per-page="meta.perPage"
+          class="!px-0"
+          @update:current-page="onPageChange"
         />
       </div>
-    </div>
-  </div>
+    </template>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue
index 540b9dfa8..3117a51e2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { messageStamp } from 'shared/helpers/timeHelper';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
+import { BaseTableRow, BaseTableCell } from 'dashboard/components-next/table';
 
 const props = defineProps({
   automation: {
@@ -35,47 +36,58 @@ const automationActive = computed({
 </script>
 
 <template>
-  <tr>
-    <td class="py-4 ltr:pr-4 rtl:pl-4 min-w-[200px]">{{ automation.name }}</td>
-    <td class="py-4 ltr:pr-4 rtl:pl-4">{{ automation.description }}</td>
-    <td class="py-4 ltr:pr-4 rtl:pl-4">
-      <ToggleSwitch v-model="automationActive" />
-    </td>
-    <td
-      class="py-4 ltr:pr-4 rtl:pl-4 min-w-[12px]"
-      :title="readableDateWithTime(automation.created_on)"
-    >
-      {{ readableDate(automation.created_on) }}
-    </td>
-    <td class="py-4 min-w-xs">
-      <div class="flex gap-1 justify-end flex-shrink-0">
-        <Button
-          v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
-          icon="i-lucide-pen"
-          slate
-          xs
-          faded
-          :is-loading="loading"
-          @click="$emit('edit', automation)"
-        />
-        <Button
-          v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
-          icon="i-lucide-copy-plus"
-          xs
-          faded
-          :is-loading="loading"
-          @click="$emit('clone', automation)"
-        />
-        <Button
-          v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
-          :is-loading="loading"
-          icon="i-lucide-trash-2"
-          xs
-          ruby
-          faded
-          @click="$emit('delete', automation)"
-        />
-      </div>
-    </td>
-  </tr>
+  <BaseTableRow :item="automation">
+    <template #default>
+      <BaseTableCell class="max-w-0 w-full">
+        <div class="flex items-center gap-2 min-w-0">
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ automation.name }}
+          </span>
+          <div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
+          <span class="text-body-main text-n-slate-11 truncate">
+            {{ automation.description }}
+          </span>
+        </div>
+      </BaseTableCell>
+
+      <BaseTableCell>
+        <ToggleSwitch v-model="automationActive" />
+      </BaseTableCell>
+
+      <BaseTableCell :title="readableDateWithTime(automation.created_on)">
+        <span class="text-body-main text-n-slate-12 whitespace-nowrap">
+          {{ readableDate(automation.created_on) }}
+        </span>
+      </BaseTableCell>
+
+      <BaseTableCell align="end">
+        <div class="flex gap-3 justify-end flex-shrink-0">
+          <Button
+            v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
+            icon="i-woot-edit-pen"
+            slate
+            sm
+            :is-loading="loading"
+            @click="$emit('edit', automation)"
+          />
+          <Button
+            v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
+            :is-loading="loading"
+            icon="i-woot-bin"
+            slate
+            sm
+            @click="$emit('delete', automation)"
+          />
+          <Button
+            v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
+            icon="i-woot-clone"
+            sm
+            slate
+            :is-loading="loading"
+            @click="$emit('clone', automation)"
+          />
+        </div>
+      </BaseTableCell>
+    </template>
+  </BaseTableRow>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 835a1d482..32139ccd5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -7,8 +7,10 @@ import SettingsLayout from '../SettingsLayout.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { picoSearch } from '@scmmishra/pico-search';
 import AutomationRuleRow from './AutomationRuleRow.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import { BaseTable } from 'dashboard/components-next/table';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -20,12 +22,19 @@ const addDialogRef = ref(null);
 const editDialogRef = ref(null);
 const showDeleteConfirmationPopup = ref(false);
 const selectedAutomation = ref({});
+const searchQuery = ref('');
 const toggleModalTitle = ref(t('AUTOMATION.TOGGLE.ACTIVATION_TITLE'));
 const toggleModalDescription = ref(
   t('AUTOMATION.TOGGLE.ACTIVATION_DESCRIPTION')
 );
 
 const records = computed(() => getters['automations/getAutomations'].value);
+
+const filteredRecords = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return records.value;
+  return picoSearch(records.value, query, ['name', 'description']);
+});
 const uiFlags = computed(() => getters['automations/getUIFlags'].value);
 const accountId = computed(() => getters.getCurrentAccountId.value);
 
@@ -165,9 +174,9 @@ const toggleAutomation = async ({ id, name, status }) => {
 const tableHeaders = computed(() => {
   return [
     t('AUTOMATION.LIST.TABLE_HEADER.NAME'),
-    t('AUTOMATION.LIST.TABLE_HEADER.DESCRIPTION'),
     t('AUTOMATION.LIST.TABLE_HEADER.ACTIVE'),
     t('AUTOMATION.LIST.TABLE_HEADER.CREATED_ON'),
+    t('AUTOMATION.LIST.TABLE_HEADER.ACTIONS'),
   ];
 });
 </script>
@@ -181,34 +190,38 @@ const tableHeaders = computed(() => {
   >
     <template #header>
       <BaseSettingsHeader
+        v-model:search-query="searchQuery"
         :title="$t('AUTOMATION.HEADER')"
         :description="$t('AUTOMATION.DESCRIPTION')"
         :link-text="$t('AUTOMATION.LEARN_MORE')"
+        :search-placeholder="$t('AUTOMATION.SEARCH_PLACEHOLDER')"
         feature-name="automation"
       >
+        <template v-if="records?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('AUTOMATION.COUNT', { n: records.length }) }}
+          </span>
+        </template>
         <template #actions>
           <Button
-            icon="i-lucide-circle-plus"
             :label="$t('AUTOMATION.HEADER_BTN_TXT')"
+            size="sm"
             @click="openAddPopup"
           />
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full divide-y divide-n-weak">
-        <thead>
-          <th
-            v-for="thHeader in tableHeaders"
-            :key="thHeader"
-            class="py-4 ltr:pr-4 rtl:pl-4 rtl:text-right ltr:text-left font-semibold text-n-slate-11"
-          >
-            {{ thHeader }}
-          </th>
-        </thead>
-        <tbody class="divide-y divide-n-weak text-n-slate-11">
+      <BaseTable
+        :headers="tableHeaders"
+        :items="filteredRecords"
+        :no-data-message="
+          searchQuery ? $t('AUTOMATION.NO_RESULTS') : $t('AUTOMATION.LIST.404')
+        "
+      >
+        <template #row="{ items }">
           <AutomationRuleRow
-            v-for="automation in records"
+            v-for="automation in items"
             :key="automation.id"
             :automation="automation"
             :loading="loading[automation.id]"
@@ -217,8 +230,8 @@ const tableHeaders = computed(() => {
             @edit="openEditPopup"
             @delete="openDeletePopup"
           />
-        </tbody>
-      </table>
+        </template>
+      </BaseTable>
     </template>
 
     <AddAutomationRule ref="addDialogRef" @save-automation="submitAutomation" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 0071eab03..9592deb85 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -2,13 +2,21 @@
 import { useAlert } from 'dashboard/composables';
 import AddCanned from './AddCanned.vue';
 import EditCanned from './EditCanned.vue';
+import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import { computed, onMounted, ref, defineOptions } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { picoSearch } from '@scmmishra/pico-search';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import {
+  BaseTable,
+  BaseTableRow,
+  BaseTableCell,
+} from 'dashboard/components-next/table';
 
 defineOptions({
   name: 'CannedResponseSettings',
@@ -28,9 +36,17 @@ const activeResponse = ref({});
 const cannedResponseAPI = ref({ message: '' });
 
 const sortOrder = ref('asc');
+const searchQuery = ref('');
+
 const records = computed(() =>
   getters.getSortedCannedResponses.value(sortOrder.value)
 );
+
+const filteredRecords = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return records.value;
+  return picoSearch(records.value, query, ['short_code', 'content']);
+});
 const uiFlags = computed(() => getters.getUIFlags.value);
 
 const deleteConfirmText = computed(
@@ -114,103 +130,118 @@ const confirmDeletion = () => {
 const tableHeaders = computed(() => {
   return [
     t('CANNED_MGMT.LIST.TABLE_HEADER.SHORT_CODE'),
-    t('CANNED_MGMT.LIST.TABLE_HEADER.CONTENT'),
     t('CANNED_MGMT.LIST.TABLE_HEADER.ACTIONS'),
   ];
 });
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto">
-    <BaseSettingsHeader
-      :title="$t('CANNED_MGMT.HEADER')"
-      :description="$t('CANNED_MGMT.DESCRIPTION')"
-      :link-text="$t('CANNED_MGMT.LEARN_MORE')"
-      feature-name="canned_responses"
-    >
-      <template #actions>
-        <Button
-          icon="i-lucide-circle-plus"
-          :label="$t('CANNED_MGMT.HEADER_BTN_TXT')"
-          @click="openAddPopup"
-        />
-      </template>
-    </BaseSettingsHeader>
-
-    <div class="mt-6 flex-1">
-      <woot-loading-state
-        v-if="uiFlags.fetchingList"
-        :message="$t('CANNED_MGMT.LOADING')"
-      />
-      <p
-        v-else-if="!records.length"
-        class="flex flex-col items-center justify-center h-full text-base text-n-slate-11 py-8"
+  <SettingsLayout
+    :is-loading="uiFlags.fetchingList"
+    :loading-message="$t('CANNED_MGMT.LOADING')"
+    :no-records-found="!records.length"
+    :no-records-message="$t('CANNED_MGMT.LIST.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        v-model:search-query="searchQuery"
+        :title="$t('CANNED_MGMT.HEADER')"
+        :description="$t('CANNED_MGMT.DESCRIPTION')"
+        :link-text="$t('CANNED_MGMT.LEARN_MORE')"
+        :search-placeholder="$t('CANNED_MGMT.SEARCH_PLACEHOLDER')"
+        feature-name="canned_responses"
       >
-        {{ $t('CANNED_MGMT.LIST.404') }}
-      </p>
-      <table v-else class="min-w-full overflow-x-auto divide-y divide-n-weak">
-        <thead>
-          <th
-            v-for="thHeader in tableHeaders"
-            :key="thHeader"
-            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 }}
-            </span>
-            <button
-              v-else
-              class="flex items-center p-0 cursor-pointer"
-              @click="toggleSort"
-            >
-              <span class="mb-0">
-                {{ thHeader }}
-              </span>
-              <fluent-icon
-                class="ml-2 size-4"
-                :icon="sortOrder === 'desc' ? 'chevron-up' : 'chevron-down'"
-              />
-            </button>
-          </th>
-        </thead>
-        <tbody class="divide-y divide-n-weak text-n-slate-11">
-          <tr
-            v-for="(cannedItem, index) in records"
-            :key="cannedItem.short_code"
-          >
-            <td
-              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 ltr:pr-4 rtl:pl-4 md:break-all whitespace-normal">
-              {{ getPlainText(cannedItem.content) }}
-            </td>
-            <td class="py-4 flex justify-end gap-1">
-              <Button
-                v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
-                icon="i-lucide-pen"
-                slate
-                xs
-                faded
-                @click="openEditPopup(cannedItem)"
-              />
-              <Button
-                v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
-                icon="i-lucide-trash-2"
-                xs
-                ruby
-                faded
-                :is-loading="loading[cannedItem.id]"
-                @click="openDeletePopup(cannedItem, index)"
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+        <template v-if="records?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('CANNED_MGMT.COUNT', { n: records.length }) }}
+          </span>
+        </template>
+        <template #actions>
+          <Button
+            :label="$t('CANNED_MGMT.HEADER_BTN_TXT')"
+            size="sm"
+            @click="openAddPopup"
+          />
+        </template>
+      </BaseSettingsHeader>
+    </template>
 
+    <template #body>
+      <BaseTable
+        :headers="tableHeaders"
+        :items="filteredRecords"
+        :no-data-message="
+          !records.length
+            ? $t('CANNED_MGMT.LIST.404')
+            : searchQuery
+              ? $t('CANNED_MGMT.NO_RESULTS')
+              : ''
+        "
+      >
+        <template #header-0>
+          <button
+            class="flex items-center gap-2 p-0 cursor-pointer"
+            @click="toggleSort"
+          >
+            <span class="mb-0">
+              {{ tableHeaders[0] }}
+            </span>
+            <Icon
+              class="size-5 text-n-slate-11 flex-shrink-0"
+              :icon="
+                sortOrder === 'desc'
+                  ? 'i-woot-sort-descending'
+                  : 'i-woot-sort-ascending'
+              "
+            />
+          </button>
+        </template>
+        <template #header-1>
+          {{ tableHeaders[1] }}
+        </template>
+
+        <template #row="{ items }">
+          <BaseTableRow
+            v-for="cannedItem in items"
+            :key="cannedItem.short_code"
+            :item="cannedItem"
+          >
+            <template #default>
+              <BaseTableCell class="max-w-0">
+                <div class="flex flex-col gap-2 min-w-0">
+                  <span class="text-heading-3 text-n-slate-12 truncate block">
+                    {{ cannedItem.short_code }}
+                  </span>
+                  <p class="text-body-main text-n-slate-11 line-clamp-5">
+                    {{ getPlainText(cannedItem.content) }}
+                  </p>
+                </div>
+              </BaseTableCell>
+
+              <BaseTableCell align="end" class="w-24">
+                <div class="flex gap-3 justify-end flex-shrink-0">
+                  <Button
+                    v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
+                    icon="i-woot-edit-pen"
+                    slate
+                    sm
+                    @click="openEditPopup(cannedItem)"
+                  />
+                  <Button
+                    v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
+                    icon="i-woot-bin"
+                    slate
+                    sm
+                    :is-loading="loading[cannedItem.id]"
+                    @click="openDeletePopup(cannedItem)"
+                  />
+                </div>
+              </BaseTableCell>
+            </template>
+          </BaseTableRow>
+        </template>
+      </BaseTable>
+    </template>
     <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
       <AddCanned :on-close="hideAddPopup" />
     </woot-modal>
@@ -235,5 +266,5 @@ const tableHeaders = computed(() => {
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
     />
-  </div>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index 311e4d9c0..167d13cf5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -1,9 +1,10 @@
 <script setup>
+import { useSlots } from 'vue';
 import CustomBrandPolicyWrapper from 'dashboard/components/CustomBrandPolicyWrapper.vue';
 import { getHelpUrlForFeature } from '../../../../helper/featureHelper';
 import BackButton from '../../../../components/widgets/BackButton.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 
 const props = defineProps({
   title: {
@@ -11,10 +12,6 @@ const props = defineProps({
     required: true,
   },
   description: {
-    type: String,
-    required: true,
-  },
-  iconName: {
     type: String,
     default: '',
   },
@@ -30,52 +27,42 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
 });
 
-const helpURL = getHelpUrlForFeature(props.featureName);
+const slots = useSlots();
 
-const openInNewTab = url => {
-  if (!url) return;
-  window.open(url, '_blank', 'noopener noreferrer');
-};
+const searchQuery = defineModel('searchQuery', { type: String, default: '' });
+
+const helpURL = getHelpUrlForFeature(props.featureName);
 </script>
 
 <template>
-  <div class="flex flex-col items-start w-full gap-2">
+  <div class="flex flex-col items-start w-full">
     <BackButton
       v-if="backButtonLabel"
       compact
       :button-label="backButtonLabel"
+      class="my-1"
     />
-    <div class="flex items-center justify-between w-full gap-4">
-      <div class="flex items-center gap-3">
-        <div
-          v-if="iconName"
-          class="flex items-center w-10 h-10 p-1 rounded-full bg-n-blue-2"
-        >
-          <div
-            class="flex items-center justify-center w-full h-full rounded-full bg-n-blue-3"
-          >
-            <fluent-icon
-              size="14"
-              :icon="iconName"
-              type="outline"
-              class="flex-shrink-0 text-n-brand"
-            />
-          </div>
-        </div>
-        <h1 class="text-xl font-medium tracking-tight text-n-slate-12">
-          {{ title }}
-        </h1>
-      </div>
-      <!-- Slot for additional actions on larger screens -->
-      <div class="hidden gap-2 sm:flex">
-        <slot name="actions" />
-      </div>
+    <div
+      v-if="title"
+      class="flex items-center justify-between w-full gap-4 min-h-8 mb-2"
+    >
+      <h1 class="text-heading-1 text-n-slate-12">
+        {{ title }}
+      </h1>
     </div>
-    <div class="flex flex-col w-full gap-3 text-n-slate-11">
+    <div
+      v-if="description || $slots.description || linkText || helpURL"
+      class="flex flex-col w-full gap-1.5 text-n-slate-11"
+    >
       <p
-        class="mb-0 text-sm font-normal line-clamp-5 sm:line-clamp-none max-w-3xl"
+        v-if="description || $slots.description"
+        class="mb-0 line-clamp-5 sm:line-clamp-none max-w-3xl text-body-main"
       >
         <slot name="description">{{ description }}</slot>
       </p>
@@ -85,7 +72,7 @@ const openInNewTab = url => {
           :href="helpURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-blue-11 hover:underline"
+          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-blue-11 hover:underline mb-2"
         >
           {{ linkText }}
           <Icon
@@ -95,21 +82,45 @@ const openInNewTab = url => {
         </a>
       </CustomBrandPolicyWrapper>
     </div>
+  </div>
+  <div
+    v-if="searchPlaceholder || slots.actions || slots.tabs"
+    class="gap-3 flex justify-between sm:mt-4 min-w-0"
+  >
     <div
-      class="flex flex-wrap items-start justify-start w-full gap-3 sm:hidden"
+      v-if="slots.tabs || searchPlaceholder"
+      class="flex items-center gap-3"
+      :class="{
+        'hidden sm:flex': !slots.tabs,
+      }"
     >
+      <slot name="tabs" />
+      <Input
+        v-if="searchPlaceholder"
+        v-model="searchQuery"
+        :placeholder="searchPlaceholder"
+        class="group w-56 min-w-0 hidden sm:flex [&>input]:ltr:!pl-8 [&>input]:rtl:!pr-8 [&>input]:!rounded-[0.625rem]"
+        size="sm"
+        type="search"
+      >
+        <template #prefix>
+          <Icon
+            icon="i-lucide-search"
+            class="absolute top-1/2 -translate-y-1/2 text-n-slate-11 group-focus-within:text-n-brand size-3.5 ltr:left-2.5 rtl:right-2.5"
+          />
+        </template>
+      </Input>
+    </div>
+    <div
+      class="flex items-center gap-3 min-w-0"
+      :class="{ 'flex-row-reverse sm:flex-row': !slots.tabs }"
+    >
+      <slot name="count" />
+      <div
+        v-if="slots.count"
+        class="w-px h-3 rounded-lg bg-n-weak ltr:ml-1 ltr:mr-2 rtl:ml-2 rtl:mr-1 flex-shrink-0"
+      />
       <slot name="actions" />
-      <CustomBrandPolicyWrapper :show-on-custom-branded-instance="false">
-        <Button
-          v-if="helpURL && linkText"
-          blue
-          link
-          icon="i-lucide-chevron-right"
-          trailing-icon
-          :label="linkText"
-          @click="openInNewTab(helpURL)"
-        />
-      </CustomBrandPolicyWrapper>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/conversationWorkflow/index.vue b/app/javascript/dashboard/routes/dashboard/settings/conversationWorkflow/index.vue
index 30df5bbd6..f862d2780 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/conversationWorkflow/index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/conversationWorkflow/index.vue
@@ -39,7 +39,7 @@ const showRequiredAttributes = computed(() => {
     </template>
 
     <template #body>
-      <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-6 mt-4">
         <AutoResolve v-if="showAutoResolutionConfig" />
         <ConversationRequiredAttributes :is-enabled="showRequiredAttributes" />
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
index 501313010..3b8af78fb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
@@ -9,6 +9,8 @@ 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';
+import { picoSearch } from '@scmmishra/pico-search';
+import { BaseTable } from 'dashboard/components-next/table';
 
 const store = useStore();
 const { t } = useI18n();
@@ -19,8 +21,15 @@ const selectedRole = ref(null);
 const loading = ref({});
 const showDeleteConfirmationPopup = ref(false);
 const activeResponse = ref({});
+const searchQuery = ref('');
 
 const records = useMapGetter('customRole/getCustomRoles');
+
+const filteredRecords = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return records.value;
+  return picoSearch(records.value, query, ['name', 'description']);
+});
 const uiFlags = useMapGetter('customRole/getUIFlags');
 
 const deleteConfirmText = computed(
@@ -129,15 +138,22 @@ const confirmDeletion = () => {
   >
     <template #header>
       <BaseSettingsHeader
+        v-model:search-query="searchQuery"
         :title="$t('CUSTOM_ROLE.HEADER')"
         :description="$t('CUSTOM_ROLE.DESCRIPTION')"
         :link-text="$t('CUSTOM_ROLE.LEARN_MORE')"
+        :search-placeholder="$t('CUSTOM_ROLE.SEARCH_PLACEHOLDER')"
         feature-name="canned_responses"
       >
+        <template v-if="records?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('CUSTOM_ROLE.COUNT', { n: records.length }) }}
+          </span>
+        </template>
         <template #actions>
           <Button
-            icon="i-lucide-circle-plus"
             :label="$t('CUSTOM_ROLE.HEADER_BTN_TXT')"
+            size="sm"
             :disabled="isBehindAPaywall"
             @click="openAddModal"
           />
@@ -147,26 +163,25 @@ const confirmDeletion = () => {
 
     <template #body>
       <CustomRolePaywall v-if="isBehindAPaywall" />
-      <table v-else class="min-w-full overflow-x-auto divide-y divide-n-weak">
-        <thead>
-          <th
-            v-for="thHeader in tableHeaders"
-            :key="thHeader"
-            class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-n-slate-11"
-          >
-            <span class="mb-0">
-              {{ thHeader }}
-            </span>
-          </th>
-        </thead>
-
-        <CustomRoleTableBody
-          :roles="records"
-          :loading="loading"
-          @edit="openEditModal"
-          @delete="openDeletePopup"
-        />
-      </table>
+      <BaseTable
+        v-else
+        :headers="tableHeaders"
+        :items="filteredRecords"
+        :no-data-message="
+          searchQuery
+            ? $t('CUSTOM_ROLE.NO_RESULTS')
+            : $t('CUSTOM_ROLE.LIST.404')
+        "
+      >
+        <template #row="{ items }">
+          <CustomRoleTableBody
+            :roles="items"
+            :loading="loading"
+            @edit="openEditModal"
+            @delete="openDeletePopup"
+          />
+        </template>
+      </BaseTable>
     </template>
 
     <woot-modal
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 7e8b6f255..90636dbde 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 ltr:pr-4 rtl:pl-4 font-semibold text-left text-n-slate-11"
+          class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12"
         >
           <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 3a080a0c1..1104848d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import { BaseTableRow, BaseTableCell } from 'dashboard/components-next/table';
 
 defineProps({
   roles: {
@@ -27,43 +28,49 @@ const getFormattedPermissions = role => {
 </script>
 
 <template>
-  <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 ltr:pr-4 rtl:pl-4 font-medium truncate align-baseline"
-        :title="customRole.name"
-      >
-        {{ customRole.name }}
-      </td>
-      <td
-        class="py-4 ltr:pr-4 rtl:pl-4 whitespace-normal align-baseline md:break-words"
-      >
-        {{ customRole.description }}
-      </td>
-      <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">
-        <Button
-          v-tooltip.top="$t('CUSTOM_ROLE.EDIT.BUTTON_TEXT')"
-          icon="i-lucide-pen"
-          slate
-          xs
-          faded
-          @click="emit('edit', customRole)"
-        />
-        <Button
-          v-tooltip.top="$t('CUSTOM_ROLE.DELETE.BUTTON_TEXT')"
-          icon="i-lucide-trash-2"
-          xs
-          ruby
-          faded
-          :is-loading="loading[customRole.id]"
-          @click="emit('delete', customRole)"
-        />
-      </td>
-    </tr>
-  </tbody>
+  <BaseTableRow
+    v-for="customRole in roles"
+    :key="customRole.id"
+    :item="customRole"
+  >
+    <template #default>
+      <BaseTableCell>
+        <span class="text-body-main text-n-slate-12 truncate block">
+          {{ customRole.name }}
+        </span>
+      </BaseTableCell>
+
+      <BaseTableCell>
+        <span class="text-body-main text-n-slate-11 truncate block">
+          {{ customRole.description }}
+        </span>
+      </BaseTableCell>
+
+      <BaseTableCell>
+        <span class="text-body-main text-n-slate-11 block">
+          {{ getFormattedPermissions(customRole) }}
+        </span>
+      </BaseTableCell>
+
+      <BaseTableCell align="end" class="w-24">
+        <div class="flex gap-3 justify-end flex-shrink-0">
+          <Button
+            v-tooltip.top="$t('CUSTOM_ROLE.EDIT.BUTTON_TEXT')"
+            icon="i-woot-edit-pen"
+            slate
+            sm
+            @click="emit('edit', customRole)"
+          />
+          <Button
+            v-tooltip.top="$t('CUSTOM_ROLE.DELETE.BUTTON_TEXT')"
+            icon="i-woot-bin"
+            slate
+            sm
+            :is-loading="loading[customRole.id]"
+            @click="emit('delete', customRole)"
+          />
+        </div>
+      </BaseTableCell>
+    </template>
+  </BaseTableRow>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index d6fe854a7..0c1494d09 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -92,7 +92,7 @@ const channelList = computed(() => {
     key: 'voice',
     title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.VOICE.TITLE'),
     description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.VOICE.DESCRIPTION'),
-    icon: 'i-ri-phone-fill',
+    icon: 'i-woot-voice',
   });
 
   return channels;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
index 1eae2dd6f..a18a9a0f8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
@@ -1,14 +1,14 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import SettingsSection from 'dashboard/components/SettingsSection.vue';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.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,
+    SettingsFieldSection,
     NextButton,
   },
   props: {
@@ -95,75 +95,73 @@ export default {
 </script>
 
 <template>
-  <div class="mx-8">
-    <SettingsSection
-      :title="$t('INBOX_MGMT.IMAP.TITLE')"
-      :sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
-      :note="$t('INBOX_MGMT.IMAP.NOTE_TEXT')"
-    >
-      <form @submit.prevent="updateInbox">
-        <label for="toggle-imap-enable">
+  <SettingsFieldSection
+    :label="$t('INBOX_MGMT.IMAP.TITLE')"
+    :help-text="$t('INBOX_MGMT.IMAP.NOTE_TEXT')"
+    class="[&>div]:!items-start [&>div>label]:mt-1 mb-4"
+  >
+    <form @submit.prevent="updateInbox">
+      <label for="toggle-imap-enable">
+        <input
+          v-model="isIMAPEnabled"
+          type="checkbox"
+          class="ltr:mr-1 rtl:ml-1"
+          name="toggle-imap-enable"
+        />
+        {{ $t('INBOX_MGMT.IMAP.TOGGLE_AVAILABILITY') }}
+      </label>
+      <p>{{ $t('INBOX_MGMT.IMAP.TOGGLE_HELP') }}</p>
+      <div v-if="isIMAPEnabled" class="mb-6">
+        <woot-input
+          v-model="address"
+          :class="{ error: v$.address.$error }"
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
+          :placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
+          @blur="v$.address.$touch"
+        />
+        <woot-input
+          v-model="port"
+          type="number"
+          :class="{ error: v$.port.$error }"
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
+          :placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
+          @blur="v$.port.$touch"
+        />
+        <woot-input
+          v-model="login"
+          :class="{ error: v$.login.$error }"
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
+          :placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
+          @blur="v$.login.$touch"
+        />
+        <woot-input
+          v-model="password"
+          :class="{ error: v$.password.$error }"
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
+          :placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
+          type="password"
+          @blur="v$.password.$touch"
+        />
+        <label for="toggle-enable-ssl">
           <input
-            v-model="isIMAPEnabled"
+            v-model="isSSLEnabled"
             type="checkbox"
             class="ltr:mr-2 rtl:ml-2"
-            name="toggle-imap-enable"
+            name="toggle-enable-ssl"
           />
-          {{ $t('INBOX_MGMT.IMAP.TOGGLE_AVAILABILITY') }}
+          {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
         </label>
-        <p>{{ $t('INBOX_MGMT.IMAP.TOGGLE_HELP') }}</p>
-        <div v-if="isIMAPEnabled" class="mb-6">
-          <woot-input
-            v-model="address"
-            :class="{ error: v$.address.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
-            @blur="v$.address.$touch"
-          />
-          <woot-input
-            v-model="port"
-            type="number"
-            :class="{ error: v$.port.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
-            @blur="v$.port.$touch"
-          />
-          <woot-input
-            v-model="login"
-            :class="{ error: v$.login.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
-            @blur="v$.login.$touch"
-          />
-          <woot-input
-            v-model="password"
-            :class="{ error: v$.password.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
-            :placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
-            type="password"
-            @blur="v$.password.$touch"
-          />
-          <label for="toggle-enable-ssl">
-            <input
-              v-model="isSSLEnabled"
-              type="checkbox"
-              class="ltr:mr-2 rtl:ml-2"
-              name="toggle-enable-ssl"
-            />
-            {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
-          </label>
-        </div>
-        <NextButton
-          type="submit"
-          :label="$t('INBOX_MGMT.IMAP.UPDATE')"
-          :is-loading="uiFlags.isUpdatingIMAP"
-          :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
-        />
-      </form>
-    </SettingsSection>
-  </div>
+      </div>
+      <NextButton
+        type="submit"
+        :label="$t('INBOX_MGMT.IMAP.UPDATE')"
+        :is-loading="uiFlags.isUpdatingIMAP"
+        :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
+      />
+    </form>
+  </SettingsFieldSection>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index f69a50064..d5a614c47 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -59,7 +59,7 @@ const items = computed(() => {
 </script>
 
 <template>
-  <div class="mx-2 flex flex-col gap-6 mb-8">
+  <div class="mx-auto flex flex-col gap-6 mb-8 max-w-7xl w-full !px-6">
     <PageHeader class="block lg:hidden !mb-0" :header-title="pageTitle" />
     <div
       class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[52rem]"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index b8b7ff1a0..46d8f3cc8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
+import { picoSearch } from '@scmmishra/pico-search';
 import Avatar from 'next/avatar/Avatar.vue';
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import SettingsLayout from '../SettingsLayout.vue';
@@ -22,6 +23,7 @@ const { isAdmin } = useAdmin();
 
 const showDeletePopup = ref(false);
 const selectedInbox = ref({});
+const searchQuery = ref('');
 
 const inboxes = useMapGetter('inboxes/getInboxes');
 
@@ -29,6 +31,12 @@ const inboxesList = computed(() => {
   return inboxes.value?.slice().sort((a, b) => a.name.localeCompare(b.name));
 });
 
+const filteredInboxesList = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return inboxesList.value;
+  return picoSearch(inboxesList.value, query, ['name', 'channel_type']);
+});
+
 const uiFlags = computed(() => getters['inboxes/getUIFlags'].value);
 
 const deleteConfirmText = computed(
@@ -80,87 +88,93 @@ const openDelete = inbox => {
   >
     <template #header>
       <BaseSettingsHeader
+        v-model:search-query="searchQuery"
         :title="$t('INBOX_MGMT.HEADER')"
         :description="$t('INBOX_MGMT.DESCRIPTION')"
         :link-text="$t('INBOX_MGMT.LEARN_MORE')"
+        :search-placeholder="$t('INBOX_MGMT.SEARCH_PLACEHOLDER')"
         feature-name="inboxes"
       >
+        <template v-if="inboxesList?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('INBOX_MGMT.COUNT', { n: inboxesList.length }) }}
+          </span>
+        </template>
         <template #actions>
           <router-link v-if="isAdmin" :to="{ name: 'settings_inbox_new' }">
-            <Button
-              icon="i-lucide-circle-plus"
-              :label="$t('SETTINGS.INBOXES.NEW_INBOX')"
-            />
+            <Button :label="$t('SETTINGS.INBOXES.NEW_INBOX')" size="sm" />
           </router-link>
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full overflow-x-auto">
-        <tbody class="divide-y divide-n-weak flex-1 text-n-slate-12">
-          <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">
-                <div
-                  v-if="inbox.avatar_url"
-                  class="bg-n-alpha-3 rounded-full size-12 p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
-                >
-                  <Avatar
-                    :src="inbox.avatar_url"
-                    :name="inbox.name"
-                    :size="30"
-                    rounded-full
-                  />
-                </div>
-                <div
-                  v-else
-                  class="size-12 flex justify-center items-center bg-n-alpha-3 rounded-full p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
-                >
-                  <ChannelIcon class="size-5 text-n-slate-10" :inbox="inbox" />
-                </div>
-                <div>
-                  <span class="block font-medium capitalize">
-                    {{ inbox.name }}
-                  </span>
-                  <ChannelName
-                    :channel-type="inbox.channel_type"
-                    :medium="inbox.medium"
-                  />
-                </div>
-              </div>
-            </td>
-
-            <td class="py-4">
-              <div class="flex gap-1 justify-end">
-                <router-link
-                  :to="{
-                    name: 'settings_inbox_show',
-                    params: { inboxId: inbox.id },
-                  }"
-                >
-                  <Button
-                    v-if="isAdmin"
-                    v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
-                    icon="i-lucide-settings"
-                    slate
-                    xs
-                    faded
-                  />
-                </router-link>
-                <Button
-                  v-if="isAdmin"
-                  v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
-                  icon="i-lucide-trash-2"
-                  xs
-                  ruby
-                  faded
-                  @click="openDelete(inbox)"
-                />
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <span
+        v-if="!filteredInboxesList.length && searchQuery"
+        class="flex-1 flex items-center justify-center py-20 text-center text-body-main !text-base text-n-slate-11"
+      >
+        {{ $t('INBOX_MGMT.NO_RESULTS') }}
+      </span>
+      <div v-else class="divide-y divide-n-weak border-t border-n-weak">
+        <div
+          v-for="inbox in filteredInboxesList"
+          :key="inbox.id"
+          class="flex justify-between flex-row items-start gap-4 py-4"
+        >
+          <div class="flex items-center gap-4">
+            <div
+              v-if="inbox.avatar_url"
+              class="bg-n-alpha-3 rounded-xl size-10 ring ring-n-solid-1 border border-n-strong shadow-sm grid place-items-center"
+            >
+              <Avatar
+                :src="inbox.avatar_url"
+                :name="inbox.name"
+                :size="24"
+                rounded-full
+              />
+            </div>
+            <div
+              v-else
+              class="size-10 justify-center bg-n-alpha-3 rounded-xl ring ring-n-solid-1 border border-n-strong shadow-sm grid place-items-center"
+            >
+              <ChannelIcon class="size-6 text-n-slate-10" :inbox="inbox" />
+            </div>
+            <div class="flex flex-col items-start gap-1">
+              <span class="block text-heading-3 text-n-slate-12 capitalize">
+                {{ inbox.name }}
+              </span>
+              <ChannelName
+                :channel-type="inbox.channel_type"
+                :medium="inbox.medium"
+                class="text-body-main text-n-slate-11"
+              />
+            </div>
+          </div>
+          <div class="flex gap-3 justify-end">
+            <router-link
+              :to="{
+                name: 'settings_inbox_show',
+                params: { inboxId: inbox.id },
+              }"
+            >
+              <Button
+                v-if="isAdmin"
+                v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
+                icon="i-woot-settings"
+                slate
+                sm
+              />
+            </router-link>
+            <Button
+              v-if="isAdmin"
+              v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
+              icon="i-woot-bin"
+              slate
+              sm
+              @click="openDelete(inbox)"
+            />
+          </div>
+        </div>
+      </div>
     </template>
 
     <woot-confirm-delete-modal
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
index 1e42ed151..891015e41 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue
@@ -1,38 +1,38 @@
-<script>
+<script setup>
+import { ref, watch } from 'vue';
 import Draggable from 'vuedraggable';
 import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
-export default {
-  components: { Draggable, ToggleSwitch },
-  props: {
-    preChatFields: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['update', 'dragEnd'],
-  data() {
-    return {
-      preChatFieldOptions: this.preChatFields,
-    };
-  },
-  watch: {
-    preChatFields() {
-      this.preChatFieldOptions = this.preChatFields;
-    },
-  },
-  methods: {
-    isFieldEditable(item) {
-      return !item.enabled;
-    },
-    handlePreChatFieldOptions(event, type, item) {
-      this.$emit('update', event, type, item);
-    },
-    onDragEnd() {
-      this.$emit('dragEnd', this.preChatFieldOptions);
-    },
+const props = defineProps({
+  preChatFields: {
+    type: Array,
+    default: () => [],
   },
+});
+
+const emit = defineEmits(['update', 'dragEnd']);
+
+const preChatFieldOptions = ref(props.preChatFields);
+
+const isFieldEditable = item => {
+  return !item.enabled;
 };
+
+const handlePreChatFieldOptions = (event, type, item) => {
+  emit('update', event, type, item);
+};
+
+const onDragEnd = () => {
+  emit('dragEnd', preChatFieldOptions.value);
+};
+
+watch(
+  () => props.preChatFields,
+  newFields => {
+    preChatFieldOptions.value = newFields;
+  }
+);
 </script>
 
 <template>
@@ -43,81 +43,64 @@ export default {
     @end="onDragEnd"
   >
     <template #item="{ element: item }">
-      <tr class="border-b border-n-weak">
-        <td class="pre-chat-field"><fluent-icon icon="drag" /></td>
-        <td class="pre-chat-field">
+      <tr>
+        <td class="py-4 ltr:pl-4 ltr:pr-3 rtl:pl-3 rtl:pr-4 text-body-main">
+          <Icon
+            icon="i-woot-drag-indicator"
+            class="size-4 text-n-slate-11 mt-1 cursor-move"
+          />
+        </td>
+        <td class="py-4 ltr:pr-3 rtl:pl-3 text-body-main">
           <ToggleSwitch
             :model-value="item['enabled']"
             @change="handlePreChatFieldOptions($event, 'enabled', item)"
           />
         </td>
         <td
-          class="pre-chat-field"
-          :class="{ 'disabled-text': !item['enabled'] }"
+          class="py-4 ltr:pr-3 rtl:pl-3 text-body-main"
+          :class="{ 'text-n-slate-11': !item['enabled'] }"
         >
           {{ item.name }}
         </td>
         <td
-          class="pre-chat-field"
-          :class="{ 'disabled-text': !item['enabled'] }"
+          class="py-4 ltr:pr-3 rtl:pl-3 text-body-main"
+          :class="{ 'text-n-slate-11': !item['enabled'] }"
         >
           {{ item.type }}
         </td>
-        <td class="pre-chat-field">
+        <td class="py-4 ltr:pr-3 rtl:pl-3 text-body-main">
           <input
             v-model="item['required']"
             type="checkbox"
             :value="`${item.name}-required`"
             :disabled="!item['enabled']"
+            class="m-0"
             @click="handlePreChatFieldOptions($event, 'required', item)"
           />
         </td>
         <td
-          class="pre-chat-field"
-          :class="{ 'disabled-text': !item['enabled'] }"
+          class="py-4 ltr:pr-3 rtl:pl-3 text-body-main"
+          :class="{ 'text-n-slate-11': !item['enabled'] }"
         >
           <input
             v-model="item.label"
             type="text"
             :disabled="isFieldEditable(item)"
+            class="w-full text-sm !mb-0 px-2 py-1 border border-n-weak rounded"
           />
         </td>
         <td
-          class="pre-chat-field"
-          :class="{ 'disabled-text': !item['enabled'] }"
+          class="py-4 ltr:pr-4 rtl:pl-4 text-body-main"
+          :class="{ 'text-n-slate-11': !item['enabled'] }"
         >
           <input
             v-model="item.placeholder"
             type="text"
             :disabled="isFieldEditable(item)"
+            class="w-full text-sm !mb-0 px-2 py-1 border border-n-weak rounded"
           />
         </td>
       </tr>
     </template>
   </Draggable>
 </template>
-
-<style scoped lang="scss">
-.pre-chat-field {
-  @apply py-4 px-2 text-n-slate-12;
-
-  svg {
-    @apply flex items-center;
-  }
-}
-.disabled-text {
-  @apply text-n-slate-11;
-}
-
-table {
-  thead th {
-    @apply normal-case;
-  }
-  input {
-    @apply text-sm mb-0;
-  }
-}
-checkbox {
-  @apply m-0;
-}
-</style>
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 bb7274db0..7f6ac7fe1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -1,159 +1,135 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import PreChatFields from './PreChatFields.vue';
-import { getPreChatFields, standardFieldKeys } from 'dashboard/helper/preChat';
+import { getPreChatFields } from 'dashboard/helper/preChat';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
 
-export default {
-  components: {
-    PreChatFields,
-    WootMessageEditor,
-    NextButton,
+const props = defineProps({
+  inbox: {
+    type: Object,
+    default: () => ({}),
   },
-  props: {
-    inbox: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      preChatFormEnabled: false,
-      preChatMessage: '',
-      preChatFields: [],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-      customAttributes: 'attributes/getAttributes',
-    }),
-    preChatFieldOptions() {
-      const { pre_chat_form_options: preChatFormOptions } = this.inbox;
-      return getPreChatFields({
-        preChatFormOptions,
-        customAttributes: this.customAttributes,
-      });
-    },
-  },
-  watch: {
-    inbox() {
-      this.setDefaults();
-    },
-  },
-  mounted() {
-    this.setDefaults();
-  },
-  methods: {
-    setDefaults() {
-      const { pre_chat_form_enabled: preChatFormEnabled } = this.inbox;
-      this.preChatFormEnabled = preChatFormEnabled;
-      const {
-        pre_chat_message: preChatMessage,
-        pre_chat_fields: preChatFields,
-      } = this.preChatFieldOptions || {};
-      this.preChatMessage = preChatMessage;
-      this.preChatFields = preChatFields;
-    },
-    isFieldEditable(item) {
-      return !!standardFieldKeys[item.name] || !item.enabled;
-    },
-    handlePreChatFieldOptions(event, type, item) {
-      this.preChatFields.forEach((field, index) => {
-        if (field.name === item.name) {
-          this.preChatFields[index][type] = !item[type];
-        }
-      });
-    },
+});
 
-    changePreChatFieldFieldsOrder(updatedPreChatFieldOptions) {
-      this.preChatFields = updatedPreChatFieldOptions;
-    },
+const { t } = useI18n();
+const store = useStore();
 
-    async updateInbox() {
-      try {
-        const payload = {
-          id: this.inbox.id,
-          formData: false,
-          channel: {
-            pre_chat_form_enabled: this.preChatFormEnabled,
-            pre_chat_form_options: {
-              pre_chat_message: this.preChatMessage,
-              pre_chat_fields: this.preChatFields,
-            },
-          },
-        };
-        await this.$store.dispatch('inboxes/updateInbox', payload);
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
-      }
-    },
-  },
+const uiFlags = useMapGetter('inboxes/getUIFlags');
+const customAttributes = useMapGetter('attributes/getAttributes');
+
+const preChatFormEnabled = ref(false);
+const preChatMessage = ref('');
+const preChatFields = ref([]);
+
+const preChatFieldOptions = computed(() => {
+  const { pre_chat_form_options: preChatFormOptions } = props.inbox;
+  return getPreChatFields({
+    preChatFormOptions,
+    customAttributes: customAttributes.value,
+  });
+});
+
+const tableHeaders = computed(() => [
+  '',
+  '',
+  t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.KEY'),
+  t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.TYPE'),
+  t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.REQUIRED'),
+  t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.LABEL'),
+  t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.PLACE_HOLDER'),
+]);
+
+const setDefaults = () => {
+  const { pre_chat_form_enabled: formEnabled } = props.inbox;
+  preChatFormEnabled.value = formEnabled;
+  const { pre_chat_message: message, pre_chat_fields: fields } =
+    preChatFieldOptions.value || {};
+  preChatMessage.value = message;
+  preChatFields.value = fields;
 };
+
+const handlePreChatFieldOptions = (event, type, item) => {
+  preChatFields.value.forEach((field, index) => {
+    if (field.name === item.name) {
+      preChatFields.value[index][type] = !item[type];
+    }
+  });
+};
+
+const changePreChatFieldFieldsOrder = updatedPreChatFieldOptions => {
+  preChatFields.value = updatedPreChatFieldOptions;
+};
+
+const updateInbox = async () => {
+  try {
+    const payload = {
+      id: props.inbox.id,
+      formData: false,
+      channel: {
+        pre_chat_form_enabled: preChatFormEnabled.value,
+        pre_chat_form_options: {
+          pre_chat_message: preChatMessage.value,
+          pre_chat_fields: preChatFields.value,
+        },
+      },
+    };
+    await store.dispatch('inboxes/updateInbox', payload);
+    useAlert(t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+  }
+};
+
+watch(() => props.inbox, setDefaults);
+
+onMounted(() => {
+  setDefaults();
+});
 </script>
 
 <template>
-  <div class="mx-8 my-2 text-base">
-    <div class="mx-0 mt-6 mb-3">
-      {{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
+  <div class="mx-6">
+    <SettingsToggleSection
+      v-model="preChatFormEnabled"
+      :header="$t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL')"
+      :description="$t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION')"
+    >
+      <template v-if="preChatFormEnabled" #editor>
+        <WootMessageEditor
+          v-model="preChatMessage"
+          :placeholder="
+            $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
+          "
+        />
+      </template>
+    </SettingsToggleSection>
+    <div v-if="preChatFormEnabled" class="flex items-center my-8 py-1">
+      <div class="flex-1 h-px bg-n-weak" />
+      <span class="text-body-main text-n-slate-11 px-2">
+        {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}
+      </span>
+      <div class="flex-1 h-px bg-n-weak" />
     </div>
     <form class="flex flex-col" @submit.prevent="updateInbox">
-      <label class="w-1/4">
-        {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
-        <select v-model="preChatFormEnabled">
-          <option :value="true">
-            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.ENABLED') }}
-          </option>
-          <option :value="false">
-            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.OPTIONS.DISABLED') }}
-          </option>
-        </select>
-      </label>
       <div v-if="preChatFormEnabled">
-        <div>
-          <label>
-            {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
-          </label>
-          <WootMessageEditor
-            v-model="preChatMessage"
-            class="message-editor"
-            :placeholder="
-              $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.PLACEHOLDER')
-            "
-          />
-        </div>
-        <div class="mt-4">
-          <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
-          <table class="table w-full table-striped mt-4">
-            <thead class="thead-dark">
-              <tr
-                class="[&>th]:font-semibold [&>th]:tracking-[1px] ltr:[&>th]:text-left rtl:[&>th]:text-right [&>th]:px-2.5 [&>th]:uppercase [&>th]:text-n-slate-12"
-              >
-                <th scope="col" />
-                <th scope="col" />
-                <th scope="col">
-                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.KEY') }}
-                </th>
-                <th scope="col">
-                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.TYPE') }}
-                </th>
-                <th scope="col">
-                  {{
-                    $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.REQUIRED')
-                  }}
-                </th>
-                <th scope="col">
-                  {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.LABEL') }}
-                </th>
-                <th scope="col">
-                  {{
-                    $t(
-                      'INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.PLACE_HOLDER'
-                    )
-                  }}
+        <div class="w-full">
+          <table
+            class="min-w-full table-auto outline outline-1 -outline-offset-1 outline-n-weak rounded-xl"
+          >
+            <thead>
+              <tr class="border-b border-n-weak">
+                <th
+                  v-for="(header, index) in tableHeaders"
+                  :key="index"
+                  class="py-3 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12"
+                >
+                  {{ header }}
                 </th>
               </tr>
             </thead>
@@ -165,8 +141,8 @@ export default {
           </table>
         </div>
       </div>
-      <div class="w-auto my-4">
-        <NextButton
+      <div class="w-full flex justify-end items-center py-4 mt-2">
+        <Button
           type="submit"
           :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')"
           :is-loading="uiFlags.isUpdating"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 08a212de5..d8ed89f87 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -5,7 +5,9 @@ import { useAlert } from 'dashboard/composables';
 import { useVuelidate } from '@vuelidate/core';
 import Avatar from 'next/avatar/Avatar.vue';
 import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
-import SettingsSection from '../../../../components/SettingsSection.vue';
+import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
+import SettingsAccordion from 'dashboard/components-next/Settings/SettingsAccordion.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FacebookReauthorize from './facebook/Reauthorize.vue';
 import InstagramReauthorize from './channels/instagram/Reauthorize.vue';
@@ -21,15 +23,20 @@ import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 import ConfigurationPage from './settingsPage/ConfigurationPage.vue';
 import CustomerSatisfactionPage from './settingsPage/CustomerSatisfactionPage.vue';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage.vue';
-import WidgetBuilder from './WidgetBuilder.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
 import AccountHealth from './components/AccountHealth.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import SpinnerLoader from 'dashboard/components-next/spinner/Spinner.vue';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { LocalStorage } from 'shared/helpers/localStorage';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import ColorPicker from 'dashboard/components-next/colorpicker/ColorPicker.vue';
+import SelectInput from 'dashboard/components-next/select/Select.vue';
+import Widget from 'dashboard/modules/widget-preview/components/Widget.vue';
 
 export default {
   components: {
@@ -41,20 +48,25 @@ export default {
     GreetingsEditor,
     PreChatFormSettings,
     SettingIntroBanner,
-    SettingsSection,
+    SettingsToggleSection,
+    SettingsFieldSection,
+    SettingsAccordion,
     WeeklyAvailability,
-    WidgetBuilder,
     SenderNameExamplePreview,
     MicrosoftReauthorize,
     GoogleReauthorize,
     NextButton,
+    SpinnerLoader,
     InstagramReauthorize,
     TiktokReauthorize,
     WhatsappReauthorize,
     DuplicateInboxBanner,
     Editor,
     Avatar,
+    ColorPicker,
+    SelectInput,
     AccountHealth,
+    Widget,
   },
   mixins: [inboxMixin],
   setup() {
@@ -85,6 +97,9 @@ export default {
       healthData: null,
       isLoadingHealth: false,
       healthError: null,
+      widgetBubblePosition: 'right',
+      widgetBubbleType: 'standard',
+      widgetBubbleLauncherTitle: '',
     };
   },
   computed: {
@@ -145,10 +160,6 @@ export default {
             key: 'pre-chat-form',
             name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
           },
-          {
-            key: 'widget-builder',
-            name: this.$t('INBOX_MGMT.TABS.WIDGET_BUILDER'),
-          },
         ];
       }
 
@@ -201,7 +212,7 @@ export default {
     },
     inboxIcon() {
       const { medium, channel_type: type } = this.inbox;
-      return getInboxIconByType(type, medium);
+      return getInboxIconByType(type, medium, 'line');
     },
     inboxName() {
       if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
@@ -303,29 +314,81 @@ export default {
         this.healthData.throughput?.level === 'NOT_APPLICABLE'
       );
     },
+    widgetBuilderStorageKey() {
+      return `${LOCAL_STORAGE_KEYS.WIDGET_BUILDER}${this.inbox.id}`;
+    },
   },
   watch: {
-    $route(to) {
+    $route(to, from) {
       if (to.name === 'settings_inbox_show') {
-        this.fetchInboxSettings();
+        const inboxChanged = to.params.inboxId !== from.params.inboxId;
+        if (inboxChanged) {
+          this.syncInboxData();
+          this.setTabFromRouteParam();
+        }
       }
     },
     inbox: {
-      handler() {
-        this.fetchHealthData();
+      handler(newInbox, oldInbox) {
+        if (newInbox?.id !== oldInbox?.id) {
+          this.syncInboxData();
+          this.fetchHealthData();
+          this.$nextTick(() => {
+            this.setTabFromRouteParam();
+          });
+        }
       },
-      immediate: false,
+      immediate: true,
     },
   },
   mounted() {
-    this.fetchInboxSettings();
-    this.fetchPortals();
-    this.fetchHealthData();
+    this.fetchSharedData();
   },
   methods: {
-    fetchPortals() {
+    fetchSharedData() {
+      this.$store.dispatch('agents/get');
+      this.$store.dispatch('teams/get');
+      this.$store.dispatch('labels/get');
       this.$store.dispatch('portals/index');
     },
+    syncInboxData() {
+      if (!this.inbox || !this.inbox.id) return;
+
+      this.avatarUrl = this.inbox.avatar_url;
+      this.selectedInboxName = this.inbox.name;
+      this.webhookUrl = this.inbox.webhook_url;
+      this.greetingEnabled = this.inbox.greeting_enabled || false;
+      this.greetingMessage = this.inbox.greeting_message || '';
+      this.emailCollectEnabled = this.inbox.enable_email_collect;
+      this.senderNameType = this.inbox.sender_name_type;
+      this.businessName = this.inbox.business_name;
+      this.allowMessagesAfterResolved =
+        this.inbox.allow_messages_after_resolved;
+      this.continuityViaEmail = this.inbox.continuity_via_email;
+      this.channelWebsiteUrl = this.inbox.website_url;
+      this.channelWelcomeTitle = this.inbox.welcome_title;
+      this.channelWelcomeTagline = this.inbox.welcome_tagline || '';
+      this.selectedFeatureFlags = this.inbox.selected_feature_flags || [];
+      this.replyTime = this.inbox.reply_time;
+      this.locktoSingleConversation = this.inbox.lock_to_single_conversation;
+      this.selectedPortalSlug = this.inbox.help_center
+        ? this.inbox.help_center.slug
+        : '';
+
+      const savedBubbleSettings = LocalStorage.get(
+        this.widgetBuilderStorageKey
+      );
+      if (savedBubbleSettings) {
+        this.widgetBubblePosition = savedBubbleSettings.position || 'right';
+        this.widgetBubbleType = savedBubbleSettings.type || 'standard';
+        this.widgetBubbleLauncherTitle =
+          savedBubbleSettings.launcherTitle || '';
+      } else {
+        this.widgetBubblePosition = 'right';
+        this.widgetBubbleType = 'standard';
+        this.widgetBubbleLauncherTitle = '';
+      }
+    },
     async fetchHealthData() {
       if (!this.inbox) return;
 
@@ -357,17 +420,8 @@ export default {
       }
       return [...selected, current];
     },
-    refreshAvatarUrlOnTabChange(index) {
-      // Refresh avatar URL on tab change from inbox-settings and widget-builder tabs, to ensure real-time updates
-      if (
-        this.inbox &&
-        ['inbox-settings', 'widget-builder'].includes(this.tabs[index].key)
-      )
-        this.avatarUrl = this.inbox.avatar_url;
-    },
     onTabChange(selectedTabIndex) {
       this.selectedTabIndex = selectedTabIndex;
-      this.refreshAvatarUrlOnTabChange(selectedTabIndex);
       this.updateRouteWithoutRefresh(selectedTabIndex);
     },
     updateRouteWithoutRefresh(selectedTabIndex) {
@@ -385,43 +439,21 @@ export default {
     },
     setTabFromRouteParam() {
       const { tab: tabParam } = this.$route.params;
-      if (!tabParam) return;
+      if (!tabParam) {
+        this.selectedTabIndex = 0;
+        return;
+      }
       const tabIndex = this.tabs.findIndex(tab => tab.key === tabParam);
-
       this.selectedTabIndex = tabIndex === -1 ? 0 : tabIndex;
     },
-    fetchInboxSettings() {
-      this.selectedAgents = [];
-      this.$store.dispatch('agents/get');
-      this.$store.dispatch('teams/get');
-      this.$store.dispatch('labels/get');
-      this.$store.dispatch('inboxes/get').then(() => {
-        this.avatarUrl = this.inbox.avatar_url;
-        this.selectedInboxName = this.inbox.name;
-        this.webhookUrl = this.inbox.webhook_url;
-        this.greetingEnabled = this.inbox.greeting_enabled || false;
-        this.greetingMessage = this.inbox.greeting_message || '';
-        this.emailCollectEnabled = this.inbox.enable_email_collect;
-        this.senderNameType = this.inbox.sender_name_type;
-        this.businessName = this.inbox.business_name;
-        this.allowMessagesAfterResolved =
-          this.inbox.allow_messages_after_resolved;
-        this.continuityViaEmail = this.inbox.continuity_via_email;
-        this.channelWebsiteUrl = this.inbox.website_url;
-        this.channelWelcomeTitle = this.inbox.welcome_title;
-        this.channelWelcomeTagline = this.inbox.welcome_tagline || '';
-        this.selectedFeatureFlags = this.inbox.selected_feature_flags || [];
-        this.replyTime = this.inbox.reply_time;
-        this.locktoSingleConversation = this.inbox.lock_to_single_conversation;
-        this.selectedPortalSlug = this.inbox.help_center
-          ? this.inbox.help_center.slug
-          : '';
-
-        // Set initial tab after inbox data is loaded
-        this.setTabFromRouteParam();
-      });
-    },
     async updateInbox() {
+      const bubbleSettings = {
+        position: this.widgetBubblePosition,
+        type: this.widgetBubbleType,
+        launcherTitle: this.widgetBubbleLauncherTitle,
+      };
+      LocalStorage.set(this.widgetBuilderStorageKey, bubbleSettings);
+
       try {
         const payload = {
           id: this.currentInboxId,
@@ -433,7 +465,7 @@ export default {
           portal_id: this.selectedPortalSlug
             ? this.portals.find(
                 portal => portal.slug === this.selectedPortalSlug
-              ).id
+              )?.id || null
             : null,
           lock_to_single_conversation: this.locktoSingleConversation,
           sender_name_type: this.senderNameType,
@@ -454,6 +486,7 @@ export default {
         }
         await this.$store.dispatch('inboxes/updateInbox', payload);
         useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+        this.showBusinessNameInput = false;
       } catch (error) {
         useAlert(error.message || this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
       }
@@ -483,12 +516,13 @@ export default {
       this.senderNameType = key;
     },
     onClickShowBusinessNameInput() {
-      this.showBusinessNameInput = !this.showBusinessNameInput;
-      if (this.showBusinessNameInput) {
-        this.$nextTick(() => {
-          this.$refs.businessNameInput.focus();
-        });
-      }
+      this.showBusinessNameInput = true;
+      this.$nextTick(() => {
+        this.$refs.businessNameInput?.focus();
+      });
+    },
+    hideBusinessNameInput() {
+      this.showBusinessNameInput = false;
     },
   },
   validations: {
@@ -502,7 +536,14 @@ export default {
 
 <template>
   <div
-    class="overflow-auto flex-grow flex-shrink pr-0 pl-0 w-full min-w-0 settings"
+    v-if="uiFlags.isFetching"
+    class="flex items-center justify-center h-full w-full"
+  >
+    <SpinnerLoader :size="28" class="text-n-blue-9" />
+  </div>
+  <div
+    v-else
+    class="grid grid-rows-[auto_1fr] h-full flex-grow flex-shrink pr-0 pl-0 w-full min-w-0 settings"
   >
     <SettingIntroBanner
       :header-image="inbox.avatarUrl"
@@ -524,353 +565,157 @@ export default {
         />
       </woot-tabs>
     </SettingIntroBanner>
-    <section class="mx-auto w-full max-w-6xl">
-      <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
-      <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
-      <GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
-      <InstagramReauthorize v-if="instagramUnauthorized" :inbox="inbox" />
-      <TiktokReauthorize v-if="tiktokUnauthorized" :inbox="inbox" />
-      <WhatsappReauthorize
-        v-if="whatsappUnauthorized"
-        :whatsapp-registration-incomplete="whatsappRegistrationIncomplete"
-        :inbox="inbox"
-      />
-      <DuplicateInboxBanner
-        v-if="hasDuplicateInstagramInbox"
-        :content="$t('INBOX_MGMT.ADD.INSTAGRAM.DUPLICATE_INBOX_BANNER')"
-        class="mx-8 mt-5"
-      />
-      <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"
+    <section class="w-full overflow-auto py-8">
+      <div class="max-w-7xl mx-auto w-full">
+        <MicrosoftReauthorize
+          v-if="microsoftUnauthorized"
+          :inbox="inbox"
+          class="mb-4"
+        />
+        <FacebookReauthorize
+          v-if="facebookUnauthorized"
+          :inbox="inbox"
+          class="mb-4"
+        />
+        <GoogleReauthorize
+          v-if="googleUnauthorized"
+          :inbox="inbox"
+          class="mb-4"
+        />
+        <InstagramReauthorize
+          v-if="instagramUnauthorized"
+          :inbox="inbox"
+          class="mb-4"
+        />
+        <TiktokReauthorize
+          v-if="tiktokUnauthorized"
+          :inbox="inbox"
+          class="mb-4"
+        />
+        <WhatsappReauthorize
+          v-if="whatsappUnauthorized"
+          :whatsapp-registration-incomplete="whatsappRegistrationIncomplete"
+          :inbox="inbox"
+          class="mb-4"
+        />
+        <DuplicateInboxBanner
+          v-if="hasDuplicateInstagramInbox"
+          :content="$t('INBOX_MGMT.ADD.INSTAGRAM.DUPLICATE_INBOX_BANNER')"
+          class="mx-6 mb-4"
+        />
+
+        <div
+          v-if="selectedTabKey === 'inbox-settings'"
+          class="flex flex-col md:flex-row items-center lg:items-start justify-between gap-5 lg:gap-10 mx-6"
         >
-          <div class="flex flex-col gap-1 items-start mb-4">
-            <label class="mb-0.5 text-sm font-medium text-n-slate-12">
-              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL') }}
-            </label>
-            <Avatar
-              :src="avatarUrl"
-              :size="72"
-              :icon-name="inboxIcon"
-              name=""
-              allow-upload
-              rounded-full
-              @upload="handleImageUpload"
-              @delete="handleAvatarDelete"
-            />
-          </div>
-          <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_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="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.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
-              )
-            "
-          />
-
-          <Editor
-            v-if="isAWebWidgetInbox"
-            v-model="channelWelcomeTagline"
-            class="mb-4"
-            :label="
-              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
-            "
-            :placeholder="
-              $t(
-                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
-              )
-            "
-            :max-length="255"
-            channel-type="Context::InboxSettings"
-          />
-
-          <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>
-
-          <label v-if="isAWhatsAppChannel" class="pb-4">
-            {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
-            <input v-model="whatsAppAPIProviderName" type="text" disabled />
-          </label>
-
-          <label class="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-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"
+          <div class="max-w-2xl flex-1 flex flex-col min-w-0">
+            <div class="flex flex-col gap-1 items-start mb-4">
+              <label class="text-heading-3 text-n-slate-12">
+                {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL') }}
+              </label>
+              <Avatar
+                :src="avatarUrl"
+                :size="64"
+                :icon-name="inboxIcon"
+                name=""
+                allow-upload
+                rounded-full
+                @upload="handleImageUpload"
+                @delete="handleAvatarDelete"
+              />
+            </div>
+            <SettingsFieldSection :label="inboxNameLabel">
+              <woot-input
+                v-model="selectedInboxName"
+                class="[&>input]:!mb-0"
+                :class="{ error: v$.selectedInboxName.$error }"
+                :placeholder="inboxNamePlaceHolder"
+                :error="
+                  v$.selectedInboxName.$error
+                    ? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
+                    : ''
+                "
+                @blur="v$.selectedInboxName.$touch"
+              />
+            </SettingsFieldSection>
+            <SettingsFieldSection
+              v-if="isAPIInbox"
               :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'
-                )
-              "
-              :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">
-                {{
+            >
+              <woot-input
+                v-model="webhookUrl"
+                class="[&>input]:!mb-0"
+                :class="{ error: v$.webhookUrl.$error }"
+                :placeholder="
                   $t(
-                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES'
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER'
                   )
-                }}
-              </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>
+                "
+                :error="
+                  v$.webhookUrl.$error
+                    ? $t(
+                        'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR'
+                      )
+                    : ''
+                "
+                @blur="v$.webhookUrl.$touch"
+              />
+            </SettingsFieldSection>
 
-            <p class="pb-1 text-sm not-italic text-n-slate-11">
-              {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
-            </p>
-          </label>
+            <SettingsFieldSection
+              v-if="isAWebWidgetInbox"
+              :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
+            >
+              <woot-input
+                v-model="channelWebsiteUrl"
+                class="[&>input]:!mb-0"
+                :placeholder="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER'
+                  )
+                "
+              />
+            </SettingsFieldSection>
 
-          <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>
+            <SettingsFieldSection
+              v-if="isAWhatsAppChannel"
+              :label="$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL')"
+            >
+              <input
+                v-model="whatsAppAPIProviderName"
+                type="text"
+                disabled
+                class="!mb-0"
+              />
+            </SettingsFieldSection>
 
-          <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>
+            <SettingsFieldSection
+              v-if="!isAVoiceChannel"
+              :label="$t('INBOX_MGMT.HELP_CENTER.LABEL')"
+              :help-text="$t('INBOX_MGMT.HELP_CENTER.SUB_TEXT')"
+            >
+              <SelectInput
+                v-model="selectedPortalSlug"
+                :placeholder="$t('INBOX_MGMT.HELP_CENTER.PLACEHOLDER')"
+                :options="[
+                  { value: '', label: $t('INBOX_MGMT.HELP_CENTER.NONE') },
+                  ...portals.map(p => ({ value: p.slug, label: p.name })),
+                ]"
+              />
+            </SettingsFieldSection>
 
-          <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 v-if="!isAVoiceChannel" 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 gap-2 items-start mt-2">
+            <SettingsFieldSection
+              v-if="isAWebWidgetInbox || isAnEmailChannel"
+              :label="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
+              class="[&>div>div]:justify-end [&>div>div]:flex lg:[&>div:first-child]:h-12 [&>div:first-child]:h-16"
+            >
               <NextButton
+                v-if="!showBusinessNameInput"
                 ghost
                 blue
+                sm
                 :label="
                   $t(
                     'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
@@ -878,7 +723,12 @@ export default {
                 "
                 @click="onClickShowBusinessNameInput"
               />
-              <div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
+
+              <div
+                v-if="showBusinessNameInput"
+                v-on-clickaway="hideBusinessNameInput"
+                class="flex justify-end gap-2 w-full"
+              >
                 <input
                   ref="businessNameInput"
                   v-model="businessName"
@@ -887,7 +737,7 @@ export default {
                       'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
                     )
                   "
-                  class="mb-0"
+                  class="!mb-0"
                   type="text"
                 />
                 <NextButton
@@ -900,52 +750,384 @@ export default {
                   @click="updateInbox"
                 />
               </div>
+
+              <template #extra>
+                <SenderNameExamplePreview
+                  :sender-name-type="senderNameType"
+                  :business-name="businessName"
+                  @update="toggleSenderNameType"
+                />
+              </template>
+            </SettingsFieldSection>
+
+            <SettingsAccordion
+              v-if="isAWebWidgetInbox"
+              :title="$t('INBOX_MGMT.WIDGET_FEATURES')"
+              class="mt-6"
+            >
+              <SettingsFieldSection
+                :label="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL'
+                  )
+                "
+              >
+                <woot-input
+                  v-model="channelWelcomeTitle"
+                  class="[&>input]:!mb-0"
+                  :placeholder="
+                    $t(
+                      'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
+                    )
+                  "
+                />
+              </SettingsFieldSection>
+
+              <SettingsFieldSection
+                :label="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL'
+                  )
+                "
+                class="[&>div]:!items-start [&>div>label]:mt-1"
+              >
+                <Editor
+                  v-model="channelWelcomeTagline"
+                  :placeholder="
+                    $t(
+                      'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
+                    )
+                  "
+                  :max-length="255"
+                  channel-type="Context::InboxSettings"
+                />
+              </SettingsFieldSection>
+
+              <SettingsFieldSection
+                :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL')"
+              >
+                <div class="justify-start">
+                  <ColorPicker v-model="inbox.widget_color" />
+                </div>
+              </SettingsFieldSection>
+              <SettingsFieldSection
+                :label="
+                  $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE')
+                "
+              >
+                <div class="flex items-center gap-6">
+                  <div class="flex items-center gap-2">
+                    <label class="text-n-slate-11 text-heading-3">
+                      {{
+                        $t(
+                          'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION_LABEL'
+                        )
+                      }}
+                    </label>
+                    <SelectInput
+                      v-model="widgetBubblePosition"
+                      :options="[
+                        {
+                          label: $t(
+                            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION.LEFT'
+                          ),
+                          value: 'left',
+                        },
+                        {
+                          label: $t(
+                            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION.RIGHT'
+                          ),
+                          value: 'right',
+                        },
+                      ]"
+                      class="[&>select]:!p-0 min-w-16 [&>select]:!outline-none"
+                    />
+                  </div>
+                  <div class="h-3 w-px bg-n-weak rounded-lg" />
+                  <div class="flex items-center gap-2">
+                    <label class="text-n-slate-11 text-heading-3">
+                      {{
+                        $t(
+                          'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE_LABEL'
+                        )
+                      }}
+                    </label>
+                    <SelectInput
+                      v-model="widgetBubbleType"
+                      :options="[
+                        {
+                          label: $t(
+                            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE.STANDARD'
+                          ),
+                          value: 'standard',
+                        },
+                        {
+                          label: $t(
+                            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE.EXPANDED_BUBBLE'
+                          ),
+                          value: 'expanded_bubble',
+                        },
+                      ]"
+                      class="[&>select]:!p-0 min-w-16 [&>select]:!outline-none"
+                    />
+                  </div>
+                </div>
+              </SettingsFieldSection>
+
+              <SettingsFieldSection
+                :label="
+                  $t(
+                    'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.LABEL'
+                  )
+                "
+              >
+                <woot-input
+                  v-model="widgetBubbleLauncherTitle"
+                  :placeholder="
+                    $t(
+                      'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.PLACE_HOLDER'
+                    )
+                  "
+                  class="[&>input]:!mb-0"
+                />
+              </SettingsFieldSection>
+              <SettingsFieldSection
+                :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE')"
+                :help-text="
+                  $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT')
+                "
+              >
+                <SelectInput
+                  v-model="replyTime"
+                  :options="[
+                    {
+                      value: 'in_a_few_minutes',
+                      label: $t(
+                        'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES'
+                      ),
+                    },
+                    {
+                      value: 'in_a_few_hours',
+                      label: $t(
+                        'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS'
+                      ),
+                    },
+                    {
+                      value: 'in_a_day',
+                      label: $t(
+                        'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY'
+                      ),
+                    },
+                  ]"
+                />
+              </SettingsFieldSection>
+
+              <SettingsFieldSection
+                :label="$t('INBOX_MGMT.FEATURES.LABEL')"
+                class="[&>div]:!items-start [&>div>label]:mt-2"
+              >
+                <div class="flex flex-col gap-1 items-start">
+                  <div class="flex gap-2 pt-2 py-0.5">
+                    <input
+                      v-model="selectedFeatureFlags"
+                      type="checkbox"
+                      value="attachments"
+                      @input="handleFeatureFlag"
+                    />
+                    <label for="attachments">
+                      {{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
+                    </label>
+                  </div>
+                  <div class="flex gap-2 py-0.5">
+                    <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 class="flex gap-2 py-0.5">
+                    <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 class="flex gap-2 py-0.5">
+                    <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>
+                </div>
+              </SettingsFieldSection>
+            </SettingsAccordion>
+
+            <SettingsAccordion
+              :title="$t('INBOX_MGMT.CHANNEL_PREFERENCES')"
+              class="mt-6"
+            >
+              <SettingsToggleSection
+                v-model="greetingEnabled"
+                :header="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL'
+                  )
+                "
+                :description="
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
+                  )
+                "
+              >
+                <template v-if="greetingEnabled" #editor>
+                  <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"
+                  />
+                </template>
+              </SettingsToggleSection>
+
+              <SettingsToggleSection
+                v-if="isAWebWidgetInbox"
+                v-model="emailCollectEnabled"
+                :header="
+                  $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX')
+                "
+                :description="
+                  $t(
+                    'INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT'
+                  )
+                "
+              />
+
+              <SettingsToggleSection
+                v-if="isAWebWidgetInbox"
+                v-model="allowMessagesAfterResolved"
+                :header="
+                  $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED')
+                "
+                :description="
+                  $t(
+                    'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
+                  )
+                "
+              />
+
+              <SettingsToggleSection
+                v-if="isAWebWidgetInbox"
+                v-model="continuityViaEmail"
+                :header="
+                  $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL')
+                "
+                :description="
+                  $t(
+                    'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
+                  )
+                "
+              />
+
+              <SettingsToggleSection
+                v-if="canLocktoSingleConversation"
+                v-model="locktoSingleConversation"
+                :header="
+                  $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION')
+                "
+                :description="
+                  $t(
+                    'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
+                  )
+                "
+              />
+            </SettingsAccordion>
+
+            <div class="w-full flex justify-end items-center py-4 mt-2">
+              <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"
+              />
             </div>
           </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 === 'csat'">
-        <CustomerSatisfactionPage :inbox="inbox" />
-      </div>
-      <div v-if="selectedTabKey === 'pre-chat-form'">
-        <PreChatFormSettings :inbox="inbox" />
-      </div>
-      <div v-if="selectedTabKey === 'business-hours'">
-        <WeeklyAvailability :inbox="inbox" />
-      </div>
-      <div v-if="selectedTabKey === 'widget-builder'">
-        <WidgetBuilder :inbox="inbox" />
-      </div>
-      <div v-if="selectedTabKey === 'bot-configuration'">
-        <BotConfiguration :inbox="inbox" />
-      </div>
-      <div v-if="selectedTabKey === 'whatsapp-health'">
-        <AccountHealth :health-data="healthData" />
+          <div
+            v-if="isAWebWidgetInbox"
+            class="flex-1 sticky top-4 self-start max-w-lg flex-shrink-0 w-full min-w-0"
+          >
+            <div
+              class="flex flex-col outline -outline-offset-1 outline-1 outline-n-weak w-full px-3 pt-3 pb-8 bg-n-surface-1 rounded-2xl min-h-[45rem] overflow-hidden"
+            >
+              <Widget
+                :welcome-heading="channelWelcomeTitle"
+                :welcome-tagline="channelWelcomeTagline"
+                :website-name="selectedInboxName"
+                :logo="avatarUrl"
+                is-online
+                :reply-time="replyTime"
+                :color="inbox.widget_color"
+                :widget-bubble-position="widgetBubblePosition"
+                :widget-bubble-launcher-title="widgetBubbleLauncherTitle"
+                :widget-bubble-type="widgetBubbleType"
+                :web-widget-script="inbox.web_widget_script"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="selectedTabKey === 'collaborators'" class="mx-6 max-w-3xl">
+          <CollaboratorsPage :inbox="inbox" />
+        </div>
+        <div v-if="selectedTabKey === 'configuration'">
+          <ConfigurationPage :inbox="inbox" />
+        </div>
+        <div v-if="selectedTabKey === 'csat'">
+          <CustomerSatisfactionPage :inbox="inbox" />
+        </div>
+        <div v-if="selectedTabKey === 'pre-chat-form'">
+          <PreChatFormSettings :inbox="inbox" />
+        </div>
+        <div v-if="selectedTabKey === 'business-hours'">
+          <WeeklyAvailability :inbox="inbox" />
+        </div>
+        <div v-if="selectedTabKey === 'bot-configuration'">
+          <BotConfiguration :inbox="inbox" />
+        </div>
+        <div v-if="selectedTabKey === 'whatsapp-health'">
+          <AccountHealth :health-data="healthData" />
+        </div>
       </div>
     </section>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index ddf8ee5fc..70805de69 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import SettingsSection from 'dashboard/components/SettingsSection.vue';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import InputRadioGroup from './components/InputRadioGroup.vue';
@@ -10,7 +10,7 @@ import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
-    SettingsSection,
+    SettingsFieldSection,
     InputRadioGroup,
     SingleSelectDropdown,
     NextButton,
@@ -155,91 +155,91 @@ export default {
 </script>
 
 <template>
-  <div class="mx-8">
-    <SettingsSection
-      :title="$t('INBOX_MGMT.SMTP.TITLE')"
-      :sub-title="$t('INBOX_MGMT.SMTP.SUBTITLE')"
-    >
-      <form @submit.prevent="updateInbox">
-        <label for="toggle-enable-smtp">
-          <input
-            v-model="isSMTPEnabled"
-            type="checkbox"
-            name="toggle-enable-smtp"
-          />
-          {{ $t('INBOX_MGMT.SMTP.TOGGLE_AVAILABILITY') }}
-        </label>
-        <p>{{ $t('INBOX_MGMT.SMTP.TOGGLE_HELP') }}</p>
-        <div v-if="isSMTPEnabled" class="mb-6">
-          <woot-input
-            v-model="address"
-            :class="{ error: v$.address.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
-            @blur="v$.address.$touch"
-          />
-          <woot-input
-            v-model="port"
-            type="number"
-            :class="{ error: v$.port.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
-            @blur="v$.port.$touch"
-          />
-          <woot-input
-            v-model="login"
-            :class="{ error: v$.login.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
-            @blur="v$.login.$touch"
-          />
-          <woot-input
-            v-model="password"
-            :class="{ error: v$.password.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
-            type="password"
-            @blur="v$.password.$touch"
-          />
-          <woot-input
-            v-model="domain"
-            :class="{ error: v$.domain.$error }"
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
-            :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
-            @blur="v$.domain.$touch"
-          />
-          <InputRadioGroup
-            :label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
-            :items="encryptionProtocols"
-            :action="handleEncryptionChange"
-          />
-          <SingleSelectDropdown
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
-            :selected="openSSLVerifyMode"
-            :options="openSSLVerifyModes"
-            :action="handleSSLModeChange"
-          />
-          <SingleSelectDropdown
-            class="max-w-[75%] w-full"
-            :label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
-            :selected="authMechanism"
-            :options="authMechanisms"
-            :action="handleAuthMechanismChange"
-          />
-        </div>
-        <NextButton
-          type="submit"
-          :label="$t('INBOX_MGMT.SMTP.UPDATE')"
-          :is-loading="uiFlags.isUpdatingSMTP"
-          :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
+  <SettingsFieldSection
+    :label="$t('INBOX_MGMT.SMTP.TITLE')"
+    :help-text="$t('INBOX_MGMT.SMTP.SUBTITLE')"
+    class="[&>div]:!items-start [&>div>label]:mt-1 mb-4"
+  >
+    <form @submit.prevent="updateInbox">
+      <label for="toggle-enable-smtp">
+        <input
+          v-model="isSMTPEnabled"
+          type="checkbox"
+          name="toggle-enable-smtp"
+          class="ltr:mr-1 rtl:ml-1"
         />
-      </form>
-    </SettingsSection>
-  </div>
+        {{ $t('INBOX_MGMT.SMTP.TOGGLE_AVAILABILITY') }}
+      </label>
+      <p>{{ $t('INBOX_MGMT.SMTP.TOGGLE_HELP') }}</p>
+      <div v-if="isSMTPEnabled" class="mb-6">
+        <woot-input
+          v-model="address"
+          :class="{ error: v$.address.$error }"
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
+          :placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
+          @blur="v$.address.$touch"
+        />
+        <woot-input
+          v-model="port"
+          type="number"
+          :class="{ error: v$.port.$error }"
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
+          :placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
+          @blur="v$.port.$touch"
+        />
+        <woot-input
+          v-model="login"
+          :class="{ error: v$.login.$error }"
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
+          :placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
+          @blur="v$.login.$touch"
+        />
+        <woot-input
+          v-model="password"
+          :class="{ error: v$.password.$error }"
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
+          :placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
+          type="password"
+          @blur="v$.password.$touch"
+        />
+        <woot-input
+          v-model="domain"
+          :class="{ error: v$.domain.$error }"
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
+          :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
+          @blur="v$.domain.$touch"
+        />
+        <InputRadioGroup
+          :label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
+          :items="encryptionProtocols"
+          :action="handleEncryptionChange"
+        />
+        <SingleSelectDropdown
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
+          :selected="openSSLVerifyMode"
+          :options="openSSLVerifyModes"
+          :action="handleSSLModeChange"
+        />
+        <SingleSelectDropdown
+          class="max-w-[75%] w-full"
+          :label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
+          :selected="authMechanism"
+          :options="authMechanisms"
+          :action="handleAuthMechanismChange"
+        />
+      </div>
+      <NextButton
+        type="submit"
+        :label="$t('INBOX_MGMT.SMTP.UPDATE')"
+        :is-loading="uiFlags.isUpdatingSMTP"
+        :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
+      />
+    </form>
+  </SettingsFieldSection>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
deleted file mode 100644
index f2d1d8fa2..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ /dev/null
@@ -1,443 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import Widget from 'dashboard/modules/widget-preview/components/Widget.vue';
-import InputRadioGroup from './components/InputRadioGroup.vue';
-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';
-import Avatar from 'next/avatar/Avatar.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-
-export default {
-  components: {
-    Widget,
-    InputRadioGroup,
-    NextButton,
-    Editor,
-    Avatar,
-  },
-  props: {
-    inbox: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      isWidgetPreview: true,
-      color: '#1f93ff',
-      websiteName: '',
-      welcomeHeading: '',
-      welcomeTagline: '',
-      replyTime: 'in_a_few_minutes',
-      avatarFile: null,
-      avatarUrl: '',
-      widgetBubblePosition: 'right',
-      widgetBubbleLauncherTitle: this.$t(
-        'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.DEFAULT'
-      ),
-      widgetBubbleType: 'standard',
-      widgetBubblePositions: [
-        {
-          id: 'left',
-          title: this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION.LEFT'
-          ),
-          checked: false,
-        },
-        {
-          id: 'right',
-          title: this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION.RIGHT'
-          ),
-          checked: true,
-        },
-      ],
-      widgetBubbleTypes: [
-        {
-          id: 'standard',
-          title: this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE.STANDARD'
-          ),
-          checked: true,
-        },
-        {
-          id: 'expanded_bubble',
-          title: this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE.EXPANDED_BUBBLE'
-          ),
-          checked: false,
-        },
-      ],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'inboxes/getUIFlags',
-    }),
-    storageKey() {
-      return `${LOCAL_STORAGE_KEYS.WIDGET_BUILDER}${this.inbox.id}`;
-    },
-    widgetScript() {
-      let options = {
-        position: this.widgetBubblePosition,
-        type: this.widgetBubbleType,
-        launcherTitle: this.widgetBubbleLauncherTitle,
-      };
-      let script = this.inbox.web_widget_script;
-      return (
-        script.substring(0, 13) +
-        this.$t('INBOX_MGMT.WIDGET_BUILDER.SCRIPT_SETTINGS', {
-          options: JSON.stringify(options),
-        }) +
-        script.substring(13)
-      );
-    },
-    getWidgetViewOptions() {
-      return [
-        {
-          id: 'preview',
-          title: this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_VIEW_OPTION.PREVIEW'
-          ),
-          checked: true,
-        },
-        {
-          id: 'script',
-          title: this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_VIEW_OPTION.SCRIPT'
-          ),
-          checked: false,
-        },
-      ];
-    },
-    getReplyTimeOptions() {
-      return [
-        {
-          key: 'in_a_few_minutes',
-          value: 'in_a_few_minutes',
-          text: this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.REPLY_TIME.IN_A_FEW_MINUTES'
-          ),
-        },
-        {
-          key: 'in_a_few_hours',
-          value: 'in_a_few_hours',
-          text: this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.REPLY_TIME.IN_A_FEW_HOURS'
-          ),
-        },
-        {
-          key: 'in_a_day',
-          value: 'in_a_day',
-          text: this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.REPLY_TIME.IN_A_DAY'
-          ),
-        },
-      ];
-    },
-    websiteNameValidationErrorMsg() {
-      return this.v$.websiteName.$error
-        ? this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.ERROR')
-        : '';
-    },
-  },
-  mounted() {
-    this.setDefaults();
-  },
-  validations: {
-    websiteName: { required },
-  },
-  methods: {
-    setDefaults() {
-      // Widget Settings
-      const {
-        name,
-        welcome_title,
-        welcome_tagline,
-        widget_color,
-        reply_time,
-        avatar_url,
-      } = this.inbox;
-      this.websiteName = name;
-      this.welcomeHeading = welcome_title;
-      this.welcomeTagline = welcome_tagline;
-      this.color = widget_color;
-      this.replyTime = reply_time;
-      this.avatarUrl = avatar_url;
-
-      const savedInformation = this.getSavedInboxInformation();
-      if (savedInformation) {
-        this.widgetBubblePositions = this.widgetBubblePositions.map(item => {
-          if (item.id === savedInformation.position) {
-            item.checked = true;
-            this.widgetBubblePosition = item.id;
-          }
-          return item;
-        });
-        this.widgetBubbleTypes = this.widgetBubbleTypes.map(item => {
-          if (item.id === savedInformation.type) {
-            item.checked = true;
-            this.widgetBubbleType = item.id;
-          }
-          return item;
-        });
-        this.widgetBubbleLauncherTitle =
-          savedInformation.launcherTitle || 'Chat with us';
-      }
-    },
-    handleWidgetBubblePositionChange(item) {
-      this.widgetBubblePosition = item.id;
-    },
-    handleWidgetBubbleTypeChange(item) {
-      this.widgetBubbleType = item.id;
-    },
-    handleWidgetViewChange(item) {
-      this.isWidgetPreview = item.id === 'preview';
-    },
-    handleImageUpload({ file, url }) {
-      this.avatarFile = file;
-      this.avatarUrl = url;
-    },
-    async handleAvatarDelete() {
-      try {
-        await this.$store.dispatch('inboxes/deleteInboxAvatar', this.inbox.id);
-        this.avatarFile = null;
-        this.avatarUrl = '';
-        useAlert(
-          this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.AVATAR.DELETE.API.SUCCESS_MESSAGE'
-          )
-        );
-      } catch (error) {
-        useAlert(
-          error.message
-            ? error.message
-            : this.$t(
-                'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.AVATAR.DELETE.API.ERROR_MESSAGE'
-              )
-        );
-      }
-    },
-    async updateWidget() {
-      const bubbleSettings = {
-        position: this.widgetBubblePosition,
-        launcherTitle: this.widgetBubbleLauncherTitle,
-        type: this.widgetBubbleType,
-      };
-
-      LocalStorage.set(this.storageKey, bubbleSettings);
-
-      try {
-        const payload = {
-          id: this.inbox.id,
-          name: this.websiteName,
-          channel: {
-            widget_color: this.color,
-            welcome_title: this.welcomeHeading,
-            welcome_tagline: this.welcomeTagline,
-            reply_time: this.replyTime,
-          },
-        };
-        if (this.avatarFile) {
-          payload.avatar = this.avatarFile;
-        }
-        await this.$store.dispatch('inboxes/updateInbox', payload);
-        useAlert(
-          this.$t(
-            'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.API.SUCCESS_MESSAGE'
-          )
-        );
-      } catch (error) {
-        useAlert(
-          error.message ||
-            this.$t(
-              'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.API.ERROR_MESSAGE'
-            )
-        );
-      }
-    },
-    getSavedInboxInformation() {
-      return LocalStorage.get(this.storageKey);
-    },
-  },
-};
-</script>
-
-<template>
-  <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 px-px">
-          <form @submit.prevent="updateWidget">
-            <div class="flex flex-col mb-4 items-start gap-1 w-full">
-              <label class="mb-0.5 text-sm font-medium text-n-slate-12">
-                {{
-                  $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.AVATAR.LABEL')
-                }}
-              </label>
-              <Avatar
-                :src="avatarUrl"
-                :size="72"
-                icon-name="i-ri-global-fill"
-                name=""
-                allow-upload
-                rounded-full
-                @upload="handleImageUpload"
-                @delete="handleAvatarDelete"
-              />
-            </div>
-            <woot-input
-              v-model="websiteName"
-              :class="{ error: v$.websiteName.$error }"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.PLACE_HOLDER'
-                )
-              "
-              :error="websiteNameValidationErrorMsg"
-              @blur="v$.websiteName.$touch"
-            />
-            <woot-input
-              v-model="welcomeHeading"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_HEADING.PLACE_HOLDER'
-                )
-              "
-            />
-            <Editor
-              v-model="welcomeTagline"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WELCOME_TAGLINE.PLACE_HOLDER'
-                )
-              "
-              :max-length="255"
-              channel-type="Context::InboxSettings"
-              class="mb-4"
-            />
-            <label>
-              {{
-                $t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.REPLY_TIME.LABEL')
-              }}
-              <select v-model="replyTime">
-                <option
-                  v-for="option in getReplyTimeOptions"
-                  :key="option.key"
-                  :value="option.value"
-                >
-                  {{ option.text }}
-                </option>
-              </select>
-            </label>
-            <label>
-              {{
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_COLOR_LABEL'
-                )
-              }}
-              <woot-color-picker v-model="color" />
-            </label>
-            <InputRadioGroup
-              name="widget-bubble-position"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_POSITION_LABEL'
-                )
-              "
-              :items="widgetBubblePositions"
-              :action="handleWidgetBubblePositionChange"
-            />
-            <InputRadioGroup
-              name="widget-bubble-type"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_TYPE_LABEL'
-                )
-              "
-              :items="widgetBubbleTypes"
-              :action="handleWidgetBubbleTypeChange"
-            />
-            <woot-input
-              v-model="widgetBubbleLauncherTitle"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.LABEL'
-                )
-              "
-              :placeholder="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WIDGET_BUBBLE_LAUNCHER_TITLE.PLACE_HOLDER'
-                )
-              "
-            />
-            <NextButton
-              type="submit"
-              class="mt-4"
-              :label="
-                $t(
-                  'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
-                )
-              "
-              :is-loading="uiFlags.isUpdating"
-              :disabled="v$.$invalid || uiFlags.isUpdating"
-            />
-          </form>
-        </div>
-      </div>
-      <div class="w-100 lg:w-3/5">
-        <InputRadioGroup
-          name="widget-view-options"
-          class="text-center"
-          :items="getWidgetViewOptions"
-          :action="handleWidgetViewChange"
-        />
-        <div
-          v-if="isWidgetPreview"
-          class="flex flex-col items-center justify-end min-h-[40.625rem] mx-5 mb-5 p-2.5 bg-n-slate-3 rounded-lg"
-        >
-          <Widget
-            :welcome-heading="welcomeHeading"
-            :welcome-tagline="welcomeTagline"
-            :website-name="websiteName"
-            :logo="avatarUrl"
-            is-online
-            :reply-time="replyTime"
-            :color="color"
-            :widget-bubble-position="widgetBubblePosition"
-            :widget-bubble-launcher-title="widgetBubbleLauncherTitle"
-            :widget-bubble-type="widgetBubbleType"
-          />
-        </div>
-        <div
-          v-else
-          class="mx-5 p-2.5 bg-n-slate-3 rounded-lg dark:bg-n-solid-3"
-        >
-          <woot-code :script="widgetScript" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/google/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/google/Reauthorize.vue
index de9047ca7..769753e15 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/google/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/google/Reauthorize.vue
@@ -44,8 +44,5 @@ async function requestAuthorization() {
 </script>
 
 <template>
-  <InboxReconnectionRequired
-    class="mx-8 mt-5"
-    @reauthorize="requestAuthorization"
-  />
+  <InboxReconnectionRequired class="mx-6" @reauthorize="requestAuthorization" />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/instagram/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/instagram/Reauthorize.vue
index 003017d1d..05dfc45b3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/instagram/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/instagram/Reauthorize.vue
@@ -30,8 +30,5 @@ async function requestAuthorization() {
 </script>
 
 <template>
-  <InboxReconnectionRequired
-    class="mx-8 mt-5"
-    @reauthorize="requestAuthorization"
-  />
+  <InboxReconnectionRequired class="mx-6" @reauthorize="requestAuthorization" />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
index e36ccd2a2..f7f8542a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
@@ -37,8 +37,5 @@ async function requestAuthorization() {
 </script>
 
 <template>
-  <InboxReconnectionRequired
-    class="mx-8 mt-5"
-    @reauthorize="requestAuthorization"
-  />
+  <InboxReconnectionRequired class="mx-6" @reauthorize="requestAuthorization" />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/tiktok/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/tiktok/Reauthorize.vue
index 5d48c6f8c..4d937ee47 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/tiktok/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/tiktok/Reauthorize.vue
@@ -30,8 +30,5 @@ async function requestAuthorization() {
 </script>
 
 <template>
-  <InboxReconnectionRequired
-    class="mx-8 mt-5"
-    @reauthorize="requestAuthorization"
-  />
+  <InboxReconnectionRequired class="mx-6" @reauthorize="requestAuthorization" />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/whatsapp/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/whatsapp/Reauthorize.vue
index 229b62f69..da6cc66bf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/whatsapp/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/whatsapp/Reauthorize.vue
@@ -201,7 +201,7 @@ defineExpose({
 
 <template>
   <InboxReconnectionRequired
-    class="mx-8 mt-5"
+    class="mx-6"
     :is-loading="isRequestingAuthorization"
     :action-label="actionLabel"
     :description="description"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AccountHealth.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AccountHealth.vue
index 026c8ef69..af32e6ad6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AccountHealth.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/AccountHealth.vue
@@ -136,18 +136,18 @@ const getStatusTextColor = status => STATUS_COLORS[status] || 'text-n-slate-12';
 </script>
 
 <template>
-  <div class="gap-4 pt-8 mx-8">
+  <div class="gap-4 mx-6">
     <div
-      class="px-5 py-5 space-y-6 rounded-xl border shadow-sm border-n-weak bg-n-solid-2"
+      class="px-5 py-5 space-y-6 rounded-xl outline outline-1 -outline-offset-1 outline-n-weak bg-n-solid-2"
     >
       <div
         class="flex flex-col gap-5 justify-between items-start w-full md:flex-row"
       >
         <div>
-          <span class="text-base font-medium text-n-slate-12">
+          <span class="text-heading-3 text-n-slate-12">
             {{ t('INBOX_MGMT.ACCOUNT_HEALTH.TITLE') }}
           </span>
-          <p class="mt-1 text-sm text-n-slate-11">
+          <p class="mt-1 text-body-main text-n-slate-11">
             {{ t('INBOX_MGMT.ACCOUNT_HEALTH.DESCRIPTION') }}
           </p>
         </div>
@@ -169,7 +169,7 @@ const getStatusTextColor = status => STATUS_COLORS[status] || 'text-n-slate-12';
           class="flex flex-col gap-2 p-4 rounded-lg border border-n-weak bg-n-solid-1"
         >
           <div class="flex gap-2 items-center">
-            <span class="text-sm font-medium text-n-slate-11">
+            <span class="text-body-main font-medium text-n-slate-11">
               {{ item.label }}
             </span>
             <Icon
@@ -181,32 +181,32 @@ const getStatusTextColor = status => STATUS_COLORS[status] || 'text-n-slate-12';
           <div class="flex items-center">
             <span
               v-if="item.type === 'quality'"
-              class="inline-flex items-center px-2 py-0.5 min-h-6 text-xs font-medium rounded-md bg-n-alpha-2"
+              class="inline-flex items-center px-2 py-0.5 min-h-6 text-label-small rounded-md bg-n-alpha-2"
               :class="getQualityRatingTextColor(item.value)"
             >
               {{ item.value }}
             </span>
             <span
               v-else-if="item.type === 'status'"
-              class="inline-flex items-center px-2 py-0.5 min-h-6 text-xs font-medium rounded-md bg-n-alpha-2"
+              class="inline-flex items-center px-2 py-0.5 min-h-6 text-label-small rounded-md bg-n-alpha-2"
               :class="getStatusTextColor(item.value)"
             >
               {{ formatStatusDisplay(item.value) }}
             </span>
             <span
               v-else-if="item.type === 'mode'"
-              class="inline-flex items-center px-2 py-0.5 min-h-6 text-xs font-medium rounded-md bg-n-alpha-2"
+              class="inline-flex items-center px-2 py-0.5 min-h-6 text-label-small rounded-md bg-n-alpha-2"
               :class="getModeStatusTextColor(item.value)"
             >
               {{ formatModeDisplay(item.value) }}
             </span>
             <span
               v-else-if="item.type === 'tier'"
-              class="text-sm font-medium text-n-slate-12"
+              class="text-label text-n-slate-12"
             >
               {{ formatTierDisplay(item.value) }}
             </span>
-            <span v-else class="text-sm font-medium text-n-slate-12">{{
+            <span v-else class="text-label text-n-slate-12">{{
               item.value
             }}</span>
           </div>
@@ -219,7 +219,9 @@ const getStatusTextColor = status => STATUS_COLORS[status] || 'text-n-slate-12';
         >
           <div>
             <Icon icon="i-lucide-activity" class="mb-2 w-8 h-8" />
-            <p class="text-sm">{{ t('INBOX_MGMT.ACCOUNT_HEALTH.NO_DATA') }}</p>
+            <p class="text-body-main text-n-slate-11">
+              {{ t('INBOX_MGMT.ACCOUNT_HEALTH.NO_DATA') }}
+            </p>
           </div>
         </div>
       </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 6cd318d9b..80e1497de 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
@@ -1,15 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import SettingsSection from 'dashboard/components/SettingsSection.vue';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import SelectInput from 'dashboard/components-next/select/Select.vue';
 
 export default {
   components: {
     LoadingState,
-    SettingsSection,
+    SettingsFieldSection,
     NextButton,
+    SelectInput,
   },
   props: {
     inbox: {
@@ -27,8 +29,13 @@ export default {
       agentBots: 'agentBots/getBots',
       uiFlags: 'agentBots/getUIFlags',
     }),
+    currentInboxId() {
+      return this.inbox?.id || this.$route.params.inboxId;
+    },
     activeAgentBot() {
-      return this.$store.getters['agentBots/getActiveAgentBot'](this.inbox.id);
+      return this.$store.getters['agentBots/getActiveAgentBot'](
+        this.currentInboxId
+      );
     },
   },
   watch: {
@@ -37,11 +44,14 @@ export default {
     },
   },
   mounted() {
-    this.$store.dispatch('agentBots/get');
-    this.$store.dispatch('agentBots/fetchAgentBotInbox', this.inbox.id);
+    this.fetchBotData();
   },
 
   methods: {
+    fetchBotData() {
+      this.$store.dispatch('agentBots/get');
+      this.$store.dispatch('agentBots/fetchAgentBotInbox', this.currentInboxId);
+    },
     async updateActiveAgentBot() {
       try {
         await this.$store.dispatch('agentBots/setAgentBotInbox', {
@@ -74,51 +84,42 @@ export default {
 </script>
 
 <template>
-  <div class="mx-8">
+  <div class="mx-6 max-w-3xl">
     <LoadingState v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
-    <form
-      v-else
-      class="flex flex-wrap mx-0"
-      @submit.prevent="updateActiveAgentBot"
-    >
-      <SettingsSection
-        :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
-        :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
+    <form v-else @submit.prevent="updateActiveAgentBot">
+      <SettingsFieldSection
+        :label="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
+        :help-text="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
+        class="[&>div]:!items-start"
       >
-        <div>
-          <label>
-            <select v-model="selectedAgentBotId">
-              <option value="" disabled selected>
-                {{ $t('AGENT_BOTS.BOT_CONFIGURATION.SELECT_PLACEHOLDER') }}
-              </option>
-              <option
-                v-for="agentBot in agentBots"
-                :key="agentBot.id"
-                :value="agentBot.id"
+        <SelectInput
+          v-model="selectedAgentBotId"
+          :placeholder="$t('AGENT_BOTS.BOT_CONFIGURATION.SELECT_PLACEHOLDER')"
+          :options="agentBots.map(bot => ({ value: bot.id, label: bot.name }))"
+        />
+        <template #extra>
+          <div class="grid grid-cols-1 lg:grid-cols-8 mt-3">
+            <div class="col-span-1 lg:col-span-2 invisible" />
+            <div class="col-span-1 lg:col-span-6 flex gap-2 mx-1">
+              <NextButton
+                type="submit"
+                :label="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
+                :is-loading="uiFlags.isSettingAgentBot"
+              />
+              <NextButton
+                type="button"
+                :disabled="!selectedAgentBotId"
+                :is-loading="uiFlags.isDisconnecting"
+                faded
+                ruby
+                @click="disconnectBot"
               >
-                {{ agentBot.name }}
-              </option>
-            </select>
-          </label>
-          <div class="button-container space-x-2">
-            <NextButton
-              type="submit"
-              :label="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
-              :is-loading="uiFlags.isSettingAgentBot"
-            />
-            <NextButton
-              type="button"
-              :disabled="!selectedAgentBotId"
-              :is-loading="uiFlags.isDisconnecting"
-              faded
-              ruby
-              @click="disconnectBot"
-            >
-              {{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
-            </NextButton>
+                {{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
+              </NextButton>
+            </div>
           </div>
-        </div>
-      </SettingsSection>
+        </template>
+      </SettingsFieldSection>
     </form>
   </div>
 </template>
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 e8b28870c..be4d1d30e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -2,11 +2,26 @@
 import parse from 'date-fns/parse';
 import differenceInMinutes from 'date-fns/differenceInMinutes';
 import { generateTimeSlots } from '../helpers/businessHour';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import NextSelect from 'dashboard/components-next/select/Select.vue';
 
 const timeSlots = generateTimeSlots(30);
 
+const groupByPeriod = slots =>
+  ['AM', 'PM']
+    .map(period => ({
+      label: period,
+      options: slots
+        .filter(s => s.endsWith(period))
+        .map(s => ({ value: s, label: s })),
+    }))
+    .filter(g => g.options.length);
+
 export default {
-  components: {},
+  components: {
+    Icon,
+    NextSelect,
+  },
   props: {
     dayName: {
       type: String,
@@ -23,12 +38,10 @@ export default {
   emits: ['update'],
   computed: {
     fromTimeSlots() {
-      return timeSlots;
+      return groupByPeriod(timeSlots);
     },
     toTimeSlots() {
-      return timeSlots.filter(slot => {
-        return slot !== '12:00 AM';
-      });
+      return groupByPeriod(timeSlots.filter(slot => slot !== '12:00 AM'));
     },
     isDayEnabled: {
       get() {
@@ -135,99 +148,67 @@ export default {
 </script>
 
 <template>
-  <div
-    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
-        v-model="isDayEnabled"
-        name="enable-day"
-        class="m-0"
-        type="checkbox"
-        :title="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.ENABLE')"
-      />
-    </div>
-    <div
-      class="day flex items-center py-0 px-3 text-sm font-medium flex-shrink-0 min-w-28"
-    >
-      <span>{{ dayName }}</span>
-    </div>
-    <div
-      v-if="isDayEnabled"
-      class="flex flex-col flex-shrink-0 flex-grow relative"
-    >
-      <div class="flex items-center flex-shrink-0 flex-grow">
-        <div class="checkbox-wrap flex items-center open-all-day mr-6">
-          <input
-            v-model="isOpenAllDay"
-            name="enable-open-all-day"
-            class="enable-checkbox text-sm font-medium"
-            type="checkbox"
-            :title="$t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')"
+  <tr>
+    <td class="ltr:pl-4 ltr:pr-3 rtl:pl-3 rtl:pr-4">
+      <div class="flex items-center gap-2 min-h-16">
+        <input
+          v-model="isDayEnabled"
+          name="enable-day"
+          class="m-0"
+          type="checkbox"
+          :title="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.ENABLE')"
+        />
+        <span class="text-body-main text-n-slate-12 font-medium">
+          {{ dayName }}
+        </span>
+      </div>
+    </td>
+    <td class="py-3 ltr:pr-3 rtl:pl-3">
+      <div v-if="isDayEnabled" class="flex flex-col gap-1.5">
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2">
+            <input
+              v-model="isOpenAllDay"
+              name="enable-open-all-day"
+              class="m-0"
+              type="checkbox"
+              :title="$t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')"
+            />
+            <span class="text-body-main text-n-slate-12">{{
+              $t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')
+            }}</span>
+          </div>
+          <NextSelect
+            v-model="fromTime"
+            :groups="fromTimeSlots"
+            :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+            :disabled="isOpenAllDay"
+          />
+          <div class="flex items-center">
+            <Icon icon="i-lucide-minus size-4" />
+          </div>
+          <NextSelect
+            v-model="toTime"
+            :groups="toTimeSlots"
+            :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+            :disabled="isOpenAllDay"
           />
-          <span class="text-sm font-medium ml-1">{{
-            $t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')
-          }}</span>
         </div>
-        <multiselect
-          v-model="fromTime"
-          :options="fromTimeSlots"
-          deselect-label=""
-          select-label=""
-          selected-label=""
-          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-          :allow-empty="false"
-          :disabled="isOpenAllDay"
-        />
-        <div class="separator-icon flex items-center py-0 px-3">
-          <fluent-icon icon="subtract" type="solid" size="16" />
-        </div>
-        <multiselect
-          v-model="toTime"
-          :options="toTimeSlots"
-          deselect-label=""
-          select-label=""
-          selected-label=""
-          :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-          :allow-empty="false"
-          :disabled="isOpenAllDay"
-        />
+        <span v-if="hasError" class="error text-label-small text-n-ruby-9">
+          {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR') }}
+        </span>
       </div>
-      <div v-if="hasError" class="date-error pt-1">
-        <span class="error text-xs text-n-ruby-9">{{
-          $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR')
-        }}</span>
-      </div>
-    </div>
-    <div
-      v-else
-      class="flex items-center flex-shrink-0 flex-grow text-sm text-n-slate-11"
-    >
-      <span>
+      <span v-else class="text-body-main text-n-slate-11">
         {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.UNAVAILABLE') }}
       </span>
-    </div>
-    <div>
+    </td>
+    <td class="py-3 ltr:pr-3 rtl:pl-3">
       <span
         v-if="isDayEnabled && !hasError"
-        class="label bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-11 text-xs inline-block px-2 py-1 rounded-lg cursor-default whitespace-nowrap"
+        class="label bg-n-blue-3 text-n-blue-11 text-label-small inline-block px-2 py-1 rounded-lg cursor-default whitespace-nowrap"
       >
         {{ totalHours }}
       </span>
-    </div>
-  </div>
+    </td>
+  </tr>
 </template>
-
-<style lang="scss" scoped>
-.day-wrap::v-deep .multiselect {
-  @apply m-0 w-[7.5rem];
-
-  > .multiselect__tags {
-    @apply pl-3;
-
-    .multiselect__single {
-      @apply text-sm leading-6 py-2 px-0;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
index 6e5d2c251..90fa47768 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
@@ -1,114 +1,98 @@
-<script>
-import PreviewCard from 'dashboard/components/ui/PreviewCard.vue';
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import Avatar from 'next/avatar/Avatar.vue';
+import RadioCard from 'dashboard/components-next/AssignmentPolicy/components/RadioCard.vue';
 
-export default {
-  components: {
-    PreviewCard,
-    Avatar,
+const props = defineProps({
+  senderNameType: {
+    type: String,
+    default: 'friendly',
   },
-  props: {
-    senderNameType: {
-      type: String,
-      default: 'friendly',
-    },
-    businessName: {
-      type: String,
-      default: '',
+  businessName: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const { t } = useI18n();
+
+const senderNameKeyOptions = computed(() => [
+  {
+    key: 'friendly',
+    heading: t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.TITLE'),
+    content: t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.SUBTITLE'),
+    preview: {
+      senderName: 'Smith',
+      businessName: 'Chatwoot',
+      email: '<support@yourbusiness.com>',
     },
   },
-  emits: ['update'],
-  data() {
-    return {
-      senderNameKeyOptions: [
-        {
-          key: 'friendly',
-          heading: this.$t(
-            'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.TITLE'
-          ),
-          content: this.$t(
-            'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.SUBTITLE'
-          ),
-          preview: {
-            senderName: 'Smith',
-            businessName: 'Chatwoot',
-            email: '<support@yourbusiness.com>',
-          },
-        },
-        {
-          key: 'professional',
-          heading: this.$t(
-            'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.PROFESSIONAL.TITLE'
-          ),
-          content: this.$t(
-            'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.PROFESSIONAL.SUBTITLE'
-          ),
-          preview: {
-            senderName: '',
-            businessName: 'Chatwoot   ',
-            email: '<support@yourbusiness.com>',
-          },
-        },
-      ],
-    };
-  },
-  methods: {
-    isKeyOptionFriendly(key) {
-      return key === 'friendly';
-    },
-    userName(keyOption) {
-      return this.isKeyOptionFriendly(keyOption.key)
-        ? keyOption.preview.senderName
-        : keyOption.preview.businessName;
-    },
-    toggleSenderNameType(key) {
-      this.$emit('update', key);
+  {
+    key: 'professional',
+    heading: t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.PROFESSIONAL.TITLE'),
+    content: t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.PROFESSIONAL.SUBTITLE'),
+    preview: {
+      senderName: '',
+      businessName: 'Chatwoot',
+      email: '<support@yourbusiness.com>',
     },
   },
+]);
+
+const isKeyOptionFriendly = key => key === 'friendly';
+
+const userName = keyOption =>
+  isKeyOptionFriendly(keyOption.key)
+    ? keyOption.preview.senderName
+    : keyOption.preview.businessName;
+
+const toggleSenderNameType = key => {
+  emit('update', key);
 };
 </script>
 
 <template>
-  <div class="flex flex-col lg:flex-row items-start lg:items-center gap-4">
-    <button
+  <div
+    class="flex flex-col sm:flex-row md:flex-col xl:flex-row items-start gap-4 mt-3 min-w-0"
+  >
+    <RadioCard
       v-for="keyOption in senderNameKeyOptions"
+      :id="keyOption.key"
       :key="keyOption.key"
-      class="text-n-slate-12 cursor-pointer p-0"
-      @click="toggleSenderNameType(keyOption.key)"
+      :label="keyOption.heading"
+      :description="keyOption.content"
+      :is-active="keyOption.key === props.senderNameType"
+      class="flex-1 !gap-2"
+      @select="toggleSenderNameType"
     >
-      <PreviewCard
-        :heading="keyOption.heading"
-        :content="keyOption.content"
-        :active="keyOption.key === senderNameType"
-      >
-        <div class="flex flex-col items-start p-3 gap-2">
-          <span class="text-xs">
-            {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FOR_EG') }}
-          </span>
-          <div class="flex flex-row items-center gap-2">
-            <Avatar :name="userName(keyOption)" :size="32" rounded-full />
-            <div class="flex flex-col items-start gap-1">
-              <div class="items-center flex flex-row gap-0.5 max-w-[18rem]">
-                <span
-                  v-if="isKeyOptionFriendly(keyOption.key)"
-                  class="text-xs font-semibold leading-tight"
-                >
-                  {{ keyOption.preview.senderName }}
-                </span>
-                <span v-if="isKeyOptionFriendly(keyOption.key)" class="text-xs">
-                  {{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
-                </span>
-                <span
-                  class="text-xs font-semibold leading-tight overflow-hidden whitespace-nowrap text-ellipsis"
-                >
-                  {{ businessName || keyOption.preview.businessName }}
-                </span>
-              </div>
-              <span class="text-xs">{{ keyOption.preview.email }}</span>
-            </div>
+      <div class="flex items-center gap-3">
+        <Avatar :name="userName(keyOption)" :size="30" />
+        <div class="flex flex-col">
+          <div class="flex items-center gap-1">
+            <span
+              v-if="isKeyOptionFriendly(keyOption.key)"
+              class="text-body-main text-n-slate-12"
+            >
+              {{ keyOption.preview.senderName }}
+            </span>
+            <span
+              v-if="isKeyOptionFriendly(keyOption.key)"
+              class="text-body-main text-n-slate-11"
+            >
+              {{ t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
+            </span>
+            <span class="text-body-main text-n-slate-12">
+              {{ props.businessName || keyOption.preview.businessName }}
+            </span>
           </div>
+          <span class="text-label-small text-n-slate-11">
+            {{ keyOption.preview.email }}
+          </span>
         </div>
-      </PreviewCard>
-    </button>
+      </div>
+    </RadioCard>
   </div>
 </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 83f2bed8c..a5a43496a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -2,7 +2,8 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import inboxMixin from 'shared/mixins/inboxMixin';
-import SettingsSection from 'dashboard/components/SettingsSection.vue';
+import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import BusinessDay from './BusinessDay.vue';
 import {
@@ -12,6 +13,7 @@ import {
   timeZoneOptions,
 } from '../helpers/businessHour';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 
 const DEFAULT_TIMEZONE = {
   label: 'Pacific Time (US & Canada) (GMT-07:00)',
@@ -20,10 +22,12 @@ const DEFAULT_TIMEZONE = {
 
 export default {
   components: {
-    SettingsSection,
+    SettingsToggleSection,
+    SettingsFieldSection,
     BusinessDay,
     NextButton,
     WootMessageEditor,
+    ComboBox,
   },
   mixins: [inboxMixin],
   props: {
@@ -58,6 +62,15 @@ export default {
     timeZones() {
       return [...timeZoneOptions()];
     },
+    timeZoneValue: {
+      get() {
+        return this.timeZone.value;
+      },
+      set(value) {
+        const match = this.timeZones.find(tz => tz.value === value);
+        if (match) this.timeZone = match;
+      },
+    },
     isRichEditorEnabled() {
       if (
         this.isATwilioChannel ||
@@ -121,96 +134,104 @@ export default {
 </script>
 
 <template>
-  <div class="mx-8">
-    <SettingsSection
-      :title="$t('INBOX_MGMT.BUSINESS_HOURS.TITLE')"
-      :sub-title="$t('INBOX_MGMT.BUSINESS_HOURS.SUBTITLE')"
+  <div class="mx-6">
+    <SettingsToggleSection
+      v-model="isBusinessHoursEnabled"
+      :header="$t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY')"
+      :description="$t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP')"
     >
-      <form @submit.prevent="updateInbox">
-        <label for="toggle-business-hours" class="toggle-input-wrap">
-          <input
-            v-model="isBusinessHoursEnabled"
-            type="checkbox"
-            class="ltr:mr-2 rtl:ml-2"
-            name="toggle-business-hours"
-          />
-          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
-        </label>
-        <p class="mb-4 text-n-slate-11">
-          {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
-        </p>
-        <div v-if="isBusinessHoursEnabled" class="mb-6">
-          <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 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
-                :min-height="4"
-              />
-            </div>
-            <textarea v-else v-model="unavailableMessage" type="text" />
-          </div>
-          <div class="timezone-input-wrap">
-            <label>
-              {{ $t('INBOX_MGMT.BUSINESS_HOURS.TIMEZONE_LABEL') }}
-            </label>
-            <multiselect
-              v-model="timeZone"
-              :options="timeZones"
-              deselect-label=""
-              select-label=""
-              selected-label=""
-              track-by="value"
-              label="label"
-              close-on-select
-              :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
-              :allow-empty="false"
-            />
-          </div>
-
-          <label>
-            {{ $t('INBOX_MGMT.BUSINESS_HOURS.WEEKLY_TITLE') }}
-          </label>
-          <BusinessDay
-            v-for="timeSlot in timeSlots"
-            :key="timeSlot.day"
-            :day-name="dayNames[timeSlot.day]"
-            :time-slot="timeSlot"
-            @update="data => onSlotUpdate(timeSlot.day, data)"
+      <template v-if="isBusinessHoursEnabled" #editor>
+        <div class="mb-4">
+          <WootMessageEditor
+            v-if="isRichEditorEnabled"
+            v-model="unavailableMessage"
+            enable-variables
+            is-format-mode
+            :placeholder="
+              $t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_LABEL')
+            "
+            :min-height="4"
           />
+          <textarea v-else v-model="unavailableMessage" type="text" />
         </div>
+      </template>
+    </SettingsToggleSection>
+
+    <div v-if="isBusinessHoursEnabled" class="flex items-center my-8 py-1">
+      <div class="flex-1 h-px bg-n-weak" />
+      <span class="text-body-main text-n-slate-11 px-2">
+        {{ $t('INBOX_MGMT.BUSINESS_HOURS.WEEKLY_TITLE') }}
+      </span>
+      <div class="flex-1 h-px bg-n-weak" />
+    </div>
+
+    <SettingsFieldSection
+      v-if="isBusinessHoursEnabled"
+      :label="$t('INBOX_MGMT.BUSINESS_HOURS.TIMEZONE_LABEL')"
+    >
+      <ComboBox
+        v-model="timeZoneValue"
+        :options="timeZones"
+        :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
+        class="[&>div>button]:!bg-n-alpha-black2"
+      />
+    </SettingsFieldSection>
+
+    <form class="flex flex-col" @submit.prevent="updateInbox">
+      <div v-if="isBusinessHoursEnabled" class="mt-2">
+        <div class="w-full">
+          <table
+            class="min-w-full table-auto outline outline-1 -outline-offset-1 outline-n-weak rounded-xl"
+          >
+            <thead>
+              <tr class="border-b border-n-weak">
+                <th
+                  class="py-3 ltr:pl-4 ltr:pr-3 rtl:pl-3 rtl:pr-4 text-start text-heading-3 text-n-slate-12"
+                >
+                  {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.DAY') }}
+                </th>
+                <th
+                  class="py-3 ltr:pr-3 rtl:pl-3 text-start text-heading-3 text-n-slate-12"
+                >
+                  {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.AVAILABILITY') }}
+                </th>
+                <th
+                  class="py-3 ltr:pr-3 rtl:pl-3 text-start text-heading-3 text-n-slate-12"
+                >
+                  {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.HOURS') }}
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-n-weak">
+              <BusinessDay
+                v-for="timeSlot in timeSlots"
+                :key="timeSlot.day"
+                :day-name="dayNames[timeSlot.day]"
+                :time-slot="timeSlot"
+                @update="data => onSlotUpdate(timeSlot.day, data)"
+              />
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="w-full flex justify-end items-center py-4 mt-2">
         <NextButton
           type="submit"
           :label="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
           :is-loading="uiFlags.isUpdating"
           :disabled="hasError"
         />
-      </form>
-    </SettingsSection>
+      </div>
+    </form>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.timezone-input-wrap {
-  &::v-deep .multiselect {
-    @apply mt-2;
-  }
-}
-
 ::v-deep.message-editor {
   @apply border-0;
 }
 
-.unavailable-input-wrap {
-  textarea {
-    @apply min-h-[4rem] mt-2;
-  }
+textarea {
+  @apply min-h-[4rem] mt-1.5;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
index c234cb7ae..dd566f131 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -99,7 +99,7 @@ export default {
 </script>
 
 <template>
-  <InboxReconnectionRequired class="mx-8 mt-5" @reauthorize="startLogin" />
+  <InboxReconnectionRequired class="mx-6" @reauthorize="startLogin" />
 </template>
 
 <style lang="scss" scoped>
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 7dd00ba4f..087a96948 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -3,7 +3,7 @@ import { frontendURL } from '../../../../helper/URLHelper';
 import ChannelFactory from './ChannelFactory.vue';
 
 import SettingsContent from '../Wrapper.vue';
-import SettingWrapper from '../SettingsWrapper.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
 import InboxHome from './Index.vue';
 import Settings from './Settings.vue';
 import InboxChannel from './InboxChannels.vue';
@@ -15,7 +15,7 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/inboxes'),
-      component: SettingWrapper,
+      component: SettingsWrapper,
       children: [
         {
           path: '',
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 c8dc25e0f..340f8f79f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -7,10 +7,13 @@ import { useVuelidate } from '@vuelidate/core';
 import { minValue } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import { useConfig } from 'dashboard/composables/useConfig';
-import SettingsSection from '../../../../../components/SettingsSection.vue';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
+import SettingsAccordion from 'dashboard/components-next/Settings/SettingsAccordion.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Switch from 'dashboard/components-next/switch/Switch.vue';
+import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 import assignmentPoliciesAPI from 'dashboard/api/assignmentPolicies';
 import { useI18n } from 'vue-i18n';
 
@@ -27,7 +30,7 @@ const router = useRouter();
 const { t } = useI18n();
 const { isEnterprise } = useConfig();
 
-const selectedAgents = ref([]);
+const selectedAgentIds = ref([]);
 const isAgentListUpdating = ref(false);
 const enableAutoAssignment = ref(false);
 const maxAssignmentLimit = ref(null);
@@ -42,6 +45,33 @@ const isLinkingPolicy = ref(false);
 
 const agentList = computed(() => store.getters['agents/getAgents']);
 
+const selectedAgentNames = computed(() =>
+  selectedAgentIds.value.map(
+    id => agentList.value.find(a => a.id === id)?.name ?? ''
+  )
+);
+
+const agentMenuItems = computed(() =>
+  agentList.value
+    .filter(({ id }) => !selectedAgentIds.value.includes(id))
+    .map(({ id, name, thumbnail, avatar_url }) => ({
+      label: name,
+      value: id,
+      action: 'select',
+      thumbnail: { name, src: thumbnail || avatar_url || '' },
+    }))
+);
+
+const handleAgentAdd = ({ value }) => {
+  if (!selectedAgentIds.value.includes(value)) {
+    selectedAgentIds.value.push(value);
+  }
+};
+
+const handleAgentRemove = index => {
+  selectedAgentIds.value.splice(index, 1);
+};
+
 const isFeatureEnabled = feature => {
   const accountId = Number(route.params.accountId);
   return store.getters['accounts/isFeatureEnabledonAccount'](
@@ -95,6 +125,18 @@ const rules = {
 
 const v$ = useVuelidate(rules, { maxAssignmentLimit });
 
+const assignmentHeader = computed(() =>
+  hasAssignmentV2.value
+    ? t('INBOX_MGMT.ASSIGNMENT.ENABLE_AUTO_ASSIGNMENT')
+    : t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT')
+);
+
+const assignmentDescription = computed(() =>
+  hasAssignmentV2.value
+    ? t('INBOX_MGMT.ASSIGNMENT.DESCRIPTION')
+    : t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT')
+);
+
 const maxAssignmentLimitErrors = computed(() => {
   if (v$.value.maxAssignmentLimit.$error) {
     return t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_RANGE_ERROR');
@@ -110,7 +152,7 @@ const fetchAttachedAgents = async () => {
     const {
       data: { payload: inboxMembers },
     } = response;
-    selectedAgents.value = inboxMembers;
+    selectedAgentIds.value = inboxMembers.map(m => m.id);
   } catch (error) {
     //  Handle error
   }
@@ -204,12 +246,13 @@ const closePolicyDropdown = () => {
   showPolicyDropdown.value = false;
 };
 
-const handleToggleAutoAssignment = async () => {
+const handleToggleAutoAssignment = async val => {
+  enableAutoAssignment.value = val;
   try {
     const payload = {
       id: props.inbox.id,
       formData: false,
-      enable_auto_assignment: enableAutoAssignment.value,
+      enable_auto_assignment: val,
     };
     await store.dispatch('inboxes/updateInbox', payload);
     useAlert(t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
@@ -219,12 +262,11 @@ const handleToggleAutoAssignment = async () => {
 };
 
 const updateAgents = async () => {
-  const agentListIds = selectedAgents.value.map(el => el.id);
   isAgentListUpdating.value = true;
   try {
     await store.dispatch('inboxMembers/create', {
       inboxId: props.inbox.id,
-      agentList: agentListIds,
+      agentList: selectedAgentIds.value,
     });
     useAlert(t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
   } catch (error) {
@@ -320,81 +362,76 @@ onMounted(() => {
 
 <template>
   <div>
-    <SettingsSection
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+    <SettingsFieldSection
+      :label="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS')"
+      :help-text="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT')"
+      class="[&>div]:!items-start"
     >
-      <multiselect
-        v-model="selectedAgents"
-        :options="agentList"
-        track-by="id"
-        label="name"
-        multiple
-        :close-on-select="false"
-        :clear-on-select="false"
-        hide-selected
-        placeholder="Pick some"
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-      />
+      <div
+        class="rounded-xl outline outline-1 -outline-offset-1 outline-n-weak hover:outline-n-strong px-2 py-2"
+      >
+        <TagInput
+          :model-value="selectedAgentNames"
+          :placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
+          :menu-items="agentMenuItems"
+          show-dropdown
+          skip-label-dedup
+          :auto-open-dropdown="false"
+          @add="handleAgentAdd"
+          @remove="handleAgentRemove"
+        />
+      </div>
 
-      <NextButton
-        :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :is-loading="isAgentListUpdating"
-        @click="updateAgents"
-      />
-    </SettingsSection>
-
-    <SettingsSection
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
-    >
-      <!-- New UI for assignment_v2 -->
-      <template v-if="hasAssignmentV2">
-        <div class="flex items-start gap-3">
-          <Switch
-            v-model="enableAutoAssignment"
-            class="flex-shrink-0 mt-0.5"
-            @change="handleToggleAutoAssignment"
-          />
-          <div class="flex-grow">
-            <label class="text-sm text-n-slate-12 font-medium mb-1">
-              {{ $t('INBOX_MGMT.ASSIGNMENT.ENABLE_AUTO_ASSIGNMENT') }}
-            </label>
-            <p class="text-sm text-n-slate-11">
-              {{ $t('INBOX_MGMT.ASSIGNMENT.DESCRIPTION') }}
-            </p>
+      <template #extra>
+        <div class="grid grid-cols-1 lg:grid-cols-8">
+          <div class="col-span-1 lg:col-span-2" />
+          <div class="col-span-1 lg:col-span-6 mt-4 justify-self-end">
+            <NextButton
+              :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+              :is-loading="isAgentListUpdating"
+              @click="updateAgents"
+            />
           </div>
         </div>
-
-        <Transition
-          enter-active-class="transition-all duration-200 ease-out"
-          enter-from-class="opacity-0 -translate-y-2"
-          enter-to-class="opacity-100 translate-y-0"
-          leave-active-class="transition-all duration-150 ease-in"
-          leave-from-class="opacity-100 translate-y-0"
-          leave-to-class="opacity-0 -translate-y-2"
+      </template>
+    </SettingsFieldSection>
+    <SettingsAccordion
+      :title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
+      class="mt-6"
+    >
+      <SettingsToggleSection
+        v-model="enableAutoAssignment"
+        compact
+        :header="assignmentHeader"
+        :description="assignmentDescription"
+        @update:model-value="handleToggleAutoAssignment"
+      >
+        <template
+          v-if="enableAutoAssignment && (isEnterprise || hasAssignmentV2)"
+          #editor
         >
-          <div v-if="enableAutoAssignment" class="mt-6">
+          <!-- assignment_v2 UI -->
+          <template v-if="hasAssignmentV2">
             <!-- Policy Card - When policy is attached -->
             <div
               v-if="showAdvancedAssignmentUI && assignmentPolicy"
-              class="p-4 rounded-xl outline-1 outline-n-weak outline bg-n-solid-1 dark:bg-n-slate-1"
+              class="ltr:pr-0 rtl:pl-0 ltr:pl-4 rtl:pr-4 py-4"
             >
               <div class="flex items-start gap-4">
                 <div
-                  class="flex-shrink-0 size-12 rounded-xl bg-n-slate-3 flex items-center justify-center"
+                  class="flex-shrink-0 size-10 rounded-xl bg-n-slate-3 flex items-center justify-center"
                 >
                   <span class="i-lucide-zap text-xl text-n-slate-11" />
                 </div>
                 <div class="flex-grow">
-                  <div class="flex items-start justify-between gap-4 mb-4">
+                  <div
+                    class="flex items-start justify-between gap-4 mb-4 ltr:pr-4 rtl:pl-4"
+                  >
                     <div class="flex flex-col items-start">
-                      <span class="text-base font-medium text-n-slate-12 mb-1">
+                      <span class="text-heading-3 text-n-slate-12 mb-1">
                         {{ assignmentPolicy.name }}
                       </span>
-                      <p class="text-sm text-n-slate-11">
+                      <p class="text-body-main text-n-slate-11">
                         {{ $t('INBOX_MGMT.ASSIGNMENT.POLICY_LABEL') }}
                       </p>
                     </div>
@@ -412,7 +449,7 @@ onMounted(() => {
                       <span
                         class="w-1.5 h-1.5 rounded-full bg-n-slate-11 flex-shrink-0"
                       />
-                      <span class="text-sm text-n-slate-12">
+                      <span class="text-body-main text-n-slate-12">
                         {{ assignmentOrderLabel }}
                       </span>
                     </li>
@@ -420,7 +457,7 @@ onMounted(() => {
                       <span
                         class="w-1.5 h-1.5 rounded-full bg-n-slate-11 flex-shrink-0"
                       />
-                      <span class="text-sm text-n-slate-12">
+                      <span class="text-body-main text-n-slate-12">
                         {{ assignmentMethodLabel }}
                       </span>
                     </li>
@@ -447,21 +484,20 @@ onMounted(() => {
                 !assignmentPolicy &&
                 !isLoadingPolicy
               "
-              class="rounded-xl outline-1 outline-n-weak outline"
             >
               <!-- Default Policy Header -->
               <div class="p-4">
                 <div class="flex items-start gap-4">
                   <div
-                    class="flex-shrink-0 w-12 h-12 rounded-xl bg-n-slate-3 dark:bg-n-slate-4 flex items-center justify-center"
+                    class="flex-shrink-0 size-10 rounded-xl bg-n-slate-3 dark:bg-n-slate-4 flex items-center justify-center"
                   >
                     <i class="i-lucide-zap text-xl text-n-slate-11" />
                   </div>
                   <div class="flex-grow">
-                    <h4 class="text-base font-medium text-n-slate-12 mb-1">
+                    <h4 class="text-heading-3 text-n-slate-12 mb-0.5">
                       {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_POLICY_LINKED') }}
                     </h4>
-                    <p class="text-sm text-n-slate-11">
+                    <p class="text-body-main text-n-slate-11">
                       {{
                         $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_POLICY_DESCRIPTION')
                       }}
@@ -476,45 +512,47 @@ onMounted(() => {
                     v-on-click-outside="closePolicyDropdown"
                     class="relative"
                   >
-                    <button
-                      type="button"
-                      class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-n-brand hover:bg-n-brand/90 rounded-lg transition-colors"
+                    <NextButton
+                      icon="i-lucide-link"
+                      sm
                       @click="togglePolicyDropdown"
                     >
-                      <i class="i-lucide-link text-sm" />
                       {{ $t('INBOX_MGMT.ASSIGNMENT.LINK_EXISTING_POLICY') }}
-                      <i
-                        class="i-lucide-chevron-down text-sm transition-transform"
+                      <Icon
+                        icon="i-lucide-chevron-down"
+                        class="transition-transform flex-shrink-0"
                         :class="{ 'rotate-180': showPolicyDropdown }"
                       />
-                    </button>
+                    </NextButton>
 
                     <DropdownMenu
                       v-if="showPolicyDropdown"
-                      class="top-full left-0 mt-2 min-w-72"
+                      class="top-full ltr:left-0 rtl:right-0 mt-2 max-w-64 max-h-72 overflow-y-auto"
                       :menu-items="policyMenuItems"
                       :is-searching="isLoadingPolicies"
                       @action="handlePolicyMenuAction"
                     />
                   </div>
 
-                  <button
-                    type="button"
-                    class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-n-slate-12 bg-n-slate-3 dark:bg-n-slate-4 hover:bg-n-slate-4 dark:hover:bg-n-slate-5 rounded-lg transition-colors"
+                  <NextButton
+                    icon="i-lucide-plus"
+                    :label="$t('INBOX_MGMT.ASSIGNMENT.CREATE_NEW_POLICY')"
+                    slate
+                    faded
+                    sm
                     @click="navigateToCreatePolicy"
-                  >
-                    <i class="i-lucide-plus text-sm" />
-                    {{ $t('INBOX_MGMT.ASSIGNMENT.CREATE_NEW_POLICY') }}
-                  </button>
+                  />
                 </div>
               </div>
 
               <!-- Default Rules Info -->
-              <div class="px-4 py-4 border-t border-n-weak bg-n-slate-2">
+              <div
+                class="px-4 py-4 border-t border-n-weak bg-n-slate-2 rounded-b-xl"
+              >
                 <div class="flex items-start gap-3">
-                  <i class="i-lucide-info text-base text-n-slate-10 mt-0.5" />
+                  <Icon icon="i-lucide-info" class="mt-0.5 text-n-slate-11" />
                   <div>
-                    <p class="text-sm text-n-slate-11 mb-2">
+                    <p class="text-body-main text-n-slate-11 mb-2">
                       {{ $t('INBOX_MGMT.ASSIGNMENT.CURRENT_BEHAVIOR') }}
                     </p>
                     <ul class="space-y-1">
@@ -522,7 +560,7 @@ onMounted(() => {
                         <span
                           class="w-1 h-1 rounded-full bg-n-slate-10 flex-shrink-0"
                         />
-                        <span class="text-sm text-n-slate-11">
+                        <span class="text-body-main text-n-slate-11">
                           {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULE_1') }}
                         </span>
                       </li>
@@ -530,7 +568,7 @@ onMounted(() => {
                         <span
                           class="w-1 h-1 rounded-full bg-n-slate-10 flex-shrink-0"
                         />
-                        <span class="text-sm text-n-slate-11">
+                        <span class="text-body-main text-n-slate-11">
                           {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULE_2') }}
                         </span>
                       </li>
@@ -543,19 +581,19 @@ onMounted(() => {
             <!-- Default Rules Card - Feature not enabled (no advanced_assignment) -->
             <div
               v-else-if="!showAdvancedAssignmentUI"
-              class="p-4 rounded-xl outline outline-1 outline-n-weak -outline-offset-1"
+              class="ltr:pr-0 rtl:pl-0 ltr:pl-4 rtl:pr-4 py-4"
             >
               <div class="flex items-start gap-4">
                 <div
-                  class="flex-shrink-0 w-12 h-12 rounded-xl bg-n-slate-3 dark:bg-n-slate-4 flex items-center justify-center"
+                  class="flex-shrink-0 size-10 rounded-xl bg-n-slate-3 dark:bg-n-slate-4 flex items-center justify-center"
                 >
-                  <i class="i-lucide-zap text-xl text-n-slate-11" />
+                  <Icon icon="i-lucide-zap" class="text-xl text-n-slate-11" />
                 </div>
                 <div class="flex-grow">
-                  <h4 class="text-base font-medium text-n-slate-12 mb-1">
+                  <h4 class="text-heading-3 text-n-slate-12 mb-0.5">
                     {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULES_TITLE') }}
                   </h4>
-                  <p class="text-sm text-n-slate-11 mb-4">
+                  <p class="text-body-main text-n-slate-11 mb-4">
                     {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULES_DESCRIPTION') }}
                   </p>
 
@@ -564,7 +602,7 @@ onMounted(() => {
                       <span
                         class="w-1.5 h-1.5 rounded-full bg-n-slate-11 flex-shrink-0"
                       />
-                      <span class="text-sm font-medium text-n-slate-12">
+                      <span class="text-body-main text-n-slate-12">
                         {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULE_1') }}
                       </span>
                     </li>
@@ -572,7 +610,7 @@ onMounted(() => {
                       <span
                         class="w-1.5 h-1.5 rounded-full bg-n-slate-11 flex-shrink-0"
                       />
-                      <span class="text-sm font-medium text-n-slate-12">
+                      <span class="text-body-main text-n-slate-12">
                         {{ $t('INBOX_MGMT.ASSIGNMENT.DEFAULT_RULE_2') }}
                       </span>
                     </li>
@@ -582,7 +620,7 @@ onMounted(() => {
 
                   <!-- Upgrade prompt when advanced_assignment is not enabled -->
                   <div v-if="!hasAdvancedAssignment">
-                    <p class="text-sm text-n-slate-11 mb-1">
+                    <p class="text-body-main text-n-slate-11 mb-1">
                       {{ $t('INBOX_MGMT.ASSIGNMENT.UPGRADE_PROMPT') }}
                     </p>
                     <NextButton
@@ -596,52 +634,39 @@ onMounted(() => {
                 </div>
               </div>
             </div>
-          </div>
-        </Transition>
-      </template>
+          </template>
 
-      <!-- Old UI for non-assignment_v2 -->
-      <template v-else>
-        <label class="w-3/4 settings-item">
-          <div class="flex items-center gap-2">
-            <input
-              id="enableAutoAssignment"
-              v-model="enableAutoAssignment"
-              type="checkbox"
-              @change="handleToggleAutoAssignment"
-            />
-            <label for="enableAutoAssignment">
-              {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT') }}
-            </label>
-          </div>
+          <!-- Old UI for non-assignment_v2 -->
+          <template v-else-if="isEnterprise">
+            <div class="p-4">
+              <woot-input
+                v-model="maxAssignmentLimit"
+                type="number"
+                :class="{ error: v$.maxAssignmentLimit.$error }"
+                :error="maxAssignmentLimitErrors"
+                :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
+                class="[&>input]:!mb-0"
+                @blur="v$.maxAssignmentLimit.$touch"
+              />
 
-          <p class="pb-1 text-sm not-italic text-n-slate-11">
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
-          </p>
-        </label>
+              <p class="mt-1.5 text-label-small text-n-slate-11">
+                {{
+                  $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT')
+                }}
+              </p>
 
-        <div v-if="enableAutoAssignment && isEnterprise" class="py-3">
-          <woot-input
-            v-model="maxAssignmentLimit"
-            type="number"
-            :class="{ error: v$.maxAssignmentLimit.$error }"
-            :error="maxAssignmentLimitErrors"
-            :label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
-            @blur="v$.maxAssignmentLimit.$touch"
-          />
-
-          <p class="pb-1 text-sm not-italic text-n-slate-11">
-            {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
-          </p>
-
-          <NextButton
-            :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-            :disabled="v$.maxAssignmentLimit.$invalid"
-            @click="updateInbox"
-          />
-        </div>
-      </template>
-    </SettingsSection>
+              <div class="flex justify-end mt-4">
+                <NextButton
+                  :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+                  :disabled="v$.maxAssignmentLimit.$invalid"
+                  @click="updateInbox"
+                />
+              </div>
+            </div>
+          </template>
+        </template>
+      </SettingsToggleSection>
+    </SettingsAccordion>
 
     <woot-modal
       v-if="showDeleteConfirmModal"
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 25f96ad3e..d0e10f7e3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -1,7 +1,7 @@
 <script>
 import { useAlert } from 'dashboard/composables';
 import inboxMixin from 'shared/mixins/inboxMixin';
-import SettingsSection from '../../../../../components/SettingsSection.vue';
+import SettingsFieldSection from 'dashboard/components-next/Settings/SettingsFieldSection.vue';
 import ImapSettings from '../ImapSettings.vue';
 import SmtpSettings from '../SmtpSettings.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -13,7 +13,7 @@ import { sanitizeAllowedDomains } from 'dashboard/helper/URLHelper';
 
 export default {
   components: {
-    SettingsSection,
+    SettingsFieldSection,
     ImapSettings,
     SmtpSettings,
     NextButton,
@@ -149,110 +149,108 @@ export default {
 </script>
 
 <template>
-  <div v-if="isATwilioChannel" class="mx-8">
-    <SettingsSection
-      :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
-      :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
+  <div v-if="isATwilioChannel" class="mx-6">
+    <SettingsFieldSection
+      :label="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
+      :help-text="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
     >
       <woot-code :script="inbox.callback_webhook_url" lang="html" />
-    </SettingsSection>
-    <SettingsSection
+    </SettingsFieldSection>
+    <SettingsFieldSection
       v-if="isATwilioWhatsAppChannel"
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_TITLE')"
-      :sub-title="
+      :label="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_TITLE')"
+      :help-text="
         $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_SUBHEADER')
       "
     >
-      <div class="flex justify-start items-center mt-2">
-        <NextButton :disabled="isSyncingTemplates" @click="syncTemplates">
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_BUTTON') }}
-        </NextButton>
-      </div>
-    </SettingsSection>
+      <NextButton :disabled="isSyncingTemplates" @click="syncTemplates">
+        {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_BUTTON') }}
+      </NextButton>
+    </SettingsFieldSection>
   </div>
-  <div v-else-if="isAVoiceChannel" class="mx-8">
-    <SettingsSection
-      :title="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_TITLE')"
-      :sub-title="
+  <div v-else-if="isAVoiceChannel" class="mx-6">
+    <SettingsFieldSection
+      :label="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_TITLE')"
+      :help-text="
         $t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_SUBTITLE')
       "
     >
       <woot-code :script="inbox.voice_call_webhook_url" lang="html" />
-    </SettingsSection>
-    <SettingsSection
-      :title="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_STATUS_URL_TITLE')"
-      :sub-title="
+    </SettingsFieldSection>
+    <SettingsFieldSection
+      :label="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_STATUS_URL_TITLE')"
+      :help-text="
         $t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_STATUS_URL_SUBTITLE')
       "
     >
       <woot-code :script="inbox.voice_status_webhook_url" lang="html" />
-    </SettingsSection>
+    </SettingsFieldSection>
   </div>
 
-  <div v-else-if="isALineChannel" class="mx-8">
-    <SettingsSection
-      :title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
-      :sub-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
+  <div v-else-if="isALineChannel" class="mx-6">
+    <SettingsFieldSection
+      :label="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
+      :help-text="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
     >
       <woot-code :script="inbox.callback_webhook_url" lang="html" />
-    </SettingsSection>
+    </SettingsFieldSection>
   </div>
   <div v-else-if="isAWebWidgetInbox">
-    <div class="mx-8">
-      <SettingsSection
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
+    <div class="mx-6">
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.TITLE')"
+        :help-text="$t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.SUBTITLE')"
+        class="[&>div]:!items-start"
       >
-        <woot-code
-          :script="inbox.web_widget_script"
-          lang="html"
-          :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
-          enable-code-pen
+        <TextArea
+          v-model="allowedDomains"
+          :placeholder="
+            $t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.PLACEHOLDER')
+          "
+          auto-height
+          min-height="8rem"
+          class="w-full"
         />
-      </SettingsSection>
-
-      <SettingsSection
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.TITLE')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.SUBTITLE')"
-      >
-        <div class="flex flex-col w-full max-w-3xl gap-4">
-          <TextArea
-            v-model="allowedDomains"
-            :placeholder="
-              $t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.PLACEHOLDER')
-            "
-            auto-height
-            min-height="8rem"
-            class="w-full"
-          />
-          <div>
-            <NextButton
-              :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-              :is-loading="isUpdatingAllowedDomains"
-              @click="updateAllowedDomains"
-            />
+        <template #extra>
+          <div class="grid grid-cols-1 lg:grid-cols-8">
+            <div class="col-span-1 lg:col-span-2 invisible" />
+            <div class="col-span-1 lg:col-span-6 mt-4 justify-self-end">
+              <NextButton
+                :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+                :is-loading="isUpdatingAllowedDomains"
+                @click="updateAllowedDomains"
+              />
+            </div>
           </div>
-        </div>
-      </SettingsSection>
+        </template>
+      </SettingsFieldSection>
 
-      <SettingsSection
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
       >
         <woot-code :script="inbox.hmac_token" />
-        <template #subTitle>
-          {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION') }}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://www.chatwoot.com/docs/product/channels/live-chat/sdk/identity-validation/"
-          >
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_LINK_TO_DOCS') }}
-          </a>
+        <template #extra>
+          <div class="grid grid-cols-1 lg:grid-cols-8">
+            <div class="col-span-1 lg:col-span-2 invisible" />
+            <p
+              class="col-span-1 lg:col-span-6 mt-1.5 text-label-small text-n-slate-11 ltr:ml-1 rtl:mr-1"
+            >
+              {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION') }}
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://www.chatwoot.com/docs/product/channels/live-chat/sdk/identity-validation/"
+                class="text-n-blue-11 hover:underline text-label-small"
+              >
+                {{ $t('INBOX_MGMT.SETTINGS_POPUP.HMAC_LINK_TO_DOCS') }}
+              </a>
+            </p>
+          </div>
         </template>
-      </SettingsSection>
-      <SettingsSection
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
-        :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
+      </SettingsFieldSection>
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
+        :help-text="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
       >
         <div class="flex gap-2 items-center">
           <input
@@ -261,30 +259,30 @@ export default {
             type="checkbox"
             @change="handleHmacFlag"
           />
-          <label for="hmacMandatory">
+          <label for="hmacMandatory" class="text-body-main text-n-slate-12">
             {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
           </label>
         </div>
-      </SettingsSection>
+      </SettingsFieldSection>
     </div>
   </div>
-  <div v-else-if="isAPIInbox" class="mx-8">
-    <SettingsSection
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
+  <div v-else-if="isAPIInbox" class="mx-6">
+    <SettingsFieldSection
+      :label="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
+      :help-text="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
     >
       <woot-code :script="inbox.inbox_identifier" />
-    </SettingsSection>
+    </SettingsFieldSection>
 
-    <SettingsSection
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION')"
+    <SettingsFieldSection
+      :label="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
+      :help-text="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION')"
     >
       <woot-code :script="inbox.hmac_token" />
-    </SettingsSection>
-    <SettingsSection
-      :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
-      :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
+    </SettingsFieldSection>
+    <SettingsFieldSection
+      :label="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
+      :help-text="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
     >
       <div class="flex gap-2 items-center">
         <input
@@ -293,17 +291,17 @@ export default {
           type="checkbox"
           @change="handleHmacFlag"
         />
-        <label for="hmacMandatory">
+        <label for="hmacMandatory" class="text-body-main text-n-slate-12">
           {{ $t('INBOX_MGMT.EDIT.ENABLE_HMAC.LABEL') }}
         </label>
       </div>
-    </SettingsSection>
+    </SettingsFieldSection>
   </div>
-  <div v-else-if="isAnEmailChannel">
-    <div class="mx-8">
-      <SettingsSection
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
-        :sub-title="
+  <div v-else-if="isAnEmailChannel" class="mx-6">
+    <div>
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
+        :help-text="
           isForwardingEnabled
             ? $t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')
             : ''
@@ -315,71 +313,62 @@ export default {
         />
         <div
           v-else
-          class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg"
+          class="py-2 px-3 bg-n-amber-3 outline-n-amber-4 text-n-amber-11 outline outline-1 -outline-offset-1 rounded-xl"
         >
-          <p class="text-sm text-yellow-800 dark:text-yellow-200 mb-0">
+          <p class="text-body-para mb-0">
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_NOT_CONFIGURED') }}
           </p>
         </div>
-      </SettingsSection>
+      </SettingsFieldSection>
     </div>
     <ImapSettings :inbox="inbox" />
     <SmtpSettings v-if="inbox.imap_enabled" :inbox="inbox" />
   </div>
   <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
-    <div v-if="inbox.provider_config" class="mx-8">
+    <div v-if="inbox.provider_config" class="mx-6">
       <!-- Embedded Signup Section -->
       <template v-if="isEmbeddedSignupWhatsApp">
-        <SettingsSection
+        <SettingsFieldSection
           v-if="whatsappAppId"
-          :title="
+          :label="
             $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_TITLE')
           "
-          :sub-title="
-            $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_SUBHEADER')
-          "
+          :help-text="`${$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_SUBHEADER')} ${$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_DESCRIPTION')}`"
         >
-          <div class="flex gap-4 items-center">
-            <p class="text-sm text-n-slate-11">
-              {{
-                $t(
-                  'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_DESCRIPTION'
-                )
-              }}
-            </p>
+          <div class="flex flex-col gap-1 items-start">
             <NextButton @click="handleReconfigure">
               {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_RECONFIGURE_BUTTON') }}
             </NextButton>
           </div>
-        </SettingsSection>
+        </SettingsFieldSection>
       </template>
 
       <!-- Manual Setup Section -->
       <template v-else>
-        <SettingsSection
-          :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_TITLE')"
-          :sub-title="
+        <SettingsFieldSection
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_TITLE')"
+          :help-text="
             $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_SUBHEADER')
           "
         >
           <woot-code :script="inbox.provider_config.webhook_verify_token" />
-        </SettingsSection>
-        <SettingsSection
-          :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
-          :sub-title="
+        </SettingsFieldSection>
+        <SettingsFieldSection
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
+          :help-text="
             $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_SUBHEADER')
           "
         >
           <woot-code :script="inbox.provider_config.api_key" />
-        </SettingsSection>
-        <SettingsSection
-          :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
-          :sub-title="
+        </SettingsFieldSection>
+        <SettingsFieldSection
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
+          :help-text="
             $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
           "
         >
           <div
-            class="flex flex-1 justify-between items-center mt-2 whatsapp-settings--content"
+            class="flex flex-1 justify-between items-center whatsapp-settings--content"
           >
             <woot-input
               v-model="whatsAppInboxAPIKey"
@@ -400,20 +389,18 @@ export default {
               }}
             </NextButton>
           </div>
-        </SettingsSection>
+        </SettingsFieldSection>
       </template>
-      <SettingsSection
-        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_TITLE')"
-        :sub-title="
+      <SettingsFieldSection
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_TITLE')"
+        :help-text="
           $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_SUBHEADER')
         "
       >
-        <div class="flex justify-start items-center mt-2">
-          <NextButton :disabled="isSyncingTemplates" @click="syncTemplates">
-            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_BUTTON') }}
-          </NextButton>
-        </div>
-      </SettingsSection>
+        <NextButton :disabled="isSyncingTemplates" @click="syncTemplates">
+          {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_TEMPLATES_SYNC_BUTTON') }}
+        </NextButton>
+      </SettingsFieldSection>
     </div>
     <WhatsappReauthorize
       v-if="isEmbeddedSignupWhatsApp"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
index 9e91f9642..03cb6dada 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
@@ -8,13 +8,12 @@ import { CSAT_DISPLAY_TYPES } from 'shared/constants/messages';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import WithLabel from 'v3/components/Form/WithLabel.vue';
-import SectionLayout from 'dashboard/routes/dashboard/settings/account/components/SectionLayout.vue';
+import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
 import CSATDisplayTypeSelector from './components/CSATDisplayTypeSelector.vue';
 import CSATTemplate from 'dashboard/components-next/message/bubbles/Template/CSAT.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import FilterSelect from 'dashboard/components-next/filter/inputs/FilterSelect.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Switch from 'next/switch/Switch.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
@@ -414,181 +413,179 @@ const handleConfirmTemplateUpdate = async () => {
 </script>
 
 <template>
-  <div class="mx-8">
-    <SectionLayout
-      :title="$t('INBOX_MGMT.CSAT.TITLE')"
+  <div class="mx-6">
+    <SettingsToggleSection
+      v-model="state.csatSurveyEnabled"
+      :header="$t('INBOX_MGMT.CSAT.TITLE')"
       :description="$t('INBOX_MGMT.CSAT.SUBTITLE')"
     >
-      <template #headerActions>
-        <div class="flex justify-end">
-          <Switch v-model="state.csatSurveyEnabled" />
-        </div>
-      </template>
-
-      <div class="grid gap-5">
-        <!-- Show display type only for non-WhatsApp channels -->
-        <WithLabel
-          v-if="!isAnyWhatsAppChannel"
-          :label="$t('INBOX_MGMT.CSAT.DISPLAY_TYPE.LABEL')"
-          name="display_type"
-        >
-          <CSATDisplayTypeSelector
-            :selected-type="state.displayType"
-            @update="updateDisplayType"
-          />
-        </WithLabel>
-
-        <template v-if="isAnyWhatsAppChannel">
-          <div
-            class="flex flex-col gap-4 justify-between w-full lg:flex-row lg:gap-6"
-          >
-            <div class="flex flex-col gap-3 basis-3/5">
-              <WithLabel
-                :label="$t('INBOX_MGMT.CSAT.MESSAGE.LABEL')"
-                name="message"
-              >
-                <Editor
-                  v-model="state.message"
-                  :placeholder="$t('INBOX_MGMT.CSAT.MESSAGE.PLACEHOLDER')"
-                  :max-length="200"
-                  channel-type="Context::Plain"
-                  class="w-full"
-                />
-              </WithLabel>
-              <Input
-                v-model="state.templateButtonText"
-                :label="$t('INBOX_MGMT.CSAT.BUTTON_TEXT.LABEL')"
-                :placeholder="$t('INBOX_MGMT.CSAT.BUTTON_TEXT.PLACEHOLDER')"
-                class="w-full"
-              />
-
-              <WithLabel
-                :label="$t('INBOX_MGMT.CSAT.LANGUAGE.LABEL')"
-                name="language"
-              >
-                <ComboBox
-                  v-model="state.templateLanguage"
-                  :options="languageOptions"
-                  :placeholder="$t('INBOX_MGMT.CSAT.LANGUAGE.PLACEHOLDER')"
-                />
-              </WithLabel>
-
-              <div
-                v-if="shouldShowTemplateStatus"
-                class="flex gap-2 items-center mt-4"
-              >
-                <Icon
-                  :icon="templateApprovalStatus.icon"
-                  :class="templateApprovalStatus.color"
-                  class="size-4"
-                />
-                <span
-                  :class="templateApprovalStatus.color"
-                  class="text-sm font-medium"
-                >
-                  {{ templateApprovalStatus.text }}
-                </span>
-              </div>
-            </div>
-
-            <div
-              class="flex flex-col flex-shrink-0 justify-start items-center p-6 mt-1 rounded-xl basis-2/5 bg-n-slate-2 outline outline-1 outline-n-weak"
-            >
-              <p
-                class="inline-flex items-center text-sm font-medium text-n-slate-11"
-              >
-                {{ $t('INBOX_MGMT.CSAT.MESSAGE_PREVIEW.LABEL') }}
-                <Icon
-                  v-tooltip.top-end="
-                    $t('INBOX_MGMT.CSAT.MESSAGE_PREVIEW.TOOLTIP')
-                  "
-                  icon="i-lucide-info"
-                  class="flex-shrink-0 mx-1 size-4"
-                />
-              </p>
-              <CSATTemplate
-                :message="messagePreviewData"
-                :button-text="state.templateButtonText"
-                class="pt-12"
-              />
-            </div>
-          </div>
-        </template>
-
-        <!-- Non-WhatsApp channels layout -->
-        <template v-else>
+      <template v-if="state.csatSurveyEnabled" #editor>
+        <div class="grid gap-5">
+          <!-- Show display type only for non-WhatsApp channels -->
           <WithLabel
-            :label="$t('INBOX_MGMT.CSAT.MESSAGE.LABEL')"
-            name="message"
+            v-if="!isAnyWhatsAppChannel"
+            :label="$t('INBOX_MGMT.CSAT.DISPLAY_TYPE.LABEL')"
+            name="display_type"
           >
-            <Editor
-              v-model="state.message"
-              :placeholder="$t('INBOX_MGMT.CSAT.MESSAGE.PLACEHOLDER')"
-              :max-length="200"
-              class="w-full"
+            <CSATDisplayTypeSelector
+              :selected-type="state.displayType"
+              @update="updateDisplayType"
             />
           </WithLabel>
-        </template>
 
-        <WithLabel
-          :label="$t('INBOX_MGMT.CSAT.SURVEY_RULE.LABEL')"
-          name="survey_rule"
-        >
-          <div class="mb-4">
-            <span
-              class="inline-flex flex-wrap gap-1.5 items-center text-sm text-n-slate-12"
+          <template v-if="isAnyWhatsAppChannel">
+            <div
+              class="flex flex-col gap-4 justify-between w-full lg:flex-row lg:gap-6"
             >
-              {{ $t('INBOX_MGMT.CSAT.SURVEY_RULE.DESCRIPTION_PREFIX') }}
-              <FilterSelect
-                v-model="state.surveyRuleOperator"
-                variant="faded"
-                :options="filterTypes"
-                class="inline-flex shrink-0"
-                @update:model-value="updateSurveyRuleOperator"
-              />
-              {{ $t('INBOX_MGMT.CSAT.SURVEY_RULE.DESCRIPTION_SUFFIX') }}
+              <div class="flex flex-col gap-3 basis-3/5">
+                <WithLabel
+                  :label="$t('INBOX_MGMT.CSAT.MESSAGE.LABEL')"
+                  name="message"
+                >
+                  <Editor
+                    v-model="state.message"
+                    :placeholder="$t('INBOX_MGMT.CSAT.MESSAGE.PLACEHOLDER')"
+                    :max-length="200"
+                    channel-type="Context::Plain"
+                    class="w-full"
+                  />
+                </WithLabel>
+                <Input
+                  v-model="state.templateButtonText"
+                  :label="$t('INBOX_MGMT.CSAT.BUTTON_TEXT.LABEL')"
+                  :placeholder="$t('INBOX_MGMT.CSAT.BUTTON_TEXT.PLACEHOLDER')"
+                  class="w-full"
+                />
 
-              <NextButton
-                v-for="label in selectedLabelValues"
-                :key="label"
-                sm
-                faded
-                slate
-                trailing-icon
-                :label="label"
-                icon="i-lucide-x"
-                class="inline-flex shrink-0"
-                @click="removeLabel(label)"
+                <WithLabel
+                  :label="$t('INBOX_MGMT.CSAT.LANGUAGE.LABEL')"
+                  name="language"
+                >
+                  <ComboBox
+                    v-model="state.templateLanguage"
+                    :options="languageOptions"
+                    :placeholder="$t('INBOX_MGMT.CSAT.LANGUAGE.PLACEHOLDER')"
+                  />
+                </WithLabel>
+
+                <div
+                  v-if="shouldShowTemplateStatus"
+                  class="flex gap-2 items-center mt-4"
+                >
+                  <Icon
+                    :icon="templateApprovalStatus.icon"
+                    :class="templateApprovalStatus.color"
+                    class="size-4"
+                  />
+                  <span
+                    :class="templateApprovalStatus.color"
+                    class="text-sm font-medium"
+                  >
+                    {{ templateApprovalStatus.text }}
+                  </span>
+                </div>
+              </div>
+
+              <div
+                class="flex flex-col flex-shrink-0 justify-start items-center p-6 mt-1 rounded-xl basis-2/5 bg-n-slate-2 outline outline-1 outline-n-weak"
+              >
+                <p
+                  class="inline-flex items-center text-sm font-medium text-n-slate-11"
+                >
+                  {{ $t('INBOX_MGMT.CSAT.MESSAGE_PREVIEW.LABEL') }}
+                  <Icon
+                    v-tooltip.top-end="
+                      $t('INBOX_MGMT.CSAT.MESSAGE_PREVIEW.TOOLTIP')
+                    "
+                    icon="i-lucide-info"
+                    class="flex-shrink-0 mx-1 size-4"
+                  />
+                </p>
+                <CSATTemplate
+                  :message="messagePreviewData"
+                  :button-text="state.templateButtonText"
+                  class="pt-12"
+                />
+              </div>
+            </div>
+          </template>
+
+          <!-- Non-WhatsApp channels layout -->
+          <template v-else>
+            <WithLabel
+              :label="$t('INBOX_MGMT.CSAT.MESSAGE.LABEL')"
+              name="message"
+            >
+              <Editor
+                v-model="state.message"
+                :placeholder="$t('INBOX_MGMT.CSAT.MESSAGE.PLACEHOLDER')"
+                :max-length="200"
+                class="w-full"
               />
-              <FilterSelect
-                v-model="currentLabel"
-                :options="labelOptions"
-                :label="$t('INBOX_MGMT.CSAT.SURVEY_RULE.SELECT_PLACEHOLDER')"
-                hide-label
-                variant="faded"
-                class="inline-flex shrink-0"
-                @update:model-value="handleLabelSelect"
-              />
-            </span>
-          </div>
-        </WithLabel>
-        <p class="text-sm italic text-n-slate-11">
-          {{
-            isAnyWhatsAppChannel
-              ? $t('INBOX_MGMT.CSAT.WHATSAPP_NOTE')
-              : $t('INBOX_MGMT.CSAT.NOTE')
-          }}
-        </p>
-        <div>
-          <NextButton
-            type="submit"
-            :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-            :is-loading="isUpdating"
-            @click="saveSettings"
-          />
+            </WithLabel>
+          </template>
+
+          <WithLabel
+            :label="$t('INBOX_MGMT.CSAT.SURVEY_RULE.LABEL')"
+            name="survey_rule"
+          >
+            <div class="mb-4">
+              <span
+                class="inline-flex flex-wrap gap-1.5 items-center text-sm text-n-slate-12"
+              >
+                {{ $t('INBOX_MGMT.CSAT.SURVEY_RULE.DESCRIPTION_PREFIX') }}
+                <FilterSelect
+                  v-model="state.surveyRuleOperator"
+                  variant="faded"
+                  :options="filterTypes"
+                  class="inline-flex shrink-0"
+                  @update:model-value="updateSurveyRuleOperator"
+                />
+                {{ $t('INBOX_MGMT.CSAT.SURVEY_RULE.DESCRIPTION_SUFFIX') }}
+
+                <NextButton
+                  v-for="label in selectedLabelValues"
+                  :key="label"
+                  sm
+                  faded
+                  slate
+                  trailing-icon
+                  :label="label"
+                  icon="i-lucide-x"
+                  class="inline-flex shrink-0"
+                  @click="removeLabel(label)"
+                />
+                <FilterSelect
+                  v-model="currentLabel"
+                  :options="labelOptions"
+                  :label="$t('INBOX_MGMT.CSAT.SURVEY_RULE.SELECT_PLACEHOLDER')"
+                  hide-label
+                  variant="faded"
+                  class="inline-flex shrink-0"
+                  @update:model-value="handleLabelSelect"
+                />
+              </span>
+            </div>
+          </WithLabel>
+          <p class="text-sm italic text-n-slate-11">
+            {{
+              isAnyWhatsAppChannel
+                ? $t('INBOX_MGMT.CSAT.WHATSAPP_NOTE')
+                : $t('INBOX_MGMT.CSAT.NOTE')
+            }}
+          </p>
         </div>
-      </div>
-    </SectionLayout>
+      </template>
+    </SettingsToggleSection>
+
+    <div class="w-full flex justify-end items-center py-4 mt-2">
+      <NextButton
+        type="submit"
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        :is-loading="isUpdating"
+        @click="saveSettings"
+      />
+    </div>
 
     <!-- Template Update Confirmation Dialog -->
     <ConfirmTemplateUpdateDialog
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 f8dc6cbb6..cabd0023c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { BaseTableRow, BaseTableCell } from 'dashboard/components-next/table';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
@@ -12,40 +13,48 @@ defineEmits(['edit', 'delete']);
 </script>
 
 <template>
-  <tr class="max-w-full py-1">
-    <td
-      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 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 ltr:pr-4 rtl:pl-4 text-sm sm:pr-0 justify-end">
-      <Button
-        v-tooltip.top="
-          $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.EDIT_TOOLTIP')
-        "
-        icon="i-lucide-pen"
-        slate
-        xs
-        faded
-        @click="$emit('edit', app)"
-      />
-      <Button
-        v-tooltip.top="
-          $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.DELETE_TOOLTIP')
-        "
-        icon="i-lucide-trash-2"
-        xs
-        ruby
-        faded
-        @click="$emit('delete', app)"
-      />
-    </td>
-  </tr>
+  <BaseTableRow :item="app">
+    <template #default>
+      <BaseTableCell>
+        <span
+          class="text-body-main text-n-slate-12 truncate block"
+          :title="app.title"
+        >
+          {{ app.title }}
+        </span>
+      </BaseTableCell>
+
+      <BaseTableCell>
+        <span
+          class="text-body-main text-n-slate-11 truncate block"
+          :title="app.content[0].url"
+        >
+          {{ app.content[0].url }}
+        </span>
+      </BaseTableCell>
+
+      <BaseTableCell align="end" class="w-24">
+        <div class="flex justify-end gap-3 flex-shrink-0">
+          <Button
+            v-tooltip.top="
+              $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.EDIT_TOOLTIP')
+            "
+            icon="i-woot-edit-pen"
+            slate
+            sm
+            @click="$emit('edit', app)"
+          />
+          <Button
+            v-tooltip.top="
+              $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.DELETE_TOOLTIP')
+            "
+            icon="i-woot-bin"
+            slate
+            sm
+            @click="$emit('delete', app)"
+          />
+        </div>
+      </BaseTableCell>
+    </template>
+  </BaseTableRow>
 </template>
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 0d36edb11..e62c2f493 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -1,14 +1,19 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { picoSearch } from '@scmmishra/pico-search';
+import { BaseTable } from 'dashboard/components-next/table';
 import DashboardAppModal from './DashboardAppModal.vue';
 import DashboardAppsRow from './DashboardAppsRow.vue';
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../../SettingsLayout.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     BaseSettingsHeader,
+    SettingsLayout,
+    BaseTable,
     DashboardAppModal,
     DashboardAppsRow,
     NextButton,
@@ -20,6 +25,7 @@ export default {
       showDeleteConfirmationPopup: false,
       selectedApp: {},
       mode: 'CREATE',
+      searchQuery: '',
     };
   },
   computed: {
@@ -27,12 +33,20 @@ export default {
       records: 'dashboardApps/getRecords',
       uiFlags: 'dashboardApps/getUIFlags',
     }),
+    filteredRecords() {
+      const query = this.searchQuery.trim();
+      if (!query) return this.records;
+      return picoSearch(this.records, query, ['title']);
+    },
     tableHeaders() {
       return [
         this.$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.TABLE_HEADER.NAME'),
         this.$t(
           'INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.TABLE_HEADER.ENDPOINT'
         ),
+        this.$t(
+          'INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.TABLE_HEADER.ACTIONS'
+        ),
       ];
     },
   },
@@ -84,59 +98,62 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col flex-1 gap-8 overflow-auto">
-    <BaseSettingsHeader
-      :title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.TITLE')"
-      :description="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DESCRIPTION')"
-      :link-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LEARN_MORE')"
-      feature-name="dashboard_apps"
-      :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
-    >
-      <template #actions>
-        <NextButton
-          icon="i-lucide-circle-plus"
-          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT')"
-          @click="openCreatePopup"
-        />
-      </template>
-    </BaseSettingsHeader>
-    <div class="w-full overflow-x-auto text-n-slate-11">
-      <p
-        v-if="!uiFlags.isFetching && !records.length"
-        class="flex flex-col items-center justify-center h-full"
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.LOADING')"
+    :no-records-found="!records.length"
+    :no-records-message="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        v-model:search-query="searchQuery"
+        :title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.TITLE')"
+        :description="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DESCRIPTION')"
+        :link-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LEARN_MORE')"
+        :search-placeholder="
+          $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.SEARCH_PLACEHOLDER')
+        "
+        feature-name="dashboard_apps"
+        :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
       >
-        {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.404') }}
-      </p>
-      <woot-loading-state
-        v-if="uiFlags.isFetching"
-        :message="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.LOADING')"
-      />
-      <table
-        v-if="!uiFlags.isFetching && records.length"
-        class="min-w-full divide-y divide-n-weak"
+        <template v-if="records?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{
+              $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.COUNT', {
+                n: records.length,
+              })
+            }}
+          </span>
+        </template>
+        <template #actions>
+          <NextButton
+            :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT')"
+            size="sm"
+            @click="openCreatePopup"
+          />
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <span
+        v-if="!filteredRecords.length && searchQuery"
+        class="flex-1 flex items-center justify-center py-20 text-center text-body-main !text-base text-n-slate-11"
       >
-        <thead>
-          <th
-            v-for="thHeader in tableHeaders"
-            :key="thHeader"
-            class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-n-slate-11"
-          >
-            {{ thHeader }}
-          </th>
-        </thead>
-        <tbody class="divide-y divide-n-weak">
+        {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.NO_RESULTS') }}
+      </span>
+      <BaseTable v-else :headers="tableHeaders" :items="filteredRecords">
+        <template #row="{ items }">
           <DashboardAppsRow
-            v-for="(dashboardAppItem, index) in records"
+            v-for="(dashboardAppItem, index) in items"
             :key="dashboardAppItem.id"
             :index="index"
             :app="dashboardAppItem"
             @edit="editApp"
             @delete="openDeletePopup"
           />
-        </tbody>
-      </table>
-    </div>
-
+        </template>
+      </BaseTable>
+    </template>
     <DashboardAppModal
       v-if="showDashboardAppPopup"
       :show="showDashboardAppPopup"
@@ -160,5 +177,5 @@ export default {
       "
       :reject-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_NO')"
     />
-  </div>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
index 7c84f31a7..ec8996cd8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useBranding } from 'shared/composables/useBranding';
+import { picoSearch } from '@scmmishra/pico-search';
 import IntegrationItem from './IntegrationItem.vue';
 import SettingsLayout from '../SettingsLayout.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
@@ -10,12 +11,19 @@ const store = useStore();
 const getters = useStoreGetters();
 const { replaceInstallationName } = useBranding();
 
+const searchQuery = ref('');
 const uiFlags = getters['integrations/getUIFlags'];
 
 const integrationList = computed(
   () => getters['integrations/getAppIntegrations'].value
 );
 
+const filteredIntegrationList = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return integrationList.value;
+  return picoSearch(integrationList.value, query, ['name', 'description']);
+});
+
 onMounted(() => {
   store.dispatch('integrations/get');
 });
@@ -28,19 +36,30 @@ onMounted(() => {
   >
     <template #header>
       <BaseSettingsHeader
+        v-model:search-query="searchQuery"
         :title="$t('INTEGRATION_SETTINGS.HEADER')"
         :description="
           replaceInstallationName($t('INTEGRATION_SETTINGS.DESCRIPTION'))
         "
         :link-text="$t('INTEGRATION_SETTINGS.LEARN_MORE')"
+        :search-placeholder="$t('INTEGRATION_SETTINGS.SEARCH_PLACEHOLDER')"
         feature-name="integrations"
       />
     </template>
     <template #body>
       <div class="flex-grow flex-shrink overflow-auto">
-        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        <span
+          v-if="!filteredIntegrationList.length && searchQuery"
+          class="flex-1 flex items-center justify-center py-20 text-center text-body-main !text-base text-n-slate-11"
+        >
+          {{ $t('INTEGRATION_SETTINGS.NO_RESULTS') }}
+        </span>
+        <div
+          v-else
+          class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"
+        >
           <IntegrationItem
-            v-for="item in integrationList"
+            v-for="item in filteredIntegrationList"
             :id="item.id"
             :key="item.id"
             :logo="item.logo"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index 862ed22e8..5591095b3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -62,7 +62,7 @@ const confirmDeletion = () => {
 
 <template>
   <div
-    class="flex flex-col items-start justify-between lg:flex-row lg:items-center p-6 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow gap-6"
+    class="flex flex-col items-start justify-between lg:flex-row lg:items-center p-6 outline outline-n-container outline-1 bg-n-card rounded-xl gap-6"
   >
     <div
       class="flex items-start lg:items-center justify-start flex-1 m-0 gap-6 flex-col lg:flex-row"
@@ -78,10 +78,10 @@ const confirmDeletion = () => {
         />
       </div>
       <div>
-        <h3 class="mb-1 text-xl font-medium text-n-slate-12">
+        <h3 class="mb-1 text-heading-1 text-n-slate-12">
           {{ integrationName }}
         </h3>
-        <p class="text-n-slate-11 text-sm leading-6">
+        <p class="text-n-slate-11 text-body-main">
           {{ replaceInstallationName(integrationDescription) }}
         </p>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index 0dc4c3372..66c2aa161 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -6,12 +6,16 @@ import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import NewHook from './NewHook.vue';
 import SingleIntegrationHooks from './SingleIntegrationHooks.vue';
 import MultipleIntegrationHooks from './MultipleIntegrationHooks.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 
 export default {
   components: {
     NewHook,
     SingleIntegrationHooks,
     MultipleIntegrationHooks,
+    SettingsLayout,
+    BaseSettingsHeader,
   },
   props: {
     integrationId: {
@@ -28,6 +32,7 @@ export default {
       isIntegrationSingle,
       isHookTypeInbox,
     } = useIntegrationHook(integrationId);
+
     return {
       integration,
       isIntegrationMultiple,
@@ -71,6 +76,9 @@ export default {
       return this.$t('INTEGRATION_APPS.DELETE.CANCEL_BUTTON_TEXT');
     },
   },
+  mounted() {
+    this.$store.dispatch('integrations/get');
+  },
   methods: {
     openAddHookModal() {
       this.showAddHookModal = true;
@@ -108,26 +116,35 @@ export default {
 </script>
 
 <template>
-  <div class="overflow-auto p-4 w-full my-auto flex flex-wrap h-full">
-    <div v-if="showIntegrationHooks" class="w-full">
-      <div v-if="isIntegrationMultiple">
-        <MultipleIntegrationHooks
-          :integration-id="integrationId"
-          :show-add-button="showAddButton"
-          @add="openAddHookModal"
-          @delete="openDeletePopup"
-        />
-      </div>
+  <SettingsLayout :is-loading="uiFlags.isFetching">
+    <template v-if="isIntegrationSingle" #header>
+      <BaseSettingsHeader
+        :title="integration.name || ''"
+        description=""
+        :feature-name="integrationId"
+        :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
+      />
+    </template>
+    <template #body>
+      <div v-if="showIntegrationHooks" class="w-full">
+        <div v-if="isIntegrationMultiple">
+          <MultipleIntegrationHooks
+            :integration-id="integrationId"
+            :show-add-button="showAddButton"
+            @add="openAddHookModal"
+            @delete="openDeletePopup"
+          />
+        </div>
 
-      <div v-if="isIntegrationSingle">
-        <SingleIntegrationHooks
-          :integration-id="integrationId"
-          @add="openAddHookModal"
-          @delete="openDeletePopup"
-        />
+        <div v-if="isIntegrationSingle">
+          <SingleIntegrationHooks
+            :integration-id="integrationId"
+            @add="openAddHookModal"
+            @delete="openDeletePopup"
+          />
+        </div>
       </div>
-    </div>
-
+    </template>
     <woot-modal v-model:show="showAddHookModal" :on-close="hideAddHookModal">
       <NewHook :integration-id="integrationId" @close="hideAddHookModal" />
     </woot-modal>
@@ -141,5 +158,5 @@ export default {
       :confirm-text="confirmText"
       :reject-text="cancelText"
     />
-  </div>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
index f038f5fce..465cc438b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
@@ -6,6 +6,7 @@ import { frontendURL } from 'dashboard/helper/URLHelper';
 import { useBranding } from 'shared/composables/useBranding';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
 
 const props = defineProps({
   id: {
@@ -39,7 +40,7 @@ const integrationStatus = computed(() =>
 );
 
 const integrationStatusColor = computed(() =>
-  props.enabled ? 'bg-n-teal-9' : 'bg-n-slate-8'
+  props.enabled ? 'teal' : 'slate'
 );
 
 const actionURL = computed(() =>
@@ -49,10 +50,10 @@ const actionURL = computed(() =>
 
 <template>
   <div
-    class="flex flex-col flex-1 p-6 m-[1px] outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
+    class="flex flex-col flex-1 p-4 m-px outline outline-n-container outline-1 bg-n-card rounded-xl"
   >
     <div class="flex items-start justify-between">
-      <div class="flex h-12 w-12 mb-4">
+      <div class="flex h-12 w-12 mb-2">
         <img
           :src="`/dashboard/images/integrations/${id}.png`"
           class="max-w-full rounded-md border border-n-weak shadow-sm block dark:hidden bg-n-alpha-3 dark:bg-n-alpha-2"
@@ -62,24 +63,27 @@ const actionURL = computed(() =>
           class="max-w-full rounded-md border border-n-weak shadow-sm hidden dark:block bg-n-alpha-3 dark:bg-n-alpha-2"
         />
       </div>
-      <span
-        v-tooltip="integrationStatus"
-        class="text-white p-0.5 rounded-full w-5 h-5 flex items-center justify-center"
-        :class="integrationStatusColor"
-      >
-        <i class="i-ph-check-bold text-sm" />
-      </span>
+      <Label
+        :label="integrationStatus"
+        :color="integrationStatusColor"
+        compact
+      />
     </div>
     <div class="flex flex-col m-0 flex-1">
       <div
         class="font-medium mb-2 text-n-slate-12 flex justify-between items-center"
       >
-        <span class="text-base font-semibold">{{ name }}</span>
+        <span class="text-heading-3 text-n-slate-12">{{ name }}</span>
         <router-link :to="actionURL">
-          <Button :label="$t('INTEGRATION_APPS.CONFIGURE')" link />
+          <Button
+            :label="$t('INTEGRATION_APPS.CONFIGURE')"
+            icon="i-woot-settings"
+            link
+            xs
+          />
         </router-link>
       </div>
-      <p class="text-n-slate-11">
+      <p class="text-n-slate-11 text-body-main">
         {{ replaceInstallationName(description) }}
       </p>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue
index fd5a88cde..9f1834f12 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Linear.vue
@@ -7,7 +7,8 @@ import {
 } from 'dashboard/composables/store';
 
 import Integration from './Integration.vue';
-import Spinner from 'shared/components/Spinner.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 
 const store = useStore();
 
@@ -35,8 +36,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex-grow flex-shrink p-4 overflow-auto max-w-6xl mx-auto">
-    <div v-if="integrationLoaded && !uiFlags.isCreatingLinear">
+  <SettingsLayout :is-loading="!integrationLoaded || uiFlags.isCreatingLinear">
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('INTEGRATION_SETTINGS.LINEAR.HEADER')"
+        description=""
+        feature-name="linear_integration"
+        :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
+      />
+    </template>
+    <template #body>
       <Integration
         :integration-id="integration.id"
         :integration-logo="integration.logo"
@@ -49,9 +58,6 @@ onMounted(() => {
           message: $t('INTEGRATION_SETTINGS.LINEAR.DELETE.MESSAGE'),
         }"
       />
-    </div>
-    <div v-else class="flex items-center justify-center flex-1">
-      <Spinner size="" color-scheme="primary" />
-    </div>
-  </div>
+    </template>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
index ddb5197e0..05e17d42b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
@@ -1,64 +1,80 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
+import {
+  BaseTable,
+  BaseTableRow,
+  BaseTableCell,
+} from 'dashboard/components-next/table';
+import { useI18n } from 'vue-i18n';
 import BaseSettingsHeader from 'dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  components: {
-    BaseSettingsHeader,
-    NextButton,
+const props = defineProps({
+  integrationId: {
+    type: String,
+    required: true,
   },
-  props: {
-    integrationId: {
-      type: String,
-      required: true,
-    },
-    showAddButton: {
-      type: Boolean,
-      default: false,
-    },
+  showAddButton: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['delete', 'add'],
-  setup(props) {
-    const { integration, isHookTypeInbox, hasConnectedHooks } =
-      useIntegrationHook(props.integrationId);
-    return { integration, isHookTypeInbox, hasConnectedHooks };
-  },
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
-    hookHeaders() {
-      return this.integration.visible_properties;
-    },
-    hooks() {
-      if (!this.hasConnectedHooks) {
-        return [];
-      }
-      const { hooks } = this.integration;
-      return hooks.map(hook => ({
-        ...hook,
-        id: hook.id,
-        properties: this.hookHeaders.map(property =>
-          hook.settings[property] ? hook.settings[property] : '--'
-        ),
-      }));
-    },
-  },
-  mounted() {},
-  methods: {
-    inboxName(hook) {
-      return hook.inbox ? hook.inbox.name : '';
-    },
-  },
-};
+});
+
+defineEmits(['delete', 'add']);
+const { t } = useI18n();
+
+const { integration, isHookTypeInbox, hasConnectedHooks } = useIntegrationHook(
+  props.integrationId
+);
+
+const globalConfig = useMapGetter('globalConfig/get');
+const searchQuery = ref('');
+
+const hookHeaders = computed(() => {
+  const headers = [...(integration.value.visible_properties || [])];
+  if (isHookTypeInbox.value) {
+    headers.push(t('INTEGRATION_APPS.LIST.INBOX'));
+  }
+  headers.push(t('INTEGRATION_APPS.LIST.ACTIONS'));
+  return headers;
+});
+
+const hooks = computed(() => {
+  if (!hasConnectedHooks.value) {
+    return [];
+  }
+  const { hooks: integrationHooks } = integration.value;
+  const visibleProperties = integration.value.visible_properties || [];
+  return integrationHooks.map(hook => ({
+    ...hook,
+    id: hook.id,
+    properties: visibleProperties.map(property =>
+      hook.settings[property] ? hook.settings[property] : '--'
+    ),
+  }));
+});
+
+const filteredHooks = computed(() => {
+  const query = searchQuery.value?.trim() || '';
+  if (!query) return hooks.value;
+  const lowerQuery = query.toLowerCase();
+  return (
+    hooks.value?.filter(hook =>
+      hook.properties?.some(prop => prop?.toLowerCase().includes(lowerQuery))
+    ) || []
+  );
+});
+
+const inboxName = hook => (hook.inbox ? hook.inbox.name : '');
 </script>
 
 <template>
-  <div class="flex flex-col flex-1 gap-8 overflow-auto">
+  <div class="flex flex-col flex-1 gap-4 overflow-auto">
     <BaseSettingsHeader
-      :title="integration.name"
+      v-model:search-query="searchQuery"
+      :title="integration.name || ''"
       :description="
         $t(
           `INTEGRATION_APPS.SIDEBAR_DESCRIPTION.${integration.name.toUpperCase()}`,
@@ -67,61 +83,64 @@ export default {
       "
       :feature-name="integrationId"
       :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
+      :search-placeholder="$t('INTEGRATION_APPS.SEARCH_PLACEHOLDER')"
     >
+      <template v-if="hooks?.length" #count>
+        <span class="text-body-main text-n-slate-11">
+          {{ $t('INTEGRATION_APPS.COUNT', { n: hooks.length }) }}
+        </span>
+      </template>
       <template #actions>
         <NextButton
           v-if="showAddButton"
-          icon="i-lucide-circle-plus"
           :label="$t('INTEGRATION_APPS.ADD_BUTTON')"
+          size="sm"
           @click="$emit('add')"
         />
       </template>
     </BaseSettingsHeader>
     <div class="w-full">
-      <table v-if="hasConnectedHooks">
-        <thead
-          class="[&>th]:font-semibold [&>th]:tracking-[1px] ltr:[&>th]:text-left rtl:[&>th]:text-right [&>th]:px-2.5 [&>th]:uppercase [&>th]:text-n-slate-12"
-        >
-          <th
-            v-for="hookHeader in hookHeaders"
-            :key="hookHeader"
-            class="ltr:!pl-0 rtl:!pr-0"
-          >
-            {{ hookHeader }}
-          </th>
-          <th v-if="isHookTypeInbox">
-            {{ $t('INTEGRATION_APPS.LIST.INBOX') }}
-          </th>
-        </thead>
-        <tbody>
-          <tr
-            v-for="hook in hooks"
-            :key="hook.id"
-            class="border-b border-n-weak [&>td]:p-2.5 [&>td]:text-n-slate-12"
-          >
-            <td
-              v-for="property in hook.properties"
-              :key="property"
-              class="ltr:!pl-0 rtl:!pr-0"
-            >
-              {{ property }}
-            </td>
-            <td v-if="isHookTypeInbox" class="break-words">
-              {{ inboxName(hook) }}
-            </td>
-            <td class="flex justify-end gap-1">
-              <NextButton
-                v-tooltip.top="$t('INTEGRATION_APPS.LIST.DELETE.BUTTON_TEXT')"
-                icon="i-lucide-trash-2"
-                xs
-                ruby
-                faded
-                @click="$emit('delete', hook)"
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <BaseTable
+        v-if="hasConnectedHooks"
+        :headers="hookHeaders"
+        :items="filteredHooks"
+        :no-data-message="searchQuery ? $t('INTEGRATION_APPS.NO_RESULTS') : ''"
+      >
+        <template #row="{ items }">
+          <BaseTableRow v-for="hook in items" :key="hook.id" :item="hook">
+            <template #default>
+              <BaseTableCell
+                v-for="property in hook.properties"
+                :key="property"
+              >
+                <span class="text-body-main text-n-slate-12">
+                  {{ property }}
+                </span>
+              </BaseTableCell>
+
+              <BaseTableCell v-if="isHookTypeInbox">
+                <span class="text-body-main text-n-slate-11 break-words">
+                  {{ inboxName(hook) }}
+                </span>
+              </BaseTableCell>
+
+              <BaseTableCell align="end" class="w-12">
+                <div class="flex justify-end gap-3 flex-shrink-0">
+                  <NextButton
+                    v-tooltip.top="
+                      $t('INTEGRATION_APPS.LIST.DELETE.BUTTON_TEXT')
+                    "
+                    icon="i-woot-bin"
+                    slate
+                    sm
+                    @click="$emit('delete', hook)"
+                  />
+                </div>
+              </BaseTableCell>
+            </template>
+          </BaseTableRow>
+        </template>
+      </BaseTable>
       <p v-else class="flex flex-col items-center justify-center h-full">
         {{
           $t('INTEGRATION_APPS.NO_HOOK_CONFIGURED', {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
index c2d63ad22..06685e8c5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Notion.vue
@@ -11,7 +11,8 @@ import ButtonNext from 'next/button/Button.vue';
 import notionClient from 'dashboard/api/notion_auth.js';
 
 import Integration from './Integration.vue';
-import Spinner from 'shared/components/Spinner.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 
 const { t } = useI18n();
 const store = useStore();
@@ -49,8 +50,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex-grow flex-shrink p-4 overflow-auto mx-auto">
-    <div v-if="integrationLoaded && !uiFlags.isCreatingNotion">
+  <SettingsLayout :is-loading="!integrationLoaded || uiFlags.isCreatingNotion">
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('INTEGRATION_SETTINGS.NOTION.HEADER')"
+        description=""
+        feature-name="notion_integration"
+        :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
+      />
+    </template>
+    <template #body>
       <Integration
         :integration-id="integration.id"
         :integration-logo="integration.logo"
@@ -72,9 +81,6 @@ onMounted(() => {
           />
         </template>
       </Integration>
-    </div>
-    <div v-else class="flex items-center justify-center flex-1">
-      <Spinner size="" color-scheme="primary" />
-    </div>
-  </div>
+    </template>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue
index 304aa1724..494b1a177 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue
@@ -5,13 +5,15 @@ import {
   useMapGetter,
   useStore,
 } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
 import Integration from './Integration.vue';
-import Spinner from 'shared/components/Spinner.vue';
 import integrationAPI from 'dashboard/api/integrations';
 
 import Input from 'dashboard/components-next/input/Input.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 
 defineProps({
   error: {
@@ -21,6 +23,7 @@ defineProps({
 });
 
 const store = useStore();
+const { t } = useI18n();
 const dialogRef = ref(null);
 const integrationLoaded = ref(false);
 const storeUrl = ref('');
@@ -88,64 +91,67 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex-grow flex-shrink p-4 overflow-auto max-w-6xl mx-auto">
-    <div
-      v-if="integrationLoaded && !uiFlags.isCreatingShopify"
-      class="flex flex-col gap-6"
-    >
-      <Integration
-        :integration-id="integration.id"
-        :integration-logo="integration.logo"
-        :integration-name="integration.name"
-        :integration-description="integration.description"
-        :integration-enabled="integration.enabled"
-        :integration-action="integrationAction"
-        :delete-confirmation-text="{
-          title: $t('INTEGRATION_SETTINGS.SHOPIFY.DELETE.TITLE'),
-          message: $t('INTEGRATION_SETTINGS.SHOPIFY.DELETE.MESSAGE'),
-        }"
-      >
-        <template #action>
-          <Button
-            teal
-            :label="$t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
-            @click="openStoreUrlDialog"
+  <SettingsLayout :is-loading="!integrationLoaded || uiFlags.isCreatingShopify">
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('INTEGRATION_SETTINGS.SHOPIFY.HEADER')"
+        description=""
+        feature-name="shopify_integration"
+        :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
+      />
+    </template>
+    <template #body>
+      <div class="flex flex-col gap-6">
+        <Integration
+          :integration-id="integration.id"
+          :integration-logo="integration.logo"
+          :integration-name="integration.name"
+          :integration-description="integration.description"
+          :integration-enabled="integration.enabled"
+          :integration-action="integrationAction"
+          :delete-confirmation-text="{
+            title: t('INTEGRATION_SETTINGS.SHOPIFY.DELETE.TITLE'),
+            message: t('INTEGRATION_SETTINGS.SHOPIFY.DELETE.MESSAGE'),
+          }"
+        >
+          <template #action>
+            <Button
+              teal
+              :label="t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT')"
+              @click="openStoreUrlDialog"
+            />
+          </template>
+        </Integration>
+        <div
+          v-if="error"
+          class="flex items-center justify-center flex-1 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow p-6"
+        >
+          <p class="text-n-ruby-9">
+            {{ t('INTEGRATION_SETTINGS.SHOPIFY.ERROR') }}
+          </p>
+        </div>
+        <Dialog
+          ref="dialogRef"
+          :title="t('INTEGRATION_SETTINGS.SHOPIFY.STORE_URL.TITLE')"
+          :is-loading="isSubmitting"
+          @confirm="handleStoreUrlSubmit"
+          @close="hideStoreUrlModal"
+        >
+          <Input
+            v-model="storeUrl"
+            :label="t('INTEGRATION_SETTINGS.SHOPIFY.STORE_URL.LABEL')"
+            :placeholder="
+              t('INTEGRATION_SETTINGS.SHOPIFY.STORE_URL.PLACEHOLDER')
+            "
+            :message="
+              !storeUrlError
+                ? t('INTEGRATION_SETTINGS.SHOPIFY.STORE_URL.HELP')
+                : storeUrlError
+            "
+            :message-type="storeUrlError ? 'error' : 'info'"
           />
-        </template>
-      </Integration>
-      <div
-        v-if="error"
-        class="flex items-center justify-center flex-1 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow p-6"
-      >
-        <p class="text-n-ruby-9">
-          {{ $t('INTEGRATION_SETTINGS.SHOPIFY.ERROR') }}
-        </p>
+        </Dialog>
       </div>
-      <Dialog
-        ref="dialogRef"
-        :title="$t('INTEGRATION_SETTINGS.SHOPIFY.STORE_URL.TITLE')"
-        :is-loading="isSubmitting"
-        @confirm="handleStoreUrlSubmit"
-        @close="hideStoreUrlModal"
-      >
-        <Input
-          v-model="storeUrl"
-          :label="$t('INTEGRATION_SETTINGS.SHOPIFY.STORE_URL.LABEL')"
-          :placeholder="
-            $t('INTEGRATION_SETTINGS.SHOPIFY.STORE_URL.PLACEHOLDER')
-          "
-          :message="
-            !storeUrlError
-              ? $t('INTEGRATION_SETTINGS.SHOPIFY.STORE_URL.HELP')
-              : storeUrlError
-          "
-          :message-type="storeUrlError ? 'error' : 'info'"
-        />
-      </Dialog>
-    </div>
-
-    <div v-else class="flex items-center justify-center flex-1">
-      <Spinner size="" color-scheme="primary" />
-    </div>
-  </div>
+    </template>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index f32926d79..405656542 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -22,7 +22,7 @@ const { replaceInstallationName } = useBranding();
 
 <template>
   <div
-    class="outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow flex-grow overflow-auto p-4"
+    class="outline outline-n-container outline-1 bg-n-card rounded-xl flex-grow overflow-auto p-4"
   >
     <div class="flex items-center justify-center">
       <div class="flex h-16 w-16 items-center justify-center">
@@ -36,10 +36,10 @@ const { replaceInstallationName } = useBranding();
         />
       </div>
       <div class="flex flex-col justify-center m-0 mx-4 flex-1">
-        <h3 class="mb-1 text-xl font-medium text-n-slate-12">
+        <h3 class="mb-1 text-heading-1 text-n-slate-12">
           {{ integration.name }}
         </h3>
-        <p class="text-n-slate-11 text-sm leading-6">
+        <p class="text-n-slate-11 text-body-main">
           {{ replaceInstallationName(integration.description) }}
         </p>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
index 79eac5bf2..d1877fbc3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
@@ -6,7 +6,8 @@ import { useI18n } from 'vue-i18n';
 import Integration from './Integration.vue';
 import SelectChannelWarning from './Slack/SelectChannelWarning.vue';
 import SlackIntegrationHelpText from './Slack/SlackIntegrationHelpText.vue';
-import Spinner from 'shared/components/Spinner.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 
 const props = defineProps({
   code: { type: String, default: '' },
@@ -76,32 +77,42 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    v-if="integrationLoaded && !uiFlags.isCreatingSlack"
-    class="flex flex-col flex-1 overflow-auto gap-5 pt-1 pb-10"
-  >
-    <Integration
-      :integration-id="integration.id"
-      :integration-logo="integration.logo"
-      :integration-name="integration.name"
-      :integration-description="integration.description"
-      :integration-enabled="integration.enabled"
-      :integration-action="integrationAction"
-      :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
-      :delete-confirmation-text="{
-        title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
-        message: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'),
-      }"
-    />
-    <div v-if="areHooksAvailable" class="flex-1">
-      <SelectChannelWarning
-        v-if="!isIntegrationHookEnabled"
-        :has-connected-a-channel="hasConnectedAChannel"
+  <SettingsLayout :is-loading="!integrationLoaded || uiFlags.isCreatingSlack">
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('INTEGRATION_SETTINGS.SLACK.HEADER')"
+        description=""
+        feature-name="slack_integration"
+        :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
       />
-      <SlackIntegrationHelpText :selected-channel-name="selectedChannelName" />
-    </div>
-  </div>
-  <div v-else class="flex items-center justify-center flex-1">
-    <Spinner size="" color-scheme="primary" />
-  </div>
+    </template>
+    <template #body>
+      <div class="space-y-5">
+        <Integration
+          :integration-id="integration.id"
+          :integration-logo="integration.logo"
+          :integration-name="integration.name"
+          :integration-description="integration.description"
+          :integration-enabled="integration.enabled"
+          :integration-action="integrationAction"
+          :action-button-text="$t('INTEGRATION_SETTINGS.SLACK.DELETE')"
+          :delete-confirmation-text="{
+            title: $t('INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.TITLE'),
+            message: $t(
+              'INTEGRATION_SETTINGS.SLACK.DELETE_CONFIRMATION.MESSAGE'
+            ),
+          }"
+        />
+        <div v-if="areHooksAvailable" class="flex-1">
+          <SelectChannelWarning
+            v-if="!isIntegrationHookEnabled"
+            :has-connected-a-channel="hasConnectedAChannel"
+          />
+          <SlackIntegrationHelpText
+            :selected-channel-name="selectedChannelName"
+          />
+        </div>
+      </div>
+    </template>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
index 62fdcd49a..479b67e7b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -61,19 +61,19 @@ const updateIntegration = async () => {
 
 <template>
   <div
-    class="px-6 py-4 mb-4 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
+    class="px-6 py-4 mb-4 outline outline-n-container outline-1 bg-n-card rounded-xl"
   >
     <div class="flex">
       <div class="flex-shrink-0">
         <div class="i-lucide-bell text-xl text-n-amber-11 mt-1" />
       </div>
       <div class="ml-3">
-        <p class="mb-1 text-base font-semibold text-n-slate-12">
+        <p class="mb-1 text-heading-2 text-n-slate-12">
           {{
             $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.ATTENTION_REQUIRED')
           }}
         </p>
-        <div class="mt-2 text-sm text-n-slate-11 mb-3">
+        <div class="mt-2 text-body-main text-n-slate-11 mb-3">
           <p v-dompurify-html="formattedErrorMessage" />
         </div>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
index b28ca19a3..6711ace1c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
@@ -25,13 +25,16 @@ const formattedHelpText = computed(() => {
 
 <template>
   <div
-    class="flex-1 w-full px-6 py-5 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow"
+    class="flex-1 w-full px-6 py-5 outline outline-n-container outline-1 bg-n-card rounded-xl"
   >
     <div class="prose-lg max-w-5xl">
-      <h5 class="text-n-slate-12 tracking-tight">
+      <h5 class="text-n-slate-12 text-heading-1 tracking-tight">
         {{ t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}
       </h5>
-      <div v-dompurify-html="formattedHelpText" class="text-n-slate-11" />
+      <div
+        v-dompurify-html="formattedHelpText"
+        class="text-n-slate-11 text-body-main"
+      />
     </div>
   </div>
 </template>
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 5482666c6..15db70c40 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -2,7 +2,9 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useBranding } from 'shared/composables/useBranding';
+import { picoSearch } from '@scmmishra/pico-search';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import { BaseTable } from 'dashboard/components-next/table';
 import NewWebhook from './NewWebHook.vue';
 import EditWebhook from './EditWebHook.vue';
 import WebhookRow from './WebhookRow.vue';
@@ -14,6 +16,7 @@ export default {
     SettingsLayout,
     NextButton,
     BaseSettingsHeader,
+    BaseTable,
     NewWebhook,
     EditWebhook,
     WebhookRow,
@@ -29,6 +32,7 @@ export default {
       showEditPopup: false,
       showDeleteConfirmationPopup: false,
       selectedWebHook: {},
+      searchQuery: '',
     };
   },
   computed: {
@@ -39,6 +43,11 @@ export default {
     integration() {
       return this.$store.getters['integrations/getIntegration']('webhook');
     },
+    filteredRecords() {
+      const query = this.searchQuery.trim();
+      if (!query) return this.records;
+      return picoSearch(this.records, query, ['name', 'url']);
+    },
     tableHeaders() {
       return [
         this.$t(
@@ -103,44 +112,52 @@ export default {
     <template #header>
       <BaseSettingsHeader
         v-if="integration.name"
+        v-model:search-query="searchQuery"
         :title="integration.name"
         :description="replaceInstallationName(integration.description)"
         :link-text="$t('INTEGRATION_SETTINGS.WEBHOOK.LEARN_MORE')"
+        :search-placeholder="
+          $t('INTEGRATION_SETTINGS.WEBHOOK.SEARCH_PLACEHOLDER')
+        "
         feature-name="webhook"
         :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
       >
+        <template v-if="records?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{
+              $t('INTEGRATION_SETTINGS.WEBHOOK.COUNT', { n: records.length })
+            }}
+          </span>
+        </template>
         <template #actions>
           <NextButton
             blue
-            icon="i-lucide-circle-plus"
             :label="$t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT')"
+            size="sm"
             @click="openAddPopup"
           />
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full divide-y divide-n-weak">
-        <thead>
-          <th
-            v-for="thHeader in tableHeaders"
-            :key="thHeader"
-            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>
-        </thead>
-        <tbody class="divide-y divide-n-weak flex-1 text-n-slate-12">
+      <BaseTable
+        :headers="tableHeaders"
+        :items="filteredRecords"
+        :no-data-message="
+          searchQuery ? $t('INTEGRATION_SETTINGS.WEBHOOK.NO_RESULTS') : ''
+        "
+      >
+        <template #row="{ items }">
           <WebhookRow
-            v-for="(webHookItem, index) in records"
+            v-for="(webHookItem, index) in items"
             :key="webHookItem.id"
             :index="index"
             :webhook="webHookItem"
             @edit="openEditPopup"
             @delete="openDeletePopup"
           />
-        </tbody>
-      </table>
+        </template>
+      </BaseTable>
     </template>
     <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
       <NewWebhook v-if="showAddPopup" :on-close="hideAddPopup" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
index 3dfb177e5..6fc198c7d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { getI18nKey } from 'dashboard/routes/dashboard/settings/helper/settingsHelper';
 import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
 import { useI18n } from 'vue-i18n';
-
+import { BaseTableRow, BaseTableCell } from 'dashboard/components-next/table';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
@@ -35,45 +35,48 @@ const subscribedEvents = computed(() => {
 </script>
 
 <template>
-  <tr>
-    <td class="py-4 ltr:pr-4 rtl:pl-4">
-      <div class="flex gap-2 font-medium break-words text-n-slate-12">
-        <template v-if="webhook.name">
-          {{ webhook.name }}
-          <span class="text-n-slate-11">
+  <BaseTableRow :item="webhook">
+    <template #default>
+      <BaseTableCell>
+        <div class="flex gap-2 font-medium break-words text-n-slate-12">
+          <template v-if="webhook.name">
+            {{ webhook.name }}
+            <span class="text-n-slate-11">
+              {{ webhook.url }}
+            </span>
+          </template>
+          <template v-else>
             {{ webhook.url }}
+          </template>
+        </div>
+        <div class="block mt-1 text-sm text-n-slate-11">
+          <span class="font-medium">
+            {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
           </span>
-        </template>
-        <template v-else>
-          {{ webhook.url }}
-        </template>
-      </div>
-      <div class="block mt-1 text-sm text-n-slate-11">
-        <span class="font-medium">
-          {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
-        </span>
-        <ShowMore :text="subscribedEvents" :limit="60" />
-      </div>
-    </td>
-    <td class="py-4 min-w-xs">
-      <div class="flex justify-end gap-1">
-        <Button
-          v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
-          icon="i-lucide-pen"
-          slate
-          xs
-          faded
-          @click="emit('edit', webhook)"
-        />
-        <Button
-          v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
-          icon="i-lucide-trash-2"
-          xs
-          ruby
-          faded
-          @click="emit('delete', webhook, index)"
-        />
-      </div>
-    </td>
-  </tr>
+          <ShowMore :text="subscribedEvents" :limit="60" />
+        </div>
+      </BaseTableCell>
+
+      <BaseTableCell align="end" class="w-24">
+        <div class="flex justify-end gap-3 flex-shrink-0">
+          <Button
+            v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
+            icon="i-woot-edit-pen"
+            slate
+            sm
+            @click="emit('edit', webhook)"
+          />
+          <Button
+            v-tooltip.top="
+              $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
+            "
+            icon="i-woot-bin"
+            slate
+            sm
+            @click="emit('delete', webhook, index)"
+          />
+        </div>
+      </BaseTableCell>
+    </template>
+  </BaseTableRow>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index bb700fc74..c50587bc8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -6,7 +6,6 @@ import Index from './Index.vue';
 import Webhook from './Webhooks/Index.vue';
 import DashboardApps from './DashboardApps/Index.vue';
 import Slack from './Slack.vue';
-import SettingsContent from '../Wrapper.vue';
 import Linear from './Linear.vue';
 import Notion from './Notion.vue';
 import Shopify from './Shopify.vue';
@@ -49,28 +48,7 @@ export default {
     },
     {
       path: frontendURL('accounts/:accountId/settings/integrations'),
-      component: SettingsContent,
-      props: params => {
-        const integrationId = params.params?.integration_id;
-        const hideHeader = ['dialogflow'].includes(integrationId);
-
-        // Don't show header
-        if (hideHeader) {
-          return {};
-        }
-
-        const showBackButton = params.name !== 'settings_integrations';
-        const backUrl =
-          params.name === 'settings_integrations_integration'
-            ? { name: 'settings_integrations' }
-            : '';
-        return {
-          headerTitle: 'INTEGRATION_SETTINGS.HEADER',
-          icon: 'flash-on',
-          showBackButton,
-          backUrl,
-        };
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: 'slack',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 7a2944a2c..106c5d898 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -3,12 +3,18 @@ import { useAlert } from 'dashboard/composables';
 import { computed, onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { picoSearch } from '@scmmishra/pico-search';
 
 import AddLabel from './AddLabel.vue';
 import EditLabel from './EditLabel.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../SettingsLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import {
+  BaseTable,
+  BaseTableRow,
+  BaseTableCell,
+} from 'dashboard/components-next/table';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -19,8 +25,15 @@ const showAddPopup = ref(false);
 const showEditPopup = ref(false);
 const showDeleteConfirmationPopup = ref(false);
 const selectedLabel = ref({});
+const searchQuery = ref('');
 
 const records = computed(() => getters['labels/getLabels'].value);
+
+const filteredRecords = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return records.value;
+  return picoSearch(records.value, query, ['title', 'description']);
+});
 const uiFlags = computed(() => getters['labels/getUIFlags'].value);
 
 const deleteMessage = computed(() => ` ${selectedLabel.value.title}?`);
@@ -72,6 +85,7 @@ const tableHeaders = computed(() => {
     t('LABEL_MGMT.LIST.TABLE_HEADER.NAME'),
     t('LABEL_MGMT.LIST.TABLE_HEADER.DESCRIPTION'),
     t('LABEL_MGMT.LIST.TABLE_HEADER.COLOR'),
+    t('LABEL_MGMT.LIST.TABLE_HEADER.ACTION'),
   ];
 });
 
@@ -89,73 +103,86 @@ onBeforeMount(() => {
   >
     <template #header>
       <BaseSettingsHeader
+        v-model:search-query="searchQuery"
         :title="$t('LABEL_MGMT.HEADER')"
         :description="$t('LABEL_MGMT.DESCRIPTION')"
         :link-text="$t('LABEL_MGMT.LEARN_MORE')"
+        :search-placeholder="$t('LABEL_MGMT.SEARCH_PLACEHOLDER')"
         feature-name="labels"
       >
+        <template v-if="records?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('LABEL_MGMT.COUNT', { n: records.length }) }}
+          </span>
+        </template>
         <template #actions>
           <Button
-            icon="i-lucide-circle-plus"
             :label="$t('LABEL_MGMT.HEADER_BTN_TXT')"
+            size="sm"
             @click="openAddPopup"
           />
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full overflow-x-auto divide-y divide-n-weak">
-        <thead>
-          <th
-            v-for="thHeader in tableHeaders"
-            :key="thHeader"
-            class="py-4 font-semibold text-left ltr:pr-4 rtl:pl-4 text-n-slate-11"
-          >
-            {{ thHeader }}
-          </th>
-        </thead>
-        <tbody class="flex-1 divide-y divide-n-weak text-n-slate-12">
-          <tr v-for="(label, index) in records" :key="label.title">
-            <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <span class="mb-1 font-medium break-words text-n-slate-12">
-                {{ label.title }}
-              </span>
-            </td>
-            <td class="py-4 ltr:pr-4 rtl:pl-4">{{ label.description }}</td>
-            <td class="py-4 leading-6 ltr:pr-4 rtl:pl-4">
-              <div class="flex items-center">
-                <span
-                  class="w-4 h-4 mr-1 border border-solid rounded rtl:mr-0 rtl:ml-1 border-n-weak"
-                  :style="{ backgroundColor: label.color }"
-                />
-                {{ label.color }}
-              </div>
-            </td>
-            <td class="py-4 min-w-xs">
-              <div class="flex gap-1 justify-end">
-                <Button
-                  v-tooltip.top="$t('LABEL_MGMT.FORM.EDIT')"
-                  icon="i-lucide-pen"
-                  slate
-                  xs
-                  faded
-                  :is-loading="loading[label.id]"
-                  @click="openEditPopup(label)"
-                />
-                <Button
-                  v-tooltip.top="$t('LABEL_MGMT.FORM.DELETE')"
-                  icon="i-lucide-trash-2"
-                  xs
-                  ruby
-                  faded
-                  :is-loading="loading[label.id]"
-                  @click="openDeletePopup(label, index)"
-                />
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <BaseTable
+        :headers="tableHeaders"
+        :items="filteredRecords"
+        :no-data-message="
+          searchQuery ? $t('LABEL_MGMT.NO_RESULTS') : $t('LABEL_MGMT.LIST.404')
+        "
+      >
+        <template #row="{ items }">
+          <BaseTableRow v-for="label in items" :key="label.title" :item="label">
+            <template #default>
+              <BaseTableCell>
+                <span class="text-body-main text-n-slate-12">
+                  {{ label.title }}
+                </span>
+              </BaseTableCell>
+
+              <BaseTableCell>
+                <span class="text-body-main text-n-slate-11">
+                  {{ label.description }}
+                </span>
+              </BaseTableCell>
+
+              <BaseTableCell>
+                <div class="flex items-center">
+                  <span
+                    class="w-4 h-4 ltr:mr-2 rtl:ml-2 border border-solid rounded border-n-weak"
+                    :style="{ backgroundColor: label.color }"
+                  />
+                  <span class="text-body-main text-n-slate-12">
+                    {{ label.color }}
+                  </span>
+                </div>
+              </BaseTableCell>
+
+              <BaseTableCell align="end">
+                <div class="flex gap-3 justify-end flex-shrink-0">
+                  <Button
+                    v-tooltip.top="$t('LABEL_MGMT.FORM.EDIT')"
+                    icon="i-woot-edit-pen"
+                    slate
+                    sm
+                    :is-loading="loading[label.id]"
+                    @click="openEditPopup(label)"
+                  />
+                  <Button
+                    v-tooltip.top="$t('LABEL_MGMT.FORM.DELETE')"
+                    icon="i-woot-bin"
+                    slate
+                    sm
+                    :is-loading="loading[label.id]"
+                    @click="openDeletePopup(label)"
+                  />
+                </div>
+              </BaseTableCell>
+            </template>
+          </BaseTableRow>
+        </template>
+      </BaseTable>
     </template>
 
     <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index c5ec47327..2ff6122b7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useAlert } from 'dashboard/composables';
+import { picoSearch } from '@scmmishra/pico-search';
 import MacrosTableRow from './MacrosTableRow.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../SettingsLayout.vue';
@@ -7,6 +8,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import Button from 'dashboard/components-next/button/Button.vue';
+import { BaseTable } from 'dashboard/components-next/table';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -14,10 +16,17 @@ const { t } = useI18n();
 
 const showDeleteConfirmationPopup = ref(false);
 const selectedMacro = ref({});
+const searchQuery = ref('');
 
 const records = computed(() => getters['macros/getMacros'].value);
 const uiFlags = computed(() => getters['macros/getUIFlags'].value);
 
+const filteredRecords = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return records.value;
+  return picoSearch(records.value, query, ['name']);
+});
+
 const deleteMessage = computed(() => ` ${selectedMacro.value.name}?`);
 
 onMounted(() => {
@@ -53,6 +62,7 @@ const tableHeaders = computed(() => {
     t('MACROS.LIST.TABLE_HEADER.CREATED BY'),
     t('MACROS.LIST.TABLE_HEADER.LAST_UPDATED_BY'),
     t('MACROS.LIST.TABLE_HEADER.VISIBILITY'),
+    t('MACROS.LIST.TABLE_HEADER.ACTIONS'),
   ];
 });
 </script>
@@ -67,41 +77,42 @@ const tableHeaders = computed(() => {
   >
     <template #header>
       <BaseSettingsHeader
+        v-model:search-query="searchQuery"
         :title="$t('MACROS.HEADER')"
         :description="$t('MACROS.DESCRIPTION')"
         :link-text="$t('MACROS.LEARN_MORE')"
+        :search-placeholder="$t('MACROS.SEARCH_PLACEHOLDER')"
         feature-name="macros"
       >
+        <template v-if="records?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('MACROS.COUNT', { n: records.length }) }}
+          </span>
+        </template>
         <template #actions>
           <router-link :to="{ name: 'macros_new' }">
-            <Button
-              icon="i-lucide-circle-plus"
-              :label="$t('MACROS.HEADER_BTN_TXT')"
-            />
+            <Button :label="$t('MACROS.HEADER_BTN_TXT')" size="sm" />
           </router-link>
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full divide-y divide-n-weak">
-        <thead>
-          <th
-            v-for="thHeader in tableHeaders"
-            :key="thHeader"
-            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">
+      <BaseTable
+        :headers="tableHeaders"
+        :items="filteredRecords"
+        :no-data-message="
+          searchQuery ? $t('MACROS.NO_RESULTS') : $t('MACROS.LIST.404')
+        "
+      >
+        <template #row="{ items }">
           <MacrosTableRow
-            v-for="(macro, index) in records"
-            :key="index"
+            v-for="macro in items"
+            :key="macro.id"
             :macro="macro"
             @delete="openDeletePopup(macro)"
           />
-        </tbody>
-      </table>
+        </template>
+      </BaseTable>
       <woot-delete-modal
         v-model:show="showDeleteConfirmationPopup"
         :on-close="closeDeletePopup"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
index c974ef4d6..4e576e5ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
@@ -128,7 +128,7 @@ const saveMacro = async macroData => {
 </script>
 
 <template>
-  <div class="flex flex-col flex-1 h-full overflow-auto">
+  <div class="flex flex-col gap-6 mb-8 max-w-7xl mx-auto w-full !px-6">
     <woot-loading-state
       v-if="uiFlags.isFetchingItem"
       :message="t('MACROS.EDITOR.LOADING')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
index 7bd918b77..432b0d46b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
@@ -108,9 +108,9 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-auto md:flex-row md:h-full">
+  <div class="flex flex-col w-full h-auto lg:flex-row lg:h-full">
     <div
-      class="flex-1 w-full h-full max-h-full px-12 py-4 overflow-y-auto md:w-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
+      class="flex-1 w-full h-full max-h-full ltr:pl-12 ltr:pr-6 rtl:pl-6 rtl:pr-12 py-4 overflow-y-auto lg:w-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
     >
       <MacroNodes
         v-model="macro.actions"
@@ -121,7 +121,7 @@ export default {
         @reset-action="resetNode"
       />
     </div>
-    <div class="w-full md:w-1/3 pb-4">
+    <div class="w-full lg:w-1/3 pb-4">
       <MacroProperties
         :macro-name="macro.name"
         :macro-visibility="macro.visibility"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index c4de2b2c2..77a711d85 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -1,9 +1,11 @@
 <script>
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 export default {
   components: {
     NextButton,
+    Icon,
   },
   inject: ['v$'],
   props: {
@@ -53,56 +55,57 @@ export default {
       </p>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
         <button
-          class="p-2 relative rounded-md border border-solid text-left cursor-default"
+          class="p-2 relative rounded-md border border-solid justify-between items-start gap-2 flex flex-col text-start cursor-default"
           :class="isActive('global')"
           @click="onUpdateVisibility('global')"
         >
-          <fluent-icon
-            v-if="macroVisibility === 'global'"
-            icon="checkmark-circle"
-            type="solid"
-            class="absolute text-n-brand top-2 right-2"
-          />
-          <p
-            class="block m-0 text-sm font-medium leading-[1.8] text-n-slate-12"
-          >
-            {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
-          </p>
-          <p class="text-xs text-n-slate-11">
+          <div class="flex items-center gap-2 min-w-0 justify-between w-full">
+            <p class="block m-0 text-heading-3 text-n-slate-12 line-clamp-1">
+              {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
+            </p>
+            <Icon
+              v-if="macroVisibility === 'global'"
+              icon="i-lucide-circle-check-big"
+              class="text-n-brand size-4"
+            />
+          </div>
+          <p class="text-n-slate-11 text-label-small">
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.DESCRIPTION') }}
           </p>
         </button>
         <button
-          class="p-2 relative rounded-md border border-solid text-left cursor-default"
+          class="p-2 relative rounded-md border border-solid justify-between items-start gap-2 flex flex-col text-start cursor-default"
           :class="isActive('personal')"
           @click="onUpdateVisibility('personal')"
         >
-          <fluent-icon
-            v-if="macroVisibility === 'personal'"
-            icon="checkmark-circle"
-            type="solid"
-            class="absolute text-n-brand top-2 right-2"
-          />
-          <p
-            class="block m-0 text-sm font-medium leading-[1.8] text-n-slate-12"
-          >
-            {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
-          </p>
-          <p class="text-xs text-n-slate-11">
+          <div class="flex items-center gap-2 min-w-0 justify-between w-full">
+            <p class="block m-0 text-heading-3 text-n-slate-12 line-clamp-1">
+              {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
+            </p>
+            <Icon
+              v-if="macroVisibility === 'personal'"
+              icon="i-lucide-circle-check-big"
+              class="text-n-brand size-4"
+            />
+          </div>
+          <p class="text-n-slate-11 text-label-small">
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.DESCRIPTION') }}
           </p>
         </button>
       </div>
       <div
-        class="mt-2 flex items-start p-2 bg-n-slate-3 dark:bg-n-solid-3 rounded-md"
+        class="mt-2 flex items-start p-2 bg-n-alpha-1 gap-2 dark:bg-n-solid-3 rounded-md"
       >
-        <fluent-icon icon="info" size="16" class="flex-shrink-0 mt-0.5" />
-        <p class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-n-slate-11">
+        <Icon
+          icon="i-lucide-info"
+          class="flex-shrink-0 mt-0.5 size-4 text-n-slate-11"
+        />
+        <p class="mb-0 text-n-slate-11 text-body-para">
           {{ $t('MACROS.ORDER_INFO') }}
         </p>
       </div>
     </div>
-    <div class="mt-auto w-full">
+    <div class="mt-4 w-full">
       <NextButton
         blue
         solid
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
index 798b05f00..b4fb66696 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -4,6 +4,7 @@ import Avatar from 'next/avatar/Avatar.vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import { BaseTableRow, BaseTableCell } from 'dashboard/components-next/table';
 
 const props = defineProps({
   macro: {
@@ -34,41 +35,71 @@ const visibilityLabel = computed(() => {
 </script>
 
 <template>
-  <tr>
-    <td class="py-4 ltr:pr-4 rtl:pl-4 truncate">{{ macro.name }}</td>
-    <td class="py-4 ltr:pr-4 rtl:pl-4">
-      <div v-if="macro.created_by" class="flex items-center">
-        <Avatar :name="createdByName" :size="24" rounded-full />
-        <span class="mx-2">{{ createdByName }}</span>
-      </div>
-      <div v-else>--</div>
-    </td>
-    <td class="py-4 ltr:pr-4 rtl:pl-4">
-      <div v-if="macro.updated_by" class="flex items-center">
-        <Avatar :name="updatedByName" :size="24" rounded-full />
-        <span class="mx-2">{{ updatedByName }}</span>
-      </div>
-      <div v-else>--</div>
-    </td>
-    <td class="py-4 ltr:pr-4 rtl:pl-4">{{ visibilityLabel }}</td>
-    <td class="py-4 flex justify-end gap-1">
-      <router-link :to="{ name: 'macros_edit', params: { macroId: macro.id } }">
-        <Button
-          v-tooltip.top="$t('MACROS.EDIT.TOOLTIP')"
-          icon="i-lucide-pen"
-          slate
-          xs
-          faded
-        />
-      </router-link>
-      <Button
-        v-tooltip.top="$t('MACROS.DELETE.TOOLTIP')"
-        icon="i-lucide-trash-2"
-        xs
-        ruby
-        faded
-        @click="$emit('delete')"
-      />
-    </td>
-  </tr>
+  <BaseTableRow :item="macro">
+    <template #default>
+      <BaseTableCell class="max-w-0 min-w-0">
+        <span class="text-body-main text-n-slate-12 truncate block">
+          {{ macro.name }}
+        </span>
+      </BaseTableCell>
+
+      <BaseTableCell class="max-w-0">
+        <div v-if="macro.created_by" class="flex items-center gap-2 min-w-0">
+          <Avatar
+            :name="createdByName"
+            :size="24"
+            rounded-full
+            class="flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ createdByName }}
+          </span>
+        </div>
+        <span v-else class="text-body-main text-n-slate-11">--</span>
+      </BaseTableCell>
+
+      <BaseTableCell class="max-w-0">
+        <div v-if="macro.updated_by" class="flex items-center gap-2 min-w-0">
+          <Avatar
+            :name="updatedByName"
+            :size="24"
+            rounded-full
+            class="flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ updatedByName }}
+          </span>
+        </div>
+        <span v-else class="text-body-main text-n-slate-11">--</span>
+      </BaseTableCell>
+
+      <BaseTableCell class="max-w-0">
+        <span class="text-body-main text-n-slate-12 whitespace-nowrap">
+          {{ visibilityLabel }}
+        </span>
+      </BaseTableCell>
+
+      <BaseTableCell align="end" class="w-24">
+        <div class="flex gap-3 justify-end flex-shrink-0">
+          <router-link
+            :to="{ name: 'macros_edit', params: { macroId: macro.id } }"
+          >
+            <Button
+              v-tooltip.top="$t('MACROS.EDIT.TOOLTIP')"
+              icon="i-woot-edit-pen"
+              slate
+              sm
+            />
+          </router-link>
+          <Button
+            v-tooltip.top="$t('MACROS.DELETE.TOOLTIP')"
+            icon="i-woot-bin"
+            slate
+            sm
+            @click="$emit('delete')"
+          />
+        </div>
+      </BaseTableCell>
+    </template>
+  </BaseTableRow>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
index a83cecaa4..9edc1fc65 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertCondition.vue
@@ -19,9 +19,7 @@ const onChange = (id, value) => {
 
 <template>
   <div>
-    <label
-      class="flex justify-between pb-1 text-sm font-medium leading-6 text-n-slate-12"
-    >
+    <label class="flex justify-between pb-1 text-heading-3 text-n-slate-12">
       {{ label }}
     </label>
     <div class="flex flex-col gap-3 mt-2">
@@ -37,7 +35,7 @@ const onChange = (id, value) => {
           @update="onChange"
         />
         <label
-          class="text-sm font-normal text-n-slate-12"
+          class="text-body-main text-n-slate-12"
           :for="`checkbox-condition-${item.value}`"
         >
           {{ item.label }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
index cab54d43a..aa5435d2b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
@@ -32,9 +32,7 @@ defineProps({
   >
     <div class="flex flex-col gap-2 items-center w-full rounded-t-[5px]">
       <div class="grid grid-cols-[1fr_auto] items-center w-full gap-1">
-        <div
-          class="overflow-hidden text-base font-medium text-n-slate-12 text-left"
-        >
+        <div class="overflow-hidden text-heading-2 text-n-slate-12 text-start">
           <span class="block truncate">{{ title }}</span>
         </div>
         <input
@@ -44,9 +42,7 @@ defineProps({
           class="shadow cursor-pointer grid place-items-center border-2 border-n-strong appearance-none rounded-full w-5 h-5 checked:bg-n-brand before:content-[''] before:bg-n-brand before:border-4 before:rounded-full before:border-n-strong checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-n-brand"
         />
       </div>
-      <span
-        class="text-n-slate-12 text-sm line-clamp-2 leading-[1.4] text-start"
-      >
+      <span class="text-n-slate-11 line-clamp-2 text-body-para text-start">
         {{ description }}
       </span>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 305a6d3ef..ed674e3bc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -17,7 +17,8 @@ import HotKeyCard from './HotKeyCard.vue';
 import ChangePassword from './ChangePassword.vue';
 import NotificationPreferences from './NotificationPreferences.vue';
 import AudioNotifications from './AudioNotifications.vue';
-import FormSection from 'dashboard/components/FormSection.vue';
+import SectionLayout from '../account/components/SectionLayout.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import AccessToken from './AccessToken.vue';
 import MfaSettingsCard from './MfaSettingsCard.vue';
 import Policy from 'dashboard/components/policy.vue';
@@ -29,7 +30,7 @@ import {
 export default {
   components: {
     MessageSignature,
-    FormSection,
+    SectionLayout,
     FontSize,
     UserLanguageSelect,
     UserProfilePicture,
@@ -41,6 +42,7 @@ export default {
     AudioNotifications,
     AccessToken,
     MfaSettingsCard,
+    BaseSettingsHeader,
   },
   setup() {
     const { isEditorHotKeyEnabled, updateUISettings } = useUISettings();
@@ -203,26 +205,27 @@ export default {
 </script>
 
 <template>
-  <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-screen-md">
-    <div class="flex flex-col gap-6">
-      <h2 class="text-2xl font-medium text-n-slate-12">
-        {{ $t('PROFILE_SETTINGS.TITLE') }}
-      </h2>
-      <UserProfilePicture
-        :src="avatarUrl"
-        :name="name"
-        @change="updateProfilePicture"
-        @delete="deleteProfilePicture"
-      />
-      <UserBasicDetails
-        :name="name"
-        :display-name="displayName"
-        :email="email"
-        :email-enabled="!globalConfig.disableUserProfileUpdate"
-        @update-user="updateProfile"
-      />
-    </div>
-    <FormSection
+  <div class="grid max-w-2xl ltr:mr-auto rtl:ml-auto">
+    <BaseSettingsHeader :title="$t('PROFILE_SETTINGS.TITLE')" description="" />
+    <SectionLayout title="" description="" class="!pt-0">
+      <div class="flex flex-col gap-6">
+        <UserProfilePicture
+          :src="avatarUrl"
+          :name="name"
+          @change="updateProfilePicture"
+          @delete="deleteProfilePicture"
+        />
+        <UserBasicDetails
+          :name="name"
+          :display-name="displayName"
+          :email="email"
+          :email-enabled="!globalConfig.disableUserProfileUpdate"
+          @update-user="updateProfile"
+        />
+      </div>
+    </SectionLayout>
+    <SectionLayout
+      with-border
       :title="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.TITLE')"
       :description="
         replaceInstallationName(
@@ -230,22 +233,25 @@ export default {
         )
       "
     >
-      <FontSize
-        :value="currentFontSize"
-        :label="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.TITLE')"
-        :description="
-          $t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.NOTE')
-        "
-        @change="updateFontSize"
-      />
-      <UserLanguageSelect
-        :label="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.TITLE')"
-        :description="
-          $t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.NOTE')
-        "
-      />
-    </FormSection>
-    <FormSection
+      <div class="flex flex-col gap-6 items-start">
+        <FontSize
+          :value="currentFontSize"
+          :label="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.TITLE')"
+          :description="
+            $t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.NOTE')
+          "
+          @change="updateFontSize"
+        />
+        <UserLanguageSelect
+          :label="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.TITLE')"
+          :description="
+            $t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.LANGUAGE.NOTE')
+          "
+        />
+      </div>
+    </SectionLayout>
+    <SectionLayout
+      with-border
       :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"
       :description="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE')"
     >
@@ -253,8 +259,9 @@ export default {
         :message-signature="messageSignature"
         @update-signature="updateSignature"
       />
-    </FormSection>
-    <FormSection
+    </SectionLayout>
+    <SectionLayout
+      with-border
       :title="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE')"
       :description="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.NOTE')"
     >
@@ -282,36 +289,45 @@ export default {
           />
         </button>
       </div>
-    </FormSection>
-    <FormSection
+    </SectionLayout>
+    <SectionLayout
       v-if="!globalConfig.disableUserProfileUpdate"
+      with-border
       :title="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')"
+      description=""
     >
       <ChangePassword />
-    </FormSection>
-    <FormSection
+    </SectionLayout>
+    <SectionLayout
       v-if="isMfaEnabled"
+      with-border
       :title="$t('PROFILE_SETTINGS.FORM.SECURITY_SECTION.TITLE')"
       :description="$t('PROFILE_SETTINGS.FORM.SECURITY_SECTION.NOTE')"
     >
       <MfaSettingsCard />
-    </FormSection>
+    </SectionLayout>
     <Policy :permissions="audioNotificationPermissions">
-      <FormSection
+      <SectionLayout
+        with-border
         :title="$t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE')"
         :description="
           $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE')
         "
       >
         <AudioNotifications />
-      </FormSection>
+      </SectionLayout>
     </Policy>
     <Policy :permissions="notificationPermissions">
-      <FormSection :title="$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TITLE')">
+      <SectionLayout
+        with-border
+        :title="$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TITLE')"
+        description=""
+      >
         <NotificationPreferences />
-      </FormSection>
+      </SectionLayout>
     </Policy>
-    <FormSection
+    <SectionLayout
+      with-border
       :title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE')"
       :description="
         replaceInstallationName($t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.NOTE'))
@@ -322,6 +338,6 @@ export default {
         @on-copy="onCopyToken"
         @on-reset="resetAccessToken"
       />
-    </FormSection>
+    </SectionLayout>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue
index a647bd0da..80dce179b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue
@@ -8,6 +8,7 @@ import { useAlert } from 'dashboard/composables';
 import MfaStatusCard from './MfaStatusCard.vue';
 import MfaSetupWizard from './MfaSetupWizard.vue';
 import MfaManagementActions from './MfaManagementActions.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -130,20 +131,14 @@ const regenerateBackupCodes = async ({ otpCode }) => {
 </script>
 
 <template>
-  <div
-    class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-screen-md w-full"
-  >
-    <!-- Page Header -->
-    <div class="flex flex-col gap-6">
-      <h2 class="text-2xl font-medium text-n-slate-12">
-        {{ $t('MFA_SETTINGS.TITLE') }}
-      </h2>
-      <p class="text-sm text-n-slate-11">
-        {{ $t('MFA_SETTINGS.SUBTITLE') }}
-      </p>
-    </div>
+  <div class="grid w-full">
+    <BaseSettingsHeader
+      :title="$t('MFA_SETTINGS.TITLE')"
+      :description="$t('MFA_SETTINGS.SUBTITLE')"
+      :back-button-label="$t('PROFILE_SETTINGS.TITLE')"
+    />
 
-    <div class="grid gap-4 w-full">
+    <div class="grid gap-4 w-full mt-4">
       <!-- MFA Status Card -->
       <MfaStatusCard
         :mfa-enabled="mfaEnabled"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue
index 673f97143..042253b72 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue
@@ -26,11 +26,11 @@ const navigateToMfa = () => {
             icon="i-lucide-lock-keyhole"
             class="size-4 text-n-slate-10 flex-shrink-0"
           />
-          <h5 class="text-sm font-semibold text-n-slate-12">
+          <h5 class="text-heading-3 text-n-slate-12">
             {{ $t('MFA_SETTINGS.TITLE') }}
           </h5>
         </div>
-        <p class="text-sm text-n-slate-11">
+        <p class="text-body-para text-n-slate-11">
           {{ $t('MFA_SETTINGS.DESCRIPTION') }}
         </p>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
index 9aab4a5be..ea9cf34bf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue
@@ -167,7 +167,7 @@ export default {
           :span="7"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE')}`"
         >
-          <span class="text-sm font-normal normal-case text-n-slate-11">
+          <span class="text-heading-3 normal-case text-n-slate-12">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE') }}
           </span>
         </TableHeaderCell>
@@ -175,7 +175,7 @@ export default {
           :span="2"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL')}`"
         >
-          <span class="text-sm font-medium normal-case text-n-slate-12">
+          <span class="text-heading-3 normal-case text-n-slate-12">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL') }}
           </span>
         </TableHeaderCell>
@@ -185,7 +185,7 @@ export default {
         >
           <div class="flex items-center justify-between gap-1">
             <span
-              class="text-sm font-medium normal-case text-n-slate-12 whitespace-nowrap"
+              class="text-heading-3 normal-case text-n-slate-12 whitespace-nowrap"
             >
               {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
             </span>
@@ -202,7 +202,7 @@ export default {
           <div
             class="flex flex-row items-start gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
           >
-            <span class="text-sm text-n-slate-12">
+            <span class="text-body-main text-n-slate-12">
               {{ $t(notification.label) }}
             </span>
           </div>
@@ -225,7 +225,7 @@ export default {
     </div>
     <!--  Layout for mobile devices -->
     <div class="flex flex-col gap-6 sm:hidden">
-      <span class="text-sm font-medium normal-case text-n-slate-12">
+      <span class="text-heading-3 text-n-slate-12">
         {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
       </span>
       <div class="flex flex-col gap-4">
@@ -240,14 +240,14 @@ export default {
             :is-checked="checkFlagStatus('email', notification.value)"
             @update="handleEmailInput"
           />
-          <span class="text-sm text-n-slate-12">{{
+          <span class="text-body-main text-n-slate-12">{{
             $t(notification.label)
           }}</span>
         </div>
       </div>
 
       <div class="flex items-center justify-start gap-2">
-        <span class="text-sm font-medium normal-case text-n-slate-12">
+        <span class="text-heading-3 text-n-slate-12">
           {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
         </span>
       </div>
@@ -264,7 +264,7 @@ export default {
             :is-checked="checkFlagStatus('push', notification.value)"
             @update="handlePushInput"
           />
-          <span class="text-sm text-n-slate-12">{{
+          <span class="text-body-main text-n-slate-12">{{
             $t(notification.label)
           }}</span>
         </div>
@@ -280,7 +280,7 @@ export default {
           class="flex-shrink-0 text-n-slate-12"
           size="18"
         />
-        <span class="text-sm text-n-slate-12">
+        <span class="text-body-main text-n-slate-12">
           {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
         </span>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index ef208eae4..587a14232 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import { parseBoolean } from '@chatwoot/utils';
 
-import SettingsContent from './Wrapper.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
 import Index from './Index.vue';
 import MfaSettings from './MfaSettings.vue';
 
@@ -13,7 +13,7 @@ export default {
       meta: {
         permissions: ['administrator', 'agent', 'custom_role'],
       },
-      component: SettingsContent,
+      component: SettingsWrapper,
       children: [
         {
           path: 'settings',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
index c7643a5fe..ea4e85f75 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportHeader.vue
@@ -18,17 +18,22 @@ defineProps({
 </script>
 
 <template>
-  <section class="flex flex-col gap-1 pt-10 pb-5">
+  <section class="flex flex-col gap-1 pt-6 pb-5">
     <div v-if="hasBackButton">
       <BackButton compact />
     </div>
     <div class="flex justify-between w-full gap-5">
       <div class="flex flex-col gap-2">
-        <div>
-          <span class="text-xl font-medium text-n-slate-12">
+        <div class="flex flex-col gap-3 items-start">
+          <span
+            class="text-heading-1 text-n-slate-12 min-h-10 flex items-center"
+          >
             {{ headerTitle }}
           </span>
-          <p v-if="headerDescription" class="text-n-slate-12 mt-2">
+          <p
+            v-if="headerDescription"
+            class="text-n-slate-11 mb-0 line-clamp-5 sm:line-clamp-none text-body-main"
+          >
             {{ headerDescription }}
           </p>
         </div>
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 f28f6090a..045b8b568 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="reports--wrapper overflow-auto bg-n-surface-1 w-full px-6">
-    <div class="max-w-[60rem] mx-auto pb-12">
+    <div class="max-w-5xl mx-auto pb-12">
       <router-view />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/security/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/security/Index.vue
index b8e7a7bf4..4c1ed1902 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/security/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/security/Index.vue
@@ -31,10 +31,7 @@ const showPaywall = computed(() => shouldShowPaywall('saml'));
 </script>
 
 <template>
-  <SettingsLayout
-    class="max-w-2xl mx-auto"
-    :loading-message="$t('ATTRIBUTES_MGMT.LOADING')"
-  >
+  <SettingsLayout :loading-message="$t('ATTRIBUTES_MGMT.LOADING')">
     <template #header>
       <BaseSettingsHeader
         :title="$t('SECURITY_SETTINGS.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/security/components/SamlPaywall.vue b/app/javascript/dashboard/routes/dashboard/settings/security/components/SamlPaywall.vue
index a08cce9e0..b5b0f9ef1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/security/components/SamlPaywall.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/security/components/SamlPaywall.vue
@@ -27,7 +27,7 @@ const openBilling = () => {
 
 <template>
   <div
-    class="w-full max-w-[60rem] mx-auto h-full max-h-[28rem] grid place-content-center"
+    class="w-full max-w-5xl mx-auto h-full max-h-[28rem] grid place-content-center"
   >
     <BasePaywallModal
       class="mx-auto"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/security/components/SamlSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/security/components/SamlSettings.vue
index 4d9b384da..0d98d6c3a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/security/components/SamlSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/security/components/SamlSettings.vue
@@ -173,6 +173,7 @@ onMounted(() => {
     :description="t('SECURITY_SETTINGS.SAML.NOTE')"
     beta
     :hide-content="!hasFeature || !isEnabled || isLoading"
+    class="max-w-2xl ltr:mr-auto rtl:ml-auto"
   >
     <template #headerActions>
       <div class="flex justify-end">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
index 9962ac951..ce05538bc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -1,25 +1,34 @@
 <script>
 import AddSLA from './AddSLA.vue';
 import SettingsLayout from '../SettingsLayout.vue';
-import SLAEmptyState from './components/SLAEmptyState.vue';
-import SLAHeader from './components/SLAHeader.vue';
-import SLAListItem from './components/SLAListItem.vue';
-import SLAListItemLoading from './components/SLAListItemLoading.vue';
-import SLAPaywallEnterprise from './components/SLAPaywallEnterprise.vue';
+import BaseSettingsHeader from 'dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue';
+import SLAPaywallEnterprise from './SLAPaywallEnterprise.vue';
+import {
+  BaseTable,
+  BaseTableRow,
+  BaseTableCell,
+} from 'dashboard/components-next/table';
+import WootLabel from 'dashboard/components-next/label/Label.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 import { useAlert } from 'dashboard/composables';
+import { picoSearch } from '@scmmishra/pico-search';
 
 export default {
   components: {
     AddSLA,
     SettingsLayout,
-    SLAEmptyState,
-    SLAHeader,
-    SLAListItem,
-    SLAListItemLoading,
+    BaseSettingsHeader,
     SLAPaywallEnterprise,
+    BaseTable,
+    BaseTableRow,
+    BaseTableCell,
+    WootLabel,
+    Icon,
+    NextButton,
   },
   data() {
     return {
@@ -27,6 +36,7 @@ export default {
       showAddPopup: false,
       showDeleteConfirmationPopup: false,
       selectedResponse: {},
+      searchQuery: '',
     };
   },
   computed: {
@@ -53,6 +63,21 @@ export default {
     isSuperAdmin() {
       return this.currentUser.type === 'SuperAdmin';
     },
+    tableHeaders() {
+      return [
+        this.$t('SLA.LIST.TABLE_HEADER.SLA'),
+        this.$t('SLA.LIST.TABLE_HEADER.BUSINESS_HOURS'),
+        this.$t('SLA.LIST.RESPONSE_TYPES.SHORT_HAND.FRT'),
+        this.$t('SLA.LIST.RESPONSE_TYPES.SHORT_HAND.NRT'),
+        this.$t('SLA.LIST.RESPONSE_TYPES.SHORT_HAND.RT'),
+        this.$t('INTEGRATION_APPS.LIST.ACTIONS'),
+      ];
+    },
+    filteredRecords() {
+      const query = this.searchQuery.trim();
+      if (!query) return this.records;
+      return picoSearch(this.records, query, ['name', 'description']);
+    },
   },
   mounted() {
     this.$store.dispatch('sla/get');
@@ -117,10 +142,29 @@ export default {
     :loading-message="$t('SLA.LOADING')"
   >
     <template #header>
-      <SLAHeader :show-actions="records.length > 0" @add="openAddPopup" />
-    </template>
-    <template #loading>
-      <SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
+      <BaseSettingsHeader
+        v-model:search-query="searchQuery"
+        :title="$t('SLA.HEADER')"
+        :description="$t('SLA.DESCRIPTION')"
+        :link-text="$t('SLA.LEARN_MORE')"
+        :search-placeholder="
+          isBehindAPaywall ? '' : $t('SLA.SEARCH_PLACEHOLDER')
+        "
+        feature-name="sla"
+      >
+        <template v-if="!isBehindAPaywall && records?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('SLA.COUNT', { n: records.length }) }}
+          </span>
+        </template>
+        <template v-if="!isBehindAPaywall" #actions>
+          <NextButton
+            :label="$t('SLA.ADD_ACTION')"
+            size="sm"
+            @click="openAddPopup"
+          />
+        </template>
+      </BaseSettingsHeader>
     </template>
     <template #body>
       <SLAPaywallEnterprise
@@ -129,24 +173,130 @@ export default {
         :is-on-chatwoot-cloud="isOnChatwootCloud"
         @upgrade="onClickCTA"
       />
-      <SLAEmptyState
-        v-else-if="!records.length"
-        @primary-action="openAddPopup"
-      />
-      <div v-else class="flex flex-col w-full h-full gap-3">
-        <SLAListItem
-          v-for="sla in records"
-          :key="sla.title"
-          :sla-name="sla.name"
-          :description="sla.description"
-          :first-response="displayTime(sla.first_response_time_threshold)"
-          :next-response="displayTime(sla.next_response_time_threshold)"
-          :resolution-time="displayTime(sla.resolution_time_threshold)"
-          :has-business-hours="sla.only_during_business_hours"
-          :is-loading="loading[sla.id]"
-          @delete="openDeletePopup(sla)"
-        />
-      </div>
+      <BaseTable
+        v-else
+        :headers="tableHeaders"
+        :items="filteredRecords"
+        :no-data-message="
+          !records.length
+            ? $t('SLA.LIST.404')
+            : searchQuery && !filteredRecords.length
+              ? $t('SLA.SEARCH.NO_RESULTS')
+              : ''
+        "
+      >
+        <template #header-2>
+          <div class="flex items-center gap-1">
+            <span class="text-heading-3">
+              {{ $t('SLA.LIST.RESPONSE_TYPES.SHORT_HAND.FRT') }}
+            </span>
+            <Icon
+              v-tooltip.left="$t('SLA.LIST.RESPONSE_TYPES.FRT')"
+              icon="i-lucide-info"
+              class="size-3.5 text-n-slate-10 cursor-help"
+            />
+          </div>
+        </template>
+        <template #header-3>
+          <div class="flex items-center gap-1">
+            <span class="text-heading-3">
+              {{ $t('SLA.LIST.RESPONSE_TYPES.SHORT_HAND.NRT') }}
+            </span>
+            <Icon
+              v-tooltip.left="$t('SLA.LIST.RESPONSE_TYPES.NRT')"
+              icon="i-lucide-info"
+              class="size-3.5 text-n-slate-10 cursor-help"
+            />
+          </div>
+        </template>
+        <template #header-4>
+          <div class="flex items-center gap-1">
+            <span class="text-heading-3">
+              {{ $t('SLA.LIST.RESPONSE_TYPES.SHORT_HAND.RT') }}
+            </span>
+            <Icon
+              v-tooltip.left="$t('SLA.LIST.RESPONSE_TYPES.RT')"
+              icon="i-lucide-info"
+              class="size-3.5 text-n-slate-10 cursor-help"
+            />
+          </div>
+        </template>
+        <template #row="{ items }">
+          <BaseTableRow v-for="sla in items" :key="sla.id" :item="sla">
+            <template #default>
+              <BaseTableCell>
+                <div class="flex flex-col gap-1 min-w-0">
+                  <span class="text-body-main text-n-slate-12 truncate">
+                    {{ sla.name }}
+                  </span>
+                  <span class="text-body-main text-n-slate-11 line-clamp-1">
+                    {{ sla.description }}
+                  </span>
+                </div>
+              </BaseTableCell>
+
+              <BaseTableCell class="w-40">
+                <WootLabel
+                  :label="
+                    sla.only_during_business_hours
+                      ? $t('SLA.LIST.BUSINESS_HOURS_ON')
+                      : $t('SLA.LIST.BUSINESS_HOURS_OFF')
+                  "
+                  :color="sla.only_during_business_hours ? 'teal' : 'slate'"
+                  compact
+                >
+                  <template #icon>
+                    <Icon
+                      :icon="
+                        sla.only_during_business_hours
+                          ? 'i-lucide-alarm-clock-check'
+                          : 'i-lucide-alarm-clock-off'
+                      "
+                      class="size-3.5"
+                      :class="
+                        sla.only_during_business_hours
+                          ? 'text-n-teal-11'
+                          : 'text-n-slate-11'
+                      "
+                    />
+                  </template>
+                </WootLabel>
+              </BaseTableCell>
+
+              <BaseTableCell align="start" class="w-24">
+                <span class="text-body-main text-n-slate-12">
+                  {{ displayTime(sla.first_response_time_threshold) }}
+                </span>
+              </BaseTableCell>
+
+              <BaseTableCell align="start" class="w-24">
+                <span class="text-body-main text-n-slate-12">
+                  {{ displayTime(sla.next_response_time_threshold) }}
+                </span>
+              </BaseTableCell>
+
+              <BaseTableCell align="start" class="w-24">
+                <span class="text-body-main text-n-slate-12">
+                  {{ displayTime(sla.resolution_time_threshold) }}
+                </span>
+              </BaseTableCell>
+
+              <BaseTableCell align="end" class="w-12">
+                <div class="flex justify-end">
+                  <NextButton
+                    v-tooltip.top="$t('SLA.FORM.DELETE')"
+                    icon="i-woot-bin"
+                    slate
+                    sm
+                    :is-loading="loading[sla.id]"
+                    @click="openDeletePopup(sla)"
+                  />
+                </div>
+              </BaseTableCell>
+            </template>
+          </BaseTableRow>
+        </template>
+      </BaseTable>
 
       <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
         <AddSLA @close="hideAddPopup" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SLAPaywallEnterprise.vue
similarity index 87%
rename from app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
rename to app/javascript/dashboard/routes/dashboard/settings/sla/SLAPaywallEnterprise.vue
index 939b63570..c580c6e18 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SLAPaywallEnterprise.vue
@@ -1,5 +1,4 @@
 <script setup>
-import BaseEmptyState from './BaseEmptyState.vue';
 import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
 
 const props = defineProps({
@@ -18,7 +17,7 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
 </script>
 
 <template>
-  <BaseEmptyState>
+  <div class="pb-6 pt-10 flex justify-center">
     <BasePaywallModal
       feature-prefix="SLA"
       :i18n-key="i18nKey"
@@ -26,5 +25,5 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
       :is-super-admin="isSuperAdmin"
       @upgrade="emit('upgrade')"
     />
-  </BaseEmptyState>
+  </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
deleted file mode 100644
index 2711658ad..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/BaseEmptyState.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup>
-import SLAListItem from './SLAListItem.vue';
-</script>
-
-<template>
-  <div class="w-full min-h-[12rem] relative">
-    <div class="w-full space-y-3">
-      <SLAListItem
-        class="opacity-25 dark:opacity-20"
-        :sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
-        :description="$t('SLA.LIST.EMPTY.DESC_1')"
-        first-response="20m"
-        next-response="1h"
-        resolution-time="24h"
-        has-business-hours
-      />
-      <SLAListItem
-        class="opacity-25 dark:opacity-20"
-        :sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
-        :description="$t('SLA.LIST.EMPTY.DESC_2')"
-        first-response="2h"
-        next-response="4h"
-        resolution-time="4d"
-        has-business-hours
-      />
-    </div>
-    <div
-      class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
deleted file mode 100644
index 983ff38b2..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup>
-defineProps({
-  hasBusinessHours: {
-    type: Boolean,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="inline-flex items-center min-w-0 gap-1 px-1.5 sm:px-2 py-1 border border-solid rounded-lg border-n-weak"
-  >
-    <fluent-icon
-      size="14"
-      :icon="hasBusinessHours ? 'alarm-on' : 'alarm-off'"
-      type="outline"
-      class="flex-shrink-0"
-      :class="hasBusinessHours ? 'text-n-slate-11' : 'text-n-slate-10'"
-    />
-    <span
-      class="hidden text-xs tracking-[0.2%] font-normal truncate sm:block"
-      :class="hasBusinessHours ? 'text-n-slate-11' : 'text-n-slate-10'"
-    >
-      {{
-        hasBusinessHours
-          ? $t('SLA.LIST.BUSINESS_HOURS_ON')
-          : $t('SLA.LIST.BUSINESS_HOURS_OFF')
-      }}
-    </span>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
deleted file mode 100644
index 90915d251..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAEmptyState.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import BaseEmptyState from './BaseEmptyState.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-const emit = defineEmits(['primaryAction']);
-const primaryAction = () => emit('primaryAction');
-</script>
-
-<template>
-  <BaseEmptyState>
-    <p class="max-w-xs text-sm font-medium text-center">
-      {{ $t('SLA.LIST.404') }}
-    </p>
-    <NextButton
-      icon="i-lucide-plus"
-      class="mt-4"
-      :label="$t('SLA.ADD_ACTION_LONG')"
-      @click="primaryAction"
-    />
-  </BaseEmptyState>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
deleted file mode 100644
index 8eb80eeb0..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
-
-defineProps({
-  showActions: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-defineEmits(['add']);
-</script>
-
-<template>
-  <BaseSettingsHeader
-    :title="$t('SLA.HEADER')"
-    :description="$t('SLA.DESCRIPTION')"
-    :link-text="$t('SLA.LEARN_MORE')"
-    feature-name="sla"
-  >
-    <template v-if="showActions" #actions>
-      <Button
-        :label="$t('SLA.ADD_ACTION')"
-        icon="i-lucide-circle-plus"
-        @click="$emit('add')"
-      />
-    </template>
-  </BaseSettingsHeader>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
deleted file mode 100644
index 085860efa..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup>
-import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
-import SLAResponseTime from './SLAResponseTime.vue';
-import SLABusinessHoursLabel from './SLABusinessHoursLabel.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  slaName: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  firstResponse: {
-    type: String,
-    required: true,
-  },
-  nextResponse: {
-    type: String,
-    required: true,
-  },
-  resolutionTime: {
-    type: String,
-    required: true,
-  },
-  hasBusinessHours: {
-    type: Boolean,
-    required: true,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['delete']);
-</script>
-
-<template>
-  <BaseSettingsListItem
-    class="sm:divide-x sm:divide-n-weak"
-    :title="slaName"
-    :description="description"
-  >
-    <template #label>
-      <SLABusinessHoursLabel :has-business-hours="hasBusinessHours" />
-    </template>
-    <template #rightSection>
-      <div
-        class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-n-weak gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-n-weak"
-      >
-        <SLAResponseTime response-type="FRT" :response-time="firstResponse" />
-        <SLAResponseTime response-type="NRT" :response-time="nextResponse" />
-        <SLAResponseTime response-type="RT" :response-time="resolutionTime" />
-      </div>
-    </template>
-    <template #actions>
-      <Button
-        v-tooltip.top="$t('SLA.FORM.DELETE')"
-        faded
-        ruby
-        xs
-        icon="i-lucide-trash-2"
-        :is-loading="isLoading"
-        @click="emit('delete')"
-      />
-    </template>
-  </BaseSettingsListItem>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
deleted file mode 100644
index 7282f73d1..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItemLoading.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup>
-import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
-</script>
-
-<template>
-  <BaseSettingsListItem class="opacity-50">
-    <template #title>
-      <div
-        class="w-24 h-[26px] rounded-md bg-n-slate-4 dark:bg-n-slate-6 animate-pulse"
-      />
-    </template>
-    <template #description>
-      <div
-        class="w-64 h-4 mb-0.5 rounded-md bg-n-slate-4 dark:bg-n-slate-6 animate-pulse"
-      />
-      <div
-        class="w-48 h-4 rounded-md bg-n-slate-4 dark:bg-n-slate-6 animate-pulse"
-      />
-    </template>
-    <template #label>
-      <div
-        class="w-32 h-[26px] bg-n-slate-4 dark:bg-n-slate-6 animate-pulse rounded-md"
-      />
-    </template>
-    <template #rightSection>
-      <div
-        class="flex items-center sm:rtl:!border-l-0 sm:rtl:!border-r border-n-weak gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between"
-      >
-        <div
-          v-for="ii in 3"
-          :key="ii"
-          class="flex justify-end w-1/3 h-full px-4"
-        >
-          <div
-            class="w-32 h-full rounded-md bg-n-slate-4 dark:bg-n-slate-6 animate-pulse"
-          />
-        </div>
-      </div>
-    </template>
-  </BaseSettingsListItem>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
deleted file mode 100644
index 87860110a..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup>
-defineProps({
-  responseType: {
-    type: String,
-    default: '',
-  },
-  responseTime: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-row items-start w-full h-full gap-1 sm:items-end sm:px-6 sm:py-2 sm:gap-2 sm:flex-col"
-  >
-    <span
-      class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm ltr:pl-1.5 sm:ltr:pl-0 rtl:pr-1.5 sm:rtl:pr-0 text-n-slate-11"
-    >
-      <fluent-icon
-        v-tooltip.left="$t(`SLA.LIST.RESPONSE_TYPES.${responseType}`)"
-        size="14"
-        icon="information"
-        type="outline"
-        class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-n-slate-11"
-      />
-      {{ $t(`SLA.LIST.RESPONSE_TYPES.SHORT_HAND.${responseType}`) }}
-      <span class="flex sm:hidden">:</span>
-    </span>
-    <span
-      class="text-sm sm:text-2xl font-medium tracking-[-1.5%] text-n-slate-12"
-    >
-      {{ responseTime }}
-    </span>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
index d6a569834..e1c24303f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
@@ -1,120 +1,112 @@
-<script>
+<script setup>
+import { computed } from 'vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'next/avatar/Avatar.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import BaseTable from 'dashboard/components-next/table/BaseTable.vue';
+import BaseTableRow from 'dashboard/components-next/table/BaseTableRow.vue';
+import BaseTableCell from 'dashboard/components-next/table/BaseTableCell.vue';
+import { useI18n } from 'vue-i18n';
 
-export default {
-  components: {
-    NextButton,
-    Avatar,
+const props = defineProps({
+  agentList: {
+    type: Array,
+    default: () => [],
   },
-  props: {
-    agentList: {
-      type: Array,
-      default: () => [],
-    },
-    selectedAgents: {
-      type: Array,
-      default: () => [],
-    },
-    updateSelectedAgents: {
-      type: Function,
-      default: () => {},
-    },
-    isWorking: {
-      type: Boolean,
-      default: false,
-    },
-    submitButtonText: {
-      type: String,
-      default: '',
-    },
+  selectedAgents: {
+    type: Array,
+    default: () => [],
   },
-  data() {
-    return {};
+  updateSelectedAgents: {
+    type: Function,
+    default: () => {},
   },
-  computed: {
-    selectedAgentCount() {
-      return this.selectedAgents.length;
-    },
-    allAgentsSelected() {
-      return this.selectedAgents.length === this.agentList.length;
-    },
-    disableSubmitButton() {
-      return this.selectedAgentCount === 0;
-    },
+  isWorking: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    isAgentSelected(agentId) {
-      return this.selectedAgents.includes(agentId);
-    },
-    handleSelectAgent(agentId) {
-      const shouldRemove = this.isAgentSelected(agentId);
+  submitButtonText: {
+    type: String,
+    default: '',
+  },
+});
 
-      let result = [];
-      if (shouldRemove) {
-        result = this.selectedAgents.filter(item => item !== agentId);
-      } else {
-        result = [...this.selectedAgents, agentId];
-      }
+const { t } = useI18n();
 
-      this.updateSelectedAgents(result);
-    },
-    selectAllAgents() {
-      const result = this.agentList.map(item => item.id);
-      this.updateSelectedAgents(result);
-    },
-    agentRowClass(agentId) {
-      return { 'is-active': this.isAgentSelected(agentId) };
-    },
-  },
+const selectedAgentCount = computed(() => props.selectedAgents.length);
+
+const allAgentsSelected = computed(
+  () =>
+    props.selectedAgents.length === props.agentList.length &&
+    props.agentList.length > 0
+);
+
+const someAgentsSelected = computed(
+  () => props.selectedAgents.length > 0 && !allAgentsSelected.value
+);
+
+const disableSubmitButton = computed(() => selectedAgentCount.value === 0);
+
+const isAgentSelected = agentId => {
+  return props.selectedAgents.includes(agentId);
 };
+
+const handleSelectAgent = agentId => {
+  const shouldRemove = isAgentSelected(agentId);
+
+  let result = [];
+  if (shouldRemove) {
+    result = props.selectedAgents.filter(item => item !== agentId);
+  } else {
+    result = [...props.selectedAgents, agentId];
+  }
+
+  props.updateSelectedAgents(result);
+};
+
+const toggleSelectAll = () => {
+  if (allAgentsSelected.value) {
+    props.updateSelectedAgents([]);
+  } else {
+    const result = props.agentList.map(item => item.id);
+    props.updateSelectedAgents(result);
+  }
+};
+
+const headers = computed(() => [
+  '',
+  t('TEAMS_SETTINGS.AGENTS.AGENT'),
+  t('TEAMS_SETTINGS.AGENTS.EMAIL'),
+]);
 </script>
 
 <template>
-  <div>
-    <div class="add-agents__header" />
-    <table>
-      <thead
-        class="[&>th]:font-semibold [&>th]:tracking-[1px] ltr:[&>th]:text-left rtl:[&>th]:text-right [&>th]:px-2.5 [&>th]:uppercase [&>th]:text-n-slate-12"
-      >
-        <tr>
-          <td class="ltr:pl-2.5 rtl:pr-2.5">
+  <BaseTable :headers="headers" :items="agentList">
+    <template #header-0>
+      <div class="flex items-center">
+        <Checkbox
+          :model-value="allAgentsSelected"
+          :indeterminate="someAgentsSelected"
+          :title="$t('TEAMS_SETTINGS.AGENTS.SELECT_ALL')"
+          @change="toggleSelectAll"
+        />
+      </div>
+    </template>
+
+    <template #row="{ items }">
+      <BaseTableRow v-for="agent in items" :key="agent.id" :item="agent">
+        <template #default>
+          <BaseTableCell class="w-5">
             <div class="flex items-center">
-              <input
-                name="select-all-agents"
-                type="checkbox"
-                :checked="allAgentsSelected ? 'checked' : ''"
-                :title="$t('TEAMS_SETTINGS.AGENTS.SELECT_ALL')"
-                @click.self="selectAllAgents"
+              <Checkbox
+                :model-value="isAgentSelected(agent.id)"
+                @change="() => handleSelectAgent(agent.id)"
               />
             </div>
-          </td>
-          <td class="text-n-slate-12 ltr:pl-2.5 rtl:pr-2.5">
-            {{ $t('TEAMS_SETTINGS.AGENTS.AGENT') }}
-          </td>
-          <td class="text-n-slate-12 ltr:pl-2.5 rtl:pr-2.5">
-            {{ $t('TEAMS_SETTINGS.AGENTS.EMAIL') }}
-          </td>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="agent in agentList"
-          :key="agent.id"
-          :class="agentRowClass(agent.id)"
-          class="border-b border-n-weak [&>td]:p-2.5 [&>td]:text-n-slate-12"
-        >
-          <td class="w-12">
-            <div class="flex items-center">
-              <input
-                type="checkbox"
-                :checked="isAgentSelected(agent.id)"
-                @click.self="() => handleSelectAgent(agent.id)"
-              />
-            </div>
-          </td>
-          <td>
-            <div class="flex items-center gap-2">
+          </BaseTableCell>
+
+          <BaseTableCell class="min-w-0 max-w-40">
+            <div class="flex items-center gap-2 min-w-0">
               <Avatar
                 :src="agent.thumbnail"
                 :name="agent.name"
@@ -122,39 +114,38 @@ export default {
                 :size="24"
                 hide-offline-status
                 rounded-full
+                class="flex-shrink-0"
               />
-              <h4 class="text-base mb-0 text-n-slate-12">
+              <h4 class="text-heading-3 mb-0 text-n-slate-12 truncate">
                 {{ agent.name }}
               </h4>
             </div>
-          </td>
-          <td>
-            {{ agent.email || '---' }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <div class="flex items-center justify-between mt-2">
-      <p>
-        {{
-          $t('TEAMS_SETTINGS.AGENTS.SELECTED_COUNT', {
-            selected: selectedAgents.length,
-            total: agentList.length,
-          })
-        }}
-      </p>
-      <NextButton
-        type="submit"
-        :label="submitButtonText"
-        :disabled="disableSubmitButton"
-        :is-loading="isWorking"
-      />
-    </div>
+          </BaseTableCell>
+
+          <BaseTableCell class="min-w-0">
+            <span class="text-body-main text-n-slate-11 truncate block">
+              {{ agent.email || '---' }}
+            </span>
+          </BaseTableCell>
+        </template>
+      </BaseTableRow>
+    </template>
+  </BaseTable>
+
+  <div class="flex items-center justify-between mt-4">
+    <p class="text-body-main text-n-slate-11">
+      {{
+        $t('TEAMS_SETTINGS.AGENTS.SELECTED_COUNT', {
+          selected: selectedAgents.length,
+          total: agentList.length,
+        })
+      }}
+    </p>
+    <NextButton
+      type="submit"
+      :label="submitButtonText"
+      :disabled="disableSubmitButton"
+      :is-loading="isWorking"
+    />
   </div>
 </template>
-
-<style scoped>
-input {
-  @apply mb-0;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
index 6136bb354..f7777291c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -23,9 +23,9 @@ export default {
 </script>
 
 <template>
-  <div class="mx-2 flex flex-col gap-6 mb-8">
+  <div class="flex flex-col gap-6 mb-8 max-w-7xl mx-auto w-full !px-6">
     <div
-      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[43rem]"
+      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[43rem] w-full"
     >
       <woot-wizard
         class="hidden lg:block col-span-2 h-fit py-8 px-6"
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 e590c7eed..4a9709d8c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -4,7 +4,7 @@ import router from '../../../../index';
 import { useAlert } from 'dashboard/composables';
 import { useVuelidate } from '@vuelidate/core';
 
-import Spinner from 'shared/components/Spinner.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import AgentSelector from '../AgentSelector.vue';
 
@@ -131,7 +131,9 @@ export default {
             $t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
           "
         />
-        <Spinner v-else />
+        <div v-else class="flex items-center justify-center py-6">
+          <Spinner class="text-n-blue-11" />
+        </div>
       </div>
     </form>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
index ee5f4366f..fb179f3a7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -27,9 +27,9 @@ export default {
 </script>
 
 <template>
-  <div class="mx-2 flex flex-col gap-6 mb-8">
+  <div class="flex flex-col gap-6 mb-8 max-w-7xl mx-auto w-full !px-6">
     <div
-      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[43rem]"
+      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[43rem] w-full"
     >
       <woot-wizard
         class="hidden lg:block col-span-2 h-fit py-8 px-6"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index cd32e1911..ada9627a6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -2,21 +2,33 @@
 import { useAlert } from 'dashboard/composables';
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
 import { computed, ref } from 'vue';
-
+import { picoSearch } from '@scmmishra/pico-search';
+import { useMapGetter } from 'dashboard/composables/store.js';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const store = useStore();
 const { t } = useI18n();
 const getters = useStoreGetters();
-const teamsList = computed(() => getters['teams/getTeams'].value);
-const uiFlags = computed(() => getters['teams/getUIFlags'].value);
 const { isAdmin } = useAdmin();
 
 const loading = ref({});
+const searchQuery = ref('');
+
+const teamsList = useMapGetter('teams/getTeams');
+
+const filteredTeamsList = computed(() => {
+  const query = searchQuery.value.trim();
+  if (!query) return teamsList.value;
+  return picoSearch(teamsList.value, query, ['name', 'description']);
+});
+
+const uiFlags = computed(() => getters['teams/getUIFlags'].value);
 
 const deleteTeam = async ({ id }) => {
   try {
@@ -68,74 +80,94 @@ const confirmPlaceHolderText = computed(() =>
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto">
-    <BaseSettingsHeader
-      :title="$t('TEAMS_SETTINGS.HEADER')"
-      :description="$t('TEAMS_SETTINGS.DESCRIPTION')"
-      :link-text="$t('TEAMS_SETTINGS.LEARN_MORE')"
-      feature-name="team_management"
-    >
-      <template #actions>
-        <router-link v-if="isAdmin" :to="{ name: 'settings_teams_new' }">
-          <Button
-            icon="i-lucide-circle-plus"
-            :label="$t('TEAMS_SETTINGS.NEW_TEAM')"
-          />
-        </router-link>
-      </template>
-    </BaseSettingsHeader>
-    <div class="mt-6 flex-1 text-n-slate-11">
-      <woot-loading-state
-        v-if="uiFlags.isFetching"
-        :message="$t('TEAMS_SETTINGS.LOADING')"
-      />
-      <p
-        v-else-if="!teamsList.length"
-        class="flex flex-col items-center justify-center h-full text-base p-8"
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('TEAMS_SETTINGS.LOADING')"
+    :no-records-found="!teamsList.length"
+    :no-records-message="$t('TEAMS_SETTINGS.LIST.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        v-model:search-query="searchQuery"
+        :title="$t('TEAMS_SETTINGS.HEADER')"
+        :description="$t('TEAMS_SETTINGS.DESCRIPTION')"
+        :link-text="$t('TEAMS_SETTINGS.LEARN_MORE')"
+        :search-placeholder="$t('TEAMS_SETTINGS.SEARCH_PLACEHOLDER')"
+        feature-name="team_management"
       >
-        {{ $t('TEAMS_SETTINGS.LIST.404') }}
-      </p>
-
-      <table v-else class="min-w-full divide-y divide-n-weak">
-        <tbody class="divide-y divide-n-weak">
-          <tr v-for="team in teamsList" :key="team.id">
-            <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>
-
-            <td class="py-4 flex justify-end gap-1">
-              <router-link
-                :to="{
-                  name: 'settings_teams_edit',
-                  params: { teamId: team.id },
-                }"
-              >
-                <Button
-                  v-if="isAdmin"
-                  v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
-                  icon="i-lucide-settings"
-                  slate
-                  xs
-                  faded
-                />
-              </router-link>
+        <template v-if="teamsList?.length" #count>
+          <span class="text-body-main text-n-slate-11">
+            {{ $t('TEAMS_SETTINGS.COUNT', { n: teamsList.length }) }}
+          </span>
+        </template>
+        <template #actions>
+          <router-link v-if="isAdmin" :to="{ name: 'settings_teams_new' }">
+            <Button :label="$t('TEAMS_SETTINGS.NEW_TEAM')" size="sm" />
+          </router-link>
+        </template>
+      </BaseSettingsHeader>
+    </template>
+    <template #body>
+      <span
+        v-if="!filteredTeamsList.length && searchQuery"
+        class="flex-1 flex items-center justify-center py-20 text-center text-body-main !text-base text-n-slate-11"
+      >
+        {{ $t('TEAMS_SETTINGS.NO_RESULTS') }}
+      </span>
 
+      <div v-else class="divide-y divide-n-weak border-t border-n-weak">
+        <div
+          v-for="team in filteredTeamsList"
+          :key="team.id"
+          class="flex justify-between flex-row items-start gap-4 py-4"
+        >
+          <div class="flex items-start gap-4">
+            <div
+              class="flex items-center flex-shrink-0 size-10 justify-center rounded-xl outline outline-1 outline-n-weak -outline-offset-1"
+            >
+              <Icon
+                icon="i-lucide-users-round"
+                class="size-4 text-n-slate-11"
+              />
+            </div>
+            <div class="flex flex-col items-start gap-1">
+              <span class="block text-heading-3 text-n-slate-12 capitalize">
+                {{ team.name }}
+              </span>
+              <p class="mb-0 text-n-slate-11 text-body-main">
+                {{ team.description }}
+              </p>
+            </div>
+          </div>
+          <div class="flex justify-end gap-3">
+            <router-link
+              :to="{
+                name: 'settings_teams_edit',
+                params: { teamId: team.id },
+              }"
+            >
               <Button
                 v-if="isAdmin"
-                v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
-                icon="i-lucide-trash-2"
-                xs
-                ruby
-                faded
-                :is-loading="loading[team.id]"
-                @click="openDelete(team)"
+                v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
+                icon="i-woot-settings"
+                slate
+                sm
               />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+            </router-link>
+
+            <Button
+              v-if="isAdmin"
+              v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
+              icon="i-woot-bin"
+              slate
+              sm
+              :is-loading="loading[team.id]"
+              @click="openDelete(team)"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
     <woot-confirm-delete-modal
       v-if="showDeletePopup"
       v-model:show="showDeletePopup"
@@ -148,5 +180,5 @@ const confirmPlaceHolderText = computed(() =>
       @on-confirm="confirmDeletion"
       @on-close="closeDelete"
     />
-  </div>
+  </SettingsLayout>
 </template>
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index a94b4caef..74f9e149a 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -20,10 +20,7 @@ const greetingsMessage = computed({
 
 <template>
   <section>
-    <div
-      v-if="richtext"
-      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"
-    >
+    <div v-if="richtext">
       <WootMessageEditor
         v-model="greetingsMessage"
         is-format-mode
@@ -36,8 +33,9 @@ const greetingsMessage = computed({
       v-else
       v-model="greetingsMessage"
       :rows="4"
+      :min-height="4"
       type="text"
-      class="greetings--textarea"
+      class="bg-transparent p-0 !outline-0 !outline-none !mb-0 mt-1 text-sm"
       :label="label"
       :placeholder="placeholder"
       @input="handleInput"
diff --git a/theme/icons.js b/theme/icons.js
index 373421de8..2931caf41 100644
--- a/theme/icons.js
+++ b/theme/icons.js
@@ -113,76 +113,132 @@ export const icons = {
     width: 16,
     height: 20,
   },
+  bin: {
+    body: `<g fill="none" stroke="currentColor"><path d="M12.3999 5.7334L11.3359 11.7848C11.2463 12.2948 10.8032 12.6667 10.2854 12.6667H5.98111C5.46327 12.6667 5.02023 12.2948 4.93056 11.7848L3.86658 5.7334" stroke="currentColor" stroke-width="0.960001" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.9334 4.13334H9.93338M9.93338 4.13334V3.06667C9.93338 2.47756 9.45584 2 8.86671 2H7.40005C6.81094 2 6.33338 2.47756 6.33338 3.06667V4.13334M9.93338 4.13334H6.33338M3.33337 4.13334H6.33338" stroke="currentColor" stroke-width="0.960001" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 16,
+    height: 16,
+  },
+  'edit-pen': {
+    body: `<g fill="none" stroke="currentColor"><path d="M8.5 12.5H12.5001" stroke="currentColor" stroke-width="1.06667" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.5872 5.40576C12.8515 5.14146 13.0001 4.78298 13.0001 4.40916C13.0002 4.03535 12.8517 3.67682 12.5874 3.41246C12.3231 3.1481 11.9647 2.99956 11.5908 2.99951C11.217 2.99946 10.8585 3.14792 10.5941 3.41221L3.92099 10.0869C3.8049 10.2026 3.71904 10.3451 3.67098 10.5019L3.01047 12.6779C2.99754 12.7212 2.99657 12.7671 3.00764 12.8109C3.01872 12.8546 3.04143 12.8945 3.07337 12.9264C3.10531 12.9583 3.14528 12.981 3.18905 12.992C3.23282 13.003 3.27875 13.0019 3.32197 12.9889L5.49852 12.3289C5.65511 12.2813 5.79762 12.196 5.91353 12.0804L12.5872 5.40576Z" stroke="currentColor" stroke-width="1.06667" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 16,
+    height: 16,
+  },
+  settings: {
+    body: `<g fill="none" stroke="currentColor"><path d="M9.33334 11.3334H3.33334" stroke="currentColor" stroke-width="1.06667" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.6667 4.66663H6.66666" stroke="currentColor" stroke-width="1.06667" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.3333 13.3334C12.4379 13.3334 13.3333 12.4379 13.3333 11.3334C13.3333 10.2288 12.4379 9.33337 11.3333 9.33337C10.2288 9.33337 9.33334 10.2288 9.33334 11.3334C9.33334 12.4379 10.2288 13.3334 11.3333 13.3334Z" stroke="currentColor" stroke-width="1.06667" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.66666 6.66663C5.77123 6.66663 6.66666 5.7712 6.66666 4.66663C6.66666 3.56206 5.77123 2.66663 4.66666 2.66663C3.56209 2.66663 2.66666 3.56206 2.66666 4.66663C2.66666 5.7712 3.56209 6.66663 4.66666 6.66663Z" stroke="currentColor" stroke-width="1.06667" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 16,
+    height: 16,
+  },
+  clone: {
+    body: `<g fill="none" stroke="currentColor"><path d="M6.08345 10.1669C8.33867 10.1669 10.1669 8.33867 10.1669 6.08345C10.1669 3.82822 8.33867 2 6.08345 2C3.82822 2 2 3.82822 2 6.08345C2 8.33867 3.82822 10.1669 6.08345 10.1669Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.58357 13.6669C11.8388 13.6669 13.667 11.8387 13.667 9.58345C13.667 7.32822 11.8388 5.5 9.58357 5.5C7.32834 5.5 5.50012 7.32822 5.50012 9.58345C5.50012 11.8387 7.32834 13.6669 9.58357 13.6669Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 16,
+    height: 16,
+  },
+  'sort-ascending': {
+    body: `<g fill="none" stroke="currentColor"><path d="M4 15.4999L7.5 18.9999L11 15.4999" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.5 19V5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.875 8.5H14.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.5 10.25V7.1875C14.5 6.60734 14.7305 6.05094 15.1407 5.6407C15.5509 5.23047 16.1073 5 16.6875 5C17.2677 5 17.8241 5.23047 18.2343 5.6407C18.6445 6.05094 18.875 6.60734 18.875 7.1875V10.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.5 13.75H18.875L14.5 19H18.875" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  'sort-descending': {
+    body: `<g fill="none" stroke="currentColor"><path d="M4 15.4999L7.5 18.9999L11 15.4999" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.5 19V5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.375 17.5H14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 19.25V16.1875C14 15.6073 14.2305 15.0509 14.6407 14.6407C15.0509 14.2305 15.6073 14 16.1875 14C16.7677 14 17.3241 14.2305 17.7343 14.6407C18.1445 15.0509 18.375 15.6073 18.375 16.1875V19.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 5H18.375L14 10.25H18.375" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  'drag-indicator': {
+    body: `<path d="M1.33333 10.6667C0.966667 10.6667 0.652778 10.5361 0.391667 10.275C0.130556 10.0139 0 9.7 0 9.33333C0 8.96667 0.130556 8.65278 0.391667 8.39167C0.652778 8.13056 0.966667 8 1.33333 8C1.7 8 2.01389 8.13056 2.275 8.39167C2.53611 8.65278 2.66667 8.96667 2.66667 9.33333C2.66667 9.7 2.53611 10.0139 2.275 10.275C2.01389 10.5361 1.7 10.6667 1.33333 10.6667ZM5.33333 10.6667C4.96667 10.6667 4.65278 10.5361 4.39167 10.275C4.13056 10.0139 4 9.7 4 9.33333C4 8.96667 4.13056 8.65278 4.39167 8.39167C4.65278 8.13056 4.96667 8 5.33333 8C5.7 8 6.01389 8.13056 6.275 8.39167C6.53611 8.65278 6.66667 8.96667 6.66667 9.33333C6.66667 9.7 6.53611 10.0139 6.275 10.275C6.01389 10.5361 5.7 10.6667 5.33333 10.6667ZM1.33333 6.66667C0.966667 6.66667 0.652778 6.53611 0.391667 6.275C0.130556 6.01389 0 5.7 0 5.33333C0 4.96667 0.130556 4.65278 0.391667 4.39167C0.652778 4.13056 0.966667 4 1.33333 4C1.7 4 2.01389 4.13056 2.275 4.39167C2.53611 4.65278 2.66667 4.96667 2.66667 5.33333C2.66667 5.7 2.53611 6.01389 2.275 6.275C2.01389 6.53611 1.7 6.66667 1.33333 6.66667ZM5.33333 6.66667C4.96667 6.66667 4.65278 6.53611 4.39167 6.275C4.13056 6.01389 4 5.7 4 5.33333C4 4.96667 4.13056 4.65278 4.39167 4.39167C4.65278 4.13056 4.96667 4 5.33333 4C5.7 4 6.01389 4.13056 6.275 4.39167C6.53611 4.65278 6.66667 4.96667 6.66667 5.33333C6.66667 5.7 6.53611 6.01389 6.275 6.275C6.01389 6.53611 5.7 6.66667 5.33333 6.66667ZM1.33333 2.66667C0.966667 2.66667 0.652778 2.53611 0.391667 2.275C0.130556 2.01389 0 1.7 0 1.33333C0 0.966667 0.130556 0.652778 0.391667 0.391667C0.652778 0.130556 0.966667 0 1.33333 0C1.7 0 2.01389 0.130556 2.275 0.391667C2.53611 0.652778 2.66667 0.966667 2.66667 1.33333C2.66667 1.7 2.53611 2.01389 2.275 2.275C2.01389 2.53611 1.7 2.66667 1.33333 2.66667ZM5.33333 2.66667C4.96667 2.66667 4.65278 2.53611 4.39167 2.275C4.13056 2.01389 4 1.7 4 1.33333C4 0.966667 4.13056 0.652778 4.39167 0.391667C4.65278 0.130556 4.96667 0 5.33333 0C5.7 0 6.01389 0.130556 6.275 0.391667C6.53611 0.652778 6.66667 0.966667 6.66667 1.33333C6.66667 1.7 6.53611 2.01389 6.275 2.275C6.01389 2.53611 5.7 2.66667 5.33333 2.66667Z" fill="currentColor"/>`,
+    width: 7,
+    height: 11,
+  },
+
   /** Channels Starts */
   website: {
-    body: `<path d="m3.023 1.664.126-.001.418-.001 1.286-.004h.34l1.596-.003q.92 0 1.84-.004l1.425-.003.85-.002a108 108 0 0 1 1.092-.003c.628-.004 1.163.04 1.706.388.554.593.645 1.218.64 2.004v.192l-.002.624v.435l-.004 1.14-.002 1.166-.006 2.283a4 4 0 0 1-.798-.15l-.182-.056-.193-.061-.2-.062-.634-.198-1.03-.32q-.088-.03-.18-.057l-.158-.05c-.39-.117-.764-.18-1.151-.013-.261.15-.403.338-.513.616-.059.432.047.817.18 1.224l.055.177q.086.278.175.554l.285.904.05.157.044.138c.031.127.031.127.031.361a1215 1215 0 0 1-4.146.014 337 337 0 0 1-1.753.005l-.68.001-.2.002c-.606-.002-1.133-.094-1.603-.493a1.78 1.78 0 0 1-.54-1.298l-.002-.703-.002-1.102-.002-1.481q0-.69-.003-1.378l-.002-1.185-.001-.707v-.666l-.002-.358c.004-.622.125-1.103.557-1.563.395-.347.776-.462 1.293-.463m-.648 1.121c-.48.604-.293.955-.293 1.875h11.309c.135-1.332.135-1.332-.235-1.816-.303-.28-.518-.3-.924-.302h-.12l-.687-.002-.943-.003h-.325q-.762-.003-1.525-.003-.88 0-1.76-.005L5.51 2.527l-.813-.003a99 99 0 0 0-1.044-.002c-.675-.009-.675-.009-1.279.263" fill="currentColor"/><path d="M10.52 9.406c.193.044.193.044.396.105l.112.034.621.189.534.163a164 164 0 0 0 1.211.369l.252.076.554.17c.507.179.507.179.597.359.034.365.034.365-.092.532-.176.14-.355.197-.567.258l-.251.079q-.196.06-.394.118c-.498.13-.498.13-.908.416a2 2 0 0 0-.132.413q-.057.177-.117.351-.09.28-.176.561l-.058.183-.052.164a.93.93 0 0 1-.3.382c-.205.03-.205.03-.41 0-.226-.176-.292-.356-.374-.625l-.037-.118-.116-.384-.081-.268-.17-.562q-.107-.36-.218-.717a136 136 0 0 1-.36-1.19q-.03-.105-.064-.212a2 2 0 0 1-.045-.611c.174-.272.34-.252.645-.235M6.184 3.162c.175.033.175.033.318.158.092.168.092.168.092.351-.068.194-.11.253-.293.344-.147.026-.147.026-.293 0-.136-.095-.136-.095-.235-.234-.035-.215-.028-.31.096-.49.139-.096.139-.096.315-.129m-1.172.033c.139.096.139.096.234.235.027.186.034.296-.066.458a.74.74 0 0 1-.461.128c-.172-.121-.172-.121-.293-.293 0-.191.026-.3.128-.462.161-.1.272-.092.458-.066m-1.231.059c.117.117.117.117.14.348-.006.168-.01.222-.114.359-.203.078-.345.046-.553-.004-.117-.117-.117-.117-.14-.348.006-.168.01-.222.114-.359.203-.078.345-.046.553.004" fill="currentColor"/>`,
-    width: 16,
-    height: 16,
+    body: `<g fill="none" stroke="currentColor"><path d="M12 10.1755L12.0083 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.333 10.1755L15.3413 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.66699 10.1755L8.67533 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.0424 13.9838V7.56679C20.0424 6.14919 18.9729 5 17.3687 5H6.67374C5.0695 5 4 6.14919 4 7.56679V15.2672C4 16.6848 4.53475 17.8339 6.67374 17.8339H12.0212" stroke-width="1.60424" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.9345 16.8695C20.3746 17.1402 20.3475 17.7991 19.8942 17.8505L17.6067 18.1098L16.5807 20.1706C16.3774 20.579 15.749 20.3791 15.6451 19.8729L14.5263 14.4221C14.4385 13.9943 14.823 13.725 15.1949 13.9539L19.9345 16.8695Z" stroke-width="1.60424"/></g>`,
+    width: 24,
+    height: 24,
   },
   line: {
-    body: `<g clip-path="url(#a)"><path d="M2.778.778a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm4 2.25c2.344 0 4.25 1.528 4.25 3.407 0 .751-.295 1.429-.912 2.096-.892 1.014-2.885 2.249-3.339 2.437-.453.189-.386-.12-.367-.226l.06-.36c.014-.107.03-.273-.013-.38-.048-.116-.236-.177-.375-.206-2.042-.267-3.554-1.677-3.554-3.361 0-1.879 1.907-3.407 4.25-3.407M4.27 5.443a.22.22 0 0 0-.223.22v1.669c0 .122.1.22.223.22h.844a.22.22 0 0 0 .223-.22c0-.121-.1-.22-.223-.22h-.621V5.664c0-.122-.1-.22-.223-.22m1.495 0a.22.22 0 0 0-.223.22v1.669c0 .122.1.22.223.22a.22.22 0 0 0 .223-.22V5.664c0-.122-.1-.22-.223-.22m.766 0a.22.22 0 0 0-.224.22v1.669c0 .122.101.22.224.22a.22.22 0 0 0 .223-.22V6.3l.865 1.164a.225.225 0 0 0 .25.077.22.22 0 0 0 .151-.209V5.664c0-.122-.1-.22-.222-.22a.22.22 0 0 0-.223.22v1.032l-.866-1.164a.23.23 0 0 0-.178-.089m2.011 0a.22.22 0 0 0-.222.221v1.668c0 .122.1.22.222.22h.845a.22.22 0 0 0 .223-.22c0-.121-.1-.22-.223-.22h-.622v-.394h.622a.22.22 0 0 0 .223-.22c0-.122-.1-.22-.223-.22h-.622v-.394h.622a.22.22 0 0 0 .223-.22c0-.121-.1-.22-.223-.22z" fill="currentColor"/></g><defs><clipPath id="a"><path fill="currentColor" d="M.333.333h13.333v13.333H.333z"/></clipPath></defs>`,
-    width: 13,
-    height: 13,
+    body: `<g fill="none" stroke="currentColor"><path d="M20.8417 10.2395C20.8417 6.24765 16.84 3 11.9209 3C7.00219 3 3 6.24765 3 10.2395C3 13.818 6.17364 16.8152 10.4607 17.3817C10.7511 17.4445 11.1466 17.5733 11.2465 17.8217C11.3365 18.0471 11.3054 18.4005 11.2755 18.6282C11.2755 18.6282 11.1708 19.2578 11.148 19.392C11.1091 19.6173 10.9688 20.274 11.9209 19.873C12.8729 19.4717 17.0583 16.8477 18.9299 14.6937C20.2227 13.2758 20.8417 11.837 20.8417 10.2395Z" stroke-width="1.3" stroke-linejoin="round"/><path d="M15.7695 8.88233H17.643V8.71192H15.5989V12.143H17.643V11.9725H15.7695V10.5127H17.643V10.3422H15.7695V8.88233ZM6.49854 11.9725V8.71192H6.32812V12.143H8.37221V11.9725H6.49854ZM14.0175 12.0099L11.5754 8.71185H11.2922V12.143H11.4626V8.84573L13.9042 12.143H14.1879V8.71185H14.0175V12.0099ZM9.71054 8.71185V12.143H9.88096V8.71185H9.71054Z" stroke-width="0.892086" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
   },
   facebook: {
-    body: `<path d="M7 .333a6.667 6.667 0 0 1 1 13.258v-4.59h.666a1 1 0 0 0 0-2H8V5.665c0-.183.15-.333.333-.333h.333a1 1 0 0 0 0-2h-.333A2.333 2.333 0 0 0 6 5.668V7h-.667a1 1 0 1 0 0 2H6v4.592A6.668 6.668 0 0 1 7 .333" fill="currentColor"/>`,
-    width: 14,
-    height: 14,
+    body: `<g fill="none" stroke="currentColor"><path d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 20V12.889M12 12.889V10.2223C12 8.46581 13.2033 7.58775 15.1111 7.71966M12 12.889H14.6667M12 12.889H9.33333" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
   },
   whatsapp: {
-    body: `<path d="M7 .333A6.667 6.667 0 1 1 3.554 12.71l-2.02.594a.673.673 0 0 1-.836-.836l.593-2.021A6.667 6.667 0 0 1 7 .334M5.524 3.84a.46.46 0 0 0-.456-.05 1.86 1.86 0 0 0-1.072 1.258l-.004.02c-.026.101-.047.22-.042.35.016.455.194 1.743 1.543 3.091 1.347 1.348 2.634 1.527 3.09 1.543.13.005.249-.017.35-.042l.023-.006a1.85 1.85 0 0 0 1.254-1.067.47.47 0 0 0-.06-.469c-.355-.455-.832-.784-1.256-1.077l-.085-.058a.474.474 0 0 0-.649.105l-.4.61a.153.153 0 0 1-.203.05 5 5 0 0 1-.951-.703 4.4 4.4 0 0 1-.671-.915.15.15 0 0 1 .045-.194l.615-.457a.474.474 0 0 0 .081-.626l-.09-.133c-.28-.413-.607-.898-1.062-1.23" fill="currentColor"/>`,
-    width: 14,
-    height: 14,
+    body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5226 5.48219C16.9248 3.88232 14.7997 3.00081 12.5355 3C7.8698 3 4.07265 6.79675 4.07102 11.4636C4.07021 12.9555 4.46024 14.4117 5.20092 15.695L4.43204 18.5034C4.24004 19.2047 4.87929 19.8508 5.58261 19.6664L8.4871 18.9045C9.72331 19.5791 11.1154 19.9342 12.5318 19.9346H12.5355C17.2003 19.9346 20.9979 16.1374 20.9995 11.4705C21.0003 9.20874 20.1208 7.08206 18.5226 5.48219ZM12.5355 18.5052H12.5326C11.2704 18.5048 10.0322 18.1655 8.95182 17.5246L8.6949 17.372L6.0321 18.0705L6.74275 15.4742L6.57553 15.208C5.87138 14.0879 5.49922 12.7932 5.50003 11.4641C5.50165 7.58532 8.65755 4.42941 12.5383 4.42941C14.4174 4.43022 16.1837 5.16279 17.512 6.49276C18.8404 7.82234 19.5713 9.59024 19.5705 11.4697C19.5689 15.3489 16.413 18.5052 12.5355 18.5052ZM16.3943 13.2364C16.1828 13.1305 15.1431 12.6191 14.9491 12.5485C14.7551 12.4778 14.6143 12.4426 14.4734 12.6544C14.3326 12.8663 13.9271 13.3427 13.8038 13.4836C13.6804 13.6248 13.557 13.6423 13.3455 13.5363C13.1341 13.4304 12.4527 13.2072 11.6446 12.4868C11.016 11.9259 10.5914 11.2335 10.4681 11.0216C10.3447 10.8098 10.4551 10.6953 10.5606 10.5902C10.6555 10.4953 10.772 10.3431 10.878 10.2197C10.9839 10.0963 11.0188 10.0079 11.0894 9.867C11.1601 9.72576 11.1247 9.60242 11.072 9.49646C11.0192 9.39054 10.5963 8.34951 10.4198 7.92622C10.2481 7.51389 10.0736 7.56989 9.94411 7.56299C9.82073 7.5569 9.67991 7.55569 9.53868 7.55569C9.39744 7.55569 9.16851 7.60845 8.97453 7.82031C8.78055 8.03214 8.23425 8.54392 8.23425 9.58452C8.23425 10.6251 8.992 11.6313 9.09792 11.7725C9.20383 11.9137 10.5894 14.0497 12.7108 14.9661C13.2153 15.1841 13.6094 15.3144 13.9166 15.4118C14.4231 15.5729 14.8841 15.5502 15.2486 15.4958C15.6549 15.4349 16.4998 14.984 16.676 14.4901C16.8521 13.9961 16.8521 13.5724 16.7994 13.4844C16.7466 13.3963 16.6058 13.3423 16.3943 13.2364Z" fill="currentColor"/>`,
+    width: 24,
+    height: 24,
   },
   instagram: {
-    body: `<path d="M8.667 0A3.333 3.333 0 0 1 12 3.333v5.334A3.333 3.333 0 0 1 8.667 12H3.333A3.333 3.333 0 0 1 0 8.667V3.333A3.333 3.333 0 0 1 3.333 0zM6 3.333a2.667 2.667 0 1 0 0 5.334 2.667 2.667 0 0 0 0-5.334m0 1.334a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666m3-2.334a.667.667 0 1 0 0 1.334.667.667 0 0 0 0-1.334" fill="currentColor"/>`,
-    width: 12,
-    height: 12,
+    body: `<g fill="none" stroke="currentColor"><path d="M12.0003 15.3329C13.8412 15.3329 15.3337 13.8405 15.3337 11.9996C15.3337 10.1586 13.8412 8.66626 12.0003 8.66626C10.1594 8.66626 8.66699 10.1586 8.66699 11.9996C8.66699 13.8405 10.1594 15.3329 12.0003 15.3329Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 15.3333V8.66667C4.5 6.36548 6.36548 4.5 8.66667 4.5H15.3333C17.6345 4.5 19.5 6.36548 19.5 8.66667V15.3333C19.5 17.6345 17.6345 19.5 15.3333 19.5H8.66667C6.36548 19.5 4.5 17.6345 4.5 15.3333Z" stroke-width="1.5"/><path d="M16.583 7.42552L16.5913 7.41626" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
   },
   tiktok: {
-    body: `<path d="M10.206,2.759C9.273,2.15 8.708,1.114 8.708,0L6.341,0L6.337,9.482C6.295,10.578 5.372,11.435 4.276,11.391C3.18,11.35 2.323,10.426 2.366,9.33C2.408,8.262 3.285,7.419 4.354,7.419C4.554,7.419 4.751,7.451 4.94,7.511L4.94,5.094C4.744,5.066 4.549,5.052 4.354,5.05C1.953,5.05 0,7.003 0,9.404C0.005,11.807 1.951,13.755 4.356,13.758C6.757,13.758 8.71,11.805 8.71,9.404L8.71,4.597C9.668,5.287 10.819,5.659 12,5.657L12,3.29C11.361,3.292 10.739,3.106 10.206,2.759Z" fill="currentColor"/>`,
-    width: 12,
-    height: 14,
+    body: `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.2 10.1c0 .22-.18.401-.4.39a8 8 0 0 1-3.362-.93c-.281-.15-.638.045-.638.364V15.5a6 6 0 1 1-6.4-5.987a.38.38 0 0 1 .4.387v2.8c0 .22-.18.397-.398.433A2.4 2.4 0 1 0 12.2 15.5V2.9a.4.4 0 0 1 .4-.4h2.8a.43.43 0 0 1 .418.4a4.4 4.4 0 0 0 3.983 3.982c.22.02.4.197.4.418z"/>`,
+    width: 24,
+    height: 24,
   },
   messenger: {
-    body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M.333 7a6.667 6.667 0 1 1 3.221 5.709l-2.033.597a.667.667 0 0 1-.827-.827l.598-2.033A6.64 6.64 0 0 1 .333 7M5.53 5.53c.26-.26.682-.26.942 0L8 7.057 9.529 5.53a.667.667 0 1 1 .942.943l-2 2a.667.667 0 0 1-.942 0L6 6.943 4.471 8.472a.667.667 0 1 1-.942-.943z" fill="currentColor"/>`,
-    width: 14,
-    height: 14,
+    body: `<g fill="none" stroke="currentColor"><path d="M17.6568 6.34316C14.5326 3.21895 9.46735 3.21895 6.34314 6.34316C3.63893 9.04737 3.27537 13.2059 5.25266 16.3012L4.7839 18.709C4.72531 19.0099 4.99007 19.2747 5.29104 19.2161L7.69882 18.7473C10.7941 20.7246 14.9526 20.3611 17.6568 17.6569C20.7811 14.5326 20.7811 9.46736 17.6568 6.34316Z" stroke-width="1.6" stroke-linejoin="round"/><path d="M15.8218 10.624L13.2228 13.2231L10.853 10.8534L8.25391 13.4524" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
   },
   mail: {
-    body: `<g clip-path="url(#a)" fill="currentColor"><path d="M0 4.676q.058.03.116.063l.065.036c.105.06.204.128.304.196l.068.047.54.366.083.056q.421.284.847.562.598.393 1.19.793.673.454 1.352.9a57 57 0 0 1 1.1.738c.525.356 1.087.543 1.725.437.46-.096.845-.36 1.225-.621q.193-.134.387-.265l.081-.055q.418-.284.843-.56.597-.392 1.19-.793.669-.452 1.345-.896.38-.249.757-.501l.076-.05.358-.24.127-.086.059-.04c.132-.087.132-.087.162-.087l.007 2.49v.354l.006 1.92.001.545.002.703c.004.486-.045.832-.387 1.2-.262.242-.547.369-.907.369h-.409l-.403.001h-.434l-.85.001h-.692l-1.96.001H7.76l-1.715.001-2.75.002a262 262 0 0 1-1.664 0l-.142.001c-.422.003-.775-.061-1.098-.354l-.063-.07-.04-.04c-.17-.181-.292-.427-.291-.678V9.407l.001-1.933v-.06z"/><path d="M1.278 1.743h.263l.549-.001h.434l1.542-.002H6.24q.858 0 1.715-.002a1231 1231 0 0 1 3.592-.002h.964c.422-.003.775.061 1.098.354l.063.07.04.04c.26.272.3.613.296.97-.013.348-.198.612-.44.85a2 2 0 0 1-.303.221l-.07.046-.15.097-.407.265-.084.055q-.421.276-.837.56-.63.425-1.265.842-.565.371-1.124.75a123 123 0 0 1-1.22.817c-.46.305-.85.525-1.419.433a1.6 1.6 0 0 1-.46-.213l-.056-.036q-.33-.211-.651-.433A98 98 0 0 0 4.21 6.55q-.634-.417-1.262-.843-.531-.358-1.065-.71l-.654-.43-.062-.041-.47-.312C.451 4.047.235 3.873.108 3.6l-.046-.097a1.37 1.37 0 0 1-.005-.94c.16-.352.434-.613.79-.76a1.5 1.5 0 0 1 .43-.061"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h14v14H0z"/></clipPath></defs>`,
-    width: 14,
-    height: 14,
+    body: `<g fill="none" stroke="currentColor"><path d="M20.4186 8.48859L18.1374 9.94025L15.8562 11.3919L13.7341 12.5709C12.7344 13.1263 11.519 13.1278 10.5183 12.574C9.56816 12.0482 8.52477 11.4699 8.3905 11.3919L3.82812 8.48859" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="6" width="18.2495" height="13.2724" rx="3.31809" stroke-width="1.6"/></g>`,
+    width: 24,
+    height: 24,
   },
   sms: {
-    body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M.333 2a2 2 0 0 1 2-2h9.334a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1.448a.67.67 0 0 0-.472.195L8.414 11.53a2 2 0 0 1-2.828 0l-1.333-1.334A.67.67 0 0 0 3.78 10H2.333a2 2 0 0 1-2-2zm3.334.667a.667.667 0 1 0 0 1.333h6.666a.667.667 0 1 0 0-1.333zm0 2.666a.667.667 0 1 0 0 1.334H7a.667.667 0 1 0 0-1.334z" fill="currentColor"/>`,
-    width: 14,
-    height: 12,
+    body: `<g fill="none" stroke="currentColor"><path d="M17.5 4.66711H6.5C4.98122 4.66711 3.75 5.89833 3.75 7.41711V14.7504C3.75 16.2692 4.98122 17.5004 6.5 17.5004H9.0336C9.72802 17.5004 10.3628 17.8928 10.6734 18.5139L11.1801 19.5273C11.5179 20.203 12.4821 20.203 12.8199 19.5273L13.3266 18.5139C13.6372 17.8928 14.272 17.5004 14.9664 17.5004H17.5C19.0188 17.5004 20.25 16.2692 20.25 14.7505V7.41711C20.25 5.89833 19.0188 4.66711 17.5 4.66711Z" stroke-width="1.5"/><path d="M12 10.1755L12.0083 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.333 10.1755L15.3413 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.66699 10.1755L8.67533 10.1663" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
   },
   telegram: {
-    body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M12.185.287A1 1 0 0 1 13.56 1.37l-1.513 9.171c-.146.884-1.117 1.392-1.928.951a39 39 0 0 1-2.594-1.53c-.453-.296-1.841-1.245-1.67-1.921C6 7.464 8.332 5.292 9.666 4c.524-.507.285-.8-.334-.333C7.8 4.826 5.336 6.587 4.521 7.083c-.719.438-1.094.512-1.542.438a10.2 10.2 0 0 1-2.194-.604c-.836-.346-.795-1.496 0-1.83z" fill="currentColor"/>`,
-    width: 14,
-    height: 12,
+    body: `<g fill="none" stroke="currentColor"><path d="M3.96668 10.6616C3.96668 10.6616 10.9417 7.80776 13.3608 6.80292C14.288 6.40099 17.4329 5.11474 17.4329 5.11474C17.4329 5.11474 18.8843 4.55212 18.7633 5.91861C18.7229 6.48134 18.4004 8.45083 18.0778 10.5811C17.5941 13.5957 17.0699 16.8916 17.0699 16.8916C17.0699 16.8916 16.9894 17.816 16.304 17.9768C15.6185 18.1376 14.4896 17.4141 14.288 17.2533C14.1268 17.1327 11.2643 15.324 10.216 14.4398C9.93378 14.1986 9.61123 13.7163 10.2563 13.1535C11.7077 11.8272 13.4414 10.1792 14.4896 9.13418C14.9734 8.6518 15.4573 7.52634 13.4414 8.89294C10.5789 10.8624 7.7566 12.7114 7.7566 12.7114C7.7566 12.7114 7.11161 13.1134 5.90208 12.7516C4.69255 12.3898 3.28141 11.9076 3.28141 11.9076C3.28141 11.9076 2.31387 11.3045 3.96689 10.6616H3.96668Z" stroke-width="1.5"/></g>`,
+    width: 24,
+    height: 24,
   },
   api: {
-    body: `<path d="M4.468 11.5q-1.14 0-1.776-.636-.624-.636-.624-1.632v-.996q0-.504-.12-.792a.7.7 0 0 0-.348-.408q-.24-.132-.624-.132V5.488q.384 0 .624-.12a.7.7 0 0 0 .348-.408q.12-.3.12-.804V3.16q0-.996.624-1.62.636-.636 1.776-.636h.756v1.548q-.756-.036-1.104.204-.336.24-.336.792v.828q0 .852-.42 1.332-.408.48-.972.552v.072q.564.06.972.552.42.48.42 1.332v.84q0 .552.336.816.348.252 1.104.228v1.5zm6.855 0h-.756V10q.756.024 1.092-.228.348-.264.348-.816v-.84q0-.852.408-1.332.42-.492.984-.552V6.16q-.552-.072-.972-.552t-.42-1.332v-.828q0-.552-.348-.792-.336-.24-1.092-.204V.904h.756q1.152 0 1.776.636.624.624.624 1.62v.996q0 .504.108.804.12.288.36.408t.624.12v1.416q-.384 0-.624.132a.76.76 0 0 0-.36.408q-.108.288-.108.792v.996q0 .996-.624 1.632t-1.776.636" fill="currentColor"/>`,
-    width: 15,
-    height: 12,
+    body: `<path d="M15.3225 20.0768H14.3193V18.44C15.1876 18.4635 15.8036 18.3461 16.1673 18.088C16.5311 17.8416 16.7129 17.4251 16.7129 16.8384V15.36C16.7129 14.4917 16.9065 13.8112 17.2937 13.3184C17.6927 12.8256 18.1679 12.5264 18.7193 12.4208V12.3856C18.1796 12.2683 17.7103 11.9691 17.3113 11.488C16.9124 11.0069 16.7129 10.3381 16.7129 9.48159V7.98559C16.7129 7.39893 16.5311 6.98239 16.1673 6.73599C15.8036 6.48959 15.1876 6.38399 14.3193 6.41919V4.74719H15.3225C16.3316 4.74719 17.1119 5.04053 17.6633 5.62719C18.2148 6.20213 18.4905 6.95306 18.4905 7.87999V9.34079C18.4905 9.83359 18.5551 10.2501 18.6841 10.5904C18.8249 10.9189 19.0244 11.1653 19.2825 11.3296C19.5407 11.4939 19.8575 11.576 20.2329 11.576V13.248C19.8575 13.248 19.5407 13.3301 19.2825 13.4944C19.0244 13.6587 18.8249 13.9109 18.6841 14.2512C18.5551 14.5797 18.4905 14.9963 18.4905 15.5008V16.9616C18.4905 17.8768 18.2148 18.6219 17.6633 19.1968C17.1119 19.7835 16.3316 20.0768 15.3225 20.0768Z" fill="currentColor"/><path d="M8.68384 20.0768C7.6865 20.0768 6.90624 19.7835 6.34304 19.1968C5.79157 18.6219 5.51584 17.8768 5.51584 16.9616V15.5008C5.51584 14.9963 5.44544 14.5797 5.30464 14.2512C5.17557 13.9109 4.98197 13.6587 4.72384 13.4944C4.4657 13.3301 4.1489 13.248 3.77344 13.248V11.576C4.1489 11.576 4.4657 11.4939 4.72384 11.3296C4.98197 11.1653 5.17557 10.9189 5.30464 10.5904C5.44544 10.2501 5.51584 9.83359 5.51584 9.34079V7.87999C5.51584 6.95306 5.79157 6.20213 6.34304 5.62719C6.90624 5.04053 7.6865 4.74719 8.68384 4.74719H9.68704V6.41919C8.8305 6.38399 8.2145 6.48959 7.83904 6.73599C7.4753 6.98239 7.29344 7.39893 7.29344 7.98559V9.48159C7.29344 10.3381 7.09397 11.0069 6.69504 11.488C6.30784 11.9691 5.8385 12.2683 5.28704 12.3856V12.4208C5.8385 12.5264 6.30784 12.8256 6.69504 13.3184C7.09397 13.8112 7.29344 14.4917 7.29344 15.36V16.8384C7.29344 17.4251 7.4753 17.8416 7.83904 18.088C8.2145 18.3461 8.8305 18.4635 9.68704 18.44V20.0768H8.68384Z" fill="currentColor"/>`,
+    width: 24,
+    height: 24,
   },
   twilio: {
-    body: `<path d="M8 .5c4.14 0 7.5 3.36 7.5 7.5s-3.36 7.5-7.5 7.5S.5 12.14.5 8 3.86.5 8 .5m0 1.98C4.94 2.48 2.48 4.94 2.48 8S4.94 13.52 8 13.52s5.52-2.46 5.52-5.52S11.06 2.48 8 2.48M9.86 8.3a1.56 1.56 0 1 1 0 3.12 1.56 1.56 0 0 1 0-3.12m-3.72 0a1.56 1.56 0 1 1 0 3.12 1.56 1.56 0 0 1 0-3.12m3.72-3.72a1.56 1.56 0 1 1 0 3.12 1.56 1.56 0 0 1 0-3.12m-3.72 0a1.56 1.56 0 1 1 0 3.12 1.56 1.56 0 0 1 0-3.12" fill="currentColor"/>`,
-    width: 16,
-    height: 16,
+    body: `<g clip-path="url(#a)" fill="none"><circle cx="12.5" cy="11.5" r="8.55" stroke="currentColor" stroke-width="1.6"/><circle cx="10.5" cy="9.5" r="1.5" fill="currentColor"/><circle cx="14.5" cy="9.5" r="1.5" fill="currentColor"/><circle cx="14.5" cy="13.5" r="1.5" fill="currentColor"/><circle cx="10.5" cy="13.5" r="1.5" fill="currentColor"/></g><defs><clipPath id="a"><path fill="currentColor" d="M3 2h19v19H3z"/></clipPath></defs>`,
+    width: 24,
+    height: 24,
   },
   gmail: {
-    body: `<path d="M3.182 12.253H.955A.954.954 0 0 1 0 11.298V3.185c0-1.18 1.346-1.854 2.29-1.146L7 5.571l4.71-3.532c.942-.708 2.29-.035 2.29 1.146v8.113a.954.954 0 0 1-.955.955h-2.227v-5.41L7 9.708 3.182 6.844z" fill="currentColor"/>`,
-    width: 14,
-    height: 14,
+    body: `<path d="M20 7V17C20 17.5675 19.5675 18 19 18H18V8.9245L12 13.2345L6 8.9245V18H5C4.4325 18 4 17.5675 4 17V7C4 6.716 4.107 6.466 4.2865 6.289C4.466 6.1065 4.716 6 5 6H5.3335L12 10.8335L18.6665 6H19C19.284 6 19.534 6.107 19.7135 6.289C19.893 6.466 20 6.716 20 7Z" fill="currentColor"/>`,
+    width: 24,
+    height: 24,
   },
   outlook: {
-    body: `<path d="M6.18.365a1 1 0 0 0-.267.028l-4.405.978A1.505 1.505 0 0 0 .333 2.836v8.328c0 .7.492 1.313 1.175 1.465l4.405.98v-.001c.718.16 1.42-.404 1.42-1.14V1.532C7.333.888 6.796.376 6.18.365m2.153 2.319v3.713l1.17.826 4.494-3.1c-.03-.8-.69-1.44-1.497-1.44zM3.833 4.5c1.028 0 1.834 1.172 1.834 2.667S4.86 9.834 3.833 9.834 2 8.662 2 7.167 2.805 4.5 3.833 4.5M14 5.337 9.783 8.244a.49.49 0 0 1-.573-.003l-.877-.621v4.064H12.5c.827 0 1.5-.674 1.5-1.5zM3.833 5.5C3.44 5.5 3 6.213 3 7.167s.44 1.667.833 1.667c.394 0 .834-.713.834-1.667S4.227 5.5 3.833 5.5" fill="currentColor"/>`,
-    width: 14,
-    height: 14,
+    body: `<g fill="none"><path d="M7.875 8.4c.77 0 1.403.45 1.818 1.048.418.601.657 1.4.657 2.252 0 .853-.24 1.65-.657 2.251C9.278 14.55 8.644 15 7.875 15s-1.403-.45-1.818-1.049c-.418-.6-.657-1.398-.657-2.25s.24-1.652.657-2.253C6.472 8.85 7.106 8.4 7.875 8.4Z" stroke="currentColor" stroke-width="1.2"/><path d="M10.588 3.632a1.7 1.7 0 0 1 2.112 1.65v13.437a1.7 1.7 0 0 1-2.112 1.65l-5.243-1.311a2.7 2.7 0 0 1-2.045-2.62V7.563a2.7 2.7 0 0 1 2.045-2.62zM13 7h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-5" stroke="currentColor" stroke-width="1.4"/><path d="M20.47 9.518a.7.7 0 0 0-.94-1.036L20 9zm-7.318 3.133-.495.495zM20 9l-.47-.518-4.09 3.717.471.518.471.518 4.089-3.717zm-6.848 3.652.495-.495-.652-.652L12.5 12l-.495.495.652.652zm2.76.065-.472-.518a1.3 1.3 0 0 1-1.793-.042l-.495.495-.495.495a2.7 2.7 0 0 0 3.725.088z" fill="currentColor"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  voice: {
+    body: `<g fill="none" stroke="currentColor"><path d="M12.75 4.50031C14.5402 4.50031 16.2571 5.21146 17.523 6.47733C18.7888 7.7432 19.5 9.46009 19.5 11.2503" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.75 7.5C13.7446 7.5 14.6984 7.89509 15.4017 8.59835C16.1049 9.30161 16.5 10.2554 16.5 11.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.374 15.4263C13.5289 15.4974 13.7034 15.5137 13.8688 15.4724C14.0341 15.4311 14.1805 15.3347 14.2837 15.1991L14.55 14.8503C14.6897 14.664 14.8709 14.5128 15.0792 14.4087C15.2875 14.3045 15.5171 14.2503 15.75 14.2503H18C18.3978 14.2503 18.7794 14.4083 19.0607 14.6896C19.342 14.9709 19.5 15.3525 19.5 15.7503V18.0003C19.5 18.3981 19.342 18.7797 19.0607 19.061C18.7794 19.3423 18.3978 19.5003 18 19.5003C14.4196 19.5003 10.9858 18.078 8.45406 15.5462C5.92232 13.0145 4.5 9.58073 4.5 6.00031C4.5 5.60248 4.65804 5.22095 4.93934 4.93964C5.22064 4.65834 5.60218 4.50031 6 4.50031H8.25C8.64782 4.50031 9.02935 4.65834 9.31066 4.93964C9.59196 5.22095 9.75 5.60248 9.75 6.00031V8.2503C9.75 8.48317 9.69578 8.71284 9.59164 8.92113C9.4875 9.12941 9.33629 9.31058 9.15 9.45031L8.799 9.71355C8.66131 9.81869 8.56426 9.96824 8.52434 10.1368C8.48442 10.3054 8.50409 10.4826 8.58 10.6383C9.60501 12.7202 11.2908 14.4039 13.374 15.4263Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  github: {
+    body: `<g fill="none" stroke="currentColor"><path d="M15.1283 19.5827V16.4662C15.2367 15.4901 14.9568 14.5106 14.3492 13.7392C16.6866 13.7392 19.024 12.1809 19.024 9.45395C19.0863 8.48003 18.8136 7.52169 18.2448 6.72698C18.463 5.83097 18.463 4.89601 18.2448 4C18.2448 4 17.4657 4 15.9074 5.1687C13.8505 4.77914 11.7313 4.77914 9.67434 5.1687C8.11607 4 7.33693 4 7.33693 4C7.10319 4.89601 7.10319 5.83097 7.33693 6.72698C6.76962 7.51849 6.49428 8.4822 6.5578 9.45395C6.5578 12.1809 8.89521 13.7392 11.2326 13.7392C10.9287 14.121 10.7028 14.5573 10.5703 15.0248C10.4379 15.4923 10.3989 15.9831 10.4535 16.4662V19.5827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.454 16.4656C6.94005 18.0238 6.55827 14.9073 5 14.9073" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 24,
+    height: 24,
+  },
+  x: {
+    body: `<path d="M16.6007 4.99988H19.054L13.694 11.1265L20 19.4619H15.0627L11.196 14.4059L6.77067 19.4619H4.316L10.0493 12.9085L4 5.00054H9.06267L12.558 9.62188L16.6007 4.99988ZM15.74 17.9939H17.0993L8.324 6.39121H6.86533L15.74 17.9939Z" fill="currentColor"/>`,
+    width: 24,
+    height: 24,
+  },
+  linkedin: {
+    body: `<g fill="none"><path d="M18.0606 4H5.93939C4.8683 4 4 4.8683 4 5.93939V18.0606C4 19.1317 4.8683 20 5.93939 20H18.0606C19.1317 20 20 19.1317 20 18.0606V5.93939C20 4.8683 19.1317 4 18.0606 4Z" stroke="currentColor" stroke-width="1.6"/><path d="M8.36328 10.7879V16.1212" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.36423 9.09091C8.89978 9.09091 9.33393 8.65677 9.33393 8.12122C9.33393 7.58567 8.89978 7.15152 8.36423 7.15152C7.82868 7.15152 7.39453 7.58567 7.39453 8.12122C7.39453 8.65677 7.82868 9.09091 8.36423 9.09091Z" fill="currentColor"/><path d="M15.6361 16.1212V12.9697C15.6361 11.7647 14.6592 10.7879 13.4543 10.7879C12.2493 10.7879 11.2725 11.7647 11.2725 12.9697V16.1212" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></g>`,
+    width: 24,
+    height: 24,
   },
   gemini: {
     width: 32,

From 6902969a09864ee250cf0e1f326b2ca53cb1cfa1 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 19 Feb 2026 15:42:34 +0530
Subject: [PATCH 09/26] chore: Remove `vue-multiselect` package and styles from
 codebase (#13585)

---
 app/javascript/dashboard/App.vue              |   6 -
 .../dashboard/assets/scss/_base.scss          |  15 +-
 .../dashboard/assets/scss/_woot.scss          |   1 -
 .../assets/scss/plugins/_multiselect.scss     | 273 ------------------
 .../dashboard/conversation/ContactPanel.vue   |  12 -
 .../conversation/ConversationAction.vue       |   6 +-
 .../reports/components/ReportsWrapper.vue     |  78 +----
 app/javascript/entrypoints/dashboard.js       |   2 -
 package.json                                  |   1 -
 pnpm-lock.yaml                                |   9 -
 10 files changed, 7 insertions(+), 396 deletions(-)
 delete mode 100644 app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 61d7631e7..8912c03d1 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -164,10 +164,4 @@ export default {
 .v-popper--theme-tooltip .v-popper__arrow-container {
   display: none;
 }
-
-.multiselect__input {
-  margin-bottom: 0px !important;
-}
 </style>
-
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>
diff --git a/app/javascript/dashboard/assets/scss/_base.scss b/app/javascript/dashboard/assets/scss/_base.scss
index d3d3f6726..84c8a4b0f 100644
--- a/app/javascript/dashboard/assets/scss/_base.scss
+++ b/app/javascript/dashboard/assets/scss/_base.scss
@@ -78,7 +78,7 @@ textarea {
   }
 }
 
-$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.multiselect__input):not(.no-margin)";
+$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.no-margin)";
 
 #{$form-input-selector} {
   @apply field-base h-10;
@@ -92,7 +92,7 @@ $form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not
   }
 }
 
-input[type='file']:not(.multiselect__input) {
+input[type='file'] {
   @apply leading-[1.15] mb-4 border-0 bg-transparent text-sm;
 }
 
@@ -126,13 +126,6 @@ label:has(.help-text) {
   }
 }
 
-// Error handling
-.has-multi-select-error {
-  div.multiselect {
-    @apply mb-1;
-  }
-}
-
 // FormKit support
 .formkit-outer[data-invalid='true'] {
   #{$form-input-selector},
@@ -150,9 +143,7 @@ label:has(.help-text) {
   #{$form-input-selector},
   input:not([type]),
   textarea,
-  select,
-  .multiselect > .multiselect__tags,
-  .multiselect:not(.no-margin) {
+  select {
     @apply field-error;
   }
 
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 81a4569b5..27764d150 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -13,7 +13,6 @@
 @import 'base';
 
 // Plugins
-@import 'plugins/multiselect';
 @import 'plugins/date-picker';
 
 html,
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
deleted file mode 100644
index 9567d66c3..000000000
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ /dev/null
@@ -1,273 +0,0 @@
-@mixin label-multiselect-hover {
-  &::after {
-    @apply text-n-brand;
-  }
-
-  &:hover {
-    @apply bg-n-slate-3;
-
-    &::after {
-      @apply text-n-blue-11;
-    }
-  }
-}
-
-.multiselect {
-  &:not(.no-margin) {
-    @apply mb-4;
-  }
-
-  &.invalid .multiselect__tags {
-    @apply border-0 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;
-  }
-
-  &.multiselect--disabled {
-    @apply opacity-50  rounded-lg cursor-not-allowed pointer-events-auto;
-
-    .multiselect__select {
-      @apply cursor-not-allowed bg-transparent rounded-lg;
-    }
-  }
-
-  .multiselect--active {
-    > .multiselect__tags {
-      @apply outline-n-blue-border;
-    }
-  }
-
-  .multiselect__select {
-    @apply min-h-[2.875rem] p-0 right-0 top-0;
-
-    &::before {
-      @apply right-0;
-    }
-  }
-
-  .multiselect__content-wrapper {
-    @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 {
-    @apply max-w-full;
-
-    .multiselect__option {
-      @apply text-sm font-normal flex justify-between items-center;
-
-      span {
-        @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap w-fit;
-      }
-
-      p {
-        @apply mb-0;
-      }
-
-      &::after {
-        @apply bottom-0 flex items-center justify-center text-center relative px-1 leading-tight;
-      }
-
-      &.multiselect__option--highlight {
-        @apply bg-n-alpha-black2 text-n-slate-12;
-      }
-
-      &.multiselect__option--highlight:hover {
-        @apply bg-n-brand/10 text-n-slate-12;
-
-        &::after {
-          @apply bg-transparent text-center text-n-slate-12;
-        }
-      }
-
-      &.multiselect__option--highlight::after {
-        @apply bg-transparent text-n-slate-12;
-      }
-
-      &.multiselect__option--selected {
-        @apply bg-n-brand/20 text-n-slate-12;
-
-        &::after {
-          @apply bg-transparent;
-        }
-
-        &.multiselect__option--highlight:hover {
-          @apply bg-transparent;
-
-          &::after:hover {
-            @apply text-n-slate-12 bg-transparent;
-          }
-        }
-      }
-    }
-  }
-
-  .multiselect__tags {
-    @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 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-n-slate-10 font-normal pt-3;
-  }
-
-  .multiselect__tag {
-    @apply bg-n-alpha-white mt-1 text-n-slate-12 pr-6 pl-2.5 py-1.5;
-  }
-
-  .multiselect__tag-icon {
-    @include label-multiselect-hover;
-  }
-
-  .multiselect__input {
-    @apply text-sm h-[2.875rem] mb-0 p-0 shadow-none border-transparent hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none active:border-transparent active:shadow-none;
-  }
-
-  .multiselect__single {
-    @apply bg-transparent text-n-slate-12 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
-  }
-}
-
-.sidebar-labels-wrap {
-  &.has-edited,
-  &:hover {
-    .multiselect {
-      @apply cursor-pointer;
-    }
-  }
-
-  .multiselect {
-    > .multiselect__select {
-      @apply invisible;
-    }
-
-    > .multiselect__tags {
-      @apply outline-transparent;
-    }
-
-    &.multiselect--active > .multiselect__tags {
-      @apply outline-n-blue-border;
-    }
-  }
-}
-
-.multiselect-wrap--small {
-  // To be removed one SLA reports date picker is created
-  &.tiny {
-    .multiselect.no-margin {
-      @apply min-h-[32px];
-    }
-
-    .multiselect__select {
-      @apply min-h-[32px] h-8;
-
-      &::before {
-        @apply top-[60%];
-      }
-    }
-
-    .multiselect__tags {
-      @apply min-h-[32px] max-h-[32px];
-
-      .multiselect__single {
-        @apply pt-1 pb-1;
-      }
-    }
-  }
-
-  .multiselect__tags,
-  .multiselect__input,
-  .multiselect {
-    @apply text-n-slate-12 rounded-lg text-sm  min-h-[2.5rem];
-  }
-
-  .multiselect__input {
-    @apply h-[2.375rem] min-h-[2.375rem];
-  }
-
-  .multiselect__single {
-    @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 {
-    @apply m-0 py-2 px-0.5;
-  }
-
-  .multiselect__tag {
-    @apply py-[6px] my-[1px];
-  }
-
-  .multiselect__select {
-    @apply min-h-[2.5rem];
-  }
-
-  .multiselect--disabled .multiselect__current,
-  .multiselect--disabled .multiselect__select {
-    @apply bg-transparent;
-  }
-}
-
-.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 {
-    @apply items-center flex;
-  }
-
-  .multiselect__tags,
-  .multiselect__input,
-  .multiselect {
-    @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: 0 !important;
-  }
-
-  .multiselect__single {
-    @apply items-center flex m-0 text-sm py-1 px-0.5 bg-transparent text-n-slate-12;
-  }
-
-  .multiselect__placeholder {
-    @apply m-0 py-1 px-0.5;
-  }
-
-  .multiselect__select {
-    @apply min-h-[3rem];
-  }
-
-  .multiselect--disabled .multiselect__current,
-  .multiselect--disabled .multiselect__select {
-    @apply bg-transparent;
-  }
-
-  .multiselect__tags-wrap {
-    @apply flex-shrink-0;
-  }
-}
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index b163bfdc8..653b43840 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -308,17 +308,5 @@ onMounted(() => {
   .contact--profile {
     @apply pb-3 border-b border-solid border-n-weak;
   }
-
-  .conversation--actions .multiselect-wrap--small {
-    .multiselect {
-      @apply box-border pl-6;
-    }
-
-    .multiselect__element {
-      span {
-        @apply w-full;
-      }
-    }
-  }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index 35d985c77..4c14ba2ab 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -211,7 +211,7 @@ export default {
 
 <template>
   <div>
-    <div class="multiselect-wrap--small">
+    <div>
       <ContactDetailsItem
         compact
         :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
@@ -242,7 +242,7 @@ export default {
         @select="onClickAssignAgent"
       />
     </div>
-    <div class="multiselect-wrap--small">
+    <div>
       <ContactDetailsItem
         compact
         :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
@@ -261,7 +261,7 @@ export default {
         @select="onClickAssignTeam"
       />
     </div>
-    <div class="multiselect-wrap--small">
+    <div>
       <ContactDetailsItem compact :title="$t('CONVERSATION.PRIORITY.TITLE')" />
       <MultiselectDropdown
         :options="priorityOptions"
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 045b8b568..a0101cc3c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
@@ -1,83 +1,7 @@
 <template>
-  <div class="reports--wrapper overflow-auto bg-n-surface-1 w-full px-6">
+  <div class="overflow-auto bg-n-surface-1 w-full px-6">
     <div class="max-w-5xl mx-auto pb-12">
       <router-view />
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.reports--wrapper {
-  :deep() {
-    .multiselect--disabled {
-      @apply opacity-50 border border-n-weak rounded-md cursor-not-allowed;
-    }
-
-    .multiselect__content-wrapper {
-      @apply bg-n-solid-2 border border-n-weak text-n-slate-12;
-    }
-
-    .multiselect__tags {
-      @apply bg-n-slate-1 border border-n-weak m-0 min-h-[2.875rem] pt-0;
-
-      input[type='text'] {
-        @apply bg-n-alpha-3 border-n-weak placeholder:text-n-slate-11 min-h-[2.375rem] h-[2.375rem] px-0.5 py-0 text-sm;
-      }
-    }
-
-    .multiselect__placeholder {
-      @apply text-n-slate-11;
-    }
-
-    .multiselect__select {
-      @apply min-h-0;
-    }
-
-    .multiselect__single {
-      @apply bg-n-alpha-3 text-n-slate-11;
-    }
-
-    .multiselect__input {
-      @apply text-sm h-[2.375rem] mb-0 py-0;
-    }
-
-    .multiselect__tags,
-    .multiselect__input,
-    .multiselect {
-      @apply bg-n-alpha-3 !border-n-weak text-n-slate-12 rounded-lg text-sm min-h-[2.5rem];
-    }
-
-    .mx-input-wrapper {
-      @apply bg-n-alpha-3 border-n-weak text-n-slate-12 rounded-lg text-sm;
-
-      input {
-        @apply border-n-weak text-sm;
-      }
-    }
-
-    .multiselect__option {
-      @apply flex items-center;
-    }
-
-    .mx-datepicker {
-      .mx-input {
-        background-color: transparent !important;
-      }
-
-      .mx-input-wrapper input::placeholder {
-        @apply text-n-slate-11;
-      }
-
-      .mx-input-wrapper input {
-        @apply text-n-slate-11;
-      }
-    }
-
-    .multiselect--active:not(.multiselect--above) .multiselect__current,
-    .multiselect--active:not(.multiselect--above) .multiselect__input,
-    .multiselect--active:not(.multiselect--above) .multiselect__tags {
-      @apply rounded-b-none;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/entrypoints/dashboard.js b/app/javascript/entrypoints/dashboard.js
index cd2cda6bd..d0c6c808d 100644
--- a/app/javascript/entrypoints/dashboard.js
+++ b/app/javascript/entrypoints/dashboard.js
@@ -5,7 +5,6 @@ import axios from 'axios';
 // Global Components
 import hljsVuePlugin from '@highlightjs/vue-plugin';
 
-import Multiselect from 'vue-multiselect';
 import { plugin, defaultConfig } from '@formkit/vue';
 import WootWizard from 'components/ui/Wizard.vue';
 import FloatingVue from 'floating-vue';
@@ -92,7 +91,6 @@ app.use(FloatingVue, {
 });
 app.use(hljsVuePlugin);
 
-app.component('multiselect', Multiselect);
 app.component('woot-wizard', WootWizard);
 app.component('fluent-icon', FluentIcon);
 
diff --git a/package.json b/package.json
index b062495a0..e36b2f53f 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,6 @@
     "vue-dompurify-html": "^5.1.0",
     "vue-i18n": "9.14.5",
     "vue-letter": "^0.2.1",
-    "vue-multiselect": "3.1.0",
     "vue-router": "~4.4.5",
     "vue-upload-component": "^3.1.17",
     "vue-virtual-scroller": "^2.0.0-beta.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a1b6f35f..e880b4aaf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -223,9 +223,6 @@ importers:
       vue-letter:
         specifier: ^0.2.1
         version: 0.2.1
-      vue-multiselect:
-        specifier: 3.1.0
-        version: 3.1.0
       vue-router:
         specifier: ~4.4.5
         version: 4.4.5(vue@3.5.12(typescript@5.6.2))
@@ -4628,10 +4625,6 @@ packages:
   vue-letter@0.2.1:
     resolution: {integrity: sha512-IYWp47XUikjKfEniWYlFxeJFKABZwAE5IEjz866qCBytBr2dzqVDdjoMDpBP//krxkzN/QZYyHe6C09y/IODYg==}
 
-  vue-multiselect@3.1.0:
-    resolution: {integrity: sha512-+i/fjTqFBpaay9NP+lU7obBeNaw2DdFDFs4mqhsM0aEtKRdvIf7CfREAx2o2B4XDmPrBt1r7x1YCM3BOMLaUgQ==}
-    engines: {node: '>= 14.18.1', npm: '>= 6.14.15'}
-
   vue-observe-visibility@2.0.0-alpha.1:
     resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
     peerDependencies:
@@ -9699,8 +9692,6 @@ snapshots:
     dependencies:
       lettersanitizer: 1.0.6
 
-  vue-multiselect@3.1.0: {}
-
   vue-observe-visibility@2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       vue: 3.5.12(typescript@5.6.2)

From f826dc2d15d7ec407e23770ccf8279f11473e749 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Thu, 19 Feb 2026 17:48:06 -0800
Subject: [PATCH 10/26] fix: Rate-limit meta endpoint calls to 30/min (#13596)

Meta endpoints are now rate limited to 1 call per every minute. This rate limit is done at the user level not the browser.
---
 config/initializers/rack_attack.rb | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/config/initializers/rack_attack.rb b/config/initializers/rack_attack.rb
index 1f500243a..b193c2e14 100644
--- a/config/initializers/rack_attack.rb
+++ b/config/initializers/rack_attack.rb
@@ -221,6 +221,19 @@ class Rack::Attack
     match_data[:account_id] if match_data.present?
   end
 
+  ## Prevent increased use of conversations meta API per user
+  throttle('/api/v1/accounts/:account_id/conversations/meta/user',
+           limit: ENV.fetch('RATE_LIMIT_CONVERSATIONS_META', '30').to_i, period: 1.minute) do |req|
+    match_data = %r{/api/v1/accounts/(?<account_id>\d+)/conversations/meta}.match(req.path)
+    next unless match_data.present? && req.get?
+
+    user_uid = req.get_header('HTTP_UID')
+    api_access_token = req.get_header('HTTP_API_ACCESS_TOKEN') || req.get_header('api_access_token')
+    user_identifier = user_uid.presence || api_access_token.presence
+
+    "#{user_identifier}:#{match_data[:account_id]}" if user_identifier.present?
+  end
+
   ## ----------------------------------------------- ##
 end
 

From 26c38a90f2c2bfb371087862818f0c0a255e4643 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 19 Feb 2026 17:55:08 -0800
Subject: [PATCH 11/26] chore(deps): bump nokogiri from 1.18.9 to 1.19.1
 (#13586)

Bumps [nokogiri](https://github.com/sparklemotion/nokogiri) from 1.18.9
to 1.19.1.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/sparklemotion/nokogiri/releases">nokogiri's
releases</a>.</em></p>
<blockquote>
<h2>v1.19.1 / 2026-02-16</h2>
<h3>Security</h3>
<ul>
<li>[CRuby] Address unchecked return value from
<code>xmlC14NExecute</code> which was a contributing cause to ruby-saml
GHSA-x4h9-gwv3-r4m4. See <a
href="https://github.com/sparklemotion/nokogiri/security/advisories/GHSA-wx95-c6cv-8532">GHSA-wx95-c6cv-8532</a>
for more information.</li>
</ul>
<!-- raw HTML omitted -->

<pre><code>cfdb0eafd9a554a88f12ebcc688d2b9005f9fce42b00b970e3dc199587b27f32
nokogiri-1.19.1-aarch64-linux-gnu.gem
1e2150ab43c3b373aba76cd1190af7b9e92103564063e48c474f7600923620b5
nokogiri-1.19.1-aarch64-linux-musl.gem
0a39ed59abe3bf279fab9dd4c6db6fe8af01af0608f6e1f08b8ffa4e5d407fa3
nokogiri-1.19.1-arm-linux-gnu.gem
3a18e559ee499b064aac6562d98daab3d39ba6cbb4074a1542781b2f556db47d
nokogiri-1.19.1-arm-linux-musl.gem
dfe2d337e6700eac47290407c289d56bcf85805d128c1b5a6434ddb79731cb9e
nokogiri-1.19.1-arm64-darwin.gem
1e0bda88b1c6409f0edb9e0c25f1bf9ff4fa94c3958f492a10fcf50dda594365
nokogiri-1.19.1-java.gem
110d92ae57694ae7866670d298a5d04cd150fae5a6a7849957d66f171e6aec9b
nokogiri-1.19.1-x64-mingw-ucrt.gem
7093896778cc03efb74b85f915a775862730e887f2e58d6921e3fa3d981e68bf
nokogiri-1.19.1-x86_64-darwin.gem
1a4902842a186b4f901078e692d12257678e6133858d0566152fe29cdb98456a
nokogiri-1.19.1-x86_64-linux-gnu.gem
4267f38ad4fc7e52a2e7ee28ed494e8f9d8eb4f4b3320901d55981c7b995fc23
nokogiri-1.19.1-x86_64-linux-musl.gem
598b327f36df0b172abd57b68b18979a6e14219353bca87180c31a51a00d5ad3
nokogiri-1.19.1.gem
</code></pre>
<!-- raw HTML omitted -->
<h2>v1.19.0 / 2025-12-28</h2>
<h4>Ruby</h4>
<p>This release is focused on changes to Ruby version support, and is
otherwise functionally identical to v1.18.10.</p>
<ul>
<li>Introduce native gem support for Ruby 4.0. <a
href="https://redirect.github.com/sparklemotion/nokogiri/issues/3590">#3590</a></li>
<li>End support for Ruby 3.1, for which <a
href="https://www.ruby-lang.org/en/downloads/branches/">upstream support
ended 2025-03-26</a>.</li>
<li>End support for JRuby 9.4 (which targets Ruby 3.1
compatibility).</li>
</ul>
<!-- raw HTML omitted -->

<pre><code>11a97ecc3c0e7e5edcf395720b10860ef493b768f6aa80c539573530bc933767
nokogiri-1.19.0-aarch64-linux-gnu.gem
eb70507f5e01bc23dad9b8dbec2b36ad0e61d227b42d292835020ff754fb7ba9
nokogiri-1.19.0-aarch64-linux-musl.gem
572a259026b2c8b7c161fdb6469fa2d0edd2b61cd599db4bbda93289abefbfe5
nokogiri-1.19.0-arm-linux-gnu.gem
23ed90922f1a38aed555d3de4d058e90850c731c5b756d191b3dc8055948e73c
nokogiri-1.19.0-arm-linux-musl.gem
0811dfd936d5f6dd3f6d32ef790568bf29b2b7bead9ba68866847b33c9cf5810
nokogiri-1.19.0-arm64-darwin.gem
5f3a70e252be641d8a4099f7fb4cc25c81c632cb594eec9b4b8f2ca8be4374f3
nokogiri-1.19.0-java.gem
05d7ed2d95731edc9bef2811522dc396df3e476ef0d9c76793a9fca81cab056b
nokogiri-1.19.0-x64-mingw-ucrt.gem
1dad56220b603a8edb9750cd95798bffa2b8dd9dd9aa47f664009ee5b43e3067
nokogiri-1.19.0-x86_64-darwin.gem
f482b95c713d60031d48c44ce14562f8d2ce31e3a9e8dd0ccb131e9e5a68b58c
nokogiri-1.19.0-x86_64-linux-gnu.gem
1c4ca6b381622420073ce6043443af1d321e8ed93cc18b08e2666e5bd02ffae4
nokogiri-1.19.0-x86_64-linux-musl.gem
e304d21865f62518e04f2bf59f93bd3a97ca7b07e7f03952946d8e1c05f45695
nokogiri-1.19.0.gem
</code></pre>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/sparklemotion/nokogiri/blob/main/CHANGELOG.md">nokogiri's
changelog</a>.</em></p>
<blockquote>
<h2>v1.19.1 / 2026-02-16</h2>
<h3>Security</h3>
<ul>
<li>[CRuby] Address unchecked return value from
<code>xmlC14NExecute</code> which was a contributing cause to ruby-saml
GHSA-x4h9-gwv3-r4m4. See <a
href="https://github.com/sparklemotion/nokogiri/security/advisories/GHSA-wx95-c6cv-8532">GHSA-wx95-c6cv-8532</a>
for more information.</li>
</ul>
<h2>v1.19.0 / 2025-12-28</h2>
<h4>Ruby</h4>
<p>This release is focused on changes to Ruby version support, and is
otherwise functionally identical to v1.18.10.</p>
<ul>
<li>Introduce native gem support for Ruby 4.0. <a
href="https://redirect.github.com/sparklemotion/nokogiri/issues/3590">#3590</a></li>
<li>End support for Ruby 3.1, for which <a
href="https://www.ruby-lang.org/en/downloads/branches/">upstream support
ended 2025-03-26</a>.</li>
<li>End support for JRuby 9.4 (which targets Ruby 3.1
compatibility).</li>
</ul>
<h2>v1.18.10 / 2025-09-15</h2>
<h3>Dependencies</h3>
<ul>
<li>[CRuby] Vendored libxml2 is updated to <a
href="https://gitlab.gnome.org/GNOME/libxml2/-/releases/v2.13.9">v2.13.9</a>.
Note that the security fixes published in v2.13.9 were already present
in Nokogiri v1.18.9.</li>
<li>[CRuby] [Windows and MacOS] Vendored libiconv is updated to <a
href="https://savannah.gnu.org/news/?id=10703">v1.18</a></li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/d9130457369de8a6efcb764e6da2cb80d5d3b6dd"><code>d913045</code></a>
version bump to v1.19.1</li>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/b81cb9869e8ed7d1785da3363ef490f455da96eb"><code>b81cb98</code></a>
doc: update CHANGELOG for upcoming v1.19.1</li>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/8e668095c6147def4a3ec044df5f2a478c8161c3"><code>8e66809</code></a>
C14n raise on failure (<a
href="https://redirect.github.com/sparklemotion/nokogiri/issues/3600">#3600</a>)</li>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/5b77f3d1c48cc09c92d10046c448a0866380eb4a"><code>5b77f3d</code></a>
Raise RuntimeError when canonicalization fails</li>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/edc559565819459d92f6db609f068f50491a57f9"><code>edc5595</code></a>
Thank sponsors in the README</li>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/d4dc245dfafd7ba42538051b0979306c8e5dc6f2"><code>d4dc245</code></a>
dep: update rdoc to v7</li>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/d77bfb66302532b90c0f340ed6b4ae74f275dde8"><code>d77bfb6</code></a>
version bump to v1.19.0</li>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/1eb5c2c035b360fd1195de0b274e901b6e0c12dd"><code>1eb5c2c</code></a>
dev: convert scripts/test-gem-set to use mise</li>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/88a120fd8198cd49b7cbe6388c92cd92d776407d"><code>88a120f</code></a>
dep: Add native Ruby 4 support, drop Ruby 3.1 support (v1.19.x) (<a
href="https://redirect.github.com/sparklemotion/nokogiri/issues/3592">#3592</a>)</li>
<li><a
href="https://github.com/sparklemotion/nokogiri/commit/f8c8f74e846ea49d2cb221710cc08618842ba21e"><code>f8c8f74</code></a>
Skip the parser compression test for Windows system libs</li>
<li>Additional commits viewable in <a
href="https://github.com/sparklemotion/nokogiri/compare/v1.18.9...v1.19.1">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=nokogiri&package-manager=bundler&previous-version=1.18.9&new-version=1.19.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/chatwoot/chatwoot/network/alerts).

</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 Gemfile.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index 717ec2a02..aad0438cf 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -583,14 +583,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.18.9)
+    nokogiri (1.19.1)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.18.9-arm64-darwin)
+    nokogiri (1.19.1-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-darwin)
+    nokogiri (1.19.1-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-linux-gnu)
+    nokogiri (1.19.1-x86_64-linux-gnu)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)

From dbab0fe8da3b831d7c13cbdb9176faadc93eff63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nat=C3=A3?= <66445721+dollyzn@users.noreply.github.com>
Date: Fri, 20 Feb 2026 02:54:37 -0300
Subject: [PATCH 12/26] fix: search header overlap with new conversation form
 (#13548)

---
 app/javascript/dashboard/components/ChannelSelector.vue         | 2 +-
 .../dashboard/modules/search/components/SearchResultSection.vue | 2 +-
 .../dashboard/contacts/components/ContactsBulkActionBar.vue     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/components/ChannelSelector.vue b/app/javascript/dashboard/components/ChannelSelector.vue
index 9e593af51..2e3ea7d86 100644
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -47,7 +47,7 @@ defineProps({
 
     <div
       v-if="isComingSoon"
-      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95 cursor-not-allowed"
+      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-surface-1/90 via-n-surface-1/70 to-n-surface-1/95 cursor-not-allowed"
     >
       <span class="text-n-slate-12 font-medium text-sm">
         {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
index 40d1ca6c6..77a7f3bd3 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -33,7 +33,7 @@ const titleCase = computed(() => props.title.toLowerCase());
   <section class="mx-0 mb-3">
     <div
       v-if="showTitle"
-      class="sticky top-0 pt-2 py-3 z-50 bg-gradient-to-b from-n-background from-80% to-transparent mb-3 -mx-1.5 px-1.5"
+      class="sticky top-0 pt-2 py-3 z-20 bg-gradient-to-b from-n-surface-1 from-80% to-transparent mb-3 -mx-1.5 px-1.5"
     >
       <h3 class="text-sm text-n-slate-11">{{ title }}</h3>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue
index e8ddd5223..e56a2dda7 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue
@@ -94,7 +94,7 @@ const handleAssignLabels = labels => {
 
 <template>
   <div
-    class="sticky top-0 z-10 bg-gradient-to-b from-n-background from-90% to-transparent px-6 pt-1 pb-2"
+    class="sticky top-0 z-10 bg-gradient-to-b from-n-surface-1 from-90% to-transparent pt-1 pb-2"
   >
     <BulkSelectBar
       v-model="selectionModel"

From db7e02b93b7aacad0f699366e9363cacb2526cbf Mon Sep 17 00:00:00 2001
From: Aakash Bakhle <48802744+aakashb95@users.noreply.github.com>
Date: Fri, 20 Feb 2026 12:16:43 +0530
Subject: [PATCH 13/26] feat: captain channel type langfuse metadata (#13574)

# Pull Request Template

## Description

Adds channel type to Captain assistant traces in Langfuse

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration.

<img width="906" height="672" alt="image"
src="https://github.com/user-attachments/assets/224cee95-56aa-4672-8f74-0c0052251db9"
/>

<img width="908" height="611" alt="image"
src="https://github.com/user-attachments/assets/ddd8ef0d-47c1-450c-a09f-27e82a34d04d"
/>


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 enterprise/app/helpers/captain/chat_helper.rb | 20 +++++++++----------
 .../captain/assistant/agent_runner_service.rb |  4 +++-
 .../assistant/agent_runner_service_spec.rb    |  1 +
 .../llm/assistant_chat_service_spec.rb        | 13 ++++++++++++
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/enterprise/app/helpers/captain/chat_helper.rb b/enterprise/app/helpers/captain/chat_helper.rb
index 2734e510e..d5ac6df33 100644
--- a/enterprise/app/helpers/captain/chat_helper.rb
+++ b/enterprise/app/helpers/captain/chat_helper.rb
@@ -53,15 +53,13 @@ module Captain::ChatHelper
     chat.on_end_message { |message| record_llm_generation(chat, message) }
     chat.on_tool_call { |tool_call| handle_tool_call(tool_call) }
     chat.on_tool_result { |result| handle_tool_result(result) }
-
     chat
   end
 
   def handle_tool_call(tool_call)
     persist_thinking_message(tool_call)
     start_tool_span(tool_call)
-    @pending_tool_calls ||= []
-    @pending_tool_calls.push(tool_call)
+    (@pending_tool_calls ||= []).push(tool_call)
   end
 
   def handle_tool_result(result)
@@ -87,8 +85,9 @@ module Captain::ChatHelper
       messages: chat ? chat.messages.map { |m| { role: m.role.to_s, content: m.content.to_s } } : @messages,
       temperature: temperature,
       metadata: {
-        assistant_id: @assistant&.id
-      }
+        assistant_id: @assistant&.id,
+        channel_type: resolved_channel_type
+      }.compact
     }
   end
 
@@ -104,6 +103,10 @@ module Captain::ChatHelper
     @account&.id || @assistant&.account_id
   end
 
+  def resolved_channel_type
+    Conversation.find_by(account_id: resolved_account_id, display_id: @conversation_id)&.inbox&.channel_type if @conversation_id
+  end
+
   # Ensures all LLM calls and tool executions within an agentic loop
   # are grouped under a single trace/session in Langfuse.
   #
@@ -127,10 +130,7 @@ module Captain::ChatHelper
   end
 
   def log_chat_completion_request
-    Rails.logger.info(
-      "#{self.class.name} Assistant: #{@assistant.id}, Requesting chat completion
-      for messages #{@messages} with #{@tools&.length || 0} tools
-      "
-    )
+    Rails.logger.info("#{self.class.name} Assistant: #{@assistant.id}, Requesting chat completion " \
+                      "for messages #{@messages} with #{@tools&.length || 0} tools")
   end
 end
diff --git a/enterprise/app/services/captain/assistant/agent_runner_service.rb b/enterprise/app/services/captain/assistant/agent_runner_service.rb
index c832da93e..9aeee605f 100644
--- a/enterprise/app/services/captain/assistant/agent_runner_service.rb
+++ b/enterprise/app/services/captain/assistant/agent_runner_service.rb
@@ -114,6 +114,7 @@ class Captain::Assistant::AgentRunnerService
 
     if @conversation
       state[:conversation] = @conversation.attributes.symbolize_keys.slice(*CONVERSATION_STATE_ATTRIBUTES)
+      state[:channel_type] = @conversation.inbox&.channel_type
       state[:contact] = @conversation.contact.attributes.symbolize_keys.slice(*CONTACT_STATE_ATTRIBUTES) if @conversation.contact
     end
 
@@ -151,7 +152,8 @@ class Captain::Assistant::AgentRunnerService
       ATTR_LANGFUSE_USER_ID => state[:account_id],
       format(ATTR_LANGFUSE_METADATA, 'assistant_id') => state[:assistant_id],
       format(ATTR_LANGFUSE_METADATA, 'conversation_id') => conversation[:id],
-      format(ATTR_LANGFUSE_METADATA, 'conversation_display_id') => conversation[:display_id]
+      format(ATTR_LANGFUSE_METADATA, 'conversation_display_id') => conversation[:display_id],
+      format(ATTR_LANGFUSE_METADATA, 'channel_type') => state[:channel_type]
     }.compact.transform_values(&:to_s)
   end
 
diff --git a/spec/enterprise/services/captain/assistant/agent_runner_service_spec.rb b/spec/enterprise/services/captain/assistant/agent_runner_service_spec.rb
index bbf712622..c3019b82c 100644
--- a/spec/enterprise/services/captain/assistant/agent_runner_service_spec.rb
+++ b/spec/enterprise/services/captain/assistant/agent_runner_service_spec.rb
@@ -278,6 +278,7 @@ RSpec.describe Captain::Assistant::AgentRunnerService do
         contact_id: contact.id,
         status: conversation.status
       )
+      expect(state[:channel_type]).to eq(inbox.channel_type)
     end
 
     it 'includes contact attributes when contact is present' do
diff --git a/spec/enterprise/services/captain/llm/assistant_chat_service_spec.rb b/spec/enterprise/services/captain/llm/assistant_chat_service_spec.rb
index bc4ff0b63..4711e5f7e 100644
--- a/spec/enterprise/services/captain/llm/assistant_chat_service_spec.rb
+++ b/spec/enterprise/services/captain/llm/assistant_chat_service_spec.rb
@@ -28,6 +28,19 @@ RSpec.describe Captain::Llm::AssistantChatService do
     allow(mock_chat).to receive(:messages).and_return([])
   end
 
+  describe 'instrumentation metadata' do
+    it 'passes channel_type to the agent session instrumentation' do
+      service = described_class.new(assistant: assistant, conversation_id: conversation.display_id)
+
+      expect(service).to receive(:instrument_agent_session).with(
+        hash_including(metadata: hash_including(channel_type: conversation.inbox.channel_type))
+      ).and_yield
+
+      allow(mock_chat).to receive(:ask).and_return(mock_response)
+      service.generate_response(message_history: [{ role: 'user', content: 'Hello' }])
+    end
+  end
+
   describe 'image analysis' do
     context 'when user sends a message with an image attachment' do
       let(:message_history) do

From d8f4bb940e522191f57678b853593bd2c352f43f Mon Sep 17 00:00:00 2001
From: Aakash Bakhle <48802744+aakashb95@users.noreply.github.com>
Date: Fri, 20 Feb 2026 19:08:36 +0530
Subject: [PATCH 14/26] feat: add resolve_conversation tool for Captain V2
 scenarios (#13597)

# Pull Request Template

## Description

Adds a new built-in tool that allows Captain scenarios to resolve
conversations programmatically. This enables automated workflows like
the misdirected contact deflector to close conversations after handling
them, while still allowing human review via label filtering.


## Type of change

Please delete options that are not relevant.

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration.

tested by mentioning it to be used in captain v2 scenario

<img width="1180" height="828" alt="image"
src="https://github.com/user-attachments/assets/e70baf96-0c70-407e-af2c-328500ac5434"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Tanmay Deep Sharma <32020192+tds-1@users.noreply.github.com>
---
 config/agents/tools.yml                       |  5 ++
 config/locales/en.yml                         |  1 +
 .../enterprise/activity_message_handler.rb    | 35 +++++++------
 .../tools/resolve_conversation_tool.rb        | 27 ++++++++++
 lib/current.rb                                |  2 +
 .../tools/resolve_conversation_tool_spec.rb   | 52 +++++++++++++++++++
 6 files changed, 105 insertions(+), 17 deletions(-)
 create mode 100644 enterprise/lib/captain/tools/resolve_conversation_tool.rb
 create mode 100644 spec/enterprise/lib/captain/tools/resolve_conversation_tool_spec.rb

diff --git a/config/agents/tools.yml b/config/agents/tools.yml
index c2faf75e7..ff4f7d28f 100644
--- a/config/agents/tools.yml
+++ b/config/agents/tools.yml
@@ -30,6 +30,11 @@
   description: 'Search FAQ responses using semantic similarity'
   icon: 'search'
 
+- id: resolve_conversation
+  title: 'Resolve Conversation'
+  description: 'Resolve a conversation when the issue has been addressed'
+  icon: 'checkmark'
+
 - id: handoff
   title: 'Handoff to Human'
   description: 'Hand off the conversation to a human agent'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 07d9b0e2f..a058d28c7 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -229,6 +229,7 @@ en:
     activity:
       captain:
         resolved: 'Conversation was marked resolved by %{user_name} due to inactivity'
+        resolved_by_tool: 'Conversation was marked resolved by %{user_name}: %{reason}'
         open: 'Conversation was marked open by %{user_name}'
       agent_bot:
         error_moved_to_open: 'Conversation was marked open by system due to an error with the agent bot.'
diff --git a/enterprise/app/models/enterprise/activity_message_handler.rb b/enterprise/app/models/enterprise/activity_message_handler.rb
index e6a93718f..66195ec46 100644
--- a/enterprise/app/models/enterprise/activity_message_handler.rb
+++ b/enterprise/app/models/enterprise/activity_message_handler.rb
@@ -1,22 +1,23 @@
 module Enterprise::ActivityMessageHandler
   def automation_status_change_activity_content
-    if Current.executed_by.instance_of?(Captain::Assistant)
-      locale = Current.executed_by.account.locale
-      if resolved?
-        I18n.t(
-          'conversations.activity.captain.resolved',
-          user_name: Current.executed_by.name,
-          locale: locale
-        )
-      elsif open?
-        I18n.t(
-          'conversations.activity.captain.open',
-          user_name: Current.executed_by.name,
-          locale: locale
-        )
-      end
-    else
-      super
+    return super unless Current.executed_by.instance_of?(Captain::Assistant)
+
+    locale = Current.executed_by.account.locale
+    key = captain_activity_key
+    return unless key
+
+    I18n.t(key, user_name: Current.executed_by.name, reason: Current.captain_resolve_reason, locale: locale)
+  end
+
+  private
+
+  def captain_activity_key
+    if resolved? && Current.captain_resolve_reason.present?
+      'conversations.activity.captain.resolved_by_tool'
+    elsif resolved?
+      'conversations.activity.captain.resolved'
+    elsif open?
+      'conversations.activity.captain.open'
     end
   end
 end
diff --git a/enterprise/lib/captain/tools/resolve_conversation_tool.rb b/enterprise/lib/captain/tools/resolve_conversation_tool.rb
new file mode 100644
index 000000000..0d2563a8b
--- /dev/null
+++ b/enterprise/lib/captain/tools/resolve_conversation_tool.rb
@@ -0,0 +1,27 @@
+class Captain::Tools::ResolveConversationTool < Captain::Tools::BasePublicTool
+  description 'Resolve a conversation when the issue has been addressed or the conversation should be closed'
+  param :reason, type: 'string', desc: 'Brief reason for resolving the conversation', required: true
+
+  def perform(tool_context, reason:)
+    conversation = find_conversation(tool_context.state)
+    return 'Conversation not found' unless conversation
+    return "Conversation ##{conversation.display_id} is already resolved" if conversation.resolved?
+
+    log_tool_usage('resolve_conversation', { conversation_id: conversation.id, reason: reason })
+
+    Current.captain_resolve_reason = reason
+    begin
+      conversation.resolved!
+    ensure
+      Current.captain_resolve_reason = nil
+    end
+
+    "Conversation ##{conversation.display_id} resolved#{" (Reason: #{reason})" if reason}"
+  end
+
+  private
+
+  def permissions
+    %w[conversation_manage conversation_unassigned_manage conversation_participating_manage]
+  end
+end
diff --git a/lib/current.rb b/lib/current.rb
index 3376099f8..5097df369 100644
--- a/lib/current.rb
+++ b/lib/current.rb
@@ -4,6 +4,7 @@ module Current
   thread_mattr_accessor :account_user
   thread_mattr_accessor :executed_by
   thread_mattr_accessor :contact
+  thread_mattr_accessor :captain_resolve_reason
 
   def self.reset
     Current.user = nil
@@ -11,5 +12,6 @@ module Current
     Current.account_user = nil
     Current.executed_by = nil
     Current.contact = nil
+    Current.captain_resolve_reason = nil
   end
 end
diff --git a/spec/enterprise/lib/captain/tools/resolve_conversation_tool_spec.rb b/spec/enterprise/lib/captain/tools/resolve_conversation_tool_spec.rb
new file mode 100644
index 000000000..f91f430e8
--- /dev/null
+++ b/spec/enterprise/lib/captain/tools/resolve_conversation_tool_spec.rb
@@ -0,0 +1,52 @@
+require 'rails_helper'
+
+RSpec.describe Captain::Tools::ResolveConversationTool do
+  let(:account) { create(:account) }
+  let(:assistant) { create(:captain_assistant, account: account) }
+  let(:inbox) { create(:inbox, account: account) }
+  let(:conversation) { create(:conversation, account: account, inbox: inbox, status: :open) }
+  let(:tool) { described_class.new(assistant) }
+  let(:tool_context) { Struct.new(:state).new({ conversation: { id: conversation.id } }) }
+
+  before do
+    Current.executed_by = assistant
+  end
+
+  after do
+    Current.reset
+  end
+
+  describe 'resolving a conversation' do
+    it 'marks resolved and enqueues an activity message with the reason' do
+      tool.perform(tool_context, reason: 'Possible spam')
+
+      expect(conversation.reload).to be_resolved
+      expect(Conversations::ActivityMessageJob).to have_been_enqueued.with(
+        conversation,
+        hash_including(
+          content: I18n.t('conversations.activity.captain.resolved_by_tool', user_name: assistant.name, reason: 'Possible spam')
+        )
+      )
+    end
+
+    it 'clears captain_resolve_reason after execution' do
+      tool.perform(tool_context, reason: 'Possible spam')
+
+      expect(Current.captain_resolve_reason).to be_nil
+    end
+  end
+
+  describe 'resolving an already resolved conversation' do
+    let(:conversation) { create(:conversation, account: account, inbox: inbox, status: :resolved) }
+
+    it 'does not re-resolve and returns an already resolved message' do
+      queue_adapter = ActiveJob::Base.queue_adapter
+      queue_adapter.enqueued_jobs.clear
+
+      result = tool.perform(tool_context, reason: 'Possible spam')
+
+      expect(result).to include('already resolved')
+      expect(Conversations::ActivityMessageJob).not_to have_been_enqueued
+    end
+  end
+end

From 280ca06e5bcce6a818eb0381e67e92241bfc3c2c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 20 Feb 2026 19:39:23 +0530
Subject: [PATCH 15/26] fix: url endpoint

fix: spec
---
 app/javascript/v3/components/GoogleOauth/Button.spec.js | 2 +-
 app/javascript/v3/components/GoogleOauth/Button.vue     | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/javascript/v3/components/GoogleOauth/Button.spec.js b/app/javascript/v3/components/GoogleOauth/Button.spec.js
index dbc2aaf90..139f0779e 100644
--- a/app/javascript/v3/components/GoogleOauth/Button.spec.js
+++ b/app/javascript/v3/components/GoogleOauth/Button.spec.js
@@ -24,7 +24,7 @@ describe('GoogleOAuthButton.vue', () => {
     const googleAuthUrl = new URL(wrapper.vm.getGoogleAuthUrl());
     const params = googleAuthUrl.searchParams;
     expect(googleAuthUrl.origin).toBe('https://accounts.google.com');
-    expect(googleAuthUrl.pathname).toBe('/o/oauth2/auth/oauthchooseaccount');
+    expect(googleAuthUrl.pathname).toBe('/o/oauth2/auth');
     expect(params.get('client_id')).toBe('clientId');
     expect(params.get('redirect_uri')).toBe(
       'http://localhost:3000/test-callback'
diff --git a/app/javascript/v3/components/GoogleOauth/Button.vue b/app/javascript/v3/components/GoogleOauth/Button.vue
index 2d1fc5a4e..be387ddbe 100644
--- a/app/javascript/v3/components/GoogleOauth/Button.vue
+++ b/app/javascript/v3/components/GoogleOauth/Button.vue
@@ -6,8 +6,7 @@ export default {
       // Creating the URL manually because the devise-token-auth with
       // omniauth has a standing issue on redirecting the post request
       // https://github.com/lynndylanhurley/devise_token_auth/issues/1466
-      const baseUrl =
-        'https://accounts.google.com/o/oauth2/auth/oauthchooseaccount';
+      const baseUrl = 'https://accounts.google.com/o/oauth2/auth';
       const clientId = window.chatwootConfig.googleOAuthClientId;
       const redirectUri = window.chatwootConfig.googleOAuthCallbackUrl;
       const responseType = 'code';

From 15f25f019e9743999d0f75b15d707c4f03886ece Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 20 Feb 2026 20:02:09 +0530
Subject: [PATCH 16/26] chore: bump version

---
 VERSION_CW     | 2 +-
 config/app.yml | 2 +-
 package.json   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/VERSION_CW b/VERSION_CW
index a162ea75a..d782fca8f 100644
--- a/VERSION_CW
+++ b/VERSION_CW
@@ -1 +1 @@
-4.11.0
+4.11.1
diff --git a/config/app.yml b/config/app.yml
index 9f7a3980c..4a1b004ac 100644
--- a/config/app.yml
+++ b/config/app.yml
@@ -1,5 +1,5 @@
 shared: &shared
-  version: '4.11.0'
+  version: '4.11.1'
 
 development:
   <<: *shared
diff --git a/package.json b/package.json
index b062495a0..b51ad5ffa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "4.11.0",
+  "version": "4.11.1",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/**/*.{js,vue}",

From 418bd177f814c089ffedb74251d73abd20099685 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 20 Feb 2026 20:20:32 +0530
Subject: [PATCH 17/26] fix: Adjust inbox settings pages layout width (#13590)

# Pull Request Template

## Description

This PR includes,

1. Adjusting the inbox settings page layout width from 3xl to 4xl for
the collaborators, configuration, and bot configuration sections.
2. Adding a dynamic max-width for inbox settings banners based on the
selected tab.
3. Making the sender name preview layout responsive.
4. Reordering automation rule row buttons so Clone appears before
Delete.
5. Update the Gmail icon ratio.
6. Fix height issues with team/inbox pages
7. The delete button changes to red on hover
8. Add border to conversation header when no dashboard apps present


## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../AttributeListItem.vue                     |  8 ++++-
 .../widgets/conversation/ConversationBox.vue  |  3 ++
 .../dashboard/settings/agentBots/Index.vue    |  1 +
 .../dashboard/settings/agents/Index.vue       |  1 +
 .../settings/automation/AutomationRuleRow.vue | 17 +++++-----
 .../dashboard/settings/canned/Index.vue       |  1 +
 .../component/CustomRoleTableBody.vue         |  1 +
 .../dashboard/settings/inbox/ChannelList.vue  | 22 ++++++-------
 .../dashboard/settings/inbox/ImapSettings.vue |  8 ++---
 .../settings/inbox/InboxChannels.vue          |  4 +--
 .../routes/dashboard/settings/inbox/Index.vue |  1 +
 .../dashboard/settings/inbox/Settings.vue     | 32 +++++++++++++++++--
 .../dashboard/settings/inbox/SmtpSettings.vue | 14 ++++----
 .../inbox/components/BotConfiguration.vue     |  2 +-
 .../components/SenderNameExamplePreview.vue   |  9 +++++-
 .../inbox/settingsPage/ConfigurationPage.vue  | 14 ++++----
 .../DashboardApps/DashboardAppsRow.vue        |  1 +
 .../integrations/MultipleIntegrationHooks.vue |  1 +
 .../integrations/Webhooks/WebhookRow.vue      |  1 +
 .../dashboard/settings/labels/Index.vue       |  1 +
 .../settings/macros/MacrosTableRow.vue        |  1 +
 .../routes/dashboard/settings/sla/Index.vue   |  1 +
 .../settings/teams/Create/AddAgents.vue       | 19 ++++-------
 .../settings/teams/Create/CreateTeam.vue      |  2 +-
 .../dashboard/settings/teams/Create/Index.vue |  2 +-
 .../settings/teams/Edit/EditAgents.vue        | 19 ++++-------
 .../settings/teams/Edit/EditTeam.vue          |  2 +-
 .../dashboard/settings/teams/Edit/Index.vue   |  2 +-
 .../routes/dashboard/settings/teams/Index.vue |  1 +
 theme/icons.js                                |  2 +-
 30 files changed, 118 insertions(+), 75 deletions(-)

diff --git a/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue b/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue
index 624ba2981..d0b660e27 100644
--- a/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue
+++ b/app/javascript/dashboard/components-next/ConversationWorkflow/AttributeListItem.vue
@@ -82,7 +82,13 @@ const attributeIcon = computed(() => {
           sm
           @click="emit('edit', attribute)"
         />
-        <Button icon="i-woot-bin" slate sm @click="emit('delete', attribute)" />
+        <Button
+          icon="i-woot-bin"
+          slate
+          sm
+          class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
+          @click="emit('delete', attribute)"
+        />
       </div>
     </div>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 2f08cafc4..7d04470ed 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -100,6 +100,9 @@ export default {
       v-if="currentChat.id"
       :chat="currentChat"
       :show-back-button="isOnExpandedLayout && !isInboxView"
+      :class="{
+        'border-b border-b-n-weak !pt-2': !dashboardApps.length,
+      }"
     />
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index 19e04ba85..88286bd88 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -182,6 +182,7 @@ onMounted(() => {
                     icon="i-woot-bin"
                     slate
                     sm
+                    class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
                     :is-loading="loading[bot.id]"
                     @click="openDeletePopup(bot)"
                   />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 7f1376efe..7c0e3fa3f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -268,6 +268,7 @@ const confirmDeletion = () => {
               icon="i-woot-bin"
               slate
               sm
+              class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
               :is-loading="loading[agent.id]"
               @click="openDeletePopup(agent, index)"
             />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue
index 3117a51e2..7f573e81a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue
@@ -70,14 +70,6 @@ const automationActive = computed({
             :is-loading="loading"
             @click="$emit('edit', automation)"
           />
-          <Button
-            v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
-            :is-loading="loading"
-            icon="i-woot-bin"
-            slate
-            sm
-            @click="$emit('delete', automation)"
-          />
           <Button
             v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
             icon="i-woot-clone"
@@ -86,6 +78,15 @@ const automationActive = computed({
             :is-loading="loading"
             @click="$emit('clone', automation)"
           />
+          <Button
+            v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
+            :is-loading="loading"
+            icon="i-woot-bin"
+            slate
+            sm
+            class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
+            @click="$emit('delete', automation)"
+          />
         </div>
       </BaseTableCell>
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 9592deb85..1a5c067de 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -232,6 +232,7 @@ const tableHeaders = computed(() => {
                     icon="i-woot-bin"
                     slate
                     sm
+                    class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
                     :is-loading="loading[cannedItem.id]"
                     @click="openDeletePopup(cannedItem)"
                   />
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 1104848d5..c844a01bd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
@@ -66,6 +66,7 @@ const getFormattedPermissions = role => {
             icon="i-woot-bin"
             slate
             sm
+            class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
             :is-loading="loading[customRole.id]"
             @click="emit('delete', customRole)"
           />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 0c1494d09..e2ebd27cd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -116,17 +116,15 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-full p-8 overflow-auto">
-    <div
-      class="grid max-w-3xl grid-cols-1 xs:grid-cols-2 mx-0 gap-6 sm:grid-cols-3"
-    >
-      <ChannelItem
-        v-for="channel in channelList"
-        :key="channel.key"
-        :channel="channel"
-        :enabled-features="enabledFeatures"
-        @channel-item-click="initChannelAuth"
-      />
-    </div>
+  <div
+    class="grid max-w-3xl grid-cols-1 xs:grid-cols-2 mx-0 gap-6 sm:grid-cols-3 p-8"
+  >
+    <ChannelItem
+      v-for="channel in channelList"
+      :key="channel.key"
+      :channel="channel"
+      :enabled-features="enabledFeatures"
+      @channel-item-click="initChannelAuth"
+    />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
index a18a9a0f8..7325793db 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
@@ -115,7 +115,7 @@ export default {
         <woot-input
           v-model="address"
           :class="{ error: v$.address.$error }"
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
           :placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
           @blur="v$.address.$touch"
@@ -124,7 +124,7 @@ export default {
           v-model="port"
           type="number"
           :class="{ error: v$.port.$error }"
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
           :placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
           @blur="v$.port.$touch"
@@ -132,7 +132,7 @@ export default {
         <woot-input
           v-model="login"
           :class="{ error: v$.login.$error }"
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
           :placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
           @blur="v$.login.$touch"
@@ -140,7 +140,7 @@ export default {
         <woot-input
           v-model="password"
           :class="{ error: v$.password.$error }"
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
           :placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
           type="password"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index d5a614c47..2cebedebe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -62,14 +62,14 @@ const items = computed(() => {
   <div class="mx-auto flex flex-col gap-6 mb-8 max-w-7xl w-full !px-6">
     <PageHeader class="block lg:hidden !mb-0" :header-title="pageTitle" />
     <div
-      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[52rem]"
+      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak h-full min-h-[50dvh]"
     >
       <woot-wizard
         class="hidden lg:block col-span-2 h-fit py-8 px-6"
         :global-config="globalConfig"
         :items="items"
       />
-      <div class="col-span-6 overflow-hidden">
+      <div class="col-span-6 flex flex-col overflow-y-auto">
         <router-view />
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 46d8f3cc8..838d3ac0b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -170,6 +170,7 @@ const openDelete = inbox => {
               icon="i-woot-bin"
               slate
               sm
+              class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
               @click="openDelete(inbox)"
             />
           </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index d8ed89f87..0f7f90bdd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -214,6 +214,18 @@ export default {
       const { medium, channel_type: type } = this.inbox;
       return getInboxIconByType(type, medium, 'line');
     },
+    bannerMaxWidth() {
+      const narrowTabs = [
+        'collaborators',
+        'configuration',
+        'bot-configuration',
+      ];
+      if (narrowTabs.includes(this.selectedTabKey)) return 'max-w-4xl';
+      if (this.selectedTabKey === 'inbox-settings') {
+        return this.isAWebWidgetInbox ? 'max-w-7xl' : 'max-w-4xl';
+      }
+      return 'max-w-7xl';
+    },
     inboxName() {
       if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
         return `${this.inbox.name} (${
@@ -571,44 +583,57 @@ export default {
           v-if="microsoftUnauthorized"
           :inbox="inbox"
           class="mb-4"
+          :class="bannerMaxWidth"
         />
         <FacebookReauthorize
           v-if="facebookUnauthorized"
           :inbox="inbox"
           class="mb-4"
+          :class="bannerMaxWidth"
         />
         <GoogleReauthorize
           v-if="googleUnauthorized"
           :inbox="inbox"
           class="mb-4"
+          :class="bannerMaxWidth"
         />
         <InstagramReauthorize
           v-if="instagramUnauthorized"
           :inbox="inbox"
           class="mb-4"
+          :class="bannerMaxWidth"
         />
         <TiktokReauthorize
           v-if="tiktokUnauthorized"
           :inbox="inbox"
           class="mb-4"
+          :class="bannerMaxWidth"
         />
         <WhatsappReauthorize
           v-if="whatsappUnauthorized"
           :whatsapp-registration-incomplete="whatsappRegistrationIncomplete"
           :inbox="inbox"
           class="mb-4"
+          :class="bannerMaxWidth"
         />
         <DuplicateInboxBanner
           v-if="hasDuplicateInstagramInbox"
           :content="$t('INBOX_MGMT.ADD.INSTAGRAM.DUPLICATE_INBOX_BANNER')"
           class="mx-6 mb-4"
+          :class="bannerMaxWidth"
         />
 
         <div
           v-if="selectedTabKey === 'inbox-settings'"
           class="flex flex-col md:flex-row items-center lg:items-start justify-between gap-5 lg:gap-10 mx-6"
         >
-          <div class="max-w-2xl flex-1 flex flex-col min-w-0">
+          <div
+            class="flex-1 flex flex-col min-w-0"
+            :class="{
+              'max-w-2xl': isAWebWidgetInbox,
+              'max-w-4xl': !isAWebWidgetInbox,
+            }"
+          >
             <div class="flex flex-col gap-1 items-start mb-4">
               <label class="text-heading-3 text-n-slate-12">
                 {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL') }}
@@ -755,6 +780,7 @@ export default {
                 <SenderNameExamplePreview
                   :sender-name-type="senderNameType"
                   :business-name="businessName"
+                  :is-website-channel="isAWebWidgetInbox"
                   @update="toggleSenderNameType"
                 />
               </template>
@@ -1107,10 +1133,10 @@ export default {
           </div>
         </div>
 
-        <div v-if="selectedTabKey === 'collaborators'" class="mx-6 max-w-3xl">
+        <div v-if="selectedTabKey === 'collaborators'" class="mx-6 max-w-4xl">
           <CollaboratorsPage :inbox="inbox" />
         </div>
-        <div v-if="selectedTabKey === 'configuration'">
+        <div v-if="selectedTabKey === 'configuration'" class="mx-6 max-w-4xl">
           <ConfigurationPage :inbox="inbox" />
         </div>
         <div v-if="selectedTabKey === 'csat'">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index 70805de69..575e0e5d2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -175,7 +175,7 @@ export default {
         <woot-input
           v-model="address"
           :class="{ error: v$.address.$error }"
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
           :placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
           @blur="v$.address.$touch"
@@ -184,7 +184,7 @@ export default {
           v-model="port"
           type="number"
           :class="{ error: v$.port.$error }"
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
           :placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
           @blur="v$.port.$touch"
@@ -192,7 +192,7 @@ export default {
         <woot-input
           v-model="login"
           :class="{ error: v$.login.$error }"
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
           :placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
           @blur="v$.login.$touch"
@@ -200,7 +200,7 @@ export default {
         <woot-input
           v-model="password"
           :class="{ error: v$.password.$error }"
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
           :placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
           type="password"
@@ -209,7 +209,7 @@ export default {
         <woot-input
           v-model="domain"
           :class="{ error: v$.domain.$error }"
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
           :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
           @blur="v$.domain.$touch"
@@ -220,14 +220,14 @@ export default {
           :action="handleEncryptionChange"
         />
         <SingleSelectDropdown
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
           :selected="openSSLVerifyMode"
           :options="openSSLVerifyModes"
           :action="handleSSLModeChange"
         />
         <SingleSelectDropdown
-          class="max-w-[75%] w-full"
+          class="w-full"
           :label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
           :selected="authMechanism"
           :options="authMechanisms"
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 80e1497de..a5ec9df37 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
@@ -84,7 +84,7 @@ export default {
 </script>
 
 <template>
-  <div class="mx-6 max-w-3xl">
+  <div class="mx-6 max-w-4xl">
     <LoadingState v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
     <form v-else @submit.prevent="updateActiveAgentBot">
       <SettingsFieldSection
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
index 90fa47768..249c53abb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
@@ -13,6 +13,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isWebsiteChannel: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update']);
@@ -56,7 +60,10 @@ const toggleSenderNameType = key => {
 
 <template>
   <div
-    class="flex flex-col sm:flex-row md:flex-col xl:flex-row items-start gap-4 mt-3 min-w-0"
+    class="flex flex-col items-start gap-4 mt-3 min-w-0"
+    :class="
+      isWebsiteChannel ? 'sm:flex-row md:flex-col xl:flex-row' : 'sm:flex-row'
+    "
   >
     <RadioCard
       v-for="keyOption in senderNameKeyOptions"
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 d0e10f7e3..35362528e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -149,7 +149,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="isATwilioChannel" class="mx-6">
+  <div v-if="isATwilioChannel">
     <SettingsFieldSection
       :label="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
       :help-text="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
@@ -168,7 +168,7 @@ export default {
       </NextButton>
     </SettingsFieldSection>
   </div>
-  <div v-else-if="isAVoiceChannel" class="mx-6">
+  <div v-else-if="isAVoiceChannel">
     <SettingsFieldSection
       :label="$t('INBOX_MGMT.ADD.VOICE.CONFIGURATION.TWILIO_VOICE_URL_TITLE')"
       :help-text="
@@ -187,7 +187,7 @@ export default {
     </SettingsFieldSection>
   </div>
 
-  <div v-else-if="isALineChannel" class="mx-6">
+  <div v-else-if="isALineChannel">
     <SettingsFieldSection
       :label="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
       :help-text="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
@@ -196,7 +196,7 @@ export default {
     </SettingsFieldSection>
   </div>
   <div v-else-if="isAWebWidgetInbox">
-    <div class="mx-6">
+    <div>
       <SettingsFieldSection
         :label="$t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.TITLE')"
         :help-text="$t('INBOX_MGMT.SETTINGS_POPUP.ALLOWED_DOMAINS.SUBTITLE')"
@@ -266,7 +266,7 @@ export default {
       </SettingsFieldSection>
     </div>
   </div>
-  <div v-else-if="isAPIInbox" class="mx-6">
+  <div v-else-if="isAPIInbox">
     <SettingsFieldSection
       :label="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
       :help-text="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
@@ -297,7 +297,7 @@ export default {
       </div>
     </SettingsFieldSection>
   </div>
-  <div v-else-if="isAnEmailChannel" class="mx-6">
+  <div v-else-if="isAnEmailChannel">
     <div>
       <SettingsFieldSection
         :label="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
@@ -325,7 +325,7 @@ export default {
     <SmtpSettings v-if="inbox.imap_enabled" :inbox="inbox" />
   </div>
   <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
-    <div v-if="inbox.provider_config" class="mx-6">
+    <div v-if="inbox.provider_config">
       <!-- Embedded Signup Section -->
       <template v-if="isEmbeddedSignupWhatsApp">
         <SettingsFieldSection
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 cabd0023c..b1fcaf2ef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
@@ -51,6 +51,7 @@ defineEmits(['edit', 'delete']);
             icon="i-woot-bin"
             slate
             sm
+            class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
             @click="$emit('delete', app)"
           />
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
index 05e17d42b..47e0991f0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
@@ -133,6 +133,7 @@ const inboxName = hook => (hook.inbox ? hook.inbox.name : '');
                     icon="i-woot-bin"
                     slate
                     sm
+                    class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
                     @click="$emit('delete', hook)"
                   />
                 </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
index 6fc198c7d..e589bdbd8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -73,6 +73,7 @@ const subscribedEvents = computed(() => {
             icon="i-woot-bin"
             slate
             sm
+            class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
             @click="emit('delete', webhook, index)"
           />
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 106c5d898..c15f7df28 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -174,6 +174,7 @@ onBeforeMount(() => {
                     icon="i-woot-bin"
                     slate
                     sm
+                    class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
                     :is-loading="loading[label.id]"
                     @click="openDeletePopup(label)"
                   />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
index b4fb66696..934a451de 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue
@@ -96,6 +96,7 @@ const visibilityLabel = computed(() => {
             icon="i-woot-bin"
             slate
             sm
+            class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
             @click="$emit('delete')"
           />
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
index ce05538bc..f6d25c101 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/Index.vue
@@ -288,6 +288,7 @@ export default {
                     icon="i-woot-bin"
                     slate
                     sm
+                    class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
                     :is-loading="loading[sla.id]"
                     @click="openDeletePopup(sla)"
                   />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
index 766e15e55..ef1e14663 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
@@ -88,19 +88,14 @@ export default {
 </script>
 
 <template>
-  <div class="h-full w-full p-6 col-span-6">
-    <form
-      class="flex flex-wrap mx-0 overflow-x-auto"
-      @submit.prevent="addAgents"
-    >
-      <div class="w-full">
-        <PageHeader
-          :header-title="headerTitle"
-          :header-content="$t('TEAMS_SETTINGS.ADD.DESC')"
-        />
-      </div>
+  <div class="h-full w-full p-8 col-span-6 overflow-auto">
+    <form class="flex flex-col gap-4 mx-0" @submit.prevent="addAgents">
+      <PageHeader
+        :header-title="headerTitle"
+        :header-content="$t('TEAMS_SETTINGS.ADD.DESC')"
+      />
 
-      <div class="w-full">
+      <div class="w-full h-full">
         <div v-if="v$.selectedAgents.$error">
           <p class="error-message pb-2">
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
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 6a6cc5417..f6db5829c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
@@ -37,7 +37,7 @@ export default {
 </script>
 
 <template>
-  <div class="h-full w-full p-6 col-span-6">
+  <div class="h-full w-full p-6 col-span-6 overflow-y-auto">
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"
       :header-content="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.DESC')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
index f7777291c..680d8781b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -25,7 +25,7 @@ export default {
 <template>
   <div class="flex flex-col gap-6 mb-8 max-w-7xl mx-auto w-full !px-6">
     <div
-      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[43rem] w-full"
+      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak h-full min-h-[50dvh] w-full"
     >
       <woot-wizard
         class="hidden lg:block col-span-2 h-fit py-8 px-6"
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 4a9709d8c..1f8bf77d2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
@@ -103,19 +103,14 @@ export default {
 </script>
 
 <template>
-  <div class="h-full w-full p-8 col-span-6">
-    <form
-      class="flex flex-wrap mx-0 overflow-x-auto"
-      @submit.prevent="addAgents"
-    >
-      <div class="w-full">
-        <PageHeader
-          :header-title="headerTitle"
-          :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.DESC')"
-        />
-      </div>
+  <div class="h-full w-full p-8 col-span-6 overflow-auto">
+    <form class="flex flex-col gap-4 mx-0" @submit.prevent="addAgents">
+      <PageHeader
+        :header-title="headerTitle"
+        :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.DESC')"
+      />
 
-      <div class="w-full">
+      <div class="w-full h-full">
         <div v-if="v$.selectedAgents.$error">
           <p class="error-message pb-2">
             {{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
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 d35d4e71b..c2505ff92 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
@@ -57,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <div class="h-full w-full p-8 col-span-6">
+  <div class="h-full w-full p-8 col-span-6 overflow-y-auto">
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"
       :header-content="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.DESC')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
index fb179f3a7..a91efbf30 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -29,7 +29,7 @@ export default {
 <template>
   <div class="flex flex-col gap-6 mb-8 max-w-7xl mx-auto w-full !px-6">
     <div
-      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak min-h-[43rem] w-full"
+      class="grid grid-cols-1 lg:grid-cols-8 lg:divide-x lg:divide-n-weak rounded-xl border border-n-weak h-full min-h-[50dvh] w-full"
     >
       <woot-wizard
         class="hidden lg:block col-span-2 h-fit py-8 px-6"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index ada9627a6..03e1a8089 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -161,6 +161,7 @@ const confirmPlaceHolderText = computed(() =>
               icon="i-woot-bin"
               slate
               sm
+              class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
               :is-loading="loading[team.id]"
               @click="openDelete(team)"
             />
diff --git a/theme/icons.js b/theme/icons.js
index 2931caf41..ebf5d6b56 100644
--- a/theme/icons.js
+++ b/theme/icons.js
@@ -211,7 +211,7 @@ export const icons = {
     height: 24,
   },
   gmail: {
-    body: `<path d="M20 7V17C20 17.5675 19.5675 18 19 18H18V8.9245L12 13.2345L6 8.9245V18H5C4.4325 18 4 17.5675 4 17V7C4 6.716 4.107 6.466 4.2865 6.289C4.466 6.1065 4.716 6 5 6H5.3335L12 10.8335L18.6665 6H19C19.284 6 19.534 6.107 19.7135 6.289C19.893 6.466 20 6.716 20 7Z" fill="currentColor"/>`,
+    body: `<path d="M20 6.25V16.75C20 17.3175 19.5675 17.75 19 17.75H18V8.1745L12 11.8095L6 8.1745V17.75H5C4.4325 17.75 4 17.3175 4 16.75V6.25C4 5.966 4.107 5.716 4.2865 5.539C4.466 5.3565 4.716 5.25 5 5.25H5.3335L12 9.3835L18.6665 5.25H19C19.284 5.25 19.534 5.357 19.7135 5.539C19.893 5.716 20 5.966 20 6.25Z" fill="currentColor"/>`,
     width: 24,
     height: 24,
   },

From 2441487a761ca8e6c3313aa5de108375fe2f02af Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Fri, 20 Feb 2026 21:20:19 +0530
Subject: [PATCH 18/26] perf: skip conversation loading in /meta endpoint
 (#13564)

# Pull Request Template

## Summary
- Adds `perform_meta_only` method to `ConversationFinder` that runs
setup and counts without loading the paginated conversation list
- Updates `/api/v1/conversations/meta` to use `perform_meta_only`
instead of `perform`

## Problem
The `/meta` endpoint calls `ConversationFinder#perform` which:
1. Runs all filters and setup (`set_up`)
2. Computes 3 COUNT queries (`set_count_for_all_conversations`)
3. Filters by assignee type
4. **Builds the full paginated conversation list** with
`.includes(:taggings, :inbox, {assignee: {avatar_attachment: [:blob]}},
{contact: {avatar_attachment: [:blob]}}, :team, :contact_inbox)` +
sorting + pagination

The controller then **discards the conversations** and only uses the
counts:
```ruby
def meta
result = conversation_finder.perform
@conversations_count = result[:count]  # conversations thrown away
end
```

## Type of change

- [x] Performance fix

## How Has This Been Tested?

- [ ] Verify /meta returns correct mine/unassigned/assigned/all counts
- [ ] Verify counts update when switching inbox, team, or status filters
- [ ] Verify conversation list still loads correctly (uses perform, not
affected)
- [ ] Monitor response time reduction for /meta in NewRelic after deploy

## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../v1/accounts/conversations_controller.rb   |  2 +-
 app/finders/conversation_finder.rb            | 16 ++++++++++++
 spec/finders/conversation_finder_spec.rb      | 26 +++++++++++++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/app/controllers/api/v1/accounts/conversations_controller.rb b/app/controllers/api/v1/accounts/conversations_controller.rb
index 7c21844f5..ab1cae17d 100644
--- a/app/controllers/api/v1/accounts/conversations_controller.rb
+++ b/app/controllers/api/v1/accounts/conversations_controller.rb
@@ -15,7 +15,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def meta
-    result = conversation_finder.perform
+    result = conversation_finder.perform_meta_only
     @conversations_count = result[:count]
   end
 
diff --git a/app/finders/conversation_finder.rb b/app/finders/conversation_finder.rb
index d43ed31e7..7821bee49 100644
--- a/app/finders/conversation_finder.rb
+++ b/app/finders/conversation_finder.rb
@@ -55,6 +55,22 @@ class ConversationFinder
     }
   end
 
+  def perform_meta_only
+    set_up
+
+    mine_count, unassigned_count, all_count, = set_count_for_all_conversations
+    assigned_count = all_count - unassigned_count
+
+    {
+      count: {
+        mine_count: mine_count,
+        assigned_count: assigned_count,
+        unassigned_count: unassigned_count,
+        all_count: all_count
+      }
+    }
+  end
+
   private
 
   def set_up
diff --git a/spec/finders/conversation_finder_spec.rb b/spec/finders/conversation_finder_spec.rb
index 0174ccfb0..9427e8157 100644
--- a/spec/finders/conversation_finder_spec.rb
+++ b/spec/finders/conversation_finder_spec.rb
@@ -190,6 +190,32 @@ describe ConversationFinder do
       end
     end
 
+    context 'with perform_meta_only' do
+      let(:params) { { assignee_type: 'assigned' } }
+
+      it 'returns only count without conversations' do
+        result = conversation_finder.perform_meta_only
+        expect(result).to have_key(:count)
+        expect(result).not_to have_key(:conversations)
+      end
+
+      it 'returns the correct counts' do
+        result = conversation_finder.perform_meta_only
+        expect(result[:count]).to eq({
+                                       mine_count: 2,
+                                       assigned_count: 3,
+                                       unassigned_count: 1,
+                                       all_count: 4
+                                     })
+      end
+
+      it 'returns same counts as perform' do
+        meta_result = conversation_finder.perform_meta_only
+        full_result = conversation_finder.perform
+        expect(meta_result[:count]).to eq(full_result[:count])
+      end
+    end
+
     context 'with unattended' do
       let(:params) { { status: 'open', assignee_type: 'me', conversation_type: 'unattended' } }
 

From 9dd13b9a2be045e2f1ec549745800bc8af5e009b Mon Sep 17 00:00:00 2001
From: Aakash Bakhle <48802744+aakashb95@users.noreply.github.com>
Date: Mon, 23 Feb 2026 14:54:52 +0530
Subject: [PATCH 19/26] fix: topup checkout flaky test (#13616)

---
 .../billing/topup_checkout_service_spec.rb         | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/spec/enterprise/services/enterprise/billing/topup_checkout_service_spec.rb b/spec/enterprise/services/enterprise/billing/topup_checkout_service_spec.rb
index 8a64e6fd2..24c7889de 100644
--- a/spec/enterprise/services/enterprise/billing/topup_checkout_service_spec.rb
+++ b/spec/enterprise/services/enterprise/billing/topup_checkout_service_spec.rb
@@ -44,17 +44,19 @@ describe Enterprise::Billing::TopupCheckoutService do
     end
 
     it 'raises error for invalid credits' do
-      expect do
-        service.create_checkout_session(credits: 500)
-      end.to raise_error(Enterprise::Billing::TopupCheckoutService::Error)
+      expect { service.create_checkout_session(credits: 500) }.to raise_error do |error|
+        expect(error.class.name).to eq('Enterprise::Billing::TopupCheckoutService::Error')
+        expect(error.message).to eq(I18n.t('errors.topup.invalid_option'))
+      end
     end
 
     it 'raises error when account is on free plan' do
       account.update!(custom_attributes: { plan_name: 'Hacker', stripe_customer_id: stripe_customer_id })
 
-      expect do
-        service.create_checkout_session(credits: 1000)
-      end.to raise_error(Enterprise::Billing::TopupCheckoutService::Error)
+      expect { service.create_checkout_session(credits: 1000) }.to raise_error do |error|
+        expect(error.class.name).to eq('Enterprise::Billing::TopupCheckoutService::Error')
+        expect(error.message).to eq(I18n.t('errors.topup.plan_not_eligible'))
+      end
     end
   end
 end

From 957a1b17c9178ac8b838dec0e8384a405572c07b Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <32020192+tds-1@users.noreply.github.com>
Date: Mon, 23 Feb 2026 15:08:11 +0530
Subject: [PATCH 20/26] perf: add default configs for assignment V2 (#13577)

## Description

AutoAssignment::RateLimiter#within_limit? returned true early for
inboxes without an AssignmentPolicy, bypassing fair distribution
entirely and allowing unlimited conversation assignment.

## Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)

## Script

- Script to enable users with V2 assignment:
https://www.notion.so/chatwoot/Script-to-migrate-account-to-assignment-V2-30ca5f274c9280f5b8ecfd15e28eeb9c?source=copy_link

## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 app/services/auto_assignment/rate_limiter.rb       | 12 ++----------
 spec/services/auto_assignment/rate_limiter_spec.rb |  6 +++---
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/app/services/auto_assignment/rate_limiter.rb b/app/services/auto_assignment/rate_limiter.rb
index da8daac9c..b46148526 100644
--- a/app/services/auto_assignment/rate_limiter.rb
+++ b/app/services/auto_assignment/rate_limiter.rb
@@ -2,8 +2,6 @@ class AutoAssignment::RateLimiter
   pattr_initialize [:inbox!, :agent!]
 
   def within_limit?
-    return true unless enabled?
-
     current_count < limit
   end
 
@@ -13,24 +11,18 @@ class AutoAssignment::RateLimiter
   end
 
   def current_count
-    return 0 unless enabled?
-
     pattern = assignment_key_pattern
     Redis::Alfred.keys_count(pattern)
   end
 
   private
 
-  def enabled?
-    config.present? && limit.positive?
-  end
-
   def limit
-    config&.fair_distribution_limit.present? ? config.fair_distribution_limit.to_i : Float::INFINITY
+    config&.fair_distribution_limit.present? ? config.fair_distribution_limit.to_i : 5
   end
 
   def window
-    config&.fair_distribution_window&.to_i || 24.hours.to_i
+    config&.fair_distribution_window&.to_i || 5.minutes.to_i
   end
 
   def config
diff --git a/spec/services/auto_assignment/rate_limiter_spec.rb b/spec/services/auto_assignment/rate_limiter_spec.rb
index d5c3de047..59b145c87 100644
--- a/spec/services/auto_assignment/rate_limiter_spec.rb
+++ b/spec/services/auto_assignment/rate_limiter_spec.rb
@@ -61,7 +61,7 @@ RSpec.describe AutoAssignment::RateLimiter do
 
       it 'still tracks the assignment with default window' do
         expected_key = format(Redis::RedisKeys::ASSIGNMENT_KEY, inbox_id: inbox.id, agent_id: agent.id, conversation_id: conversation.id)
-        expect(Redis::Alfred).to receive(:set).with(expected_key, conversation.id.to_s, ex: 24.hours.to_i)
+        expect(Redis::Alfred).to receive(:set).with(expected_key, conversation.id.to_s, ex: 5.minutes.to_i)
         rate_limiter.track_assignment(conversation)
       end
     end
@@ -154,12 +154,12 @@ RSpec.describe AutoAssignment::RateLimiter do
         allow(inbox).to receive(:assignment_policy).and_return(assignment_policy)
       end
 
-      it 'uses the default window value of 24 hours' do
+      it 'uses the default window value of 5 minutes' do
         expected_key = format(Redis::RedisKeys::ASSIGNMENT_KEY, inbox_id: inbox.id, agent_id: agent.id, conversation_id: conversation.id)
         expect(Redis::Alfred).to receive(:set).with(
           expected_key,
           conversation.id.to_s,
-          ex: 86_400
+          ex: 5.minutes.to_i
         )
         rate_limiter.track_assignment(conversation)
       end

From 40da358dc2079687d8eff02ca70dcf85dc6da54e Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 23 Feb 2026 16:00:17 +0530
Subject: [PATCH 21/26] feat: better errors for SMTP (#13401)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 app/helpers/api/v1/inboxes_helper.rb          | 38 +++++++++----------
 .../dashboard/settings/inbox/SmtpSettings.vue |  4 +-
 config/locales/en.yml                         |  5 +++
 .../v1/accounts/inboxes_controller_spec.rb    |  3 ++
 4 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/app/helpers/api/v1/inboxes_helper.rb b/app/helpers/api/v1/inboxes_helper.rb
index d734a346e..3d6b559c8 100644
--- a/app/helpers/api/v1/inboxes_helper.rb
+++ b/app/helpers/api/v1/inboxes_helper.rb
@@ -57,39 +57,35 @@ module Api::V1::InboxesHelper
   end
 
   def check_smtp_connection(channel_data, smtp)
+    smtp.open_timeout = 10
     smtp.start(channel_data[:smtp_domain], channel_data[:smtp_login], channel_data[:smtp_password],
                channel_data[:smtp_authentication]&.to_sym || :login)
     smtp.finish
+  rescue Net::SMTPAuthenticationError
+    raise StandardError, I18n.t('errors.inboxes.smtp.authentication_error')
+  rescue SocketError, Errno::ECONNREFUSED, Errno::EHOSTUNREACH, Errno::ENETUNREACH, Net::OpenTimeout
+    raise StandardError, I18n.t('errors.inboxes.smtp.connection_error')
+  rescue OpenSSL::SSL::SSLError
+    raise StandardError, I18n.t('errors.inboxes.smtp.ssl_error')
+  rescue Net::SMTPServerBusy, Net::SMTPSyntaxError, Net::SMTPFatalError
+    raise StandardError, I18n.t('errors.inboxes.smtp.smtp_error')
+  rescue StandardError => e
+    raise StandardError, e.message
   end
 
   def set_smtp_encryption(channel_data, smtp)
     if channel_data[:smtp_enable_ssl_tls]
-      set_enable_tls(channel_data, smtp)
+      set_smtp_ssl_method(smtp, :enable_tls, channel_data[:smtp_openssl_verify_mode])
     elsif channel_data[:smtp_enable_starttls_auto]
-      set_enable_starttls_auto(channel_data, smtp)
+      set_smtp_ssl_method(smtp, :enable_starttls_auto, channel_data[:smtp_openssl_verify_mode])
     end
   end
 
-  def set_enable_starttls_auto(channel_data, smtp)
-    return unless smtp.respond_to?(:enable_starttls_auto)
+  def set_smtp_ssl_method(smtp, method, openssl_verify_mode)
+    return unless smtp.respond_to?(method)
 
-    if channel_data[:smtp_openssl_verify_mode]
-      context = enable_openssl_mode(channel_data[:smtp_openssl_verify_mode])
-      smtp.enable_starttls_auto(context)
-    else
-      smtp.enable_starttls_auto
-    end
-  end
-
-  def set_enable_tls(channel_data, smtp)
-    return unless smtp.respond_to?(:enable_tls)
-
-    if channel_data[:smtp_openssl_verify_mode]
-      context = enable_openssl_mode(channel_data[:smtp_openssl_verify_mode])
-      smtp.enable_tls(context)
-    else
-      smtp.enable_tls
-    end
+    context = enable_openssl_mode(openssl_verify_mode) if openssl_verify_mode
+    context ? smtp.send(method, context) : smtp.send(method)
   end
 
   def enable_openssl_mode(smtp_openssl_verify_mode)
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
index 575e0e5d2..e8bc723c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -147,7 +147,9 @@ export default {
         await this.$store.dispatch('inboxes/updateInboxSMTP', payload);
         useAlert(this.$t('INBOX_MGMT.SMTP.EDIT.SUCCESS_MESSAGE'));
       } catch (error) {
-        useAlert(this.$t('INBOX_MGMT.SMTP.EDIT.ERROR_MESSAGE'));
+        useAlert(
+          error.message || this.$t('INBOX_MGMT.SMTP.EDIT.ERROR_MESSAGE')
+        );
       }
     },
   },
diff --git a/config/locales/en.yml b/config/locales/en.yml
index a058d28c7..05276009f 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -108,6 +108,11 @@ en:
         host_unreachable_error: Host unreachable, Please check the IMAP address, IMAP port and try again.
         connection_timed_out_error: Connection timed out for %{address}:%{port}
         connection_closed_error: Connection closed.
+      smtp:
+        authentication_error: SMTP authentication failed. Please verify your login credentials.
+        connection_error: Could not connect to SMTP server. Please check the server address and port.
+        ssl_error: SSL/TLS error. Please verify your encryption settings.
+        smtp_error: SMTP server error. Please check your configuration and try again.
       validations:
         name: should not start or end with symbols, and it should not have < > / \ @ characters.
     custom_filters:
diff --git a/spec/controllers/api/v1/accounts/inboxes_controller_spec.rb b/spec/controllers/api/v1/accounts/inboxes_controller_spec.rb
index fafd6788e..b93ca8ecf 100644
--- a/spec/controllers/api/v1/accounts/inboxes_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/inboxes_controller_spec.rb
@@ -631,6 +631,7 @@ RSpec.describe 'Inboxes API', type: :request do
 
       it 'updates smtp configuration with starttls encryption' do
         smtp_connection = double
+        allow(smtp_connection).to receive(:open_timeout=).and_return(10)
         allow(smtp_connection).to receive(:start).and_return(true)
         allow(smtp_connection).to receive(:finish).and_return(true)
         allow(smtp_connection).to receive(:respond_to?).and_return(true)
@@ -661,6 +662,7 @@ RSpec.describe 'Inboxes API', type: :request do
 
       it 'updates smtp configuration with ssl/tls encryption' do
         smtp_connection = double
+        allow(smtp_connection).to receive(:open_timeout=).and_return(10)
         allow(smtp_connection).to receive(:start).and_return(true)
         allow(smtp_connection).to receive(:finish).and_return(true)
         allow(smtp_connection).to receive(:respond_to?).and_return(true)
@@ -691,6 +693,7 @@ RSpec.describe 'Inboxes API', type: :request do
 
       it 'updates smtp configuration with authentication mechanism' do
         smtp_connection = double
+        allow(smtp_connection).to receive(:open_timeout=).and_return(10)
         allow(smtp_connection).to receive(:start).and_return(true)
         allow(smtp_connection).to receive(:finish).and_return(true)
         allow(smtp_connection).to receive(:respond_to?).and_return(true)

From b220663785e7f8a2e93b0670ba9885285e14c567 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 23 Feb 2026 15:40:54 +0400
Subject: [PATCH 22/26] fix: Skip notifications for private notes (#13617)

When agents or integrations create private notes on a conversation,
every note was sending a notification to the assigned agent and all
conversation participants. The fix ensures that private notes no longer
trigger new message notifications. If someone explicitly mentions a
teammate in a private note, that person will still get notified as
expected.
---
 app/models/concerns/message_filter_helpers.rb |  2 +-
 spec/listeners/notification_listener_spec.rb  | 22 ++++++++++++++++---
 .../new_message_notification_service_spec.rb  |  8 ++++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/app/models/concerns/message_filter_helpers.rb b/app/models/concerns/message_filter_helpers.rb
index 38124f347..39ee71089 100644
--- a/app/models/concerns/message_filter_helpers.rb
+++ b/app/models/concerns/message_filter_helpers.rb
@@ -14,7 +14,7 @@ module MessageFilterHelpers
   end
 
   def notifiable?
-    incoming? || outgoing?
+    (incoming? || outgoing?) && !private?
   end
 
   def conversation_transcriptable?
diff --git a/spec/listeners/notification_listener_spec.rb b/spec/listeners/notification_listener_spec.rb
index 76e458b8e..048339ca5 100644
--- a/spec/listeners/notification_listener_spec.rb
+++ b/spec/listeners/notification_listener_spec.rb
@@ -142,7 +142,24 @@ describe NotificationListener do
       expect(first_agent.notifications.first.notification_type).to eq('conversation_mention')
     end
 
-    it 'will not create duplicate new message notifications for assignment & participation' do
+    it 'will create a mention notification when a user is mentioned in a private note' do
+      create(:inbox_member, user: first_agent, inbox: inbox)
+
+      message = build(
+        :message,
+        conversation: conversation,
+        account: account,
+        content: "hey [#{first_agent.name}](mention://user/#{first_agent.id}/#{first_agent.name})",
+        private: true
+      )
+      event = Events::Base.new(event_name, Time.zone.now, message: message)
+      listener.message_created(event)
+
+      expect(first_agent.notifications.count).to eq(1)
+      expect(first_agent.notifications.first.notification_type).to eq('conversation_mention')
+    end
+
+    it 'will not create new message notifications for private messages without mentions' do
       create(:inbox_member, user: first_agent, inbox: inbox)
       conversation.update(assignee: first_agent)
       # participants is created by async job. so creating it directly for testcase
@@ -160,8 +177,7 @@ describe NotificationListener do
       listener.message_created(event)
 
       expect(conversation.conversation_participants.map(&:user)).to include(first_agent)
-      expect(first_agent.notifications.count).to eq(1)
-      expect(first_agent.notifications.first.notification_type).to eq('assigned_conversation_new_message')
+      expect(first_agent.notifications.count).to eq(0)
     end
   end
 
diff --git a/spec/services/messages/new_message_notification_service_spec.rb b/spec/services/messages/new_message_notification_service_spec.rb
index 51da1ad5a..c8e2b7b98 100644
--- a/spec/services/messages/new_message_notification_service_spec.rb
+++ b/spec/services/messages/new_message_notification_service_spec.rb
@@ -2,11 +2,17 @@ require 'rails_helper'
 
 describe Messages::NewMessageNotificationService do
   context 'when message is not notifiable' do
-    it 'will not create any notifications' do
+    it 'will not create any notifications for activity messages' do
       message = build(:message, message_type: :activity)
       expect(NotificationBuilder).not_to receive(:new)
       described_class.new(message: message).perform
     end
+
+    it 'will not create any notifications for private messages' do
+      message = build(:message, message_type: :outgoing, private: true)
+      expect(NotificationBuilder).not_to receive(:new)
+      described_class.new(message: message).perform
+    end
   end
 
   context 'when message is notifiable' do

From 5b167b5b5b9de36ee1afaec3748a43e5ba08537d Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 23 Feb 2026 19:26:45 +0400
Subject: [PATCH 23/26] fix(contacts): Show telegram id in contact details form
 (#13611)

## Summary
This change fixes a mismatch in contact details where Telegram data
could be shown in the contact profile/social icon area but was not
available in the editable contact form.

### What changed
- Added Telegram to the social links section of the next-gen contact
form so agents can view and edit it alongside Facebook, Instagram,
TikTok, Twitter, GitHub, and LinkedIn.
- Added Telegram support to the legacy conversation contact edit form
for parity between both contact editing experiences.
- Mapped social_telegram_user_name into the editable socialProfiles
payload when preparing contact form state, so Telegram usernames sourced
from channel attributes are visible in the form.
- Updated the conversation contact social profile merge logic so
Telegram display prefers an explicitly saved social profile value and
falls back to social_telegram_user_name when needed.
- Added the missing English i18n placeholder: Add Telegram.

### Why
Without this, users could see Telegram info in some contact views but
could not reliably edit it in contact details, creating inconsistent
behavior between display and edit states.

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../Contacts/ContactsForm/ContactsForm.vue            | 11 ++++++++++-
 app/javascript/dashboard/i18n/locale/en/contact.json  |  3 +++
 .../dashboard/conversation/contact/ContactForm.vue    |  4 ++++
 .../dashboard/conversation/contact/ContactInfo.vue    |  8 ++++++--
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 3dc29738e..66296257f 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -44,6 +44,7 @@ const SOCIAL_CONFIG = {
   LINKEDIN: 'i-ri-linkedin-box-fill',
   FACEBOOK: 'i-ri-facebook-circle-fill',
   INSTAGRAM: 'i-ri-instagram-line',
+  TELEGRAM: 'i-ri-telegram-fill',
   TIKTOK: 'i-ri-tiktok-fill',
   TWITTER: 'i-ri-twitter-x-fill',
   GITHUB: 'i-ri-github-fill',
@@ -66,6 +67,7 @@ const defaultState = {
       facebook: '',
       github: '',
       instagram: '',
+      telegram: '',
       tiktok: '',
       linkedin: '',
       twitter: '',
@@ -103,9 +105,13 @@ const prepareStateBasedOnProps = () => {
     countryCode = '',
     country = '',
     city = '',
+    socialTelegramUserName = '',
     socialProfiles = {},
   } = additionalAttributes || {};
 
+  const telegramUsername =
+    socialProfiles?.telegram || socialTelegramUserName || '';
+
   Object.assign(state, {
     id,
     name,
@@ -119,7 +125,10 @@ const prepareStateBasedOnProps = () => {
       countryCode,
       country,
       city,
-      socialProfiles,
+      socialProfiles: {
+        ...socialProfiles,
+        telegram: telegramUsername,
+      },
     },
   });
 };
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index fe04e5848..0d9f79984 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -458,6 +458,9 @@
           "INSTAGRAM": {
             "PLACEHOLDER": "Add Instagram"
           },
+          "TELEGRAM": {
+            "PLACEHOLDER": "Add Telegram"
+          },
           "TIKTOK": {
             "PLACEHOLDER": "Add TikTok"
           },
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 77d4b9773..d8479c4f2 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -58,12 +58,14 @@ export default {
         twitter: '',
         linkedin: '',
         github: '',
+        telegram: '',
       },
       socialProfileKeys: [
         { key: 'facebook', prefixURL: 'https://facebook.com/' },
         { key: 'twitter', prefixURL: 'https://twitter.com/' },
         { key: 'linkedin', prefixURL: 'https://linkedin.com/' },
         { key: 'github', prefixURL: 'https://github.com/' },
+        { key: 'telegram', prefixURL: 'https://t.me/' },
         { key: 'tiktok', prefixURL: 'https://tiktok.com/@' },
       ],
     };
@@ -175,12 +177,14 @@ export default {
       const {
         social_profiles: socialProfiles = {},
         screen_name: twitterScreenName,
+        social_telegram_user_name: telegramUserName,
       } = additionalAttributes;
       this.socialProfileUserNames = {
         twitter: socialProfiles.twitter || twitterScreenName || '',
         facebook: socialProfiles.facebook || '',
         linkedin: socialProfiles.linkedin || '',
         github: socialProfiles.github || '',
+        telegram: socialProfiles.telegram || telegramUserName || '',
         instagram: socialProfiles.instagram || '',
         tiktok: socialProfiles.tiktok || '',
       };
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 7392bea78..3899d1ddf 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -81,10 +81,14 @@ export default {
         screen_name: twitterScreenName,
         social_telegram_user_name: telegramUsername,
       } = this.additionalAttributes;
+
+      const telegram = socialProfiles?.telegram || telegramUsername || '';
+      const twitter = socialProfiles?.twitter || twitterScreenName || '';
+
       return {
-        twitter: twitterScreenName,
-        telegram: telegramUsername,
         ...(socialProfiles || {}),
+        twitter,
+        telegram,
       };
     },
     // Delete Modal

From 2b85275e2693f7ec3b5f03cc7e2e3e5c1b75ba1b Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <32020192+tds-1@users.noreply.github.com>
Date: Tue, 24 Feb 2026 13:32:54 +0530
Subject: [PATCH 24/26] feat: show assignment policy name in auto-assignment
 activity messages (#13598)

---
 .../concerns/activity_message_handler.rb      | 22 +-----------
 .../assignee_activity_message_handler.rb      | 35 +++++++++++++++++++
 .../auto_assignment/assignment_service.rb     |  4 +++
 config/locales/en.yml                         |  3 ++
 4 files changed, 43 insertions(+), 21 deletions(-)
 create mode 100644 app/models/concerns/assignee_activity_message_handler.rb

diff --git a/app/models/concerns/activity_message_handler.rb b/app/models/concerns/activity_message_handler.rb
index c25aba47f..0300bd2d1 100644
--- a/app/models/concerns/activity_message_handler.rb
+++ b/app/models/concerns/activity_message_handler.rb
@@ -1,6 +1,7 @@
 module ActivityMessageHandler
   extend ActiveSupport::Concern
 
+  include AssigneeActivityMessageHandler
   include PriorityActivityMessageHandler
   include LabelActivityMessageHandler
   include SlaActivityMessageHandler
@@ -104,27 +105,6 @@ module ActivityMessageHandler
     content = I18n.t("conversations.activity.#{change_type}", user_name: Current.user.name)
     ::Conversations::ActivityMessageJob.perform_later(self, activity_message_params(content)) if content
   end
-
-  def generate_assignee_change_activity_content(user_name)
-    params = { assignee_name: assignee&.name || '', user_name: user_name }
-    key = assignee_id ? 'assigned' : 'removed'
-    key = 'self_assigned' if self_assign? assignee_id
-    I18n.t("conversations.activity.assignee.#{key}", **params)
-  end
-
-  def create_assignee_change_activity(user_name)
-    user_name = activity_message_owner(user_name)
-
-    return unless user_name
-
-    content = generate_assignee_change_activity_content(user_name)
-    ::Conversations::ActivityMessageJob.perform_later(self, activity_message_params(content)) if content
-  end
-
-  def activity_message_owner(user_name)
-    user_name = I18n.t('automation.system_name') if !user_name && Current.executed_by.present?
-    user_name
-  end
 end
 
 ActivityMessageHandler.prepend_mod_with('ActivityMessageHandler')
diff --git a/app/models/concerns/assignee_activity_message_handler.rb b/app/models/concerns/assignee_activity_message_handler.rb
new file mode 100644
index 000000000..ff5516ec9
--- /dev/null
+++ b/app/models/concerns/assignee_activity_message_handler.rb
@@ -0,0 +1,35 @@
+module AssigneeActivityMessageHandler
+  extend ActiveSupport::Concern
+
+  private
+
+  def create_assignee_change_activity(user_name)
+    user_name = activity_message_owner(user_name)
+
+    return unless user_name
+
+    content = generate_assignee_change_activity_content(user_name)
+    ::Conversations::ActivityMessageJob.perform_later(self, activity_message_params(content)) if content
+  end
+
+  def generate_assignee_change_activity_content(user_name)
+    params = { assignee_name: assignee&.name || '', user_name: user_name }
+    key = assignee_id ? 'assigned' : 'removed'
+    key = 'self_assigned' if self_assign? assignee_id
+    I18n.t("conversations.activity.assignee.#{key}", **params)
+  end
+
+  def activity_message_owner(user_name)
+    if !user_name && Current.executed_by.present?
+      user_name = case Current.executed_by
+                  when AssignmentPolicy
+                    I18n.t('auto_assignment.policy_actor', policy_name: Current.executed_by.name)
+                  when Inbox
+                    I18n.t('auto_assignment.default_policy_name')
+                  else
+                    I18n.t('automation.system_name')
+                  end
+    end
+    user_name
+  end
+end
diff --git a/app/services/auto_assignment/assignment_service.rb b/app/services/auto_assignment/assignment_service.rb
index 89eff9d1c..e27f1e829 100644
--- a/app/services/auto_assignment/assignment_service.rb
+++ b/app/services/auto_assignment/assignment_service.rb
@@ -72,13 +72,17 @@ class AutoAssignment::AssignmentService
   end
 
   def assign_conversation(conversation, agent)
+    Current.executed_by = inbox.assignment_policy || inbox
     conversation.update!(assignee: agent)
+    Current.executed_by = nil
 
     rate_limiter = build_rate_limiter(agent)
     rate_limiter.track_assignment(conversation)
 
     dispatch_assignment_event(conversation, agent)
     true
+  ensure
+    Current.executed_by = nil
   end
 
   def dispatch_assignment_event(conversation, agent)
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 05276009f..9cab941c2 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -438,6 +438,9 @@ en:
     seconds:
       one: '%{count} second'
       other: '%{count} seconds'
+  auto_assignment:
+    default_policy_name: 'Default Policy'
+    policy_actor: 'Automation System via %{policy_name}'
   automation:
     system_name: 'Automation System'
   crm:

From 6be95e79f8964d922d7de3d7ceb76874e6405ac4 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Tue, 24 Feb 2026 15:11:04 +0400
Subject: [PATCH 25/26] feat(csat): Add WhatsApp utility template analyzer with
 rewrite guidance (#13575)

CSAT templates for WhatsApp are submitted as Utility, but Meta may
reclassify them as Marketing based on content, which can significantly
increase messaging costs.
This PR introduces a Captain-powered CSAT template analyzer for
WhatsApp/Twilio WhatsApp that predicts utility fit, explains likely
risks, and suggests safer rewrites before submission. The flow is manual
(button-triggered), Captain-gated, and applies rewrites only on explicit
user action. It also updates UX copy to clearly set expectations: the
system submits as Utility, Meta makes the final categorization decision.

Fixes
https://linear.app/chatwoot/issue/CW-6424/ai-powered-whatsapp-template-classifier-for-csat-submissions


https://github.com/user-attachments/assets/8fd1d6db-2f91-447c-9771-3de271b16fd9
---
 .../inbox_csat_templates_controller.rb        |  24 +++
 app/javascript/dashboard/api/inboxes.js       |   6 +
 .../dashboard/i18n/locale/en/inboxMgmt.json   |  16 +-
 .../settingsPage/CustomerSatisfactionPage.vue | 152 +++++++++++++++++-
 .../dashboard/store/modules/inboxes.js        |   7 +
 .../csat_template_management_service.rb       |   2 +
 .../csat_template_utility_analysis_service.rb |  86 ++++++++++
 app/services/csat_template_utility_rubric.rb  | 125 ++++++++++++++
 .../whatsapp/csat_template_service.rb         |   2 +-
 config/routes.rb                              |   4 +-
 lib/captain/csat_utility_analysis_service.rb  |  66 ++++++++
 .../csat_utility_analysis.liquid              |  27 ++++
 .../inbox_csat_templates_controller_spec.rb   |  91 +++++++++++
 .../csat_utility_analysis_service_spec.rb     |  24 +++
 ..._template_utility_analysis_service_spec.rb |  81 ++++++++++
 .../whatsapp/csat_template_service_spec.rb    |   4 +-
 16 files changed, 711 insertions(+), 6 deletions(-)
 create mode 100644 app/services/csat_template_utility_analysis_service.rb
 create mode 100644 app/services/csat_template_utility_rubric.rb
 create mode 100644 lib/captain/csat_utility_analysis_service.rb
 create mode 100644 lib/integrations/openai/openai_prompts/csat_utility_analysis.liquid
 create mode 100644 spec/lib/captain/csat_utility_analysis_service_spec.rb
 create mode 100644 spec/services/csat_template_utility_analysis_service_spec.rb

diff --git a/app/controllers/api/v1/accounts/inbox_csat_templates_controller.rb b/app/controllers/api/v1/accounts/inbox_csat_templates_controller.rb
index bb5dab680..d7244616d 100644
--- a/app/controllers/api/v1/accounts/inbox_csat_templates_controller.rb
+++ b/app/controllers/api/v1/accounts/inbox_csat_templates_controller.rb
@@ -1,6 +1,7 @@
 class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseController
   before_action :fetch_inbox
   before_action :validate_whatsapp_channel
+  before_action :validate_captain_enabled, only: [:analyze]
 
   def show
     service = CsatTemplateManagementService.new(@inbox)
@@ -24,6 +25,23 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
     render json: { error: 'Template parameters are required' }, status: :unprocessable_entity
   end
 
+  def analyze
+    template_params = extract_template_params
+    return render_missing_message_error if template_params[:message].blank?
+
+    result = CsatTemplateUtilityAnalysisService.new(
+      account: Current.account,
+      inbox: @inbox,
+      message: template_params[:message],
+      button_text: template_params[:button_text],
+      language: template_params[:language]
+    ).perform
+
+    render json: result
+  rescue ActionController::ParameterMissing
+    render json: { error: 'Template parameters are required' }, status: :unprocessable_entity
+  end
+
   private
 
   def fetch_inbox
@@ -46,6 +64,12 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
     render json: { error: 'Message is required' }, status: :unprocessable_entity
   end
 
+  def validate_captain_enabled
+    return if Current.account.feature_enabled?('captain_integration')
+
+    render json: { error: 'Captain is required for template analysis' }, status: :forbidden
+  end
+
   def render_template_creation_result(result)
     if result[:success]
       render_successful_template_creation(result)
diff --git a/app/javascript/dashboard/api/inboxes.js b/app/javascript/dashboard/api/inboxes.js
index 83ba3e9ba..079f21815 100644
--- a/app/javascript/dashboard/api/inboxes.js
+++ b/app/javascript/dashboard/api/inboxes.js
@@ -42,6 +42,12 @@ class Inboxes extends CacheEnabledApiClient {
   getCSATTemplateStatus(inboxId) {
     return axios.get(`${this.url}/${inboxId}/csat_template`);
   }
+
+  analyzeCSATTemplateUtility(inboxId, template) {
+    return axios.post(`${this.url}/${inboxId}/csat_template/analyze`, {
+      template,
+    });
+  }
 }
 
 export default new Inboxes();
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index f4f62764b..aaa8fd5bf 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -890,6 +890,20 @@
         "CONFIRM": "Create new template",
         "CANCEL": "Go back"
       },
+      "UTILITY_ANALYZER": {
+        "ACTION": "Check utility fit",
+        "HELPER_NOTE": "Check this message before submission to improve Utility fit. The system creates a dedicated CSAT template with buttons for reporting and submits it as Utility; Meta may still reclassify it as Marketing based on content.",
+        "RESULT_LABEL": "Meta category prediction",
+        "GUIDANCE_NOTE": "This is a guidance check, not a guarantee of Meta approval.",
+        "SUGGESTION_LABEL": "Suggested utility-safe rewrite",
+        "APPLY": "Use this rewrite",
+        "ERROR_MESSAGE": "Couldn't analyze the message. Please try again.",
+        "CLASSIFICATION": {
+          "LIKELY_UTILITY": "Likely Utility",
+          "LIKELY_MARKETING": "Likely Marketing",
+          "UNCLEAR": "Needs clarification"
+        }
+      },
       "SURVEY_RULE": {
         "LABEL": "Survey rule",
         "DESCRIPTION_PREFIX": "Send the survey if the conversation",
@@ -901,7 +915,7 @@
         "SELECT_PLACEHOLDER": "select labels"
       },
       "NOTE": "Note: CSAT surveys are sent only once per conversation",
-      "WHATSAPP_NOTE": "Note: We will create a template and send it for WhatsApp approval. After being approved, surveys will be sent only once per conversation as per the survey rule.",
+      "WHATSAPP_NOTE": "Note: When you save, the system creates a dedicated CSAT template in WhatsApp (used to capture rating and feedback in reports) and submits it as Utility for approval. Meta may still classify it as Marketing based on content. After approval, surveys are sent only once per conversation as per the survey rule.",
       "API": {
         "SUCCESS_MESSAGE": "CSAT settings updated successfully",
         "ERROR_MESSAGE": "We couldn't update CSAT settings. Please try again later."
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
index 03cb6dada..dc247da6f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useInbox } from 'dashboard/composables/useInbox';
+import { useCaptain } from 'dashboard/composables/useCaptain';
 import { CSAT_DISPLAY_TYPES } from 'shared/constants/messages';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
@@ -26,6 +27,7 @@ const props = defineProps({
 const { t } = useI18n();
 const store = useStore();
 const labels = useMapGetter('labels/getLabels');
+const { captainEnabled } = useCaptain();
 
 const { isAWhatsAppChannel, isATwilioWhatsAppChannel } = useInbox(
   props.inbox?.id
@@ -37,6 +39,8 @@ const isAnyWhatsAppChannel = computed(
 );
 
 const isUpdating = ref(false);
+const utilityAnalysisLoading = ref(false);
+const utilityAnalysisResult = ref(null);
 const selectedLabelValues = ref([]);
 const currentLabel = ref('');
 
@@ -46,7 +50,7 @@ const state = reactive({
   message: '',
   templateButtonText: 'Please rate us',
   surveyRuleOperator: 'contains',
-  templateLanguage: '',
+  templateLanguage: 'en',
 });
 
 const templateStatus = ref(null);
@@ -89,6 +93,9 @@ const messagePreviewData = computed(() => ({
 const shouldShowTemplateStatus = computed(
   () => templateStatus.value && !templateLoading.value
 );
+const showUtilityAnalyzer = computed(
+  () => isAnyWhatsAppChannel.value && captainEnabled.value
+);
 
 const templateApprovalStatus = computed(() => {
   const statusMap = {
@@ -218,6 +225,85 @@ const updateDisplayType = type => {
   state.displayType = type;
 };
 
+const resetUtilityAnalysis = () => {
+  utilityAnalysisResult.value = null;
+};
+
+const analyzeTemplateUtility = async () => {
+  if (!showUtilityAnalyzer.value || !state.message?.trim()) return;
+
+  utilityAnalysisLoading.value = true;
+  resetUtilityAnalysis();
+
+  try {
+    const response = await store.dispatch(
+      'inboxes/analyzeCSATTemplateUtility',
+      {
+        inboxId: props.inbox.id,
+        template: {
+          message: state.message,
+          button_text: state.templateButtonText,
+          language: state.templateLanguage,
+        },
+      }
+    );
+    utilityAnalysisResult.value = response;
+  } catch (error) {
+    const errorMessage =
+      error.response?.data?.error ||
+      t('INBOX_MGMT.CSAT.UTILITY_ANALYZER.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  } finally {
+    utilityAnalysisLoading.value = false;
+  }
+};
+
+const applyUtilitySuggestion = () => {
+  const suggestion = utilityAnalysisResult.value?.optimized_message;
+  if (!suggestion) return;
+
+  state.message = suggestion;
+  resetUtilityAnalysis();
+};
+
+watch(
+  () => [state.message, state.templateButtonText, state.templateLanguage],
+  (newValues, oldValues) => {
+    if (!oldValues || !utilityAnalysisResult.value) {
+      return;
+    }
+
+    const changed = newValues.some(
+      (value, index) => value !== oldValues[index]
+    );
+    if (changed) {
+      resetUtilityAnalysis();
+    }
+  }
+);
+
+const getUtilityClassificationLabel = classification => {
+  if (classification === 'LIKELY_UTILITY') {
+    return t('INBOX_MGMT.CSAT.UTILITY_ANALYZER.CLASSIFICATION.LIKELY_UTILITY');
+  }
+  if (classification === 'LIKELY_MARKETING') {
+    return t(
+      'INBOX_MGMT.CSAT.UTILITY_ANALYZER.CLASSIFICATION.LIKELY_MARKETING'
+    );
+  }
+  return t('INBOX_MGMT.CSAT.UTILITY_ANALYZER.CLASSIFICATION.UNCLEAR');
+};
+
+const getUtilityClassificationClass = classification => {
+  if (classification === 'LIKELY_UTILITY') {
+    return 'bg-n-teal-3 text-n-teal-11';
+  }
+  if (classification === 'LIKELY_MARKETING') {
+    return 'bg-n-ruby-3 text-n-ruby-11';
+  }
+  return 'bg-n-amber-3 text-n-amber-11';
+};
+
 const updateSurveyRuleOperator = operator => {
   state.surveyRuleOperator = operator;
 };
@@ -450,6 +536,70 @@ const handleConfirmTemplateUpdate = async () => {
                     class="w-full"
                   />
                 </WithLabel>
+                <div v-if="showUtilityAnalyzer" class="flex flex-col gap-2">
+                  <NextButton
+                    sm
+                    slate
+                    :label="$t('INBOX_MGMT.CSAT.UTILITY_ANALYZER.ACTION')"
+                    :is-loading="utilityAnalysisLoading"
+                    :disabled="!state.message?.trim()"
+                    @click="analyzeTemplateUtility"
+                  />
+                  <p class="text-xs text-n-slate-11">
+                    {{ $t('INBOX_MGMT.CSAT.UTILITY_ANALYZER.HELPER_NOTE') }}
+                  </p>
+                </div>
+
+                <div
+                  v-if="utilityAnalysisResult"
+                  class="flex flex-col gap-3 p-3 rounded-xl outline outline-1 outline-n-weak bg-n-alpha-1"
+                >
+                  <div class="flex gap-2 items-center">
+                    <span class="text-sm font-medium text-n-slate-12">
+                      {{ $t('INBOX_MGMT.CSAT.UTILITY_ANALYZER.RESULT_LABEL') }}
+                    </span>
+                    <span
+                      class="px-2 py-0.5 text-xs font-medium rounded-full"
+                      :class="
+                        getUtilityClassificationClass(
+                          utilityAnalysisResult.classification
+                        )
+                      "
+                    >
+                      {{
+                        getUtilityClassificationLabel(
+                          utilityAnalysisResult.classification
+                        )
+                      }}
+                    </span>
+                  </div>
+                  <p class="text-xs text-n-slate-11">
+                    {{ $t('INBOX_MGMT.CSAT.UTILITY_ANALYZER.GUIDANCE_NOTE') }}
+                  </p>
+                  <div
+                    v-if="
+                      utilityAnalysisResult.optimized_message &&
+                      utilityAnalysisResult.classification !== 'LIKELY_UTILITY'
+                    "
+                    class="flex flex-col gap-2"
+                  >
+                    <p class="text-xs font-medium text-n-slate-12">
+                      {{
+                        $t('INBOX_MGMT.CSAT.UTILITY_ANALYZER.SUGGESTION_LABEL')
+                      }}
+                    </p>
+                    <p class="text-sm text-n-slate-12">
+                      {{ utilityAnalysisResult.optimized_message }}
+                    </p>
+                    <NextButton
+                      sm
+                      faded
+                      slate
+                      :label="$t('INBOX_MGMT.CSAT.UTILITY_ANALYZER.APPLY')"
+                      @click="applyUtilitySuggestion"
+                    />
+                  </div>
+                </div>
                 <Input
                   v-model="state.templateButtonText"
                   :label="$t('INBOX_MGMT.CSAT.BUTTON_TEXT.LABEL')"
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index c24a90599..49926f378 100644
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -360,6 +360,13 @@ export const actions = {
     const response = await InboxesAPI.getCSATTemplateStatus(inboxId);
     return response.data;
   },
+  analyzeCSATTemplateUtility: async (_, { inboxId, template }) => {
+    const response = await InboxesAPI.analyzeCSATTemplateUtility(
+      inboxId,
+      template
+    );
+    return response.data;
+  },
 };
 
 export const mutations = {
diff --git a/app/services/csat_template_management_service.rb b/app/services/csat_template_management_service.rb
index 064804082..e83b3413a 100644
--- a/app/services/csat_template_management_service.rb
+++ b/app/services/csat_template_management_service.rb
@@ -110,6 +110,7 @@ class CsatTemplateManagementService
 
     template_service = Twilio::CsatTemplateService.new(@inbox.channel)
     status_result = template_service.get_template_status(content_sid)
+    return { template_exists: false, error: 'Template not found' } unless status_result.is_a?(Hash)
 
     if status_result[:success]
       {
@@ -130,6 +131,7 @@ class CsatTemplateManagementService
   def get_whatsapp_template_status(template)
     template_name = template['name'] || CsatTemplateNameService.csat_template_name(@inbox.id)
     status_result = Whatsapp::CsatTemplateService.new(@inbox.channel).get_template_status(template_name)
+    return { template_exists: false, error: 'Template not found' } unless status_result.is_a?(Hash)
 
     if status_result[:success]
       {
diff --git a/app/services/csat_template_utility_analysis_service.rb b/app/services/csat_template_utility_analysis_service.rb
new file mode 100644
index 000000000..b1b089b53
--- /dev/null
+++ b/app/services/csat_template_utility_analysis_service.rb
@@ -0,0 +1,86 @@
+class CsatTemplateUtilityAnalysisService
+  include CsatTemplateUtilityRubric
+
+  pattr_initialize [:account!, :inbox!, :message!, { button_text: nil, language: 'en' }]
+
+  def perform
+    baseline = rule_based_result
+    return baseline if baseline[:classification] == 'LIKELY_MARKETING'
+
+    llm_result = llm_result_or_nil(baseline)
+    llm_result || baseline
+  end
+
+  private
+
+  def llm_result_or_nil(baseline)
+    llm_output = Captain::CsatUtilityAnalysisService.new(
+      account: account,
+      message: message,
+      button_text: button_text,
+      language: language,
+      baseline: baseline
+    ).perform
+
+    return nil if llm_output[:error]
+
+    normalize_llm_result(llm_output, baseline: baseline)
+  rescue StandardError => e
+    Rails.logger.error("CSAT utility LLM analysis failed for inbox #{inbox.id}: #{e.message}")
+    nil
+  end
+
+  def normalize_llm_result(result, baseline:)
+    classification = normalized_classification(result[:classification], baseline: baseline)
+    optimized_message = result[:optimized_message].presence || baseline[:optimized_message]
+    optimized_message = baseline[:optimized_message] if baseline[:classification] == 'LIKELY_MARKETING'
+
+    {
+      classification: classification,
+      optimized_message: optimized_message
+    }
+  end
+
+  def normalized_classification(value, baseline:)
+    raw = value.to_s
+    return 'LIKELY_MARKETING' if baseline[:classification] == 'LIKELY_MARKETING'
+
+    raw
+  end
+
+  def rule_based_result
+    text = sanitized_message
+    marketing_hits_count = MARKETING_PATTERNS.count { |pattern| pattern.match?(text) }
+    utility_hits_count = UTILITY_PATTERNS.count { |pattern| pattern.match?(text) }
+    criteria = evaluate_criteria(text: text, marketing_hits_count: marketing_hits_count)
+    classification = classify(criteria: criteria, utility_hits_count: utility_hits_count)
+    build_rule_payload(
+      classification: classification
+    )
+  end
+
+  def build_rule_payload(payload)
+    {
+      classification: payload[:classification],
+      optimized_message: optimized_message_for(payload[:classification])
+    }
+  end
+
+  def sanitized_message
+    message.to_s.squish
+  end
+
+  def classify(criteria:, utility_hits_count:)
+    return 'LIKELY_MARKETING' unless criteria[:marketing_prohibition]
+    return 'LIKELY_MARKETING' unless criteria[:prohibited_content]
+    return 'LIKELY_UTILITY' if criteria.values.all? && utility_hits_count >= 2
+
+    'UNCLEAR'
+  end
+
+  def optimized_message_for(classification)
+    return sanitized_message if classification == 'LIKELY_UTILITY'
+
+    build_input_aware_utility_message
+  end
+end
diff --git a/app/services/csat_template_utility_rubric.rb b/app/services/csat_template_utility_rubric.rb
new file mode 100644
index 000000000..0253a003a
--- /dev/null
+++ b/app/services/csat_template_utility_rubric.rb
@@ -0,0 +1,125 @@
+# rubocop:disable Metrics/ModuleLength
+module CsatTemplateUtilityRubric
+  LANGUAGE_FALLBACKS = {
+    'en' => {
+      support_request: 'support request',
+      support_ticket: 'support ticket',
+      support_conversation: 'support conversation',
+      status_closed: 'closed',
+      status_resolved: 'resolved',
+      status_completed: 'completed',
+      line_status: 'Your %<subject>s has been %<status>s.',
+      line_help: 'If you still need help, simply reply to this message.',
+      line_rate: 'To rate this support interaction, please use the button below.'
+    }
+  }.freeze
+
+  MARKETING_PATTERNS = [
+    /\b(discounts?|offers?|promos?|promotions?|deals?|sales?|buy|shop|subscribe)\b/i,
+    /\b(limited\s*time|don't\s*miss|exclusive|special\s*offer)\b/i,
+    /\b(click\s*(here|below)\s*to\s*(buy|get|shop))\b/i,
+    /\b(new\s*(plans?|products?|services?))\b/i
+  ].freeze
+
+  TRANSACTION_TRIGGER_PATTERNS = [
+    /\b(closed|closing|resolved|completed)\b/i,
+    /\b(ticket|request|case|conversation|support)\b/i
+  ].freeze
+
+  TRANSACTIONAL_CONTENT_PATTERNS = [
+    /\b(ticket|request|case|conversation)\b/i,
+    /\b(reply\s+to\s+this\s+message|if\s+you\s+still\s+need\s+help)\b/i,
+    /\b(rate|califica|calificar)\b/i
+  ].freeze
+
+  PROHIBITED_CONTENT_PATTERNS = [
+    /\b(contest|sweepstake|lottery|quiz)\b/i,
+    /\b(password|otp|pin|cvv|credit\s*card)\b/i,
+    /\b(weapon|drugs|gambling)\b/i
+  ].freeze
+
+  STATUS_PATTERNS = {
+    'closed' => /\b(closed|closing)\b/i,
+    'resolved' => /\b(resolved|resolve[sd]?)\b/i,
+    'completed' => /\b(completed|complete[sd]?)\b/i
+  }.freeze
+
+  SUBJECT_PATTERNS = {
+    'support ticket' => /\b(ticket)\b/i,
+    'support conversation' => /\b(conversation|chat)\b/i,
+    'support request' => /\b(request|case|support)\b/i
+  }.freeze
+
+  UTILITY_PATTERNS = [
+    /\b(support|ticket|request|conversation|case)\b/i,
+    /\b(closed|resolved|completed)\b/i,
+    /\b(reply\s+to\s+this\s+message\b)/i,
+    /\b(if\s+you\s+still\s+need\s+help)\b/i,
+    /\b(rate\s+this\s+(support|interaction|conversation))\b/i
+  ].freeze
+
+  private
+
+  def build_input_aware_utility_message
+    text = translation_pack
+    subject = detected_subject
+    status = detected_status
+    intro = extracted_intro_sentence
+
+    parts = []
+    parts << intro if intro.present?
+    parts << format(text[:line_status], subject: subject, status: status)
+    parts << text[:line_help]
+    parts << text[:line_rate]
+    parts.join(' ')
+  end
+
+  def detected_status
+    matched = STATUS_PATTERNS.find { |_key, pattern| pattern.match?(sanitized_message) }
+    status_key = matched&.first || 'closed'
+    translation_pack[:"status_#{status_key}"]
+  end
+
+  def detected_subject
+    matched = SUBJECT_PATTERNS.find { |_key, pattern| pattern.match?(sanitized_message) }
+    subject_key = matched&.first&.tr(' ', '_') || 'support_request'
+    translation_pack[subject_key.to_sym]
+  end
+
+  def extracted_intro_sentence
+    first_sentence = sanitized_message.split(/(?<=[.!?])\s+/).first.to_s
+    return nil if first_sentence.blank?
+    return nil if MARKETING_PATTERNS.any? { |pattern| pattern.match?(first_sentence) }
+    return nil unless first_sentence.match?(/\b(thanks|thank you|hello|hi)\b/i)
+
+    normalized = first_sentence.gsub(/\s+/, ' ').strip
+    normalized.ends_with?('.', '!', '?') ? normalized : "#{normalized}."
+  end
+
+  def translation_pack
+    LANGUAGE_FALLBACKS.fetch(primary_language_code, LANGUAGE_FALLBACKS['en'])
+  end
+
+  def primary_language_code
+    language.to_s.downcase.split(/[-_]/).first
+  end
+
+  def evaluate_criteria(text:, marketing_hits_count:)
+    {
+      trigger: TRANSACTION_TRIGGER_PATTERNS.any? { |pattern| pattern.match?(text) },
+      transactional_content: TRANSACTIONAL_CONTENT_PATTERNS.count { |pattern| pattern.match?(text) } >= 2,
+      marketing_prohibition: marketing_hits_count.zero?,
+      prohibited_content: PROHIBITED_CONTENT_PATTERNS.none? { |pattern| pattern.match?(text) },
+      clarity_and_utility: clear_utility_intent?(text)
+    }
+  end
+
+  def clear_utility_intent?(text)
+    has_support_context = text.match?(/\b(support|ticket|request|case|conversation)\b/i)
+    has_actionable_next_step = text.match?(/\b(reply\s+to\s+this\s+message)\b/i) ||
+                               text.match?(/\b(if\s+you\s+still\s+need\s+help)\b/i) ||
+                               text.match?(/\b(rate\s+this\s+(support|interaction|conversation))\b/i)
+    has_support_context && has_actionable_next_step
+  end
+end
+# rubocop:enable Metrics/ModuleLength
diff --git a/app/services/whatsapp/csat_template_service.rb b/app/services/whatsapp/csat_template_service.rb
index 9bdbef8ca..9dc057a10 100644
--- a/app/services/whatsapp/csat_template_service.rb
+++ b/app/services/whatsapp/csat_template_service.rb
@@ -2,7 +2,7 @@ class Whatsapp::CsatTemplateService
   DEFAULT_BUTTON_TEXT = 'Please rate us'.freeze
   DEFAULT_LANGUAGE = 'en'.freeze
   WHATSAPP_API_VERSION = 'v14.0'.freeze
-  TEMPLATE_CATEGORY = 'MARKETING'.freeze
+  TEMPLATE_CATEGORY = 'UTILITY'.freeze
   TEMPLATE_STATUS_PENDING = 'PENDING'.freeze
 
   def initialize(whatsapp_channel)
diff --git a/config/routes.rb b/config/routes.rb
index 38c93b91e..1efd9f526 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -224,7 +224,9 @@ Rails.application.routes.draw do
               end
             end
 
-            resource :csat_template, only: [:show, :create], controller: 'inbox_csat_templates'
+            resource :csat_template, only: [:show, :create], controller: 'inbox_csat_templates' do
+              post :analyze, on: :collection
+            end
           end
 
           resources :inbox_members, only: [:create, :show], param: :inbox_id do
diff --git a/lib/captain/csat_utility_analysis_service.rb b/lib/captain/csat_utility_analysis_service.rb
new file mode 100644
index 000000000..e04a98a7f
--- /dev/null
+++ b/lib/captain/csat_utility_analysis_service.rb
@@ -0,0 +1,66 @@
+class Captain::CsatUtilityAnalysisService < Captain::BaseTaskService
+  pattr_initialize [:account!, :message!, { button_text: nil, language: 'en', baseline: {} }]
+
+  def perform
+    api_response = make_api_call(
+      model: GPT_MODEL,
+      messages: [
+        { role: 'system', content: system_prompt },
+        { role: 'user', content: message }
+      ]
+    )
+
+    return api_response if api_response[:error]
+
+    build_result(api_response[:message])
+  end
+
+  private
+
+  def build_result(response_message)
+    parsed = parse_json_response(response_message)
+    return { error: 'Invalid LLM response format' } if parsed.blank?
+
+    core_result(parsed).merge(message: response_message)
+  end
+
+  def core_result(parsed)
+    {
+      classification: normalize_classification(parsed['classification']),
+      optimized_message: parsed['optimized_message'].presence || baseline[:optimized_message]
+    }
+  end
+
+  def system_prompt
+    template = prompt_from_file('csat_utility_analysis')
+    Liquid::Template.parse(template).render(prompt_variables)
+  end
+
+  def prompt_variables
+    {
+      'message' => message.to_s,
+      'button_text' => button_text.to_s,
+      'language' => language.to_s,
+      'baseline_classification' => baseline[:classification].to_s
+    }
+  end
+
+  def parse_json_response(content)
+    raw = content.to_s.strip
+    json = raw.match(/```json\s*(.*?)\s*```/m)&.captures&.first || raw
+    JSON.parse(json)
+  rescue JSON::ParserError
+    nil
+  end
+
+  def normalize_classification(value)
+    normalized = value.to_s.upcase
+    return normalized if %w[LIKELY_UTILITY LIKELY_MARKETING UNCLEAR].include?(normalized)
+
+    baseline[:classification].presence || 'UNCLEAR'
+  end
+
+  def event_name
+    'csat_utility_analysis'
+  end
+end
diff --git a/lib/integrations/openai/openai_prompts/csat_utility_analysis.liquid b/lib/integrations/openai/openai_prompts/csat_utility_analysis.liquid
new file mode 100644
index 000000000..a4638241e
--- /dev/null
+++ b/lib/integrations/openai/openai_prompts/csat_utility_analysis.liquid
@@ -0,0 +1,27 @@
+You are a WhatsApp template compliance assistant.
+Your task is to evaluate whether a CSAT template message is likely to be approved as UTILITY vs MARKETING under Meta policy.
+
+Rules:
+1. Prefer UTILITY only when the message is tied to an existing support or transactional event.
+2. Avoid promotional language, upsell, cross-sell, offers, discounts, or purchase intent.
+3. Keep the rewritten message concise, explicit, and purely transactional.
+4. Do not invent product offers or marketing phrases.
+
+Input:
+- Message: {{ message }}
+- Button text: {{ button_text }}
+- Language code: {{ language }}
+
+Baseline heuristic:
+- Classification: {{ baseline_classification }}
+
+Return ONLY valid JSON with this shape (example):
+{
+  "classification": "LIKELY_UTILITY",
+  "optimized_message": "rewritten utility-safe message"
+}
+
+Allowed values for "classification": "LIKELY_UTILITY", "LIKELY_MARKETING", or "UNCLEAR".
+
+Important:
+- Write `optimized_message` in the same language as `Language code`.
diff --git a/spec/controllers/api/v1/accounts/inbox_csat_templates_controller_spec.rb b/spec/controllers/api/v1/accounts/inbox_csat_templates_controller_spec.rb
index d577c1b5d..ea23319fe 100644
--- a/spec/controllers/api/v1/accounts/inbox_csat_templates_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/inbox_csat_templates_controller_spec.rb
@@ -10,10 +10,12 @@ RSpec.describe Api::V1::Accounts::InboxCsatTemplatesController, type: :request d
   let(:whatsapp_inbox) { create(:inbox, channel: whatsapp_channel, account: account) }
   let(:web_widget_inbox) { create(:inbox, account: account) }
   let(:mock_service) { instance_double(Whatsapp::CsatTemplateService) }
+  let(:analysis_service) { instance_double(CsatTemplateUtilityAnalysisService) }
 
   before do
     create(:inbox_member, user: agent, inbox: whatsapp_inbox)
     allow(Whatsapp::CsatTemplateService).to receive(:new).and_return(mock_service)
+    allow(CsatTemplateUtilityAnalysisService).to receive(:new).and_return(analysis_service)
   end
 
   describe 'GET /api/v1/accounts/{account.id}/inboxes/{inbox.id}/csat_template' do
@@ -380,4 +382,93 @@ RSpec.describe Api::V1::Accounts::InboxCsatTemplatesController, type: :request d
       end
     end
   end
+
+  describe 'POST /api/v1/accounts/{account.id}/inboxes/{inbox.id}/csat_template/analyze' do
+    let(:valid_template_params) do
+      {
+        template: {
+          message: 'How would you rate your experience?',
+          button_text: 'Rate Us',
+          language: 'en'
+        }
+      }
+    end
+
+    context 'when captain_integration feature is disabled' do
+      before do
+        account.disable_features!('captain_integration')
+      end
+
+      it 'returns forbidden' do
+        post "/api/v1/accounts/#{account.id}/inboxes/#{whatsapp_inbox.id}/csat_template/analyze",
+             headers: admin.create_new_auth_token,
+             params: valid_template_params,
+             as: :json
+
+        expect(response).to have_http_status(:forbidden)
+        expect(response.parsed_body['error']).to eq('Captain is required for template analysis')
+      end
+    end
+
+    context 'when captain_integration feature is enabled' do
+      before do
+        account.enable_features!('captain_integration')
+        account.reload
+      end
+
+      it 'returns analysis response' do
+        allow(analysis_service).to receive(:perform).and_return({
+                                                                  classification: 'LIKELY_UTILITY',
+                                                                  optimized_message: 'Your support request has been closed.'
+                                                                })
+
+        post "/api/v1/accounts/#{account.id}/inboxes/#{whatsapp_inbox.id}/csat_template/analyze",
+             headers: admin.create_new_auth_token,
+             params: valid_template_params,
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        response_data = response.parsed_body
+        expect(response_data['classification']).to eq('LIKELY_UTILITY')
+        expect(response_data['optimized_message']).to eq('Your support request has been closed.')
+      end
+
+      it 'returns error when message is missing' do
+        invalid_params = { template: { button_text: 'Rate Us', language: 'en' } }
+
+        post "/api/v1/accounts/#{account.id}/inboxes/#{whatsapp_inbox.id}/csat_template/analyze",
+             headers: admin.create_new_auth_token,
+             params: invalid_params,
+             as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(response.parsed_body['error']).to eq('Message is required')
+      end
+
+      it 'returns unauthorized when agent is not assigned to inbox' do
+        other_agent = create(:user, account: account, role: :agent)
+
+        post "/api/v1/accounts/#{account.id}/inboxes/#{whatsapp_inbox.id}/csat_template/analyze",
+             headers: other_agent.create_new_auth_token,
+             params: valid_template_params,
+             as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+
+      it 'allows access when agent is assigned to inbox' do
+        allow(analysis_service).to receive(:perform).and_return({
+                                                                  classification: 'LIKELY_UTILITY',
+                                                                  optimized_message: 'Your support request has been closed.'
+                                                                })
+
+        post "/api/v1/accounts/#{account.id}/inboxes/#{whatsapp_inbox.id}/csat_template/analyze",
+             headers: agent.create_new_auth_token,
+             params: valid_template_params,
+             as: :json
+
+        expect(response).to have_http_status(:success)
+      end
+    end
+  end
 end
diff --git a/spec/lib/captain/csat_utility_analysis_service_spec.rb b/spec/lib/captain/csat_utility_analysis_service_spec.rb
new file mode 100644
index 000000000..e4e980e01
--- /dev/null
+++ b/spec/lib/captain/csat_utility_analysis_service_spec.rb
@@ -0,0 +1,24 @@
+require 'rails_helper'
+
+RSpec.describe Captain::CsatUtilityAnalysisService do
+  let(:account) { create(:account) }
+  let(:service) { described_class.new(account: account, message: 'Test message', language: 'en', baseline: {}) }
+
+  describe '#perform' do
+    before do
+      allow(account).to receive(:feature_enabled?).and_call_original
+      allow(account).to receive(:feature_enabled?).with('captain_tasks').and_return(true)
+      allow(service).to receive(:make_api_call).and_return({
+                                                             message: '{"classification":"LIKELY_UTILITY","optimized_message":"Utility-safe message"}'
+                                                           })
+    end
+
+    it 'returns parsed payload and preserves raw message for usage metering' do
+      result = service.perform
+
+      expect(result[:classification]).to eq('LIKELY_UTILITY')
+      expect(result[:optimized_message]).to eq('Utility-safe message')
+      expect(result[:message]).to eq('{"classification":"LIKELY_UTILITY","optimized_message":"Utility-safe message"}')
+    end
+  end
+end
diff --git a/spec/services/csat_template_utility_analysis_service_spec.rb b/spec/services/csat_template_utility_analysis_service_spec.rb
new file mode 100644
index 000000000..7f5521d4a
--- /dev/null
+++ b/spec/services/csat_template_utility_analysis_service_spec.rb
@@ -0,0 +1,81 @@
+require 'rails_helper'
+
+RSpec.describe CsatTemplateUtilityAnalysisService do
+  let(:account) { build_stubbed(:account) }
+  let(:inbox) { build_stubbed(:inbox) }
+  let(:llm_service) { instance_double(Captain::CsatUtilityAnalysisService) }
+
+  before do
+    allow(Captain::CsatUtilityAnalysisService).to receive(:new).and_return(llm_service)
+    allow(llm_service).to receive(:perform).and_return({ error: 'LLM unavailable' })
+  end
+
+  describe '#perform' do
+    context 'when message is utility-compatible' do
+      it 'returns likely utility classification and keeps original message' do
+        message = 'Your support request has been closed. If you still need help, reply to this message.'
+        result = described_class.new(account: account, inbox: inbox, message: message, language: 'en').perform
+
+        expect(result[:classification]).to eq('LIKELY_UTILITY')
+        expect(result[:optimized_message]).to eq(message)
+        expect(result.keys).to contain_exactly(:classification, :optimized_message)
+      end
+    end
+
+    context 'when message contains marketing intent' do
+      it 'returns likely marketing classification with utility-safe rewrite' do
+        message = 'Please rate us and check out our special offer with a discount.'
+        result = described_class.new(account: account, inbox: inbox, message: message, language: 'en').perform
+
+        expect(result[:classification]).to eq('LIKELY_MARKETING')
+        expect(result[:optimized_message]).to include('support request')
+        expect(result[:optimized_message]).to include('reply to this message')
+        expect(result.keys).to contain_exactly(:classification, :optimized_message)
+      end
+    end
+
+    context 'when language is non-English and fallback rewrite is used' do
+      it 'returns English rewrite content' do
+        message = 'Tu caso está cerrado. Califícanos y no te pierdas nuestra oferta.'
+        result = described_class.new(account: account, inbox: inbox, message: message, language: 'es').perform
+
+        expect(result[:optimized_message]).to include('Your support request has been closed.')
+        expect(result[:optimized_message]).to include('If you still need help')
+      end
+    end
+
+    context 'when llm returns inconsistent marketing classification' do
+      it 'keeps likely marketing classification' do
+        allow(llm_service).to receive(:perform).and_return({
+                                                             classification: 'LIKELY_MARKETING',
+                                                             optimized_message: 'Your support request has been closed.'
+                                                           })
+
+        message = "Your case is closed. Don't miss our limited-time premium offer. Rate us below."
+        result = described_class.new(account: account, inbox: inbox, message: message, language: 'en').perform
+
+        expect(result[:classification]).to eq('LIKELY_MARKETING')
+      end
+    end
+
+    context 'when rules classify as marketing' do
+      it 'short-circuits without calling llm' do
+        expect(llm_service).not_to receive(:perform)
+
+        message = 'Your request is closed. Special offer: subscribe now and save.'
+        result = described_class.new(account: account, inbox: inbox, message: message, language: 'en').perform
+
+        expect(result[:classification]).to eq('LIKELY_MARKETING')
+      end
+    end
+
+    context 'when rules classify as marketing for plural promo terms' do
+      it 'keeps likely marketing classification from baseline rules' do
+        message = 'Thanks for contacting us. Rate us and check out our new plans with special discounts.'
+        result = described_class.new(account: account, inbox: inbox, message: message, language: 'en').perform
+
+        expect(result[:classification]).to eq('LIKELY_MARKETING')
+      end
+    end
+  end
+end
diff --git a/spec/services/whatsapp/csat_template_service_spec.rb b/spec/services/whatsapp/csat_template_service_spec.rb
index f21d87227..d7124529d 100644
--- a/spec/services/whatsapp/csat_template_service_spec.rb
+++ b/spec/services/whatsapp/csat_template_service_spec.rb
@@ -119,7 +119,7 @@ RSpec.describe Whatsapp::CsatTemplateService do
       expect(result).to eq({
                              name: expected_template_name,
                              language: 'en',
-                             category: 'MARKETING',
+                             category: 'UTILITY',
                              components: [
                                {
                                  type: 'BODY',
@@ -169,7 +169,7 @@ RSpec.describe Whatsapp::CsatTemplateService do
       expected_body = {
         name: expected_template_name,
         language: 'en',
-        category: 'MARKETING',
+        category: 'UTILITY',
         components: [
           {
             type: 'BODY',

From 7cec4ebaaefe0b2bda4efe72aa1f8b36ced33364 Mon Sep 17 00:00:00 2001
From: Aakash Bakhle <48802744+aakashb95@users.noreply.github.com>
Date: Tue, 24 Feb 2026 19:37:41 +0530
Subject: [PATCH 26/26] feat: support multimodal user messages in captain v2
 (#13581)

Extract and pass image attachments from the latest user message to the
runner,
excluding the last user message from the context for processing.

Fixes #13588

# Pull Request Template

## Description

Adds image support to captain v2

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration.

specs and local testing

<img width="754" height="1008" alt="image"
src="https://github.com/user-attachments/assets/914cbc2c-9d30-42d0-87d4-9e5430845c87"
/>

langfuse also shows media correctly with the instrumentation code:
<img width="1800" height="1260" alt="image"
src="https://github.com/user-attachments/assets/ce0f5fa6-b1a5-42ec-a213-9a82b1751037"
/>


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 Gemfile                                       |   2 +-
 Gemfile.lock                                  |   4 +-
 .../captain/assistant/agent_runner_service.rb |  85 ++++++------
 .../assistant/runner_callbacks_helper.rb      |  53 +++++++
 .../captain/assistant/trace_payload_helper.rb |  51 +++++++
 .../assistant/agent_runner_service_spec.rb    | 131 ++++++++++++++++--
 6 files changed, 264 insertions(+), 62 deletions(-)
 create mode 100644 enterprise/app/services/captain/assistant/runner_callbacks_helper.rb
 create mode 100644 enterprise/app/services/captain/assistant/trace_payload_helper.rb

diff --git a/Gemfile b/Gemfile
index e6c5a5250..0636b7b2b 100644
--- a/Gemfile
+++ b/Gemfile
@@ -191,7 +191,7 @@ gem 'reverse_markdown'
 
 gem 'iso-639'
 gem 'ruby-openai'
-gem 'ai-agents'
+gem 'ai-agents', '>= 0.9.1'
 
 # TODO: Move this gem as a dependency of ai-agents
 gem 'ruby_llm', '>= 1.8.2'
diff --git a/Gemfile.lock b/Gemfile.lock
index aad0438cf..7a7316e3c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -126,7 +126,7 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
-    ai-agents (0.9.0)
+    ai-agents (0.9.1)
       ruby_llm (~> 1.9.1)
     annotaterb (4.20.0)
       activerecord (>= 6.0.0)
@@ -1024,7 +1024,7 @@ DEPENDENCIES
   administrate (>= 0.20.1)
   administrate-field-active_storage (>= 1.0.3)
   administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents
+  ai-agents (>= 0.9.1)
   annotaterb
   attr_extras
   audited (~> 5.4, >= 5.4.1)
diff --git a/enterprise/app/services/captain/assistant/agent_runner_service.rb b/enterprise/app/services/captain/assistant/agent_runner_service.rb
index 9aeee605f..72c44024f 100644
--- a/enterprise/app/services/captain/assistant/agent_runner_service.rb
+++ b/enterprise/app/services/captain/assistant/agent_runner_service.rb
@@ -3,6 +3,8 @@ require 'agents/instrumentation'
 
 class Captain::Assistant::AgentRunnerService
   include Integrations::LlmInstrumentationConstants
+  include Captain::Assistant::RunnerCallbacksHelper
+  include Captain::Assistant::TracePayloadHelper
 
   CONVERSATION_STATE_ATTRIBUTES = %i[
     id display_id inbox_id contact_id status priority
@@ -21,13 +23,7 @@ class Captain::Assistant::AgentRunnerService
   end
 
   def generate_response(message_history: [])
-    agents = build_and_wire_agents
-    context = build_context(message_history)
-    message_to_process = extract_last_user_message(message_history)
-    runner = Agents::Runner.with_agents(*agents)
-    runner = add_usage_metadata_callback(runner)
-    runner = add_callbacks_to_runner(runner) if @callbacks.any?
-    install_instrumentation(runner)
+    message_to_process, context = run_payload(message_history)
     result = runner.run(message_to_process, context: context, max_turns: 100)
 
     process_agent_result(result)
@@ -45,7 +41,10 @@ class Captain::Assistant::AgentRunnerService
 
   def build_context(message_history)
     conversation_history = message_history.map do |msg|
-      content = extract_text_from_content(msg[:content])
+      content = msg[:content]
+      # Preserve multimodal arrays (with image_url entries) as-is for the runner to restore with attachments.
+      # Only extract text from non-array formats (hashes from agent structured output, plain strings).
+      content = extract_text_from_content(content) unless content.is_a?(Array)
 
       {
         role: msg[:role].to_sym,
@@ -63,8 +62,22 @@ class Captain::Assistant::AgentRunnerService
 
   def extract_last_user_message(message_history)
     last_user_msg = message_history.reverse.find { |msg| msg[:role] == 'user' }
+    return '' if last_user_msg.blank?
 
-    extract_text_from_content(last_user_msg[:content])
+    content = last_user_msg[:content]
+    return extract_text_from_content(content) unless content.is_a?(Array)
+
+    text, attachments = Captain::OpenAiMessageBuilderService.extract_text_and_attachments(content)
+    return text if attachments.blank?
+
+    RubyLLM::Content.new(text, attachments)
+  end
+
+  def message_history_without_last_user_message(message_history)
+    last_user_index = message_history.rindex { |msg| msg[:role] == 'user' }
+    return message_history if last_user_index.nil?
+
+    message_history.reject.with_index { |_msg, index| index == last_user_index }
   end
 
   def extract_text_from_content(content)
@@ -143,28 +156,25 @@ class Captain::Assistant::AgentRunnerService
       },
       attribute_provider: ->(context_wrapper) { dynamic_trace_attributes(context_wrapper) }
     )
+    register_trace_input_callback(runner)
   end
 
   def dynamic_trace_attributes(context_wrapper)
     state = context_wrapper&.context&.dig(:state) || {}
     conversation = state[:conversation] || {}
+    trace_input = context_wrapper&.context&.dig(:captain_v2_trace_input)
+
     {
       ATTR_LANGFUSE_USER_ID => state[:account_id],
       format(ATTR_LANGFUSE_METADATA, 'assistant_id') => state[:assistant_id],
       format(ATTR_LANGFUSE_METADATA, 'conversation_id') => conversation[:id],
       format(ATTR_LANGFUSE_METADATA, 'conversation_display_id') => conversation[:display_id],
-      format(ATTR_LANGFUSE_METADATA, 'channel_type') => state[:channel_type]
+      format(ATTR_LANGFUSE_METADATA, 'channel_type') => state[:channel_type],
+      ATTR_LANGFUSE_TRACE_INPUT => trace_input,
+      ATTR_LANGFUSE_OBSERVATION_INPUT => trace_input
     }.compact.transform_values(&:to_s)
   end
 
-  def add_callbacks_to_runner(runner)
-    runner = add_agent_thinking_callback(runner) if @callbacks[:on_agent_thinking]
-    runner = add_tool_start_callback(runner) if @callbacks[:on_tool_start]
-    runner = add_tool_complete_callback(runner) if @callbacks[:on_tool_complete]
-    runner = add_agent_handoff_callback(runner) if @callbacks[:on_agent_handoff]
-    runner
-  end
-
   def add_usage_metadata_callback(runner)
     return runner unless ChatwootApp.otel_enabled?
 
@@ -195,35 +205,20 @@ class Captain::Assistant::AgentRunnerService
     root_span.set_attribute(format(ATTR_LANGFUSE_METADATA, 'credit_used'), credit_used.to_s)
   end
 
-  def add_agent_thinking_callback(runner)
-    runner.on_agent_thinking do |*args|
-      @callbacks[:on_agent_thinking].call(*args)
-    rescue StandardError => e
-      Rails.logger.warn "[Captain] Callback error for agent_thinking: #{e.message}"
+  def runner
+    @runner ||= begin
+      configured_runner = Agents::Runner.with_agents(*build_and_wire_agents)
+      configured_runner = add_usage_metadata_callback(configured_runner)
+      configured_runner = add_callbacks_to_runner(configured_runner) if @callbacks.any?
+      install_instrumentation(configured_runner)
+      configured_runner
     end
   end
 
-  def add_tool_start_callback(runner)
-    runner.on_tool_start do |*args|
-      @callbacks[:on_tool_start].call(*args)
-    rescue StandardError => e
-      Rails.logger.warn "[Captain] Callback error for tool_start: #{e.message}"
-    end
-  end
-
-  def add_tool_complete_callback(runner)
-    runner.on_tool_complete do |*args|
-      @callbacks[:on_tool_complete].call(*args)
-    rescue StandardError => e
-      Rails.logger.warn "[Captain] Callback error for tool_complete: #{e.message}"
-    end
-  end
-
-  def add_agent_handoff_callback(runner)
-    runner.on_agent_handoff do |*args|
-      @callbacks[:on_agent_handoff].call(*args)
-    rescue StandardError => e
-      Rails.logger.warn "[Captain] Callback error for agent_handoff: #{e.message}"
-    end
+  def run_payload(message_history)
+    message_to_process = extract_last_user_message(message_history)
+    context = build_context(message_history_without_last_user_message(message_history))
+    enrich_context_with_trace_payload!(context, message_history, message_to_process)
+    [message_to_process, context]
   end
 end
diff --git a/enterprise/app/services/captain/assistant/runner_callbacks_helper.rb b/enterprise/app/services/captain/assistant/runner_callbacks_helper.rb
new file mode 100644
index 000000000..58fa0ca33
--- /dev/null
+++ b/enterprise/app/services/captain/assistant/runner_callbacks_helper.rb
@@ -0,0 +1,53 @@
+module Captain::Assistant::RunnerCallbacksHelper
+  private
+
+  def add_callbacks_to_runner(runner)
+    runner = add_agent_thinking_callback(runner) if @callbacks[:on_agent_thinking]
+    runner = add_tool_start_callback(runner) if @callbacks[:on_tool_start]
+    runner = add_tool_complete_callback(runner) if @callbacks[:on_tool_complete]
+    runner = add_agent_handoff_callback(runner) if @callbacks[:on_agent_handoff]
+    runner
+  end
+
+  def register_trace_input_callback(runner)
+    runner.on_agent_thinking do |_agent_name, _input, context_wrapper|
+      tracing = context_wrapper&.context&.dig(:__otel_tracing)
+      next unless tracing
+
+      trace_input = context_wrapper.context[:captain_v2_trace_current_input]
+      tracing[:pending_llm_input] = trace_input if trace_input.present?
+    end
+  end
+
+  def add_agent_thinking_callback(runner)
+    runner.on_agent_thinking do |*args|
+      @callbacks[:on_agent_thinking].call(*args)
+    rescue StandardError => e
+      Rails.logger.warn "[Captain] Callback error for agent_thinking: #{e.message}"
+    end
+  end
+
+  def add_tool_start_callback(runner)
+    runner.on_tool_start do |*args|
+      @callbacks[:on_tool_start].call(*args)
+    rescue StandardError => e
+      Rails.logger.warn "[Captain] Callback error for tool_start: #{e.message}"
+    end
+  end
+
+  def add_tool_complete_callback(runner)
+    runner.on_tool_complete do |*args|
+      @callbacks[:on_tool_complete].call(*args)
+    rescue StandardError => e
+      Rails.logger.warn "[Captain] Callback error for tool_complete: #{e.message}"
+    end
+  end
+
+  def add_agent_handoff_callback(runner)
+    runner.on_agent_handoff do |*args|
+      @callbacks[:on_agent_handoff].call(*args)
+    rescue StandardError => e
+      Rails.logger.warn "[Captain] Callback error for agent_handoff: #{e.message}"
+    end
+  end
+end
diff --git a/enterprise/app/services/captain/assistant/trace_payload_helper.rb b/enterprise/app/services/captain/assistant/trace_payload_helper.rb
new file mode 100644
index 000000000..3b6546c12
--- /dev/null
+++ b/enterprise/app/services/captain/assistant/trace_payload_helper.rb
@@ -0,0 +1,51 @@
+module Captain::Assistant::TracePayloadHelper
+  private
+
+  def enrich_context_with_trace_payload!(context, message_history, message_to_process)
+    context[:captain_v2_trace_input] = serialize_trace_messages(message_history)
+    context[:captain_v2_trace_current_input] = serialize_trace_content(message_to_process)
+  end
+
+  def serialize_trace_messages(message_history)
+    message_history.map do |message|
+      {
+        role: message[:role].to_s,
+        content: trace_content_payload(message[:content])
+      }
+    end.to_json
+  end
+
+  def serialize_trace_content(content)
+    payload = trace_content_payload(content)
+    return '' if payload.blank?
+
+    payload.is_a?(String) ? payload : payload.to_json
+  end
+
+  def trace_content_payload(content)
+    case content
+    when RubyLLM::Content
+      trace_parts_from_ruby_llm_content(content)
+    when Array, Hash
+      content
+    when NilClass
+      ''
+    else
+      content.to_s
+    end
+  end
+
+  def trace_parts_from_ruby_llm_content(content)
+    parts = []
+    parts << { type: 'text', text: content.text } if content.text.present?
+
+    content.attachments.each do |attachment|
+      parts << { type: 'image_url', image_url: { url: attachment.source.to_s } }
+    end
+
+    return '' if parts.blank?
+    return parts.first[:text] if parts.one? && parts.first[:type] == 'text'
+
+    parts
+  end
+end
diff --git a/spec/enterprise/services/captain/assistant/agent_runner_service_spec.rb b/spec/enterprise/services/captain/assistant/agent_runner_service_spec.rb
index c3019b82c..13e4804ce 100644
--- a/spec/enterprise/services/captain/assistant/agent_runner_service_spec.rb
+++ b/spec/enterprise/services/captain/assistant/agent_runner_service_spec.rb
@@ -74,12 +74,11 @@ RSpec.describe Captain::Assistant::AgentRunnerService do
     end
 
     it 'runs agent with extracted user message and context' do
-      expected_context = {
+      expected_context = hash_including(
         session_id: "#{account.id}_#{conversation.display_id}",
         conversation_history: [
           { role: :user, content: 'Hello there', agent_name: nil },
-          { role: :assistant, content: 'Hi! How can I help you?', agent_name: 'Assistant' },
-          { role: :user, content: 'I need help with my account', agent_name: nil }
+          { role: :assistant, content: 'Hi! How can I help you?', agent_name: 'Assistant' }
         ],
         state: hash_including(
           account_id: account.id,
@@ -87,7 +86,7 @@ RSpec.describe Captain::Assistant::AgentRunnerService do
           conversation: hash_including(id: conversation.id),
           contact: hash_including(id: contact.id)
         )
-      }
+      )
 
       expect(mock_runner).to receive(:run).with(
         'I need help with my account',
@@ -98,6 +97,71 @@ RSpec.describe Captain::Assistant::AgentRunnerService do
       service.generate_response(message_history: message_history)
     end
 
+    context 'when the latest user message is multimodal' do
+      let(:multimodal_message_history) do
+        [
+          { role: 'assistant', content: 'Please share a screenshot' },
+          {
+            role: 'user',
+            content: [
+              { type: 'text', text: 'What does this error mean?' },
+              { type: 'image_url', image_url: { url: 'https://example.com/error.png' } }
+            ]
+          }
+        ]
+      end
+
+      it 'passes image attachments to the runner input' do
+        expect(mock_runner).to receive(:run) do |input, context:, max_turns:|
+          expect(input).to be_a(RubyLLM::Content)
+          expect(input.text).to eq('What does this error mean?')
+          expect(input.attachments.first.source.to_s).to eq('https://example.com/error.png')
+          expect(context[:conversation_history]).to eq([{ role: :assistant, content: 'Please share a screenshot', agent_name: nil }])
+          expect(max_turns).to eq(100)
+        end
+
+        service.generate_response(message_history: multimodal_message_history)
+      end
+
+      it 'preserves multimodal content in earlier history messages' do
+        history_with_prior_image = [
+          {
+            role: 'user',
+            content: [
+              { type: 'text', text: 'Here is my error screenshot' },
+              { type: 'image_url', image_url: { url: 'https://example.com/error.png' } }
+            ]
+          },
+          { role: 'assistant', content: 'I see the error. Try restarting.' },
+          { role: 'user', content: 'It still does not work' }
+        ]
+
+        expect(mock_runner).to receive(:run) do |input, context:, max_turns:|
+          expect(input).to eq('It still does not work')
+          # The earlier user message with the image should preserve the multimodal array
+          first_history_msg = context[:conversation_history].first
+          expect(first_history_msg[:content]).to be_a(Array)
+          expect(first_history_msg[:content]).to include(
+            { type: 'text', text: 'Here is my error screenshot' },
+            { type: 'image_url', image_url: { url: 'https://example.com/error.png' } }
+          )
+          expect(max_turns).to eq(100)
+        end
+
+        service.generate_response(message_history: history_with_prior_image)
+      end
+
+      it 'stores multimodal trace payloads in runner context' do
+        expect(mock_runner).to receive(:run) do |_input, context:, max_turns:|
+          expect(context[:captain_v2_trace_input]).to include('image_url')
+          expect(context[:captain_v2_trace_current_input]).to include('image_url')
+          expect(max_turns).to eq(100)
+        end
+
+        service.generate_response(message_history: multimodal_message_history)
+      end
+    end
+
     it 'processes and formats agent result' do
       result = service.generate_response(message_history: message_history)
 
@@ -197,22 +261,21 @@ RSpec.describe Captain::Assistant::AgentRunnerService do
     end
 
     context 'with multimodal content' do
-      let(:multimodal_message_history) do
+      let(:multimodal_content) do
         [
-          {
-            role: 'user',
-            content: [
-              { type: 'text', text: 'Can you help with this image?' },
-              { type: 'image_url', image_url: { url: 'https://example.com/image.jpg' } }
-            ]
-          }
+          { type: 'text', text: 'Can you help with this image?' },
+          { type: 'image_url', image_url: { url: 'https://example.com/image.jpg' } }
         ]
       end
 
-      it 'extracts text content from multimodal messages' do
+      let(:multimodal_message_history) do
+        [{ role: 'user', content: multimodal_content }]
+      end
+
+      it 'preserves multimodal arrays in conversation history for image context retention' do
         context = service.send(:build_context, multimodal_message_history)
 
-        expect(context[:conversation_history].first[:content]).to eq('Can you help with this image?')
+        expect(context[:conversation_history].first[:content]).to eq(multimodal_content)
       end
     end
   end
@@ -225,6 +288,24 @@ RSpec.describe Captain::Assistant::AgentRunnerService do
 
       expect(result).to eq('I need help with my account')
     end
+
+    it 'returns multimodal content with image attachments for the runner input' do
+      multimodal_message_history = [
+        {
+          role: 'user',
+          content: [
+            { type: 'text', text: 'Can you check this screenshot?' },
+            { type: 'image_url', image_url: { url: 'https://example.com/image.jpg' } }
+          ]
+        }
+      ]
+
+      result = service.send(:extract_last_user_message, multimodal_message_history)
+
+      expect(result).to be_a(RubyLLM::Content)
+      expect(result.text).to eq('Can you check this screenshot?')
+      expect(result.attachments.first.source.to_s).to eq('https://example.com/image.jpg')
+    end
   end
 
   describe '#extract_text_from_content' do
@@ -256,6 +337,28 @@ RSpec.describe Captain::Assistant::AgentRunnerService do
     end
   end
 
+  describe '#dynamic_trace_attributes' do
+    subject(:service) { described_class.new(assistant: assistant, conversation: conversation) }
+
+    it 'adds serialized trace input attributes when present in context' do
+      context = {
+        state: {
+          account_id: account.id,
+          assistant_id: assistant.id,
+          conversation: { id: conversation.id, display_id: conversation.display_id }
+        },
+        captain_v2_trace_input: '[{"role":"user","content":[{"type":"image_url","image_url":{"url":"https://example.com/image.jpg"}}]}]'
+      }
+      context_wrapper = Struct.new(:context).new(context)
+
+      attributes = service.send(:dynamic_trace_attributes, context_wrapper)
+
+      expect(attributes['langfuse.trace.input']).to include('image_url')
+      expect(attributes['langfuse.observation.input']).to include('image_url')
+      expect(attributes['langfuse.user.id']).to eq(account.id.to_s)
+    end
+  end
+
   describe '#build_state' do
     subject(:service) { described_class.new(assistant: assistant, conversation: conversation) }