diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.story.vue
new file mode 100644
index 000000000..8b06bf4e1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.story.vue
@@ -0,0 +1,216 @@
+<script setup>
+import { ref } from 'vue';
+
+import ContactsCard from './ContactsCard.vue';
+
+const contacts = [
+  {
+    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,
+  },
+];
+
+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/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
index 48195248d..3bad3f9f7 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -1,8 +1,5 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter, useRoute } from 'vue-router';
-import { useStore } from 'dashboard/composables/store';
-import { debounce } from '@chatwoot/utils';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
@@ -19,45 +16,16 @@ const props = defineProps({
   isExpanded: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(['toggle']);
-
-const router = useRouter();
-const route = useRoute();
+const emit = defineEmits(['toggle', 'updateContact', 'showContact']);
 
 const { t } = useI18n();
-const store = useStore();
 
-const updateContact = async updatedData => {
-  await store.dispatch('contacts/update', updatedData);
-  await store.dispatch('contacts/fetchContactableInbox', props.id);
-};
-
-const handleFormUpdate = debounce(
-  updatedData => updateContact(updatedData),
-  400,
-  false
-);
-
-const ROUTE_MAPPINGS = {
-  contacts_dashboard_labels_index: 'contacts_dashboard_labels_edit_index',
-  contacts_dashboard_segments_index: 'contacts_dashboard_segments_edit_index',
+const handleFormUpdate = updatedData => {
+  emit('updateContact', { id: props.id, updatedData });
 };
 
 const onClickViewDetails = async () => {
-  await store.dispatch('contacts/show', { id: props.id });
-
-  const dynamicRouteName =
-    ROUTE_MAPPINGS[route.name] || 'contacts_dashboard_edit_index';
-
-  const params = { contactId: props.id };
-
-  if (route.name.includes('segments')) {
-    params.segmentId = route.params.segmentId;
-  } else if (route.name.includes('labels')) {
-    params.label = route.params.label;
-  }
-
-  await router.push({ name: dynamicRouteName, params, query: route.query });
+  emit('showContact', props.id);
 };
 </script>
 
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.story.vue
new file mode 100644
index 000000000..35d36837f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.story.vue
@@ -0,0 +1,101 @@
+<script setup>
+import ContactsForm from './ContactsForm.vue';
+
+// Sample contact data based on the structure from ContactsCard.vue
+const contactData = {
+  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',
+    },
+  },
+};
+
+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/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 7551fa8fc..5ee6c996e 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -81,7 +81,7 @@ const validationRules = {
 const v$ = useVuelidate(validationRules, state);
 
 const updateState = () => {
-  if (props.isNewContact) return;
+  if (props.isNewContact) return; // Added to prevent state update for new contact form
   const {
     id,
     name = '',
diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
index e02e72b4b..8e94884bd 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -1,5 +1,8 @@
 <script setup>
 import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { debounce } from '@chatwoot/utils';
+import { useRouter, useRoute } from 'vue-router';
 
 import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
 
@@ -10,9 +13,46 @@ defineProps({
   },
 });
 
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+
 // Manage expanded state here
 const expandedCardId = ref(null);
 
+const updateContact = async ({ id, updatedData }) => {
+  await store.dispatch('contacts/update', updatedData);
+  await store.dispatch('contacts/fetchContactableInbox', id);
+};
+
+const handleFormUpdate = debounce(
+  ({ id, updatedData }) => updateContact({ id, updatedData }),
+  500,
+  false
+);
+
+const ROUTE_MAPPINGS = {
+  contacts_dashboard_labels_index: 'contacts_dashboard_labels_edit_index',
+  contacts_dashboard_segments_index: 'contacts_dashboard_segments_edit_index',
+};
+
+const onClickViewDetails = async id => {
+  await store.dispatch('contacts/show', { id });
+
+  const dynamicRouteName =
+    ROUTE_MAPPINGS[route.name] || 'contacts_dashboard_edit_index';
+
+  const params = { contactId: id };
+
+  if (route.name.includes('segments')) {
+    params.segmentId = route.params.segmentId;
+  } else if (route.name.includes('labels')) {
+    params.label = route.params.label;
+  }
+
+  await router.push({ name: dynamicRouteName, params, query: route.query });
+};
+
 const toggleExpanded = id => {
   expandedCardId.value = expandedCardId.value === id ? null : id;
 };
@@ -31,6 +71,8 @@ const toggleExpanded = id => {
       :additional-attributes="contact.additionalAttributes"
       :is-expanded="expandedCardId === contact.id"
       @toggle="toggleExpanded(contact.id)"
+      @update-contact="handleFormUpdate"
+      @show-contact="onClickViewDetails"
     />
   </div>
 </template>