diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
index 3bad3f9f7..4ba3546ce 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -35,13 +35,13 @@ const onClickViewDetails = async () => {
       <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
       <div class="flex flex-col gap-1">
         <div class="flex items-center gap-2">
-          <span class="text-sm font-medium truncate text-n-slate-12">{{
-            name
-          }}</span>
+          <span class="text-sm font-medium truncate text-n-slate-12">
+            {{ name }}
+          </span>
           <template v-if="additionalAttributes?.companyName">
-            <span class="text-sm text-n-slate-11">{{
-              t('CONTACTS_LAYOUT.CARD.OF')
-            }}</span>
+            <span class="text-sm text-n-slate-11">
+              {{ t('CONTACTS_LAYOUT.CARD.OF') }}
+            </span>
             <span class="text-sm font-medium truncate text-n-slate-12">
               {{ additionalAttributes.companyName }}
             </span>
@@ -50,9 +50,9 @@ const onClickViewDetails = async () => {
         <div class="flex items-center gap-3">
           <span v-if="email" class="text-sm text-n-slate-11">{{ email }}</span>
           <div v-if="email" class="w-px h-3 bg-n-slate-6" />
-          <span v-if="phoneNumber" class="text-sm text-n-slate-11">{{
-            phoneNumber
-          }}</span>
+          <span v-if="phoneNumber" class="text-sm text-n-slate-11">
+            {{ phoneNumber }}
+          </span>
           <div v-if="phoneNumber" class="w-px h-3 bg-n-slate-6" />
           <Button
             :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue
new file mode 100644
index 000000000..3f8d5a411
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { ref } from 'vue';
+
+import ContactsCard from '../ContactsCard.vue';
+import contacts from './fixtures';
+
+const expandedCardId = ref(null);
+
+const toggleExpanded = id => {
+  expandedCardId.value = expandedCardId.value === id ? null : id;
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactsCard"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default with expandable function">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="contacts[0]"
+          :is-expanded="expandedCardId === contacts[0].id"
+          @toggle="toggleExpanded(contacts[0].id)"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Company Name and without phone number">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="{ ...contacts[1], phoneNumber: '' }"
+          :is-expanded="false"
+          @toggle="() => {}"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Expanded State">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="contacts[2]"
+          is-expanded
+          @toggle="() => {}"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Without Email and Phone">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="{ ...contacts[3], email: '', phoneNumber: '' }"
+          :is-expanded="false"
+          @toggle="() => {}"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js
new file mode 100644
index 000000000..67bdba9b4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js
@@ -0,0 +1,149 @@
+export default [
+  {
+    additionalAttributes: {
+      socialProfiles: {},
+    },
+    availabilityStatus: null,
+    email: 'johndoe@chatwoot.com',
+    id: 370,
+    name: 'John Doe',
+    phoneNumber: '+918634322418',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Felix',
+    customAttributes: {},
+    lastActivityAt: 1731608270,
+    createdAt: 1731586271,
+  },
+  {
+    additionalAttributes: {
+      city: 'kerala',
+      country: 'India',
+      description: 'Curious about the web. ',
+      companyName: 'Chatwoot',
+      countryCode: '',
+      socialProfiles: {
+        github: 'abozler',
+        twitter: 'ozler',
+        facebook: 'abozler',
+        linkedin: 'abozler',
+        instagram: 'ozler',
+      },
+    },
+    availabilityStatus: null,
+    email: 'ozler@chatwoot.com',
+    id: 29,
+    name: 'Abraham Ozlers',
+    phoneNumber: '+246232222222',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Upload',
+    customAttributes: {
+      dateContact: '2024-02-01T00:00:00.000Z',
+      linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
+      listContact: 'Not spam',
+      numberContact: '12',
+    },
+    lastActivityAt: 1712127410,
+    createdAt: 1712127389,
+  },
+  {
+    additionalAttributes: {
+      city: 'Kerala',
+      country: 'India',
+      description:
+        "I'm Candice developer focusing on building things for the web 🌍. Currently, I’m working as a Product Developer here at @chatwootapp ⚡️🔥",
+      companyName: 'Chatwoot',
+      countryCode: 'IN',
+      socialProfiles: {
+        github: 'cmathersonj',
+        twitter: 'cmather',
+        facebook: 'cmathersonj',
+        linkedin: 'cmathersonj',
+        instagram: 'cmathersonjs',
+      },
+    },
+    availabilityStatus: null,
+    email: 'cmathersonj@va.test',
+    id: 22,
+    name: 'Candice Matherson',
+    phoneNumber: '+917474774742',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Emery',
+    customAttributes: {
+      dateContact: '2024-11-12T03:23:06.963Z',
+      linkContact: 'https://sd.sd',
+      textContact: 'hey',
+      numberContact: '12',
+      checkboxContact: true,
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: '',
+      country: '',
+      description: '',
+      companyName: '',
+      countryCode: '',
+      socialProfiles: {
+        github: '',
+        twitter: '',
+        facebook: '',
+        linkedin: '',
+        instagram: '',
+      },
+    },
+    availabilityStatus: null,
+    email: 'ofolkardi@taobao.test',
+    id: 21,
+    name: 'Ophelia Folkard',
+    phoneNumber: '',
+    identifier: null,
+    thumbnail:
+      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBPZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--08dcac8eb72ef12b2cad92d58dddd04cd8a5f513/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/32.jpg',
+    customAttributes: {},
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      socialProfiles: {},
+    },
+    availabilityStatus: null,
+    email: 'wcasteloth@exblog.jp',
+    id: 20,
+    name: 'Willy Castelot',
+    phoneNumber: '+919384',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Jade',
+    customAttributes: {},
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: '',
+      country: '',
+      description: '',
+      companyName: '',
+      countryCode: '',
+      socialProfiles: {
+        github: '',
+        twitter: '',
+        facebook: '',
+        linkedin: '',
+        instagram: '',
+      },
+    },
+    availabilityStatus: null,
+    email: 'ederingtong@printfriendly.test',
+    id: 19,
+    name: 'Elisabeth Derington',
+    phoneNumber: '',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Jade',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 5ee6c996e..866811ae2 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -33,11 +33,11 @@ const FORM_CONFIG = {
   FIRST_NAME: { field: 'firstName' },
   LAST_NAME: { field: 'lastName' },
   EMAIL_ADDRESS: { field: 'email' },
-  PHONE_NUMBER: { field: 'phone_number' },
-  CITY: { field: 'additional_attributes.city' },
-  COUNTRY: { field: 'additional_attributes.country' },
-  BIO: { field: 'additional_attributes.description' },
-  COMPANY_NAME: { field: 'additional_attributes.company_name' },
+  PHONE_NUMBER: { field: 'phoneNumber' },
+  CITY: { field: 'additionalAttributes.city' },
+  COUNTRY: { field: 'additionalAttributes.country' },
+  BIO: { field: 'additionalAttributes.description' },
+  COMPANY_NAME: { field: 'additionalAttributes.companyName' },
 };
 
 const SOCIAL_CONFIG = {
@@ -54,14 +54,14 @@ const defaultState = {
   email: '',
   firstName: '',
   lastName: '',
-  phone_number: '',
-  additional_attributes: {
+  phoneNumber: '',
+  additionalAttributes: {
     description: '',
-    company_name: '',
-    country_code: '',
+    companyName: '',
+    countryCode: '',
     country: '',
     city: '',
-    social_profiles: {
+    socialProfiles: {
       facebook: '',
       github: '',
       instagram: '',
@@ -75,44 +75,48 @@ const state = reactive({ ...defaultState });
 
 const validationRules = {
   firstName: { required, minLength: minLength(2) },
-  email: { required, email },
+  email: { email },
 };
 
 const v$ = useVuelidate(validationRules, state);
 
-const updateState = () => {
-  if (props.isNewContact) return; // Added to prevent state update for new contact form
+const prepareStateBasedOnProps = () => {
+  if (props.isNewContact) {
+    return; // Added to prevent state update for new contact form
+  }
+
   const {
     id,
     name = '',
     email: emailAddress,
     phoneNumber,
+    additionalAttributes = {},
+  } = props.contactData || {};
+
+  const [firstName = '', lastName = ''] = name.split(' ');
+  const {
+    description,
+    companyName,
+    countryCode,
+    country,
+    city,
+    socialProfiles = {},
+  } = additionalAttributes || {};
+
+  Object.assign(state, {
+    id,
+    name,
+    firstName,
+    lastName,
+    email: emailAddress,
+    phoneNumber,
     additionalAttributes: {
       description,
       companyName,
       countryCode,
       country,
       city,
-      socialProfiles = {},
-    } = {},
-  } = props.contactData || {};
-
-  const [firstName = '', lastName = ''] = name.split(' ');
-
-  Object.assign(state, {
-    id,
-    name,
-    firstName,
-    lastName,
-    email: emailAddress,
-    phone_number: phoneNumber,
-    additional_attributes: {
-      description,
-      company_name: companyName,
-      country_code: countryCode,
-      country,
-      city,
-      social_profiles: socialProfiles,
+      socialProfiles,
     },
   });
 };
@@ -147,38 +151,39 @@ const getValidationKey = key => {
   return FORM_CONFIG[key]?.field;
 };
 
-// Creates a computed property for form field binding based on FORM_CONFIG
+// Creates a computed property for two-way form field binding
 const getFormBinding = key => {
-  // Get field path from config
-  // Example: FORM_CONFIG.name = { field: 'contact.name' }
   const field = FORM_CONFIG[key]?.field;
   if (!field) return null;
 
   return computed({
-    // Get value from state
-    // Example 1 (nested): field = 'contact.name' returns state.contact.name = "John Doe"
-    // Example 2 (root): field = 'email' returns state.email = "john@example.com"
     get: () => {
+      // Handle firstName/lastName fields
       if (field === 'firstName' || field === 'lastName') {
         return state[field]?.toString() || '';
       }
+
+      // Handle nested vs non-nested fields
       const [base, nested] = field.split('.');
+      // Example: 'email' → state.email
+      // Example: 'additionalAttributes.city' → state.additionalAttributes.city
       return (nested ? state[base][nested] : state[base])?.toString() || '';
     },
 
-    // Set value in state and emit update
-    // Example 1 (nested): field = 'contact.name', value = "Jane Doe" → state.contact.name = "Jane Doe"
-    // Example 2 (root): field = 'email', value = "jane@example.com" → state.email = "jane@example.com"
     set: async value => {
+      // Handle name fields specially to maintain the combined 'name' field
       if (field === 'firstName' || field === 'lastName') {
         state[field] = value;
-        // Combine first and last name into the name field
+        // Example: firstName="John", lastName="Doe" → name="John Doe"
         state.name = `${state.firstName} ${state.lastName}`.trim();
       } else {
+        // Handle nested vs non-nested fields
         const [base, nested] = field.split('.');
         if (nested) {
+          // Example: additionalAttributes.city = "New York"
           state[base][nested] = value;
         } else {
+          // Example: email = "test@example.com"
           state[base] = value;
         }
       }
@@ -192,7 +197,16 @@ const getFormBinding = key => {
   });
 };
 
-watch(() => props.contactData, updateState, { immediate: true, deep: true });
+const getMessageType = key => {
+  return isValidationField(key) && v$.value[getValidationKey(key)]?.$error
+    ? 'error'
+    : 'info';
+};
+
+watch(() => props.contactData, prepareStateBasedOnProps, {
+  immediate: true,
+  deep: true,
+});
 
 // Expose state to parent component for avatar upload
 defineExpose({
@@ -210,7 +224,7 @@ defineExpose({
         <template v-for="item in editDetailsForm" :key="item.key">
           <ComboBox
             v-if="item.key === 'COUNTRY'"
-            v-model="state.additional_attributes.country"
+            v-model="state.additionalAttributes.country"
             :options="countryOptions"
             :placeholder="item.placeholder"
             class="[&>div>button]:h-8"
@@ -232,12 +246,7 @@ defineExpose({
             v-else
             v-model="getFormBinding(item.key).value"
             :placeholder="item.placeholder"
-            :message-type="
-              isValidationField(item.key) &&
-              v$[getValidationKey(item.key)]?.$error
-                ? 'error'
-                : 'info'
-            "
+            :message-type="getMessageType(item.key)"
             :custom-input-class="`h-8 !pt-1 !pb-1 ${
               !isDetailsView ? '[&:not(.error)]:!border-transparent' : ''
             }`"
@@ -274,9 +283,7 @@ defineExpose({
           />
           <input
             v-model="
-              state.additional_attributes.social_profiles[
-                item.key.toLowerCase()
-              ]
+              state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
             "
             class="w-auto min-w-[100px] text-sm bg-transparent 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"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
new file mode 100644
index 000000000..4be69380c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
@@ -0,0 +1,80 @@
+<script setup>
+import ContactsForm from '../ContactsForm.vue';
+import contactData from './fixtures';
+
+const handleUpdate = updatedData => {
+  console.log('Form updated:', updatedData);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactsForm"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default without border">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm :contact-data="contactData" @update="handleUpdate" />
+      </div>
+    </Variant>
+
+    <Variant title="Details View with border">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm
+          :contact-data="contactData"
+          is-details-view
+          @update="handleUpdate"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Minimal Data">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm
+          :contact-data="{
+            id: 21,
+            name: 'Ophelia Folkard',
+            email: 'ofolkardi@taobao.test',
+            phoneNumber: '',
+            additionalAttributes: {
+              city: '',
+              country: '',
+              description: '',
+              companyName: '',
+              countryCode: '',
+              socialProfiles: {
+                github: '',
+                twitter: '',
+                facebook: '',
+                linkedin: '',
+                instagram: '',
+              },
+            },
+          }"
+          @update="handleUpdate"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With All Social Profiles">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm
+          :contact-data="{
+            ...contactData,
+            additionalAttributes: {
+              ...contactData.additionalAttributes,
+              socialProfiles: {
+                github: 'cmathersonj',
+                twitter: 'cmather',
+                facebook: 'cmathersonj',
+                linkedin: 'cmathersonj',
+                instagram: 'cmathersonjs',
+              },
+            },
+          }"
+          @update="handleUpdate"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
new file mode 100644
index 000000000..30eb6ee22
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
@@ -0,0 +1,20 @@
+export default {
+  id: 370,
+  name: 'John Doe',
+  email: 'johndoe@chatwoot.com',
+  phoneNumber: '+918634322418',
+  additionalAttributes: {
+    city: 'Kerala',
+    country: 'India',
+    description: 'Curious about the web.',
+    companyName: 'Chatwoot',
+    countryCode: 'IN',
+    socialProfiles: {
+      github: 'johndoe',
+      twitter: 'johndoe',
+      facebook: 'johndoe',
+      linkedin: 'johndoe',
+      instagram: 'johndoe',
+    },
+  },
+};
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
index 8e94884bd..3be194847 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -37,8 +37,6 @@ const ROUTE_MAPPINGS = {
 };
 
 const onClickViewDetails = async id => {
-  await store.dispatch('contacts/show', { id });
-
   const dynamicRouteName =
     ROUTE_MAPPINGS[route.name] || 'contacts_dashboard_edit_index';
 
diff --git a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
new file mode 100644
index 000000000..11117cc18
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useChannelIcon } from './provider';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  inbox: {
+    type: Object,
+    required: true,
+  },
+});
+
+const channelIcon = useChannelIcon(props.inbox);
+</script>
+
+<template>
+  <Icon :icon="channelIcon" />
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/provider.js b/app/javascript/dashboard/components-next/icon/provider.js
new file mode 100644
index 000000000..5b00376d1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+
+export function useChannelIcon(inbox) {
+  const channelTypeIconMap = {
+    'Channel::Api': 'i-ri-cloudy-fill',
+    'Channel::Email': 'i-ri-mail-fill',
+    'Channel::FacebookPage': 'i-ri-messenger-fill',
+    'Channel::Line': 'i-ri-line-fill',
+    'Channel::Sms': 'i-ri-chat-1-fill',
+    'Channel::Telegram': 'i-ri-telegram-fill',
+    'Channel::TwilioSms': 'i-ri-chat-1-fill',
+    'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
+    'Channel::WebWidget': 'i-ri-global-fill',
+    'Channel::Whatsapp': 'i-ri-whatsapp-fill',
+  };
+
+  const providerIconMap = {
+    microsoft: 'i-ri-microsoft-fill',
+    google: 'i-ri-google-fill',
+  };
+
+  const channelIcon = computed(() => {
+    const type = inbox.channel_type;
+    let icon = channelTypeIconMap[type];
+
+    if (type === 'Channel::Email' && inbox.provider) {
+      if (Object.keys(providerIconMap).includes(inbox.provider)) {
+        icon = providerIconMap[inbox.provider];
+      }
+    }
+
+    return icon ?? 'i-ri-global-fill';
+  });
+
+  return channelIcon;
+}
diff --git a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
new file mode 100644
index 000000000..df30d7138
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
@@ -0,0 +1,59 @@
+import { useChannelIcon } from '../provider';
+
+describe('useChannelIcon', () => {
+  it('returns correct icon for API channel', () => {
+    const inbox = { channel_type: 'Channel::Api' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-cloudy-fill');
+  });
+
+  it('returns correct icon for Facebook channel', () => {
+    const inbox = { channel_type: 'Channel::FacebookPage' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-messenger-fill');
+  });
+
+  it('returns correct icon for WhatsApp channel', () => {
+    const inbox = { channel_type: 'Channel::Whatsapp' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-whatsapp-fill');
+  });
+
+  describe('Email channel', () => {
+    it('returns mail icon for generic email channel', () => {
+      const inbox = { channel_type: 'Channel::Email' };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-mail-fill');
+    });
+
+    it('returns Microsoft icon for Microsoft email provider', () => {
+      const inbox = {
+        channel_type: 'Channel::Email',
+        provider: 'microsoft',
+      };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-microsoft-fill');
+    });
+
+    it('returns Google icon for Google email provider', () => {
+      const inbox = {
+        channel_type: 'Channel::Email',
+        provider: 'google',
+      };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-google-fill');
+    });
+  });
+
+  it('returns default icon for unknown channel type', () => {
+    const inbox = { channel_type: 'Channel::Unknown' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-global-fill');
+  });
+
+  it('returns default icon when channel type is undefined', () => {
+    const inbox = {};
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-global-fill');
+  });
+});
diff --git a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
index e3a2430a5..2a93089a9 100644
--- a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import Icon from 'next/icon/Icon.vue';
+import ChannelIcon from 'next/icon/ChannelIcon.vue';
 
 const props = defineProps({
   label: {
@@ -17,37 +18,6 @@ const props = defineProps({
   },
 });
 
-const channelTypeIconMap = {
-  'Channel::Api': 'i-ri-cloudy-fill',
-  'Channel::Email': 'i-ri-mail-fill',
-  'Channel::FacebookPage': 'i-ri-messenger-fill',
-  'Channel::Line': 'i-ri-line-fill',
-  'Channel::Sms': 'i-ri-chat-1-fill',
-  'Channel::Telegram': 'i-ri-telegram-fill',
-  'Channel::TwilioSms': 'i-ri-chat-1-fill',
-  'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
-  'Channel::WebWidget': 'i-ri-global-fill',
-  'Channel::Whatsapp': 'i-ri-whatsapp-fill',
-};
-
-const providerIconMap = {
-  microsoft: 'i-ri-microsoft-fill',
-  google: 'i-ri-google-fill',
-};
-
-const channelIcon = computed(() => {
-  const type = props.inbox.channel_type;
-  let icon = channelTypeIconMap[type];
-
-  if (type === 'Channel::Email' && props.inbox.provider) {
-    if (Object.keys(providerIconMap).includes(props.inbox.provider)) {
-      icon = providerIconMap[props.inbox.provider];
-    }
-  }
-
-  return icon ?? 'i-ri-global-fill';
-});
-
 const reauthorizationRequired = computed(() => {
   return props.inbox.reauthorization_required;
 });
@@ -58,7 +28,7 @@ const reauthorizationRequired = computed(() => {
     class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
     :class="{ 'bg-n-solid-blue': active }"
   >
-    <Icon :icon="channelIcon" class="size-3" />
+    <ChannelIcon :inbox="inbox" class="size-3" />
   </span>
   <div class="flex-1 truncate min-w-0">{{ label }}</div>
   <div
diff --git a/app/mailboxes/application_mailbox.rb b/app/mailboxes/application_mailbox.rb
index 6a1902ce4..4fe931b9f 100644
--- a/app/mailboxes/application_mailbox.rb
+++ b/app/mailboxes/application_mailbox.rb
@@ -8,12 +8,12 @@ class ApplicationMailbox < ActionMailbox::Base
 
   # routes as a reply to existing conversations
   routing(
-    ->(inbound_mail) { reply_uuid_mail?(inbound_mail) || in_reply_to_mail?(inbound_mail) } => :reply
+    ->(inbound_mail) { valid_to_address?(inbound_mail) && (reply_uuid_mail?(inbound_mail) || in_reply_to_mail?(inbound_mail)) } => :reply
   )
 
   # routes as a new conversation in email channel
   routing(
-    ->(inbound_mail) { EmailChannelFinder.new(inbound_mail.mail).perform.present? } => :support
+    ->(inbound_mail) { valid_to_address?(inbound_mail) && EmailChannelFinder.new(inbound_mail.mail).perform.present? } => :support
   )
 
   # catchall
@@ -37,8 +37,6 @@ class ApplicationMailbox < ActionMailbox::Base
     # checks if follow this pattern  send it to reply_mailbox
     # reply+<conversation-uuid>@<mailer-domain.com>
     def reply_uuid_mail?(inbound_mail)
-      validate_to_address(inbound_mail)
-
       inbound_mail.mail.to&.any? do |email|
         conversation_uuid = email.split('@')[0]
         conversation_uuid.match?(REPLY_EMAIL_UUID_PATTERN)
@@ -48,13 +46,12 @@ class ApplicationMailbox < ActionMailbox::Base
     # if mail.to returns a string, then it is a malformed `to` header
     # valid `to` header will be of type Mail::AddressContainer
     # validate if the to address is of type string
-    def validate_to_address(inbound_mail)
+    def valid_to_address?(inbound_mail)
       to_address_class = inbound_mail.mail.to&.class
-
-      return if to_address_class == Mail::AddressContainer
+      return true if to_address_class == Mail::AddressContainer
 
       Rails.logger.error "Email to address header is malformed `#{inbound_mail.mail.to}`"
-      raise StandardError, "Invalid email to address header #{inbound_mail.mail.to}"
+      false
     end
   end
 end
diff --git a/spec/mailboxes/application_mailbox_spec.rb b/spec/mailboxes/application_mailbox_spec.rb
index 733ec5523..f4f28d811 100644
--- a/spec/mailboxes/application_mailbox_spec.rb
+++ b/spec/mailboxes/application_mailbox_spec.rb
@@ -69,18 +69,26 @@ RSpec.describe ApplicationMailbox do
     end
 
     describe 'Invalid Mail To Address' do
-      it 'raises error when mail.to header is malformed' do
-        expect do
-          described_class.route mail_with_invalid_to_address
-        end.to raise_error(StandardError,
-                           'Invalid email to address header <vishnu@chatwoot.com>vishnu@chatwoot.com')
+      let(:logger) { double }
+
+      before do
+        allow(Rails).to receive(:logger).and_return(logger)
+        allow(logger).to receive(:error)
       end
 
-      it 'raises another error when mail.to header is malformed' do
+      it 'will not raise error when mail.to header is malformed format 1' do
+        expect(logger).to receive(:error).with("Email to address header is malformed `#{mail_with_invalid_to_address.mail.to}`")
+        expect do
+          described_class.route mail_with_invalid_to_address
+        end.not_to raise_error
+      end
+
+      it 'will not raise error when mail.to header is malformed format 2' do
+        expect(logger).to receive(:error).with("Email to address header is malformed `#{mail_with_invalid_to_address_2.mail.to}`")
+
         expect do
           described_class.route mail_with_invalid_to_address_2
-        end.to raise_error(StandardError,
-                           'Invalid email to address header vishnu@chatwoot.com www.chatwoot.com')
+        end.not_to raise_error
       end
     end
   end