From 6ce3423205c78e78734a13f1867db15607bf549b Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 22 Jan 2026 09:35:58 +0530
Subject: [PATCH] chore: Update contacts page

---
 .../ContactsCard/ContactAttributeDisplay.vue  |  78 +++
 .../Contacts/ContactsCard/ContactCardForm.vue | 609 ++++++++++--------
 .../Contacts/ContactsCard/ContactsCard.vue    | 155 ++---
 .../Contacts/ContactsHeader/ContactHeader.vue |  18 +-
 .../components/DisplayPropertiesModal.vue     | 166 +++++
 .../Contacts/Pages/ContactsList.vue           |  12 +-
 .../ConversationCard/CardStatusIcon.vue       |   2 +-
 .../captain/assistant/BulkSelectBar.vue       |  29 +-
 .../dashboard/components/ChatList.vue         |   4 +-
 .../BulkAgentActions.vue                      |   6 +-
 .../BulkLabelActions.vue                      |  12 +-
 .../BulkTeamActions.vue                       |   6 +-
 .../BulkUpdateActions.vue                     |   6 +-
 .../conversationBulkActions/Index.vue         | 124 ++--
 .../dashboard/i18n/locale/en/contact.json     |  21 +-
 .../components/ContactsBulkActionBar.vue      |  86 ++-
 .../contacts/pages/ContactsIndex.vue          |   6 +-
 .../store/modules/contacts/getters.js         |   5 +-
 theme/icons.js                                |   5 +
 19 files changed, 840 insertions(+), 510 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactAttributeDisplay.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/DisplayPropertiesModal.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactAttributeDisplay.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactAttributeDisplay.vue
new file mode 100644
index 000000000..608e946f1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactAttributeDisplay.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+
+const props = defineProps({
+  customAttributes: { type: Object, required: true },
+});
+
+const { t } = useI18n();
+const { uiSettings } = useUISettings();
+
+const contactAttributes = useMapGetter('attributes/getContactAttributes');
+
+const displayAttributes = computed(() => {
+  const selectedKeys = uiSettings.value.contact_list_display_properties || [];
+  if (!selectedKeys.length) return [];
+
+  return contactAttributes.value
+    .filter(
+      attr =>
+        selectedKeys.includes(attr.attributeKey) &&
+        attr.attributeKey in props.customAttributes
+    )
+    .map(attribute => ({
+      attribute,
+      value: props.customAttributes[attribute.attributeKey],
+    }));
+});
+
+const formatValue = (value, displayType) => {
+  if (value === null || value === undefined || value === '') return null;
+
+  switch (displayType) {
+    case 'checkbox':
+      return value
+        ? t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.YES')
+        : t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.NO');
+    case 'list':
+      return Array.isArray(value) ? value.join(', ') : value;
+    case 'date':
+      return new Date(value).toLocaleDateString();
+    default:
+      return String(value);
+  }
+};
+</script>
+
+<template>
+  <template
+    v-for="(item, index) in displayAttributes"
+    :key="item.attribute.attributeKey"
+  >
+    <div
+      v-if="index === 0"
+      class="w-px h-3 bg-n-strong rounded-lg flex-shrink-0"
+    />
+    <div
+      v-tooltip.top="{
+        content: `${item.attribute.attributeDisplayName}: ${formatValue(item.value, item.attribute.attributeDisplayType)}`,
+        delay: { show: 500, hide: 0 },
+      }"
+      class="flex items-center gap-1 truncate"
+    >
+      <span class="text-body-main text-n-slate-12 truncate">
+        {{ item.attribute.attributeDisplayName }}{{ ':' }}
+      </span>
+      <span class="text-body-main text-n-slate-11 truncate">
+        {{ formatValue(item.value, item.attribute.attributeDisplayType) }}
+      </span>
+    </div>
+    <div
+      v-if="index < displayAttributes.length - 1"
+      class="w-px h-3 bg-n-strong rounded-lg flex-shrink-0"
+    />
+  </template>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue
index c80d284d3..3ce18bb80 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue
@@ -1,16 +1,19 @@
 <script setup>
-import { computed, reactive, watch } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { required, email as emailValidator } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { splitName } from '@chatwoot/utils';
-import Input from 'dashboard/components-next/input/Input.vue';
+import { useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import PhoneNumberInput from 'dashboard/components-next/phonenumberinput/PhoneNumberInput.vue';
-import CountryDropdown from 'dashboard/components-next/Countries/CountryDropdown.vue';
-import CompaniesDropdown from 'dashboard/components-next/Companies/CompaniesDropdown.vue';
-import AddContactNote from './AddContactNote.vue';
-import ContactLabels from 'dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue';
+import Flag from 'dashboard/components-next/flag/Flag.vue';
+import ContactLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
+import countries from 'shared/constants/countries';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardContent from 'dashboard/components-next/Conversation/ConversationCard/CardContent.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
+import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
+import CardStatusIcon from 'dashboard/components-next/Conversation/ConversationCard/CardStatusIcon.vue';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { getLastMessage } from 'dashboard/helper/conversationHelper';
 
 const props = defineProps({
   contactData: {
@@ -19,301 +22,349 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update']);
-
 const { t } = useI18n();
+const router = useRouter();
 
-const SOCIAL_CONFIG = {
-  LINKEDIN: 'i-woot-linkedin',
-  FACEBOOK: 'i-woot-facebook',
-  INSTAGRAM: 'i-woot-instagram',
-  TWITTER: 'i-woot-x',
-  GITHUB: 'i-woot-github',
-};
+const contactNotes = useMapGetter('contactNotes/getAllNotesByContactId');
+const contactConversations = useMapGetter(
+  'contactConversations/getAllConversationsByContactId'
+);
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const currentUser = useMapGetter('getCurrentUser');
+const agentsList = useMapGetter('agents/getAgents');
+const inboxGetter = useMapGetter('inboxes/getInbox');
 
-const formState = reactive({
-  firstName: '',
-  lastName: '',
-  email: '',
-  phoneNumber: '',
-  city: '',
-  countryCode: '',
-  bio: '',
-  companyName: '',
-  companyId: null,
-  socialProfiles: {
-    facebook: '',
-    github: '',
-    instagram: '',
-    linkedin: '',
-    twitter: '',
-  },
+const countriesMap = computed(() => {
+  return countries.reduce((acc, country) => {
+    acc[country.code] = country;
+    acc[country.id] = country;
+    return acc;
+  }, {});
 });
 
-const validationRules = {
-  firstName: { required },
-  email: { email: emailValidator },
-};
+const countryDetails = computed(() => {
+  const attributes = props.contactData?.additionalAttributes || {};
+  const { country, countryCode, city } = attributes;
 
-const v$ = useVuelidate(validationRules, formState);
+  if (!country && !countryCode) return null;
 
-const isFormInvalid = computed(() => v$.value.$invalid);
+  const activeCountry =
+    countriesMap.value[country] || countriesMap.value[countryCode];
+  if (!activeCountry) return null;
 
-const prepareStateBasedOnProps = () => {
-  const {
-    name = '',
-    email: emailAddress = '',
-    phoneNumber: phone = '',
-    additionalAttributes = {},
-  } = props.contactData || {};
-
-  const { firstName: fName, lastName: lName } = splitName(name || '');
-  const {
-    description = '',
-    countryCode: country = '',
-    city: cityName = '',
-    socialProfiles: profiles = {},
-    companyName: company = '',
-  } = additionalAttributes || {};
-
-  formState.firstName = fName;
-  formState.lastName = lName;
-  formState.email = emailAddress;
-  formState.phoneNumber = phone || '';
-  formState.city = cityName;
-  formState.countryCode = country;
-  formState.bio = description;
-  formState.companyName = company;
-  formState.socialProfiles = { ...formState.socialProfiles, ...profiles };
-};
-
-const socialProfilesForm = computed(() =>
-  Object.entries(SOCIAL_CONFIG).map(([key, icon]) => ({
-    key,
-    placeholder: t(`CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.FORM.${key}.PLACEHOLDER`),
-    icon,
-  }))
-);
-
-const handleCompanyChange = company => {
-  formState.companyName = company?.name || '';
-};
-
-const handleUpdate = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  const contactData = {
-    name: `${formState.firstName} ${formState.lastName}`.trim(),
-    email: formState.email,
-    phoneNumber: formState.phoneNumber,
-    additionalAttributes: {
-      description: formState.bio,
-      city: formState.city,
-      countryCode: formState.countryCode,
-      companyName: formState.companyName,
-      socialProfiles: formState.socialProfiles,
-    },
+  return {
+    countryCode: activeCountry.id,
+    city: city ? `${city},` : null,
+    name: activeCountry.name,
   };
-
-  emit('update', contactData);
-};
-
-const resetValidation = () => {
-  v$.value.$reset();
-};
-
-const resetForm = () => {
-  Object.assign(formState, {
-    firstName: '',
-    lastName: '',
-    email: '',
-    phoneNumber: '',
-    city: '',
-    countryCode: '',
-    bio: '',
-    companyName: '',
-    companyId: null,
-    socialProfiles: {
-      facebook: '',
-      github: '',
-      instagram: '',
-      linkedin: '',
-      twitter: '',
-    },
-  });
-};
-
-watch(
-  () => props.contactData?.id,
-  id => {
-    if (id) prepareStateBasedOnProps();
-  },
-  { immediate: true }
-);
-
-defineExpose({
-  resetValidation,
-  isFormInvalid,
-  resetForm,
-  handleUpdate,
 });
+
+const formattedLocation = computed(() => {
+  if (!countryDetails.value) return '';
+  return [countryDetails.value.city, countryDetails.value.name]
+    .filter(Boolean)
+    .join(' ');
+});
+
+const companyName = computed(() => {
+  const attributes = props.contactData?.additionalAttributes || {};
+  return attributes.companyName || '';
+});
+
+const contactLabels = computed(() => {
+  return props.contactData?.labels || [];
+});
+
+const latestNote = computed(() => {
+  if (!props.contactData?.id) return null;
+  const notes = contactNotes.value(props.contactData.id);
+  return notes && notes.length > 0 ? notes[0] : null;
+});
+
+const latestConversation = computed(() => {
+  if (!props.contactData?.id) return null;
+  const conversations = contactConversations.value(props.contactData.id);
+  return conversations && conversations.length > 0 ? conversations[0] : null;
+});
+
+const lastMessageInConversation = computed(() => {
+  if (!latestConversation.value) return null;
+  return getLastMessage(latestConversation.value);
+});
+
+const inbox = computed(() => {
+  const inboxId = latestConversation.value?.inboxId;
+  return inboxId ? inboxGetter.value(inboxId) : {};
+});
+
+const assignee = computed(() => {
+  if (!latestConversation.value?.meta?.assignee?.id) return null;
+  return agentsList.value?.find(
+    agent => agent.id === latestConversation.value.meta.assignee.id
+  );
+});
+
+const getWrittenBy = ({ user } = {}) => {
+  const currentUserId = currentUser.value?.id;
+  return user?.id === currentUserId
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : user?.name || t('CONVERSATION.BOT');
+};
+
+const formatTimestamp = timestamp => {
+  if (!timestamp) return '';
+  return dynamicTime(timestamp);
+};
+
+const getConversationUrl = conversationId => {
+  if (!conversationId || !currentAccountId.value) return '#';
+  const url = `/app/accounts/${currentAccountId.value}/conversations/${conversationId}`;
+  return router.push(url);
+};
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <AddContactNote :contact-id="contactData?.id" />
-
-    <div class="flex flex-col items-start gap-4 pt-2 pb-3">
-      <span
-        class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
-      >
-        <Icon
-          icon="i-lucide-settings-2"
-          class="size-4 text-n-slate-11 hidden lg:block"
+  <div
+    class="flex flex-col gap-2 ltr:pl-2 rtl:pr-2 lg:ltr:pl-9 lg:rtl:pr-9 lg:before:content-[''] lg:before:absolute lg:before:ltr:left-[2.688rem] lg:before:rtl:right-[2.688rem] lg:before:top-0 lg:before:w-px lg:before:h-4 lg:before:bg-n-weak"
+  >
+    <div class="flex items-center gap-2 pb-2">
+      <Icon icon="i-woot-overview" class="size-4 text-n-slate-11" />
+      <h3 class="text-n-slate-11 text-body-main">
+        {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.TITLE') }}
+      </h3>
+    </div>
+    <!-- Section 1: Basic Information -->
+    <div
+      class="hidden lg:flex rounded-xl bg-n-card w-auto outline outline-1 outline-n-container -outline-offset-1 p-3"
+    >
+      <div class="flex flex-wrap items-center gap-2 w-full">
+        <div class="flex items-center gap-1">
+          <Icon icon="i-lucide-circle-user" class="size-4 text-n-slate-11" />
+          <span class="text-label-small text-n-slate-11 m-0">
+            {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.BASIC_INFO') }}
+          </span>
+        </div>
+        <div
+          v-if="contactData?.email"
+          class="h-3 w-px bg-n-strong rounded-lg"
         />
-        {{ t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.TITLE') }}
-      </span>
-
-      <div
-        class="lg:grid lg:grid-cols-[1fr_auto_1fr] flex flex-col items-start lg:items-center w-full gap-3 lg:px-6"
-      >
-        <div class="grid grid-cols-2 gap-2 min-w-0 w-full">
-          <Input
-            v-model="formState.firstName"
-            :placeholder="
-              t(
-                'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.FIRST_NAME.PLACEHOLDER'
-              )
-            "
-            :message-type="v$.firstName.$error ? 'error' : 'info'"
-            class="h-8 min-w-0"
-            @input="v$.firstName.$touch()"
-            @blur="v$.firstName.$touch()"
-          />
-          <Input
-            v-model="formState.lastName"
-            :placeholder="
-              t(
-                'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.LAST_NAME.PLACEHOLDER'
-              )
-            "
-            class="h-8 min-w-0"
+        <!-- Email -->
+        <div v-if="contactData?.email" class="flex items-center gap-1">
+          <Icon
+            icon="i-woot-mail"
+            class="size-4 text-n-slate-11 flex-shrink-0"
           />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ contactData.email }}
+          </span>
         </div>
-
-        <div class="w-px h-3 bg-n-strong hidden lg:block" />
-
-        <div class="grid grid-cols-3 gap-3 min-w-0 w-full">
-          <CompaniesDropdown
-            v-model="formState.companyId"
-            :placeholder="
-              t(
-                'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.COMPANY_NAME.PLACEHOLDER'
-              )
-            "
-            :selected-company-name="formState.companyName"
-            class="min-w-0"
-            @change="handleCompanyChange"
-          />
-          <Input
-            v-model="formState.city"
-            :placeholder="
-              t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.CITY.PLACEHOLDER')
-            "
-            class="h-8 min-w-0"
-          />
-          <CountryDropdown
-            v-model="formState.countryCode"
-            :placeholder="
-              t(
-                'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.COUNTRY.PLACEHOLDER'
-              )
-            "
-            class="min-w-0"
-          />
-        </div>
-      </div>
-
-      <div
-        class="lg:grid lg:grid-cols-[1fr_auto_1fr] flex flex-col lg:items-center w-full gap-3 lg:px-6"
-      >
-        <div class="grid grid-cols-2 gap-2 min-w-0 w-full">
-          <Input
-            v-model="formState.email"
-            type="email"
-            :placeholder="
-              t(
-                'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.EMAIL_ADDRESS.PLACEHOLDER'
-              )
-            "
-            :message-type="v$.email.$error ? 'error' : 'info'"
-            class="h-8 min-w-0 [&>input]:ltr:!pl-8 [&>input]:rtl:!pr-8"
-            @input="v$.email.$touch()"
-            @blur="v$.email.$touch()"
-          >
-            <template #prefix>
-              <Icon
-                icon="i-woot-mail"
-                class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-2.5 rtl:right-2.5"
-              />
-            </template>
-          </Input>
-          <PhoneNumberInput
-            v-model="formState.phoneNumber"
-            :placeholder="
-              t(
-                'CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.PHONE_NUMBER.PLACEHOLDER'
-              )
-            "
-            class="min-w-0"
-          />
-        </div>
-
-        <div class="w-px h-3 bg-n-strong hidden lg:block" />
-
-        <Input
-          v-model="formState.bio"
-          :placeholder="
-            t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.BIO.PLACEHOLDER')
-          "
-          class="h-8 min-w-0"
+        <div
+          v-if="contactData?.phoneNumber"
+          class="h-3 w-px bg-n-strong rounded-lg"
         />
-      </div>
+        <!-- Phone Number -->
+        <div v-if="contactData?.phoneNumber" class="flex items-center gap-1">
+          <Icon
+            icon="i-lucide-phone"
+            class="size-3.5 text-n-slate-11 flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ contactData.phoneNumber }}
+          </span>
+        </div>
+        <div v-if="companyName" class="h-3 w-px bg-n-strong rounded-lg" />
+        <!-- Company Name -->
+        <div v-if="companyName" class="flex items-center gap-1">
+          <Icon
+            icon="i-lucide-briefcase-business"
+            class="size-4 text-n-slate-11 flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ companyName }}
+          </span>
+        </div>
+        <div v-if="countryDetails" class="h-3 w-px bg-n-strong rounded-lg" />
+        <!-- Location (Country & City) -->
+        <div v-if="countryDetails" class="flex items-center gap-1">
+          <Flag
+            :country="countryDetails.countryCode"
+            class="size-4 flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ formattedLocation }}
+          </span>
+        </div>
+        <div
+          v-if="contactLabels.length > 0"
+          class="h-3 w-px bg-n-strong rounded-lg"
+        />
+        <!-- Labels -->
 
-      <div v-if="contactData?.id" class="lg:px-6">
-        <ContactLabels :contact-id="contactData.id" />
+        <ContactLabels
+          v-if="contactLabels.length > 0"
+          :labels="contactLabels"
+          disable-toggle
+          class="my-0 flex-1"
+        />
       </div>
     </div>
 
-    <div class="flex flex-col items-start gap-4 py-2">
-      <span
-        class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
-      >
-        <Icon
-          icon="i-lucide-globe"
-          class="size-4 text-n-slate-11 hidden lg:block"
+    <!-- Section 2: Latest Contact Note -->
+    <div
+      class="flex flex-col rounded-xl bg-n-card outline outline-1 outline-n-container -outline-offset-1 p-3 gap-1.6 w-full gap-1.5"
+    >
+      <div class="flex items-center gap-2 py-1">
+        <div class="flex items-center gap-1.5">
+          <Icon icon="i-lucide-notebook-pen" class="size-3.5 text-n-slate-11" />
+          <span class="text-label-small text-n-slate-11 m-0">
+            {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.LATEST_NOTE') }}
+          </span>
+        </div>
+        <template v-if="latestNote">
+          <div class="h-3 w-px bg-n-strong rounded-lg" />
+          <span class="text-label-small text-n-slate-11">
+            {{ formatTimestamp(latestNote.createdAt) }}
+          </span>
+        </template>
+      </div>
+
+      <div v-if="latestNote" class="flex items-center gap-1.5">
+        <Avatar
+          v-tooltip.left="{
+            content: getWrittenBy(latestNote),
+            delay: { show: 500, hide: 0 },
+          }"
+          :name="latestNote?.user?.name || 'Bot'"
+          :src="
+            latestNote?.user?.name
+              ? latestNote?.user?.thumbnail
+              : '/assets/images/chatwoot_bot.png'
+          "
+          :size="14"
+          rounded-full
         />
-        {{ t('CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.TITLE') }}
-      </span>
-      <div class="flex flex-wrap gap-2 lg:px-6">
-        <div
-          v-for="item in socialProfilesForm"
-          :key="item.key"
-          class="flex items-center h-8 gap-2 px-2 rounded-lg bg-n-alpha-2 outline-1 outline outline-n-weak -outline-offset-1 dark:bg-n-solid-2 hover:outline-n-slate-6 transition-all duration-150"
-        >
-          <Icon
-            :icon="item.icon"
-            class="flex-shrink-0 text-n-slate-11 size-5"
+        <p class="text-body-main text-n-slate-12 m-0 line-clamp-1">
+          {{ latestNote.content }}
+        </p>
+      </div>
+      <p v-else class="text-body-para text-n-slate-10 m-0 italic">
+        {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.NO_NOTES') }}
+      </p>
+    </div>
+
+    <!-- Section 3: Latest Previous Conversation -->
+    <div
+      v-if="latestConversation"
+      class="flex flex-col rounded-xl bg-n-card outline outline-1 outline-n-container -outline-offset-1 p-3 gap-1.6 w-full gap-1.5 cursor-pointer"
+      @click="getConversationUrl(latestConversation.id)"
+    >
+      <div
+        class="flex justify-between gap-2 w-full min-w-0"
+        :class="
+          latestConversation?.labels?.length > 0
+            ? 'sm:flex-row flex-col items-start sm:items-center '
+            : 'flex-row items-center'
+        "
+      >
+        <div class="flex items-center gap-2 py-1 min-w-0 flex-shrink">
+          <div class="flex items-center gap-1.5 min-w-0">
+            <Icon
+              icon="i-lucide-message-circle"
+              class="size-3.5 text-n-slate-11"
+            />
+            <span class="text-label-small text-n-slate-11 m-0 truncate">
+              {{ t('CONTACTS_LAYOUT.CARD.QUICK_OVERVIEW.LATEST_CONVERSATION') }}
+            </span>
+          </div>
+          <div v-if="inbox?.id" class="h-3 w-px bg-n-strong rounded-lg" />
+          <div class="flex items-center gap-1 min-w-0">
+            <InboxName
+              v-if="inbox?.id"
+              :inbox="inbox"
+              class="gap-1 [&>span]:text-n-slate-11"
+            />
+            <div
+              v-if="latestConversation?.id"
+              class="flex items-center gap-1 min-w-0"
+            >
+              <Icon
+                icon="i-woot-hash"
+                class="size-3.5 text-n-slate-10 flex-shrink-0"
+              />
+              <span class="text-label-small truncate text-n-slate-11">
+                {{ latestConversation.id }}
+              </span>
+            </div>
+          </div>
+          <div
+            v-if="latestConversation?.createdAt"
+            class="h-3 w-px bg-n-strong rounded-lg"
           />
-          <input
-            v-model="formState.socialProfiles[item.key.toLowerCase()]"
-            class="w-auto min-w-[100px] text-sm bg-transparent outline-none reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
-            :placeholder="item.placeholder"
-            :size="item.placeholder.length"
+          <span
+            v-if="latestConversation?.updatedAt"
+            class="text-label-small text-n-slate-11 truncate min-w-0"
+          >
+            {{ formatTimestamp(latestConversation.updatedAt) }}
+          </span>
+        </div>
+        <ContactLabels
+          v-if="latestConversation?.labels?.length > 0"
+          :labels="latestConversation.labels"
+          class="flex-1 min-w-0 sm:justify-end w-full sm:w-auto"
+          disable-toggle
+        >
+          <template #before>
+            <div data-before-slot class="flex items-center gap-1.5">
+              <CardPriorityIcon
+                v-if="latestConversation.priority"
+                :priority="latestConversation.priority"
+                class="flex-shrink-0"
+              />
+              <Avatar
+                v-if="assignee?.name"
+                v-tooltip.top="assignee.name"
+                :name="assignee.name"
+                :src="assignee.thumbnail"
+                :size="14"
+                :status="assignee.availabilityStatus"
+                hide-offline-status
+                rounded-full
+              />
+              <CardStatusIcon
+                v-if="latestConversation.status"
+                :status="latestConversation.status"
+              />
+              <div class="h-3 w-px bg-n-weak rounded-lg mx-1" />
+            </div>
+          </template>
+        </ContactLabels>
+        <div v-else class="flex items-center justify-end gap-1.5 flex-1">
+          <CardPriorityIcon
+            v-if="latestConversation.priority"
+            :priority="latestConversation.priority"
+            class="flex-shrink-0"
+          />
+          <Avatar
+            v-if="assignee?.name"
+            v-tooltip.top="assignee.name"
+            :name="assignee.name"
+            :src="assignee.thumbnail"
+            :size="14"
+            :status="assignee.availability_status"
+            hide-offline-status
+            rounded-full
+          />
+          <CardStatusIcon
+            v-if="latestConversation.status"
+            :status="latestConversation.status"
           />
         </div>
       </div>
+      <CardContent
+        v-if="lastMessageInConversation"
+        :last-message="lastMessageInConversation"
+        :unread-count="lastMessageInConversation?.conversation?.unreadCount"
+      />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
index 7457b6efc..debe8078c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
 
 import ContactCardForm from 'dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -10,6 +11,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import ContactLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Policy from 'dashboard/components/policy.vue';
+import ContactAttributeDisplay from './ContactAttributeDisplay.vue';
 import countries from 'shared/constants/countries';
 
 const props = defineProps({
@@ -18,28 +20,27 @@ const props = defineProps({
   email: { type: String, default: '' },
   labels: { type: Array, default: () => [] },
   additionalAttributes: { type: Object, default: () => ({}) },
+  customAttributes: { type: Object, default: () => ({}) },
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
   availabilityStatus: { type: String, default: null },
   isExpanded: { type: Boolean, default: false },
-  isUpdating: { type: Boolean, default: false },
-  selectable: { type: Boolean, default: false },
   isSelected: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
   'toggle',
-  'updateContact',
   'showContact',
   'select',
-  'avatarHover',
   'sendMessage',
   'deleteContact',
 ]);
 
 const { t } = useI18n();
+const store = useStore();
 
-const contactCardFormRef = ref(null);
+const isPrefetching = ref(false);
+const hasPrefetched = ref(false);
 
 const getInitialContactData = () => ({
   id: props.id,
@@ -47,12 +48,11 @@ const getInitialContactData = () => ({
   email: props.email,
   phoneNumber: props.phoneNumber,
   additionalAttributes: props.additionalAttributes,
+  labels: props.labels,
 });
 
 const contactData = ref(getInitialContactData());
 
-const isFormInvalid = computed(() => contactCardFormRef.value?.isFormInvalid);
-
 const countriesMap = computed(() => {
   return countries.reduce((acc, country) => {
     acc[country.code] = country;
@@ -92,15 +92,6 @@ const formattedLocation = computed(() => {
     .join(' ');
 });
 
-const handleFormUpdate = updatedData => {
-  Object.assign(contactData.value, updatedData);
-  emit('updateContact', contactData.value);
-};
-
-const handleUpdateContact = () => {
-  contactCardFormRef.value?.handleUpdate();
-};
-
 const onClickExpand = () => {
   emit('toggle');
   contactData.value = getInitialContactData();
@@ -118,23 +109,51 @@ const toggleSelect = checked => {
   emit('select', checked);
 };
 
-const handleAvatarHover = isHovered => {
-  emit('avatarHover', isHovered);
+const prefetchContactData = async () => {
+  if (hasPrefetched.value || isPrefetching.value || !props.id) return;
+
+  isPrefetching.value = true;
+  try {
+    await Promise.all([
+      store.dispatch('contactNotes/get', { contactId: props.id }),
+      store.dispatch('contactConversations/get', props.id),
+    ]);
+    hasPrefetched.value = true;
+  } catch (error) {
+    // error
+  } finally {
+    isPrefetching.value = false;
+  }
+};
+
+const handleExpandHover = isHovered => {
+  if (isHovered && !props.isExpanded) {
+    prefetchContactData();
+  }
 };
 </script>
 
 <template>
   <div class="relative">
     <div
-      class="flex flex-col gap-2 pt-3 pb-2 lg:pb-3 lg:grid lg:gap-4 lg:items-center lg:rounded-lg lg:transition-all lg:duration-200 lg:grid-cols-[minmax(42%,1fr)_minmax(0,1fr)_minmax(0,1fr)]"
+      class="flex flex-col gap-2 p-2 lg:grid lg:gap-4 lg:items-center lg:rounded-lg lg:transition-all lg:duration-200 lg:grid-cols-[minmax(30%,1fr)_minmax(50%,1.5fr)_1fr]"
       :class="{ 'border-b border-n-weak lg:border-none': isExpanded }"
     >
       <div
         class="flex items-center gap-3 lg:gap-2"
         :class="{ 'lg:col-span-3': isExpanded }"
       >
+        <div class="flex-shrink-0 size-5 flex items-center justify-center">
+          <Checkbox
+            :model-value="isSelected"
+            @change="event => toggleSelect(event.target.checked)"
+          />
+        </div>
+
         <div
-          class="relative hidden lg:block size-5 rounded-md hover:bg-n-alpha-2 flex-shrink-0"
+          class="relative hidden lg:block size-4 rounded-md hover:bg-n-alpha-2 flex-shrink-0"
+          @mouseenter.passive="handleExpandHover(true)"
+          @mouseleave.passive="handleExpandHover(false)"
         >
           <Button
             icon="i-lucide-chevron-down"
@@ -142,37 +161,20 @@ const handleAvatarHover = isHovered => {
             slate
             sm
             no-animation
-            class="flex-shrink-0 !size-8 absolute -inset-1.5"
+            class="flex-shrink-0 !size-8 absolute -inset-2"
             :class="{ 'rotate-180': isExpanded }"
             @click="onClickExpand"
           />
         </div>
 
-        <div
-          class="flex-shrink-0 flex items-center"
-          @mouseenter="handleAvatarHover(true)"
-          @mouseleave="handleAvatarHover(false)"
-        >
+        <div class="flex-shrink-0 flex items-center">
           <Avatar
             :name="name"
             :src="thumbnail"
             :size="24"
             :status="availabilityStatus"
             hide-offline-status
-          >
-            <template v-if="selectable" #overlay="{ size }">
-              <label
-                class="flex items-center justify-center rounded-md cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px]"
-                :style="{ width: `${size}px`, height: `${size}px` }"
-                @click.stop
-              >
-                <Checkbox
-                  :model-value="isSelected"
-                  @change="event => toggleSelect(event.target.checked)"
-                />
-              </label>
-            </template>
-          </Avatar>
+          />
         </div>
 
         <h4
@@ -229,7 +231,7 @@ const handleAvatarHover = isHovered => {
 
         <div
           v-if="companyName"
-          class="my-0 capitalize h-6 px-1 inline-flex items-center gap-1 rounded-md text-n-slate-12 max-w-40 min-w-0 outline outline-1 outline-n-weak"
+          class="my-0 capitalize h-6 px-1 inline-flex items-center gap-1 rounded-md text-n-slate-12 max-w-40 min-w-0 bg-n-label-color outline outline-1 outline-n-label-border -outline-offset-1"
           :class="{ 'lg:hidden': isExpanded }"
         >
           <Icon
@@ -239,26 +241,10 @@ const handleAvatarHover = isHovered => {
           <span class="truncate text-label-small">{{ companyName }}</span>
         </div>
 
-        <div
-          v-if="countryDetails"
-          class="w-px h-3 bg-n-strong rounded-lg flex-shrink-0"
-          :class="{ 'lg:hidden': isExpanded }"
-        />
-
-        <span
-          v-if="countryDetails"
-          class="inline-flex items-center gap-2 min-w-0 text-n-slate-11"
-          :class="{ 'lg:hidden': isExpanded }"
-        >
-          <Flag
-            :country="countryDetails.countryCode"
-            class="size-3.5 flex-shrink-0"
-          />
-          <span class="truncate text-label-small">{{ formattedLocation }}</span>
-        </span>
-
         <div
           class="relative lg:hidden size-5 rounded-md hover:bg-n-alpha-2 ltr:ml-auto rtl:mr-auto flex-shrink-0"
+          @mouseenter.passive="handleExpandHover(true)"
+          @mouseleave.passive="handleExpandHover(false)"
         >
           <Button
             icon="i-lucide-chevron-down"
@@ -315,6 +301,29 @@ const handleAvatarHover = isHovered => {
             {{ phoneNumber }}
           </span>
         </div>
+
+        <div
+          v-if="countryDetails"
+          class="w-px h-3 bg-n-strong rounded-lg flex-shrink-0"
+        />
+
+        <div
+          v-if="countryDetails"
+          v-tooltip.top="{
+            content: formattedLocation,
+            delay: { show: 500, hide: 0 },
+          }"
+          class="flex items-center gap-2 min-w-0 text-n-slate-11"
+        >
+          <Flag
+            :country="countryDetails.countryCode"
+            class="size-3.5 flex-shrink-0"
+          />
+          <span class="text-body-main text-n-slate-12 truncate">
+            {{ formattedLocation }}
+          </span>
+        </div>
+        <ContactAttributeDisplay :custom-attributes="customAttributes" />
       </div>
 
       <div class="flex flex-col gap-2 lg:hidden">
@@ -341,14 +350,6 @@ const handleAvatarHover = isHovered => {
           disable-toggle
           class="my-0 flex-1 justify-end"
         />
-        <Button
-          :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
-          link
-          xs
-          slate
-          class="flex-shrink-0 hover:!no-underline"
-          @click="onClickViewDetails"
-        />
       </div>
     </div>
 
@@ -361,26 +362,10 @@ const handleAvatarHover = isHovered => {
     >
       <div class="min-h-0">
         <div
-          class="relative flex flex-col lg:pt-3 pb-3 overflow-visible transition-opacity duration-[600ms] ease-out"
+          class="relative flex flex-col pt-3 pb-4 lg:pt-[1.125rem] lg:pb-5 overflow-visible transition-opacity duration-[600ms] ease-out"
           :class="isExpanded ? 'opacity-100 delay-200' : 'opacity-0'"
         >
-          <ContactCardForm
-            ref="contactCardFormRef"
-            :contact-data="contactData"
-            class="lg:after:content-[''] lg:after:absolute lg:after:ltr:left-2 lg:after:rtl:right-2 lg:after:top-0 lg:after:w-px lg:after:bg-n-strong lg:after:bottom-11"
-            @update="handleFormUpdate"
-          />
-          <div
-            class="relative lg:ltr:pl-6 lg:rtl:pr-6 mt-6 mb-4 lg:before:block lg:before:content-[''] lg:before:absolute lg:ltr:before:left-2 lg:rtl:before:right-2 lg:before:top-1/2 lg:before:w-2 lg:before:h-px lg:before:bg-n-strong"
-          >
-            <Button
-              :label="t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')"
-              size="sm"
-              :is-loading="isUpdating"
-              :disabled="isUpdating || isFormInvalid"
-              @click="handleUpdateContact"
-            />
-          </div>
+          <ContactCardForm :contact-data="contactData" />
         </div>
       </div>
     </div>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index 91ed420c7..9ce84f254 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -1,10 +1,12 @@
 <script setup>
+import { ref } from 'vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import ContactSortMenu from './components/ContactSortMenu.vue';
 import ContactMoreActions from './components/ContactMoreActions.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
+import DisplayPropertiesModal from './components/DisplayPropertiesModal.vue';
 
 defineProps({
   showSearch: { type: Boolean, default: true },
@@ -29,12 +31,18 @@ const emit = defineEmits([
   'createSegment',
   'deleteSegment',
 ]);
+
+const displayPropertiesModalRef = ref(null);
+
+const openDisplayPropertiesModal = () => {
+  displayPropertiesModalRef.value?.dialogRef?.open();
+};
 </script>
 
 <template>
   <header class="sticky top-0 z-10">
     <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[105rem] after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
+      class="flex items-start sm:items-center justify-between w-full py-4 px-6 gap-2 mx-auto after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
     >
       <span class="text-heading-1 truncate text-n-slate-12">
         {{ headerTitle }}
@@ -61,6 +69,13 @@ const emit = defineEmits([
         </div>
         <div class="flex items-center flex-shrink-0 gap-4">
           <div class="flex items-center gap-2">
+            <Button
+              icon="i-lucide-settings-2"
+              color="slate"
+              size="sm"
+              variant="ghost"
+              @click="openDisplayPropertiesModal"
+            />
             <div v-if="!isLabelView && !isActiveView" class="relative">
               <Button
                 id="toggleContactsFilterButton"
@@ -121,5 +136,6 @@ const emit = defineEmits([
         </div>
       </div>
     </div>
+    <DisplayPropertiesModal ref="displayPropertiesModalRef" />
   </header>
 </template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/DisplayPropertiesModal.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/DisplayPropertiesModal.vue
new file mode 100644
index 000000000..27bd44fc3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/DisplayPropertiesModal.vue
@@ -0,0 +1,166 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const contactAttributes = useMapGetter('attributes/getContactAttributes');
+
+const MAX_SELECTED = 3;
+
+const selectedAttributeKeys = computed({
+  get: () => uiSettings.value?.contact_list_display_properties || [],
+  set: value => {
+    updateUISettings({
+      contact_list_display_properties: value,
+    });
+  },
+});
+
+const selectedAttributes = computed(() => {
+  return contactAttributes.value.filter(attr =>
+    selectedAttributeKeys.value.includes(attr.attributeKey)
+  );
+});
+
+const otherAttributes = computed(() => {
+  return contactAttributes.value.filter(
+    attr => !selectedAttributeKeys.value.includes(attr.attributeKey)
+  );
+});
+
+const canSelectMore = computed(() => {
+  return selectedAttributeKeys.value.length < MAX_SELECTED;
+});
+
+const toggleAttribute = attributeKey => {
+  const currentKeys = [...selectedAttributeKeys.value];
+  const index = currentKeys.indexOf(attributeKey);
+
+  if (index > -1) {
+    currentKeys.splice(index, 1);
+  } else if (currentKeys.length < MAX_SELECTED) {
+    currentKeys.push(attributeKey);
+  }
+
+  selectedAttributeKeys.value = currentKeys;
+};
+
+const removeAttribute = attributeKey => {
+  const currentKeys = [...selectedAttributeKeys.value];
+  const index = currentKeys.indexOf(attributeKey);
+  if (index > -1) {
+    currentKeys.splice(index, 1);
+    selectedAttributeKeys.value = currentKeys;
+  }
+};
+
+const dialogRef = ref(null);
+
+const handleClose = () => {
+  // Close the dialog after saving
+  dialogRef.value?.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.TITLE')"
+    :confirm-button-label="t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.SAVE')"
+    :cancel-button-label="t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.CANCEL')"
+    width="2xl"
+    @confirm="handleClose"
+  >
+    <div class="flex flex-col gap-6">
+      <p class="text-body-main text-n-slate-11 m-0">
+        {{ t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.DESCRIPTION') }}
+      </p>
+
+      <div v-if="selectedAttributes.length > 0" class="flex flex-col gap-3">
+        <h3 class="text-heading-3 text-n-slate-12 m-0">
+          {{ t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.SELECTED_ATTRIBUTES') }}
+        </h3>
+        <div class="flex flex-wrap gap-2">
+          <div
+            v-for="attribute in selectedAttributes"
+            :key="attribute.attributeKey"
+            class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-n-brand-alpha text-n-brand border border-n-brand"
+          >
+            <Checkbox
+              model-value
+              @change="removeAttribute(attribute.attributeKey)"
+            />
+            <span class="text-label-main">
+              {{ attribute.attributeDisplayName }}
+            </span>
+            <button
+              class="flex items-center justify-center size-4 rounded hover:bg-n-brand-alpha-hover transition-colors"
+              @click="removeAttribute(attribute.attributeKey)"
+            >
+              <Icon icon="i-lucide-x" class="size-3" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="otherAttributes.length > 0" class="flex flex-col gap-3">
+        <h3 class="text-heading-3 text-n-slate-12 m-0">
+          {{ t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.OTHER_ATTRIBUTES') }}
+        </h3>
+        <div class="flex flex-wrap gap-2">
+          <div
+            v-for="attribute in otherAttributes"
+            :key="attribute.attributeKey"
+            class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors"
+            :class="[
+              canSelectMore
+                ? 'bg-n-alpha-2 hover:bg-n-alpha-3 cursor-pointer border border-n-weak'
+                : 'bg-n-alpha-1 border border-n-weak opacity-50 cursor-not-allowed',
+            ]"
+            @click="canSelectMore && toggleAttribute(attribute.attributeKey)"
+          >
+            <Checkbox
+              :model-value="false"
+              :disabled="!canSelectMore"
+              @change="toggleAttribute(attribute.attributeKey)"
+            />
+            <span class="text-label-main text-n-slate-12">
+              {{ attribute.attributeDisplayName }}
+            </span>
+            <Icon
+              v-if="attribute.attributeDescription"
+              v-tooltip.top="{
+                content: attribute.attributeDescription,
+                delay: { show: 500, hide: 0 },
+              }"
+              icon="i-lucide-info"
+              class="size-3.5 text-n-slate-11"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="contactAttributes.length === 0"
+        class="flex flex-col items-center justify-center gap-3 py-8"
+      >
+        <Icon
+          icon="i-lucide-inbox"
+          class="size-12 text-n-slate-11 opacity-50"
+        />
+        <p class="text-body-main text-n-slate-11 m-0">
+          {{ t('CONTACTS_LAYOUT.DISPLAY_PROPERTIES.NO_ATTRIBUTES') }}
+        </p>
+      </div>
+    </div>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
index 54a200eab..b9c97a81b 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -30,7 +30,6 @@ const route = useRoute();
 const uiFlags = useMapGetter('contacts/getUIFlags');
 const isUpdating = computed(() => uiFlags.value.isUpdating);
 const expandedCardId = ref(null);
-const hoveredAvatarId = ref(null);
 const selectedContactId = ref(null);
 const composeConversationRef = ref(null);
 const confirmDeleteContactDialogRef = ref(null);
@@ -88,18 +87,10 @@ const toggleExpanded = async id => {
 
 const isSelected = id => selectedIdsSet.value.has(id);
 
-const shouldShowSelection = id => {
-  return hoveredAvatarId.value === id || isSelected(id);
-};
-
 const handleSelect = (id, value) => {
   emit('toggleContact', { id, value });
 };
 
-const handleAvatarHover = (id, isHovered) => {
-  hoveredAvatarId.value = isHovered ? id : null;
-};
-
 const handleSendMessage = id => {
   selectedContactId.value = String(id);
   composeConversationRef.value?.toggle();
@@ -124,17 +115,16 @@ const handleDeleteContact = id => {
         :thumbnail="contact.thumbnail"
         :phone-number="contact.phoneNumber"
         :additional-attributes="contact.additionalAttributes"
+        :custom-attributes="contact.customAttributes"
         :availability-status="contact.availabilityStatus"
         :is-expanded="expandedCardId === contact.id"
         :is-updating="isUpdating"
-        :selectable="shouldShowSelection(contact.id)"
         :is-selected="isSelected(contact.id)"
         :labels="contact.labels || []"
         @toggle="toggleExpanded(contact.id)"
         @update-contact="updateContact"
         @show-contact="onClickViewDetails"
         @select="value => handleSelect(contact.id, value)"
-        @avatar-hover="value => handleAvatarHover(contact.id, value)"
         @send-message="handleSendMessage"
         @delete-contact="handleDeleteContact"
       />
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardStatusIcon.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardStatusIcon.vue
index d08d2e5ea..c16372ac5 100644
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardStatusIcon.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardStatusIcon.vue
@@ -37,6 +37,6 @@ const iconName = computed(() => {
       delay: { show: 500, hide: 0 },
     }"
     :icon="iconName"
-    class="size-4"
+    class="size-4 flex-shrink-0"
   />
 </template>
diff --git a/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue b/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
index 7466c3d0b..c6ded1d8d 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
@@ -58,28 +58,37 @@ const bulkCheckboxState = computed({
 const animationClasses = computed(() => {
   if (props.animationDirection === 'vertical') {
     return {
-      enterFrom: 'opacity-0 transform -translate-y-4',
-      enterTo: 'opacity-100 transform translate-y-0',
+      enterActive: 'transition-all duration-200 ease-out origin-bottom',
+      enterFrom: 'opacity-0 scale-95 translate-y-2',
+      enterTo: 'opacity-100 scale-100 translate-y-0',
+      leaveActive: 'transition-all duration-150 ease-in origin-bottom',
+      leaveFrom: 'opacity-100 scale-100 translate-y-0',
+      leaveTo: 'opacity-0 scale-95 translate-y-2',
     };
   }
   return {
-    enterFrom: 'opacity-0 transform ltr:-translate-x-4 rtl:translate-x-4',
-    enterTo: 'opacity-100 transform translate-x-0',
+    enterActive: 'transition-all duration-300 ease-out',
+    enterFrom: 'opacity-0 ltr:-translate-x-4 rtl:translate-x-4',
+    enterTo: 'opacity-100 translate-x-0',
+    leaveActive: 'transition-all duration-200 ease-in',
+    leaveFrom: 'opacity-100 translate-x-0',
+    leaveTo: 'opacity-0 ltr:-translate-x-4 rtl:translate-x-4',
   };
 });
 </script>
 
 <template>
-  <transition
-    name="slide-fade"
-    enter-active-class="transition-all duration-300 ease-out"
+  <Transition
+    :enter-active-class="animationClasses.enterActive"
     :enter-from-class="animationClasses.enterFrom"
     :enter-to-class="animationClasses.enterTo"
-    leave-active-class="hidden opacity-0"
+    :leave-active-class="animationClasses.leaveActive"
+    :leave-from-class="animationClasses.leaveFrom"
+    :leave-to-class="animationClasses.leaveTo"
   >
     <div
       v-if="hasSelected"
-      class="flex items-center gap-3 py-2 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container -outline-offset-1 shadow-sm"
+      class="flex items-center gap-3 py-2 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container -outline-offset-1 shadow-sm origin-bottom"
     >
       <div class="flex items-center gap-3">
         <div class="flex items-center gap-1.5 min-w-0">
@@ -116,5 +125,5 @@ const animationClasses = computed(() => {
     <div v-else class="flex items-center gap-3">
       <slot name="default-actions" />
     </div>
-  </transition>
+  </Transition>
 </template>
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 769d39830..2359e1f4a 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -466,7 +466,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1 relative"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'w-[340px] 2xl:w-[412px]',
@@ -519,13 +519,13 @@ watch(conversationFilters, (newVal, oldVal) => {
       @delete-folder="chatListFiltersRef?.onClickOpenDeleteFoldersModal"
     />
     <ConversationBulkActions
-      v-if="selectedConversations.length"
       :conversations="selectedConversations"
       :all-conversations-selected="allConversationsSelected"
       :selected-inboxes="uniqueInboxes"
       :show-open-action="allSelectedConversationsStatus('open')"
       :show-resolved-action="allSelectedConversationsStatus('resolved')"
       :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
+      :class="isOnExpandedLayout && 'sm:!w-[24rem] !w-full'"
       @select-all-conversations="toggleSelectAll"
     />
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkAgentActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkAgentActions.vue
index 6d8ce34fa..519a77d76 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkAgentActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkAgentActions.vue
@@ -113,10 +113,10 @@ const handleToggleDropdown = () => {
       @click="handleToggleDropdown"
     />
     <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-top"
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
       enter-from-class="opacity-0 scale-95"
       enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-top"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
       leave-from-class="opacity-100 scale-100"
       leave-to-class="opacity-0 scale-95"
     >
@@ -130,7 +130,7 @@ const handleToggleDropdown = () => {
         :is-loading="isLoading"
         show-search
         :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-        class="ltr:-right-10 rtl:-left-10 ltr:2xl:right-0 rtl:2xl:left-0 top-8 w-60 max-h-80 overflow-y-auto"
+        class="ltr:-right-10 rtl:-left-10 ltr:2xl:right-0 rtl:2xl:left-0 bottom-8 w-60 max-h-80 overflow-y-auto"
         @action="handleSelectAgent"
       >
         <template #footer>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue
index 238227c76..afbf1c82e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue
@@ -85,7 +85,7 @@ const handleAssign = () => {
       ghost
       :class="{
         'bg-n-alpha-2': showDropdown,
-        '[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit':
+        '[&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline w-fit':
           isTypeContact,
       }"
       :disabled="disabled"
@@ -93,10 +93,10 @@ const handleAssign = () => {
       @click="toggleDropdown()"
     />
     <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-top"
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
       enter-from-class="opacity-0 scale-95"
       enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-top"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
       leave-from-class="opacity-100 scale-100"
       leave-to-class="opacity-0 scale-95"
     >
@@ -109,11 +109,11 @@ const handleAssign = () => {
         :menu-items="labelMenuItems"
         show-search
         :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-        class="top-8 w-60 max-h-80 overflow-y-auto"
+        class="bottom-8 w-60 max-h-80 overflow-y-auto"
         :class="{
           'ltr:-right-[6.5rem] rtl:-left-[6.5rem] ltr:2xl:right-0 rtl:2xl:left-0':
             !isTypeContact,
-          'ltr:right-0 rtl:left-0 mt-1': isTypeContact,
+          'ltr:right-0 rtl:left-0 mb-1': isTypeContact,
         }"
         @action="item => toggleLabelSelection(item.value)"
       >
@@ -138,7 +138,7 @@ const handleAssign = () => {
           >
             <NextButton
               sm
-              class="w-full"
+              class="w-full [&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline-flex"
               :label="t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS')"
               :disabled="!selectedLabels.length"
               @click="handleAssign"
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkTeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkTeamActions.vue
index 3126f9b04..511706f1b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkTeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkTeamActions.vue
@@ -83,10 +83,10 @@ onMounted(() => {
       @click="toggleDropdown()"
     />
     <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-top"
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
       enter-from-class="opacity-0 scale-95"
       enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-top"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
       leave-from-class="opacity-100 scale-100"
       leave-to-class="opacity-0 scale-95"
     >
@@ -99,7 +99,7 @@ onMounted(() => {
         :menu-items="teamMenuItems"
         show-search
         :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-        class="ltr:-right-2 rtl:-left-2 top-8 w-60 max-h-80 overflow-y-auto"
+        class="ltr:-right-2 rtl:-left-2 bottom-8 w-60 max-h-80 overflow-y-auto"
         @action="handleSelectTeam"
       >
         <template #footer>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkUpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkUpdateActions.vue
index bd9f8ee49..042a304df 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkUpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkUpdateActions.vue
@@ -87,10 +87,10 @@ const handleUpdate = item => {
       @click="toggleDropdown()"
     />
     <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-top"
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
       enter-from-class="opacity-0 scale-95"
       enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-top"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
       leave-from-class="opacity-100 scale-100"
       leave-to-class="opacity-0 scale-95"
     >
@@ -101,7 +101,7 @@ const handleUpdate = item => {
           { ignore: [containerRef] },
         ]"
         :menu-items="updateMenuItems"
-        class="ltr:-right-[4.5rem] rtl:-left-[4.5rem] ltr:2xl:right-0 rtl:2xl:left-0 top-8 w-36"
+        class="ltr:-right-[4.5rem] rtl:-left-[4.5rem] ltr:2xl:right-0 rtl:2xl:left-0 bottom-8 w-36"
         @action="handleUpdate"
       />
     </Transition>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 2f889ca1e..1a4ccde0f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -106,68 +106,78 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
-    class="pt-3 pb-2 px-2 relative z-10 after:absolute after:inset-x-0 after:-bottom-2.5 after:bg-gradient-to-b after:from-n-surface-1 after:from-40% after:to-transparent after:h-4 after:pointer-events-none after:z-10"
+  <Transition
+    enter-active-class="transition-all duration-200 ease-out origin-bottom"
+    enter-from-class="opacity-0 scale-95 translate-y-2"
+    enter-to-class="opacity-100 scale-100 translate-y-0"
+    leave-active-class="transition-all duration-150 ease-in origin-bottom"
+    leave-from-class="opacity-100 scale-100 translate-y-0"
+    leave-to-class="opacity-0 scale-95 translate-y-2"
   >
     <div
-      class="flex items-center justify-between p-2 bg-n-button-color outline outline-1 -outline-offset-1 rounded-[10px] outline-n-weak"
+      v-show="conversations.length > 0"
+      class="px-2 absolute bottom-4 left-1/2 -translate-x-1/2 z-30 w-full origin-bottom"
     >
-      <div class="ltr:ml-0.5 rtl:mr-0.5 flex items-center gap-1">
-        <label class="cursor-pointer flex items-center gap-1.5">
-          <Checkbox
-            v-model="allSelected"
-            :indeterminate="!allConversationsSelected"
+      <div
+        v-if="allConversationsSelected"
+        class="bg-n-amber-2 outline -outline-offset-1 outline-1 outline-n-amber-5 rounded-lg text-sm mb-2 py-1.5 px-2 text-n-amber-text"
+      >
+        {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
+      </div>
+      <div
+        class="flex items-center justify-between p-2 bg-n-button-color outline outline-1 -outline-offset-1 rounded-[10px] outline-n-weak shadow-[0_0_12px_0_rgba(27,40,59,0.08)]"
+      >
+        <div class="ltr:ml-0.5 rtl:mr-0.5 flex items-center gap-1">
+          <label class="cursor-pointer flex items-center gap-1.5">
+            <Checkbox
+              v-model="allSelected"
+              :indeterminate="!allConversationsSelected"
+            />
+            <span class="cursor-pointer">
+              {{
+                $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
+                  conversationCount: conversations.length,
+                })
+              }}
+            </span>
+          </label>
+          <div class="w-px h-3 bg-n-weak rounded-lg ltr:ml-1 rtl:mr-1" />
+          <NextButton
+            :label="$t('BULK_ACTION.CLEAR_SELECTION')"
+            ghost
+            class="!text-n-blue-11 !px-1 !h-6"
+            sm
+            @click="allSelected = false"
           />
-          <span class="cursor-pointer">
-            {{
-              $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
-                conversationCount: conversations.length,
-              })
-            }}
-          </span>
-        </label>
-        <div class="w-px h-3 bg-n-weak rounded-lg ltr:ml-1 rtl:mr-1" />
-        <NextButton
-          :label="$t('BULK_ACTION.CLEAR_SELECTION')"
-          ghost
-          class="!text-n-blue-11 !px-1 !h-6"
-          sm
-          @click="allSelected = false"
-        />
+        </div>
+        <div class="flex items-center gap-2">
+          <BulkLabelActions @assign="onAssignLabels" />
+          <BulkUpdateActions
+            :show-resolve="!showResolvedAction"
+            :show-reopen="!showOpenAction"
+            :show-snooze="!showSnoozedAction"
+            @update="onUpdateConversations"
+          />
+          <BulkAgentActions
+            :selected-inboxes="selectedInboxes"
+            :conversation-count="conversations.length"
+            @select="onAssignAgent"
+          />
+          <BulkTeamActions
+            :conversation-count="conversations.length"
+            @select="onAssignTeam"
+          />
+        </div>
       </div>
-      <div class="flex items-center gap-2">
-        <BulkLabelActions @assign="onAssignLabels" />
-        <BulkUpdateActions
-          :show-resolve="!showResolvedAction"
-          :show-reopen="!showOpenAction"
-          :show-snooze="!showSnoozedAction"
-          @update="onUpdateConversations"
+      <woot-modal
+        v-model:show="showCustomTimeSnoozeModal"
+        :on-close="hideCustomSnoozeModal"
+      >
+        <CustomSnoozeModal
+          @close="hideCustomSnoozeModal"
+          @choose-time="customSnoozeTime"
         />
-        <BulkAgentActions
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          @select="onAssignAgent"
-        />
-        <BulkTeamActions
-          :conversation-count="conversations.length"
-          @select="onAssignTeam"
-        />
-      </div>
+      </woot-modal>
     </div>
-    <div
-      v-if="allConversationsSelected"
-      class="bg-n-amber-2 outline -outline-offset-1 outline-1 outline-n-amber-5 rounded-lg text-sm mt-2 py-1.5 px-2 text-n-amber-text"
-    >
-      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
-    </div>
-    <woot-modal
-      v-model:show="showCustomTimeSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <CustomSnoozeModal
-        @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
-      />
-    </woot-modal>
-  </div>
+  </Transition>
 </template>
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 2669c96ec..7e5fb2790 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -388,6 +388,17 @@
     "PAGINATION_FOOTER": {
       "SHOWING": "Showing {startItem} - {endItem} of {totalItems} contact | Showing {startItem} - {endItem} of {totalItems} contacts"
     },
+    "DISPLAY_PROPERTIES": {
+      "TITLE": "Display Properties",
+      "DESCRIPTION": "Select up to three contact attributes to display.",
+      "SELECTED_ATTRIBUTES": "Selected attributes",
+      "OTHER_ATTRIBUTES": "Other attributes",
+      "NO_ATTRIBUTES": "No contact attributes available",
+      "CANCEL": "Cancel",
+      "SAVE": "Save",
+      "YES": "Yes",
+      "NO": "No"
+    },
     "FILTER": {
       "NAME": "Name",
       "EMAIL": "Email",
@@ -471,6 +482,14 @@
       "LABELS": {
         "ADD_BUTTON": "Add Labels"
       },
+      "QUICK_OVERVIEW": {
+        "TITLE": "Quick Overview",
+        "BASIC_INFO": "Basic Info",
+        "LATEST_NOTE": "Note",
+        "LATEST_CONVERSATION": "Message",
+        "NO_NOTES": "No notes available",
+        "NO_CONVERSATIONS": "No previous conversations"
+      },
       "SOCIAL_MEDIA": {
         "TITLE": "Edit social links",
         "FORM": {
@@ -608,7 +627,7 @@
     "DESCRIPTION": "Select the labels you want to add to the selected contacts.",
     "NO_LABELS_FOUND": "No labels available yet.",
     "SELECTED_COUNT": "{count} selected",
-    "CLEAR_SELECTION": "Clear selection",
+    "CLEAR_SELECTION": "Clear",
     "SELECT_ALL": "Select all ({count})",
     "DELETE_CONTACTS": "Delete",
     "DELETE_SUCCESS": "Contacts deleted successfully.",
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue
index 0666940e6..5470d1864 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsBulkActionBar.vue
@@ -80,53 +80,49 @@ const handleAssignLabels = labels => {
 </script>
 
 <template>
-  <div
-    class="sticky top-0 z-10 bg-gradient-to-b from-n-surface-1 from-90% to-transparent mx-6 3xl:mx-0 pt-1"
+  <BulkSelectBar
+    v-model="selectionModel"
+    :all-items="allItems"
+    :select-all-label="selectAllLabel"
+    :selected-count-label="selectedCountLabel"
+    animation-direction="vertical"
+    class="justify-between absolute bottom-20 left-1/2 -translate-x-1/2 z-30 lg:!w-[39rem] sm:!w-[calc(100%-6rem)] !w-[calc(100%-4rem)] max-w-4xl"
   >
-    <BulkSelectBar
-      v-model="selectionModel"
-      :all-items="allItems"
-      :select-all-label="selectAllLabel"
-      :selected-count-label="selectedCountLabel"
-      animation-direction="vertical"
-      class="justify-between"
-    >
-      <template #secondary-actions>
-        <Button
-          sm
-          ghost
-          :label="t('CONTACTS_BULK_ACTIONS.CLEAR_SELECTION')"
-          class="!px-1"
-          @click="emitClearSelection"
+    <template #secondary-actions>
+      <Button
+        sm
+        ghost
+        :label="t('CONTACTS_BULK_ACTIONS.CLEAR_SELECTION')"
+        class="!px-1"
+        @click="emitClearSelection"
+      />
+    </template>
+    <template #actions>
+      <div class="flex items-center gap-2 ml-auto">
+        <BulkLabelActions
+          type="contact"
+          :is-loading="isLoading"
+          :disabled="!selectedCount"
+          class="[&>button]:!text-n-blue-11 [&>button>span]:!text-n-blue-11 [&>button]:!px-2"
+          @assign="handleAssignLabels"
         />
-      </template>
-      <template #actions>
-        <div class="flex items-center gap-2 ml-auto">
-          <BulkLabelActions
-            type="contact"
+        <div class="w-px h-3 bg-n-weak rounded-lg" />
+        <Policy :permissions="['administrator']">
+          <Button
+            v-tooltip.bottom="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
+            sm
+            ghost
+            ruby
+            icon="i-lucide-trash"
+            :label="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
+            :aria-label="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
+            :disabled="!selectedCount || isLoading"
             :is-loading="isLoading"
-            :disabled="!selectedCount"
-            class="[&>button]:!text-n-blue-11 [&>button>span]:!text-n-blue-11 [&>button]:!px-2"
-            @assign="handleAssignLabels"
+            class="!px-2 [&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline-flex"
+            @click="emit('deleteSelected')"
           />
-          <div class="w-px h-3 bg-n-weak rounded-lg" />
-          <Policy :permissions="['administrator']">
-            <Button
-              v-tooltip.bottom="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
-              sm
-              ghost
-              ruby
-              icon="i-lucide-trash"
-              :label="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
-              :aria-label="t('CONTACTS_BULK_ACTIONS.DELETE_CONTACTS')"
-              :disabled="!selectedCount || isLoading"
-              :is-loading="isLoading"
-              class="!px-2 [&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline-flex"
-              @click="emit('deleteSelected')"
-            />
-          </Policy>
-        </div>
-      </template>
-    </BulkSelectBar>
-  </div>
+        </Policy>
+      </div>
+    </template>
+  </BulkSelectBar>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
index a20a46ab9..0f48d9f12 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -404,12 +404,14 @@ onMounted(async () => {
       pageNumber.value
     );
   }
+  // Fetch agents list to show assignee previous conversation in contact card (expanded view)
+  await store.dispatch('agents/get');
 });
 </script>
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1 relative"
   >
     <ContactsListLayout
       :search-value="searchValue"
@@ -463,7 +465,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 px-4 pt-4 pb-6">
           <ContactsList
             :contacts="contacts"
             :selected-contact-ids="selectedContactIds"
diff --git a/app/javascript/dashboard/store/modules/contacts/getters.js b/app/javascript/dashboard/store/modules/contacts/getters.js
index 5a75ac091..40d7a29fb 100644
--- a/app/javascript/dashboard/store/modules/contacts/getters.js
+++ b/app/javascript/dashboard/store/modules/contacts/getters.js
@@ -8,7 +8,10 @@ export const getters = {
     const contacts = $state.sortOrder.map(
       contactId => $state.records[contactId]
     );
-    return camelcaseKeys(contacts, { deep: true });
+    return camelcaseKeys(contacts, {
+      deep: true,
+      stopPaths: ['custom_attributes'],
+    });
   },
   getUIFlags($state) {
     return $state.uiFlags;
diff --git a/theme/icons.js b/theme/icons.js
index cc697a813..04db41e89 100644
--- a/theme/icons.js
+++ b/theme/icons.js
@@ -179,6 +179,11 @@ export const icons = {
     width: 14,
     height: 14,
   },
+  overview: {
+    body: `<g fill="none" stroke="currentColor"><path d="M3.33325 2V11.3333" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 2V7.33333" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.6667 2V14" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></g>`,
+    width: 16,
+    height: 16,
+  },
 
   /** Conversation Status Starts */
   'status-empty': {