diff --git a/.codeclimate.yml b/.codeclimate.yml
index 2fca0d306..ac38c27bb 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -31,7 +31,4 @@ exclude_patterns:
   - "**/*.yml"
   - "app/javascript/dashboard/i18n/locale"
   - "**/*.stories.js"
-  - "stories/**/*"
-  - "**/*.stories.js"
-  - "**/stories/"
-  - "app/javascript/**/*.stories.js"
+  - "stories/"
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 24bcbc27e..051aad27e 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -131,6 +131,7 @@
   },
   "CONTACTS_PAGE": {
     "HEADER": "Contacts",
+    "FIELDS": "Contact fields",
     "SEARCH_BUTTON": "Search",
     "SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
     "LIST": {
@@ -204,5 +205,33 @@
         "PLACEHOLDER": "Eg: 11901 "
       }
     }
+  },
+  "MERGE_CONTACTS": {
+    "TITLE": "Merge contacts",
+    "DESCRIPTION": "Merge contact is helpful when you have duplicated entries of the same contact. Merging action takes a primary contact and a child contact. After merging, all details in the primary contact will remain the same. If the primary contact doesn't have a field, then the value from the child contact will be used after merging. If a conflict happens, fields in primary contact will remain unaffected, but fields from secondary will be copied to the custom attributes in the primary contact.",
+    "PRIMARY": {
+      "TITLE": "Primary contact"
+    },
+    "CHILD": {
+      "TITLE": "Contact to merge",
+      "PLACEHOLDER": "Choose a contact"
+    },
+    "SUMMARY": {
+      "TITLE": "Summary",
+      "DELETE_WARNING": "Contact of <strong>%{childContactName}</strong>will be deleted.",
+      "ATTRIBUTE_WARNING": "Contact details of <strong>%{childContactName}</strong> will be copied to <strong>%{primaryContactName}</strong>."
+    },
+    "SEARCH": {
+      "ERROR": "ERROR_MESSAGE"
+    },
+    "FORM": {
+      "SUBMIT": " Merge contacts",
+      "CANCEL": "Cancel",
+      "CHILD_CONTACT": {
+        "ERROR": "Select a child contact to merge"
+      },
+      "SUCCESS_MESSAGE": "Contact merged successfully",
+      "ERROR_MESSAGE": "Could not merge contcts, try again!"
+    }
   }
 }
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
new file mode 100644
index 000000000..3263f57b6
--- /dev/null
+++ b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="option-item--user">
+    <thumbnail :src="thumbnail" size="24px" :username="name" />
+    <span class="option__title">
+      {{ name }}
+    </span>
+  </div>
+</template>
+
+<script>
+import Thumbnail from '../../../components/widgets/Thumbnail';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    thumbnail: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.option-item--user {
+  display: flex;
+}
+</style>
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
new file mode 100644
index 000000000..432d00cde
--- /dev/null
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -0,0 +1,209 @@
+<template>
+  <form @submit.prevent="onSubmit">
+    <div class="merge-contacts">
+      <div class="multiselect-wrap--small">
+        <label class="multiselect__label">
+          {{ $t('MERGE_CONTACTS.PRIMARY.TITLE') }}
+        </label>
+        <multiselect
+          :value="primaryContact"
+          disabled
+          :options="[]"
+          :show-labels="false"
+          label="name"
+          track-by="id"
+        >
+          <template slot="singleLabel" slot-scope="props">
+            <contact-dropdown-item
+              :thumbnail="props.option.thumbnail"
+              :name="props.option.name"
+            />
+          </template>
+        </multiselect>
+      </div>
+
+      <div class="child-contact-wrap">
+        <div class="child-arrow">
+          <i class="ion-ios-arrow-up up" />
+        </div>
+        <div
+          class="child-contact multiselect-wrap--small"
+          :class="{ error: $v.childContact.$error }"
+        >
+          <label class="multiselect__label">
+            {{ $t('MERGE_CONTACTS.CHILD.TITLE') }}
+          </label>
+          <multiselect
+            v-model="childContact"
+            :options="searchResults"
+            label="name"
+            track-by="id"
+            :internal-search="false"
+            :clear-on-select="false"
+            :show-labels="false"
+            :placeholder="$t('MERGE_CONTACTS.CHILD.PLACEHOLDER')"
+            :allow-empty="true"
+            :loading="isSearching"
+            :max-height="150"
+            open-direction="top"
+            @search-change="searchChange"
+          >
+            <template slot="singleLabel" slot-scope="props">
+              <contact-dropdown-item
+                :thumbnail="props.option.thumbnail"
+                :name="props.option.name"
+              />
+            </template>
+            <span slot="noResult">
+              {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
+            </span>
+          </multiselect>
+          <span v-if="$v.childContact.$error" class="message">
+            {{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <merge-contact-summary
+      :primary-contact-name="primaryContact.name"
+      :child-contact-name="childContactName"
+    />
+    <div class="footer">
+      <woot-button variant="clear" @click.prevent="onCancel">
+        {{ $t('MERGE_CONTACTS.FORM.CANCEL') }}
+      </woot-button>
+      <woot-button type="submit" :is-loading="isMerging">
+        {{ $t('MERGE_CONTACTS.FORM.SUBMIT') }}
+      </woot-button>
+    </div>
+  </form>
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import { required } from 'vuelidate/lib/validators';
+
+import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary';
+import ContactDropdownItem from './ContactDropdownItem';
+
+export default {
+  components: { MergeContactSummary, ContactDropdownItem },
+  mixins: [alertMixin],
+  props: {
+    primaryContact: {
+      type: Object,
+      required: true,
+    },
+    isSearching: {
+      type: Boolean,
+      default: false,
+    },
+    isMerging: {
+      type: Boolean,
+      default: false,
+    },
+    searchResults: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  validations: {
+    primaryContact: {
+      required,
+    },
+    childContact: {
+      required,
+    },
+  },
+  data() {
+    return {
+      childContact: undefined,
+    };
+  },
+
+  computed: {
+    childContactName() {
+      return this.childContact ? this.childContact.name : '';
+    },
+  },
+  methods: {
+    searchChange(query) {
+      this.$emit('search', query);
+    },
+    onSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      this.$emit('submit', this.childContact.id);
+    },
+    onCancel() {
+      this.$emit('cancel');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.child-contact-wrap {
+  display: flex;
+  width: 100%;
+}
+.child-contact {
+  flex: 1 0 0;
+  min-width: 0;
+}
+.child-arrow {
+  width: var(--space-larger);
+  position: relative;
+  font-size: var(--font-size-default);
+  color: var(--color-border-dark);
+}
+.multiselect {
+  margin-bottom: var(--space-small);
+}
+.child-contact {
+  margin-top: var(--space-smaller);
+}
+.child-arrow::after {
+  content: '';
+  height: var(--space-larger);
+  width: 0;
+  left: var(--space-two);
+  position: absolute;
+  border-left: 1px solid var(--color-border-dark);
+}
+
+.child-arrow::before {
+  content: '';
+  height: 0;
+  width: var(--space-normal);
+  left: var(--space-two);
+  top: var(--space-larger);
+  position: absolute;
+  border-bottom: 1px solid var(--color-border-dark);
+}
+
+.up {
+  position: absolute;
+  top: -11px;
+  left: var(--space-normal);
+}
+
+::v-deep .multiselect__tags .option__title {
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--space-small);
+}
+
+.footer {
+  margin-top: var(--space-medium);
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* TDOD: Clean errors in forms style */
+.error .message {
+  margin-top: 0;
+}
+</style>
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
new file mode 100644
index 000000000..5d028bd6a
--- /dev/null
+++ b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
@@ -0,0 +1,62 @@
+<template>
+  <div v-if="childContactName" class="merge-summary callout">
+    <h5 class="text-block-title">
+      {{ $t('MERGE_CONTACTS.SUMMARY.TITLE') }}
+    </h5>
+    <ul class="summary-items">
+      <li>
+        <span>❌</span>
+        <span
+          v-html="
+            $t('MERGE_CONTACTS.SUMMARY.DELETE_WARNING', {
+              childContactName,
+            })
+          "
+        />
+      </li>
+      <li>
+        <span>✅</span>
+        <span
+          v-html="
+            $t('MERGE_CONTACTS.SUMMARY.ATTRIBUTE_WARNING', {
+              childContactName,
+              primaryContactName,
+            })
+          "
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    primaryContactName: {
+      type: String,
+      default: '',
+    },
+    childContactName: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.merge-summary {
+  margin-top: var(--space-normal);
+}
+
+.summary-items {
+  margin-left: 0;
+  list-style: none;
+
+  li {
+    margin-bottom: var(--space-smaller);
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js b/app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js
index ddaeb22e8..8c860ebd0 100644
--- a/app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js
+++ b/app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js
@@ -10,7 +10,7 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ContactIntro },
   template:
-    '<contact-intro v-bind="$props" :user="user" @edit="onEdit" @message="onNewMessage" />',
+    '<contact-intro v-bind="$props" @edit="onEdit" @message="onNewMessage" />',
 });
 
 export const DefaultContactIntro = Template.bind({});
diff --git a/app/javascript/dashboard/modules/contact/stories/MergeContact.stories.js b/app/javascript/dashboard/modules/contact/stories/MergeContact.stories.js
new file mode 100644
index 000000000..3700ba0f1
--- /dev/null
+++ b/app/javascript/dashboard/modules/contact/stories/MergeContact.stories.js
@@ -0,0 +1,32 @@
+import { action } from '@storybook/addon-actions';
+import MergeContact from 'dashboard/modules/contact/components/MergeContact';
+
+export default {
+  title: 'Components/Contact/MergeContacts',
+  component: MergeContact,
+  argTypes: {
+    'primary-contact': {
+      defaultValue: '{}',
+      control: {
+        type: 'object',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MergeContact },
+  template:
+    '<merge-contact v-bind="$props" @submit="onSearch" @search="onSubmit"></merge-contact>',
+});
+
+export const List = Template.bind({});
+List.args = {
+  primaryContact: {
+    id: 12,
+    name: 'Mason Mount',
+  },
+  onSearch: action('Search'),
+  onSubmit: action('Submit'),
+};
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index a8642fa15..55d2308fd 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -359,7 +359,7 @@ export default {
     margin-bottom: var(--space-normal);
     border-bottom: 1px solid var(--color-border-light);
   }
-  .multiselect-wrap--small {
+  .conversation--actions .multiselect-wrap--small {
     .multiselect {
       padding-left: var(--space-medium);
       box-sizing: border-box;