diff --git a/app/javascript/dashboard/assets/scss/_mixins.scss b/app/javascript/dashboard/assets/scss/_mixins.scss
index a20a32ffe..41ba95276 100644
--- a/app/javascript/dashboard/assets/scss/_mixins.scss
+++ b/app/javascript/dashboard/assets/scss/_mixins.scss
@@ -236,3 +236,11 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+@mixin three-column-grid($column-one-width: 25.6rem,
+  $column-three-width: 25.6rem) {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: minmax($column-one-width, 6fr) 10fr minmax($column-three-width, 6fr);
+}
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ManageLayout.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ManageLayout.vue
new file mode 100644
index 000000000..2ba7c67ea
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ManageLayout.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="wrap">
+    <div class="left"></div>
+    <div class="center"></div>
+    <div class="right"></div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {},
+  props: {
+    contactId: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'contacts/getUIFlags',
+    }),
+    showEmptySearchResult() {
+      const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
+      return hasEmptyResults;
+    },
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/mixins';
+
+.wrap {
+  @include three-column-grid(27.2rem);
+  background: var(--color-background);
+  border-top: 1px solid var(--color-border);
+}
+
+.center {
+  border-right: 1px solid var(--color-border);
+  border-left: 1px solid var(--color-border);
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index 4383991fe..18dab3e5b 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -1,12 +1,29 @@
 <template>
-  <div class="contact-manage-view row"></div>
+  <div class="contact-manage-view">
+    <contacts-header
+      :search-query="searchQuery"
+      :on-search-submit="onSearchSubmit"
+      :on-input-search="onInputSearch"
+      :on-toggle-create="onToggleCreate"
+    />
+    <manage-layout />
+
+    <create-contact :show="showCreateModal" @cancel="onToggleCreate" />
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import ContactsHeader from '../components/Header';
+import ManageLayout from '../components/ManageLayout';
+import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact';
 
 export default {
-  components: {},
+  components: {
+    ContactsHeader,
+    CreateContact,
+    ManageLayout,
+  },
   props: {
     contactId: {
       type: [String, Number],
@@ -14,7 +31,10 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      searchQuery: '',
+      showCreateModal: false,
+    };
   },
   computed: {
     ...mapGetters({
@@ -26,7 +46,28 @@ export default {
     },
   },
   mounted() {},
-  methods: {},
+  methods: {
+    onInputSearch(event) {
+      const newQuery = event.target.value;
+      const refetchAllContacts = !!this.searchQuery && newQuery === '';
+      if (refetchAllContacts) {
+        this.$store.dispatch('contacts/get', { page: 1 });
+      }
+      this.searchQuery = newQuery;
+    },
+    onSearchSubmit() {
+      this.selectedContactId = '';
+      if (this.searchQuery) {
+        this.$store.dispatch('contacts/search', {
+          search: this.searchQuery,
+          page: 1,
+        });
+      }
+    },
+    onToggleCreate() {
+      this.showCreateModal = !this.showCreateModal;
+    },
+  },
 };
 </script>
 
diff --git a/stories/Sections/Layout.stories.mdx b/stories/Sections/Layout.stories.mdx
new file mode 100644
index 000000000..29ce5df83
--- /dev/null
+++ b/stories/Sections/Layout.stories.mdx
@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Chatwoot/Layout" />
+
+# Layout guidelines
+
+Chatwoot follows a fixed-width sidebar on the left menu on all pages. The remaining space of the layout is where the layout changes according to what the page needs.
+
+### Normal Grid
+
+Chatwoot is built on top of [foundation](https://get.foundation/sites/docs/) and uses the **flex-grid** from Foundation. We insist to solve every possible layout with this grid.
+The docs for the grid can be found here on [foundation grid docs](https://get.foundation/sites/docs/grid.html).
+
+### 3 column layout
+
+We Recommend the use of this solution only when the normal grid fails to solve it or needs severe overriding. Some layouts need custom functionality where Foundation grid is not enough. The main conversation page is an example of this grid as a candidate.
+
+**Usage** - We have created a mixin `three-column-grid` which can be included by importing the file
+
+`@import '~dashboard/assets/scss/mixins';`
+
+There are 2 parameters for this mixin, The first one being the minimum possible width for the first column in `rem`. This value is usually a multiple of `8` when converted to `px`. Eg: `256px` will be used as `25.6rem`.
+Similarly, the second param is the minimum possible width of the third column.