diff --git a/app/javascript/dashboard/mixins/attributeMixin.js b/app/javascript/dashboard/mixins/attributeMixin.js
deleted file mode 100644
index 5bc05a4ae..000000000
--- a/app/javascript/dashboard/mixins/attributeMixin.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { mapGetters } from 'vuex';
-import { isValidURL } from '../helper/URLHelper';
-export default {
-  computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-      accountId: 'getCurrentAccountId',
-    }),
-    attributes() {
-      return this.$store.getters['attributes/getAttributesByModel'](
-        this.attributeType
-      );
-    },
-    customAttributes() {
-      if (this.attributeType === 'conversation_attribute')
-        return this.currentChat.custom_attributes || {};
-      return this.contact.custom_attributes || {};
-    },
-    contactIdentifier() {
-      return (
-        this.currentChat.meta?.sender?.id ||
-        this.$route.params.contactId ||
-        this.contactId
-      );
-    },
-    contact() {
-      return this.$store.getters['contacts/getContact'](this.contactIdentifier);
-    },
-    conversationId() {
-      return this.currentChat.id;
-    },
-  },
-  methods: {
-    isAttributeNumber(attributeValue) {
-      return (
-        Number.isInteger(Number(attributeValue)) && Number(attributeValue) > 0
-      );
-    },
-    attributeDisplayType(attributeValue) {
-      if (this.isAttributeNumber(attributeValue)) {
-        return 'number';
-      }
-      if (isValidURL(attributeValue)) {
-        return 'link';
-      }
-      return 'text';
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
deleted file mode 100644
index 2484cad4b..000000000
--- a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import attributeMixin from '../attributeMixin';
-import Vuex from 'vuex';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('attributeMixin', () => {
-  let getters;
-  let actions;
-  let store;
-
-  beforeEach(() => {
-    actions = { updateUISettings: vi.fn(), toggleSidebarUIState: vi.fn() };
-    getters = {
-      getSelectedChat: () => ({
-        id: 7165,
-        custom_attributes: {
-          product_id: 2021,
-        },
-        meta: {
-          sender: {
-            id: 1212,
-          },
-        },
-      }),
-      getCurrentAccountId: () => 1,
-      attributeType: () => 'conversation_attribute',
-    };
-    store = new Vuex.Store({ actions, getters });
-  });
-
-  it('returns currently selected conversation id', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.conversationId).toEqual(7165);
-  });
-
-  it('return display type if attribute passed', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.attributeDisplayType('date')).toBe('text');
-    expect(
-      wrapper.vm.attributeDisplayType('https://www.chatwoot.com/pricing')
-    ).toBe('link');
-    expect(wrapper.vm.attributeDisplayType(9988)).toBe('number');
-  });
-
-  it('return true if number is passed', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.isAttributeNumber(9988)).toBe(true);
-  });
-
-  it('returns currently selected contact', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-      computed: {
-        contact() {
-          return {
-            id: 7165,
-            custom_attributes: {
-              product_id: 2021,
-            },
-          };
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.contact).toEqual({
-      id: 7165,
-      custom_attributes: {
-        product_id: 2021,
-      },
-    });
-  });
-
-  it('returns currently selected contact id', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.contactIdentifier).toEqual(1212);
-  });
-
-  it('returns currently selected conversation custom attributes', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-      computed: {
-        contact() {
-          return {
-            id: 7165,
-            custom_attributes: {
-              product_id: 2021,
-            },
-          };
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.customAttributes).toEqual({
-      product_id: 2021,
-    });
-  });
-
-  it('returns currently selected contact custom attributes', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [attributeMixin],
-      computed: {
-        contact() {
-          return {
-            id: 7165,
-            custom_attributes: {
-              cloudCustomer: true,
-            },
-          };
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.customAttributes).toEqual({
-      cloudCustomer: true,
-    });
-  });
-});
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index 3b0133048..0c9a1ec5b 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -115,13 +115,11 @@ export default {
               <CustomAttributes
                 :contact-id="contact.id"
                 attribute-type="contact_attribute"
-                attribute-class="conversation--attribute"
                 attribute-from="contact_panel"
                 :custom-attributes="contact.custom_attributes"
                 :empty-state-message="
                   $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
                 "
-                class="even"
               />
             </AccordionItem>
           </div>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index ff61d994d..8d82e5465 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -218,8 +218,6 @@ export default {
             >
               <CustomAttributes
                 attribute-type="contact_attribute"
-                attribute-class="conversation--attribute"
-                class="even"
                 attribute-from="conversation_contact_panel"
                 :contact-id="contact.id"
                 :empty-state-message="
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
index 38cefc5aa..987f42d18 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
@@ -70,41 +70,39 @@ const staticElements = computed(() =>
     },
   ].filter(attribute => !!attribute.content.value)
 );
+
+const evenClass = [
+  '[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
+  'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
+];
 </script>
 
 <template>
   <div class="conversation--details">
-    <ContactDetailsItem
-      v-for="element in staticElements"
-      :key="element.title"
-      :title="$t(element.title)"
-      :value="element.content.value"
-      class="conversation--attribute"
-    >
-      <a
-        v-if="element.type === 'link'"
-        :href="referer"
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-        class="text-woot-400 dark:text-woot-600"
+    <div :class="evenClass">
+      <ContactDetailsItem
+        v-for="element in staticElements"
+        :key="element.title"
+        :title="$t(element.title)"
+        :value="element.content.value"
+        class="border-b border-solid border-slate-50 dark:border-slate-700/50"
       >
-        {{ referer }}
-      </a>
-    </ContactDetailsItem>
+        <a
+          v-if="element.type === 'link'"
+          :href="referer"
+          rel="noopener noreferrer nofollow"
+          target="_blank"
+          class="text-woot-400 dark:text-woot-600"
+        >
+          {{ referer }}
+        </a>
+      </ContactDetailsItem>
+    </div>
     <CustomAttributes
-      :class="staticElements.length % 2 === 0 ? 'even' : 'odd'"
+      :start-at="staticElements.length % 2 === 0 ? 'even' : 'odd'"
       attribute-class="conversation--attribute"
       attribute-from="conversation_panel"
       attribute-type="conversation_attribute"
     />
   </div>
 </template>
-
-<style scoped lang="scss">
-.conversation--attribute {
-  @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
-  &:nth-child(2n) {
-    @apply bg-slate-25 dark:bg-slate-800/50;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 86ef0f91e..3c127b857 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -1,153 +1,187 @@
-<script>
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useRoute } from 'dashboard/composables/route';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'dashboard/composables/useI18n';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import CustomAttribute from 'dashboard/components/CustomAttribute.vue';
-import attributeMixin from 'dashboard/mixins/attributeMixin';
 
-export default {
-  components: {
-    CustomAttribute,
+const props = defineProps({
+  attributeType: {
+    type: String,
+    default: 'conversation_attribute',
   },
-  mixins: [attributeMixin],
-  props: {
-    attributeType: {
-      type: String,
-      default: 'conversation_attribute',
-    },
-    attributeClass: {
-      type: String,
-      default: '',
-    },
-    contactId: { type: Number, default: null },
-    attributeFrom: {
-      type: String,
-      required: true,
-    },
-    emptyStateMessage: {
-      type: String,
-      default: '',
-    },
+  contactId: { type: Number, default: null },
+  attributeFrom: {
+    type: String,
+    required: true,
   },
-  setup() {
-    const { uiSettings, updateUISettings } = useUISettings();
+  emptyStateMessage: {
+    type: String,
+    default: '',
+  },
+  startAt: {
+    type: String,
+    default: 'even',
+    validator: value => value === 'even' || value === 'odd',
+  },
+});
+
+const store = useStore();
+const getters = useStoreGetters();
+const route = useRoute();
+const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const [showAllAttributes, toggleShowAllAttributes] = useToggle(false);
+
+const currentChat = computed(() => getters.getSelectedChat.value);
+const attributes = computed(() =>
+  getters['attributes/getAttributesByModel'].value(props.attributeType)
+);
+
+const contactIdentifier = computed(
+  () =>
+    currentChat.value.meta?.sender?.id ||
+    route.params.contactId ||
+    props.contactId
+);
+
+const contact = computed(() =>
+  getters['contacts/getContact'].value(contactIdentifier.value)
+);
+
+const customAttributes = computed(() => {
+  if (props.attributeType === 'conversation_attribute')
+    return currentChat.value.custom_attributes || {};
+  return contact.value.custom_attributes || {};
+});
+
+const conversationId = computed(() => currentChat.value.id);
+
+const toggleButtonText = computed(() =>
+  !showAllAttributes.value
+    ? t('CUSTOM_ATTRIBUTES.SHOW_MORE')
+    : t('CUSTOM_ATTRIBUTES.SHOW_LESS')
+);
+
+const filteredAttributes = computed(() =>
+  attributes.value.map(attribute => {
+    // Check if the attribute key exists in customAttributes
+    const hasValue = Object.hasOwnProperty.call(
+      customAttributes.value,
+      attribute.attribute_key
+    );
+    const isCheckbox = attribute.attribute_display_type === 'checkbox';
+    const defaultValue = isCheckbox ? false : '';
 
     return {
-      uiSettings,
-      updateUISettings,
+      ...attribute,
+      // Set value from customAttributes if it exists, otherwise use default value
+      value: hasValue
+        ? customAttributes.value[attribute.attribute_key]
+        : defaultValue,
     };
-  },
-  data() {
-    return {
-      showAllAttributes: false,
-    };
-  },
-  computed: {
-    toggleButtonText() {
-      return !this.showAllAttributes
-        ? this.$t('CUSTOM_ATTRIBUTES.SHOW_MORE')
-        : this.$t('CUSTOM_ATTRIBUTES.SHOW_LESS');
-    },
-    filteredAttributes() {
-      return this.attributes.map(attribute => {
-        // Check if the attribute key exists in customAttributes
-        const hasValue = Object.hasOwnProperty.call(
-          this.customAttributes,
-          attribute.attribute_key
-        );
+  })
+);
 
-        const isCheckbox = attribute.attribute_display_type === 'checkbox';
-        const defaultValue = isCheckbox ? false : '';
+const displayedAttributes = computed(() => {
+  // Show only the first 5 attributes or all depending on showAllAttributes
+  if (showAllAttributes.value || filteredAttributes.value.length <= 5) {
+    return filteredAttributes.value;
+  }
+  return filteredAttributes.value.slice(0, 5);
+});
 
-        return {
-          ...attribute,
-          // Set value from customAttributes if it exists, otherwise use default value
-          value: hasValue
-            ? this.customAttributes[attribute.attribute_key]
-            : defaultValue,
-        };
-      });
-    },
-    displayedAttributes() {
-      // Show only the first 5 attributes or all depending on showAllAttributes
-      if (this.showAllAttributes || this.filteredAttributes.length <= 5) {
-        return this.filteredAttributes;
-      }
-      return this.filteredAttributes.slice(0, 5);
-    },
-    showMoreUISettingsKey() {
-      return `show_all_attributes_${this.attributeFrom}`;
-    },
-  },
-  mounted() {
-    this.initializeSettings();
-  },
-  methods: {
-    initializeSettings() {
-      this.showAllAttributes =
-        this.uiSettings[this.showMoreUISettingsKey] || false;
-    },
-    onClickToggle() {
-      this.showAllAttributes = !this.showAllAttributes;
-      this.updateUISettings({
-        [this.showMoreUISettingsKey]: this.showAllAttributes,
-      });
-    },
-    async onUpdate(key, value) {
-      const updatedAttributes = { ...this.customAttributes, [key]: value };
-      try {
-        if (this.attributeType === 'conversation_attribute') {
-          await this.$store.dispatch('updateCustomAttributes', {
-            conversationId: this.conversationId,
-            customAttributes: updatedAttributes,
-          });
-        } else {
-          this.$store.dispatch('contacts/update', {
-            id: this.contactId,
-            custom_attributes: updatedAttributes,
-          });
-        }
-        useAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.UPDATE.SUCCESS'));
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message ||
-          this.$t('CUSTOM_ATTRIBUTES.FORM.UPDATE.ERROR');
-        useAlert(errorMessage);
-      }
-    },
-    async onDelete(key) {
-      try {
-        const { [key]: remove, ...updatedAttributes } = this.customAttributes;
-        if (this.attributeType === 'conversation_attribute') {
-          await this.$store.dispatch('updateCustomAttributes', {
-            conversationId: this.conversationId,
-            customAttributes: updatedAttributes,
-          });
-        } else {
-          this.$store.dispatch('contacts/deleteCustomAttributes', {
-            id: this.contactId,
-            customAttributes: [key],
-          });
-        }
+const showMoreUISettingsKey = computed(
+  () => `show_all_attributes_${props.attributeFrom}`
+);
 
-        useAlert(this.$t('CUSTOM_ATTRIBUTES.FORM.DELETE.SUCCESS'));
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message ||
-          this.$t('CUSTOM_ATTRIBUTES.FORM.DELETE.ERROR');
-        useAlert(errorMessage);
-      }
-    },
-    async onCopy(attributeValue) {
-      await copyTextToClipboard(attributeValue);
-      useAlert(this.$t('CUSTOM_ATTRIBUTES.COPY_SUCCESSFUL'));
-    },
-  },
+const initializeSettings = () => {
+  showAllAttributes.value =
+    uiSettings.value[showMoreUISettingsKey.value] || false;
 };
+
+const onClickToggle = () => {
+  toggleShowAllAttributes();
+  updateUISettings({
+    [showMoreUISettingsKey.value]: showAllAttributes.value,
+  });
+};
+
+const onUpdate = async (key, value) => {
+  const updatedAttributes = { ...customAttributes.value, [key]: value };
+  try {
+    if (props.attributeType === 'conversation_attribute') {
+      await store.dispatch('updateCustomAttributes', {
+        conversationId: conversationId.value,
+        customAttributes: updatedAttributes,
+      });
+    } else {
+      store.dispatch('contacts/update', {
+        id: props.contactId,
+        custom_attributes: updatedAttributes,
+      });
+    }
+    useAlert(t('CUSTOM_ATTRIBUTES.FORM.UPDATE.SUCCESS'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t('CUSTOM_ATTRIBUTES.FORM.UPDATE.ERROR');
+    useAlert(errorMessage);
+  }
+};
+
+const onDelete = async key => {
+  try {
+    const { [key]: remove, ...updatedAttributes } = customAttributes.value;
+    if (props.attributeType === 'conversation_attribute') {
+      await store.dispatch('updateCustomAttributes', {
+        conversationId: conversationId.value,
+        customAttributes: updatedAttributes,
+      });
+    } else {
+      store.dispatch('contacts/deleteCustomAttributes', {
+        id: props.contactId,
+        customAttributes: [key],
+      });
+    }
+    useAlert(t('CUSTOM_ATTRIBUTES.FORM.DELETE.SUCCESS'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message || t('CUSTOM_ATTRIBUTES.FORM.DELETE.ERROR');
+    useAlert(errorMessage);
+  }
+};
+
+const onCopy = async attributeValue => {
+  await copyTextToClipboard(attributeValue);
+  useAlert(t('CUSTOM_ATTRIBUTES.COPY_SUCCESSFUL'));
+};
+
+onMounted(() => {
+  initializeSettings();
+});
+
+const evenClass = [
+  '[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
+  'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
+];
+const oddClass = [
+  '[&>*:nth-child(odd)]:!bg-slate-25 [&>*:nth-child(even)]:!bg-white',
+  'dark:[&>*:nth-child(odd)]:!bg-slate-800/50 dark:[&>*:nth-child(even)]:!bg-slate-900',
+];
+
+const wrapperClass = computed(() => {
+  return props.startAt === 'even' ? evenClass : oddClass;
+});
 </script>
 
+<!-- TODO: After migration to Vue 3, remove the top level div -->
 <template>
-  <div class="custom-attributes--panel">
+  <div :class="wrapperClass">
     <CustomAttribute
       v-for="attribute in displayedAttributes"
       :key="attribute.id"
@@ -160,8 +194,8 @@ export default {
       show-actions
       :attribute-regex="attribute.regex_pattern"
       :regex-cue="attribute.regex_cue"
-      :class="attributeClass"
       :contact-id="contactId"
+      class="border-b border-solid border-slate-50 dark:border-slate-700/50"
       @update="onUpdate"
       @delete="onDelete"
       @copy="onCopy"
@@ -187,27 +221,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.custom-attributes--panel {
-  .conversation--attribute {
-    @apply border-slate-50 dark:border-slate-700/50 border-b border-solid;
-  }
-
-  &.odd {
-    .conversation--attribute {
-      &:nth-child(2n + 1) {
-        @apply bg-slate-25 dark:bg-slate-800/50;
-      }
-    }
-  }
-
-  &.even {
-    .conversation--attribute {
-      &:nth-child(2n) {
-        @apply bg-slate-25 dark:bg-slate-800/50;
-      }
-    }
-  }
-}
-</style>