diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js
index 63b985ed2..379d50968 100644
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -1,5 +1,6 @@
 import axios from "axios";
 import headerData from "./../mocks/casesHeader.json";
+import startedCasesFaker from "./../mocks/startedCasesFaker.js";
 import Api from "./Api.js";
 
 export let cases = {
@@ -32,6 +33,14 @@ export let cases = {
         return axios.post(window.config.SYS_SERVER +
             window.config.SYS_URI +
             `cases/casesStartPage_Ajax.php`, params);
+    },
+    //remove this section
+    search(data) {
+        return new Promise((resolutionFunc, rejectionFunc) => {
+
+            resolutionFunc(startedCasesFaker);
+
+        });
     }
 };
 
diff --git a/resources/assets/js/components/search/GenericFilter.vue b/resources/assets/js/components/search/GenericFilter.vue
new file mode 100644
index 000000000..1e3fce8d1
--- /dev/null
+++ b/resources/assets/js/components/search/GenericFilter.vue
@@ -0,0 +1,343 @@
+<template>
+    <div>
+        <b-container fluid class="bv-example-row" id="my-container">
+            <b-row>
+                <b-col md="10"><h5>Advanced Search</h5></b-col>
+                <b-col md="2">
+                    <b-button variant="success" size="sm" class="float-right"
+                        ><b-icon icon="plus"></b-icon>Request</b-button
+                    >
+                </b-col>
+            </b-row>
+            <b-row>
+                <b-col md="4">
+                    <div class="d-flex flex-row">
+                        <SearchPopover
+                            target="popover-target-1"
+                            @closePopover="onClose"
+                            @savePopover="onOk"
+                        >
+                            <template v-slot:target-item>
+                                <b-button
+                                    id="popover-target-1"
+                                    variant="success"
+                                    size="sm"
+                                    href="#"
+                                    tabindex="0"
+                                >
+                                    <b-icon icon="plus"></b-icon>Add Filter
+                                </b-button>
+                            </template>
+                            <template v-slot:body>
+                                <b-form-group
+                                    label="Add Serch filter criteria: "
+                                >
+                                    <b-form-checkbox-group
+                                        v-model="selected"
+                                        :options="filterOptions"
+                                        name="flavour-2a"
+                                        stacked
+                                    ></b-form-checkbox-group>
+                                </b-form-group>
+                            </template>
+                        </SearchPopover>
+                        <b-button
+                            size="sm"
+                            @click="cleanAllTags"
+                            variant="danger"
+                            >Clean All</b-button
+                        >
+                    </div>
+                </b-col>
+
+                <b-col md="8">
+                    <div class="d-flex flex-row-reverse">
+                        <div class="p-2">
+                            <b-button v-b-modal.modal-prevent-closing variant="primary" size="sm">
+                                <b-icon icon="menu-button"></b-icon>Save Search
+                            </b-button>
+                        </div>
+                        <div class="p-2">
+                            <b-button variant="danger" size="sm" @click="onDeleteSearch">
+                                <b-icon icon="trash"></b-icon>Delete Search
+                            </b-button>
+                        </div>
+                        <div class="p-2">
+                            <b-button variant="success" size="sm" @click="onJumpCase">
+                                <b-icon icon="arrow-up-right-square"></b-icon>
+                                Jump
+                            </b-button>
+                        </div>
+                        <div class="p-2">
+                            <input v-model="caseNumber" size="7" type="text" class="form-control"  placeholder="Case Number"/>
+                        </div>
+                    </div>
+                </b-col>
+            </b-row>
+            <b-row>
+                <b-col> 
+                    <div class="d-flex flex-row">
+                       
+                        <b-form-tags
+                            input-id="tags-pills"
+                            v-model="searchTags"
+                            size="sm"
+                        >
+                            <template v-slot="{ tags, tagVariant, removeTag }">
+                                <div
+                                    class="d-inline-block"
+                                    style="font-size: 1rem;"
+                                >
+                                    <b-form-tag
+                                        v-for="tag in tags"
+                                        @remove="customRemove(removeTag, tag)"
+                                        :key="tag"
+                                        :title="tag"
+                                        :variant="tagVariant"
+                                        class="mr-1"
+                                    >
+                                         <component v-bind:is="tag"
+                                          v-bind:info="searchTagsModels[tag]"
+                                          v-bind:tag="tag"
+                                          @updateSearchTag="updateSearchTag"
+                                          />
+                                    </b-form-tag>
+                                </div>
+                            </template>
+                        </b-form-tags>
+                        <b-input-group-append>
+                            <b-button
+                                pill
+                                variant="outline-secondary"
+                                class="pull-right"
+                                @click="onSearch"
+                            >
+                                <b-icon icon="search"></b-icon>
+                            </b-button>
+                        </b-input-group-append>
+                    </div>
+                </b-col>
+            </b-row>
+
+            <b-modal
+                id="modal-prevent-closing"
+                ref="modal"
+                :title="saveModalTitle"
+                @show="resetModal"
+                @hidden="resetModal"
+                @ok="handleOk"
+                >
+                <form ref="form" @submit.stop.prevent="handleSubmit">
+                    <b-form-group
+                    :state="nameState"
+                    label="Name"
+                    label-for="name-input"
+                    invalid-feedback="Name is required"
+                    >
+                    <b-form-input
+                        id="name-input"
+                        v-model="name"
+                        :state="nameState"
+                        required
+                    ></b-form-input>
+                    </b-form-group>
+                </form>
+            </b-modal>
+
+        </b-container>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./popovers/SearchPopover.vue";
+import CaseNumber from "./popovers/CaseNumber.vue";
+import DueDate from "./popovers/DueDate.vue";
+import CaseTitle from "./popovers/CaseTitle.vue";
+import ProcessName from "./popovers/ProcessName.vue";
+import ParticipatedLevel from "./popovers/ParticipatedLevel.vue";
+import CasePriority from "./popovers/CasePriority.vue";
+import SentBy from "./popovers/SentBy.vue";
+import CaseStatus from "./popovers/CaseStatus.vue";
+export default {
+    name: "GenericFilter",
+    components: {
+        SearchPopover,
+        CaseNumber,
+        DueDate,
+        CaseTitle,
+        ProcessName,
+        ParticipatedLevel,
+        SentBy,
+        CaseStatus
+    },
+    data() {
+        return {
+            searchTags: [],
+            searchTagsModels: {
+                "CaseNumber": {
+                    text: "#",
+                    tagText: "From: 1, 3, 7 To: 15",
+                    default: {
+                        from: "",
+                        to: "",
+                    },
+                },
+                "DueDate": {
+                    text: "Due Date",
+                    tagText: "From: 01-01-2020 To: 01-01-2020",
+                     default: {
+                        from: "",
+                        to: "",
+                    },
+
+                },
+                "CaseTitle": {
+                    text: "Case",
+                    tagText: "Case: title",
+                    default: {
+                        name: ""
+                    }
+
+                },
+                "ProcessName": {
+                    text: "Process",
+                    tagText: "Process: name",
+                    default: {
+                        name: ""
+                    }
+
+                },
+                "ParticipatedLevel": {
+                    text: "Participated",
+                    tagText: "Process: name",
+                    default: {
+                        name: ""
+                    }
+
+                },
+                "CasePriority": {
+                    text: "Priority",
+                    tagText: "Process: name",
+                    title: "Filter: Priority",
+                    label: "Please select the priority for the search",
+                    options: [
+                        { text: 'Very Low', value: '1' },
+                        { text: 'Low', value: '2' },
+                        { text: 'Niormal', value: '3' },
+                        { text: 'Very High', value: '4' },
+                        { text: 'High', value: '5' }
+                    ]
+
+                },
+                "SentBy": {
+                    text: "Sent By",
+                    title: "Filter: Sent By",
+                    placeHolder: "User name",
+                },
+                "CaseStatus": {
+                    text: "Status",
+                    title: "Filter: Case Status",
+                    label: "Please select the status for the search",
+                    options: [
+                        { text: 'Draft', value: '1' },
+                        { text: 'To Do', value: '2' },
+                        { text: 'Completed', value: '4' },
+                        { text: 'Canceled', value: '5' },
+                        { text: 'Paused', value: '6' }
+                    ]
+
+                },
+            },
+            text: "",
+            selected: [],
+            jsonFilter: {},
+            caseNumber: "",
+            saveModalTitle: "SaveSearch",
+            name: '',
+            nameState: null
+        };
+    },
+    computed: {
+        filterOptions: function() {
+            let options = [];
+            _.forIn(this.searchTagsModels, function(value, key) {
+                options.push({
+                    text: value.text,
+                    value: key,
+                });
+            });
+            return options;
+        }
+    },
+    methods: {
+        onClose() {
+            this.popoverShow = false;
+        },
+        onOk() {
+            this.searchTags = [...this.searchTags, ...this.selected];
+            this.onClose();
+        },
+        cleanAllTags() {
+            this.searchTags = [];
+            this.jsonFilter = {
+                search: "",
+            };
+        },
+        customRemove (removeTag, tag) {
+            removeTag(tag);
+            this.jsonFilter = {
+                search: "",
+            };
+        },
+        onSearch() {
+            this.$emit("onSearch", this.jsonFilter);
+        },
+        updateSearchTag(params) {
+            this.jsonFilter = {...this.jsonFilter, ...params}
+        },
+        onJumpCase() {
+            this.$emit("onJumpCase", {caseNumber: this.caseNumber});
+        },
+      
+        /**
+         * Delete Search handler
+         */
+        onDeleteSearch () {
+        },
+        checkFormValidity() {
+            const valid = this.$refs.form.checkValidity();
+            this.nameState = valid;
+            return valid;
+        },
+        resetModal() {
+            this.name = '';
+            this.nameState = null;
+        },
+        handleOk(bvModalEvt) {
+            // Prevent modal from closing
+            bvModalEvt.preventDefault();
+            // Trigger submit handler
+            this.handleSubmit();
+        },
+        handleSubmit() {
+            // Exit when the form isn't valid
+            if (!this.checkFormValidity()) {
+            return;
+            }
+            // Hide the modal manually
+            this.$nextTick(() => {
+                this.$bvModal.hide('modal-prevent-closing');
+            });
+        }
+    },
+};
+</script>
+<style scoped>
+.bv-example-row .row + .row {
+    margin-top: 1rem;
+}
+
+.bv-example-row-flex-cols .row {
+    min-height: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/search/SearchDataTable.vue b/resources/assets/js/components/search/SearchDataTable.vue
new file mode 100644
index 000000000..049b5bee8
--- /dev/null
+++ b/resources/assets/js/components/search/SearchDataTable.vue
@@ -0,0 +1,83 @@
+<template>
+    <div :class="`VueTables VueTables--${props.source}`" slot-scope="props">
+
+        <div :class="props.theme.row">
+            <div :class="props.theme.column">
+              
+               <div v-if="!props.opts.filterByColumn && props.opts.filterable"
+                     :class="`${props.theme.field} ${props.theme.inline} ${props.theme.left} VueTables__search`">
+                    <vnodes :vnodes="props.slots.beforeFilter"/>
+                    <vt-generic-filter ref="genericFilter"/>
+                    <vnodes :vnodes="props.slots.afterFilter"/>
+                </div>
+                <vnodes :vnodes="props.slots.afterFilterWrapper"/>
+
+                <div v-if="props.perPageValues.length > 1 || props.opts.alwaysShowPerPageSelect"
+                     :class="`${props.theme.field} ${props.theme.inline} ${props.theme.right} VueTables__limit`">
+                    <vnodes :vnodes="props.slots.beforeLimit"/>
+                    <vt-per-page-selector/>
+                    <vnodes :vnodes="props.slots.afterLimit"/>
+
+                </div>
+               {{ props.generic}} 
+                <GenericFilter @onSearch="onSearch"  @onJumpCase="onJumpCase"/>
+            
+                <div class="VueTables__pagination-wrapper" v-if="props.opts.pagination.dropdown && props.totalPages > 1">
+                    <div :class="`${props.theme.field} ${props.theme.inline} ${props.theme.right} VueTables__dropdown-pagination`">
+                        <vt-dropdown-pagination/>
+                    </div>
+                </div>
+
+                <div v-if="props.opts.columnsDropdown"
+                     :class="`VueTables__columns-dropdown-wrapper ${props.theme.right} ${props.theme.dropdown.container}`">
+                    <vt-columns-dropdown/>
+                </div>
+            </div>
+        </div>
+
+        <vnodes :vnodes="props.slots.beforeTable"/>
+        <div class="table-responsive">
+            <vt-table ref="vt_table"/>
+        </div>
+        <vnodes :vnodes="props.slots.afterTable"/>
+
+        <vt-pagination/>
+
+    </div>
+</template>
+
+<script>
+    import VtColumnsDropdown from 'vue-tables-2/compiled/components/VtColumnsDropdown'
+    import VtDropdownPagination from 'vue-tables-2/compiled/components/VtDropdownPagination'
+    import VtGenericFilter from 'vue-tables-2/compiled/components/VtGenericFilter'
+    import VtPerPageSelector from 'vue-tables-2/compiled/components/VtPerPageSelector';
+    import VtPagination from 'vue-tables-2/compiled/components/VtPagination'
+    import VtTable from 'vue-tables-2/compiled/components/VtTable';
+    import GenericFilter from './GenericFilter'
+
+    export default {
+        name: "SearchDataTable",
+        props: ['props'],
+        components: {
+            VtGenericFilter,
+            VtPerPageSelector,
+            VtColumnsDropdown,
+            VtDropdownPagination,
+            VtTable,
+            VtPagination,
+            GenericFilter,
+            vnodes: {
+                functional: true,
+                render: (h, ctx) => ctx.props.vnodes
+            }
+        },
+        methods: {
+            onSearch(jsonFilter) {
+                this.$parent.$parent.$emit("onsearch", jsonFilter);
+            },
+            onJumpCase(params) {
+                this.$parent.$parent.$emit("onjumpcase", params);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/js/components/search/popovers/CaseNumber.vue b/resources/assets/js/components/search/popovers/CaseNumber.vue
new file mode 100644
index 000000000..82960262d
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/CaseNumber.vue
@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <SearchPopover
+            :target="tag"
+            @closePopover="onClose"
+            @savePopover="onOk"
+        >
+            <template v-slot:target-item>
+                <div @click="onClickTag(tag)" :id="tag">
+                    <i class="fas fa-tags"></i>
+                    {{ tagText }}
+                </div>
+            </template>
+            <template v-slot:body>
+                <div class="row">
+                    <div class="col">
+                        <input
+                            v-model="from"
+                            type="text"
+                            size="210"
+                            class="form-control"
+                            placeholder="From Case number #"
+                        />
+                    </div>
+                    <div class="col">
+                        <input
+                            v-model="to"
+                            type="text"
+                            size="210"
+                            class="form-control"
+                            placeholder="To Case number # (Optional)"
+                        />
+                    </div>
+                </div>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info"],
+    data() {
+        return {
+            from: "",
+            to: "",
+        };
+    },
+    computed: {
+        tagText: function() {
+            return `From: ${this.from} To: ${this.to}`;
+        },
+    },
+    methods: {
+        onClose() {},
+        onOk() {
+            this.$emit("updateSearchTag", { from: this.from, to: this.to });
+        },
+        onRemoveTag() {},
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        },
+        handler() {
+        },
+    },
+};
+</script>
+<style scoped>
+.popovercustom {
+    max-width: 650px !important;
+}
+</style>
diff --git a/resources/assets/js/components/search/popovers/CasePriority.vue b/resources/assets/js/components/search/popovers/CasePriority.vue
new file mode 100644
index 000000000..69e68b7a8
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/CasePriority.vue
@@ -0,0 +1,64 @@
+<template>
+    <div id="">
+        <SearchPopover
+            :target="tag"
+            @closePopover="onClose"
+            @savePopover="onOk"
+        >
+            <template v-slot:target-item>
+                <div @click="onClickTag(tag)" :id="tag">
+                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
+                    {{ tagText }}
+                </div>
+            </template>
+            <template v-slot:body>
+                <h6>{{ info.title }}</h6>
+                <b-form-group :label="info.label">
+                    <b-form-checkbox
+                        v-for="option in info.options"
+                        v-model="selected"
+                        :key="option.value"
+                        :value="option.value"
+                        name="flavour-2a"
+                        stacked
+                    >
+                        {{ option.text }}
+                    </b-form-checkbox>
+                </b-form-group>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+|
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info"],
+    data() {
+        return {
+            selected: [], // Must be an array reference!
+        };
+    },
+    computed: {
+        tagText: function() {
+            return `Priority: `;
+        },
+    },
+    methods: {
+        onClose() {
+        },
+        onOk() {
+          
+        },
+        onRemoveTag() {},
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style scoped></style>
diff --git a/resources/assets/js/components/search/popovers/CaseStatus.vue b/resources/assets/js/components/search/popovers/CaseStatus.vue
new file mode 100644
index 000000000..d50ee3b5b
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/CaseStatus.vue
@@ -0,0 +1,64 @@
+<template>
+    <div id="">
+        <SearchPopover
+            :target="tag"
+            @closePopover="onClose"
+            @savePopover="onOk"
+        >
+            <template v-slot:target-item>
+                <div @click="onClickTag(tag)" :id="tag">
+                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
+                    {{ tagText }}
+                </div>
+            </template>
+            <template v-slot:body>
+                <h6>{{ info.title }}</h6>
+                <b-form-group :label="info.label">
+                    <b-form-checkbox
+                        v-for="option in info.options"
+                        v-model="selected"
+                        :key="option.value"
+                        :value="option.value"
+                        name="flavour-2a"
+                        stacked
+                    >
+                        {{ option.text }}
+                    </b-form-checkbox>
+                </b-form-group>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+|
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info"],
+    data() {
+        return {
+            selected: [], // Must be an array reference!
+        };
+    },
+    computed: {
+        tagText: function() {
+            return `Case Status: `;
+        },
+    },
+    methods: {
+        onClose() {
+        },
+        onOk() {
+
+        },
+        onRemoveTag() {},
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style scoped></style>
diff --git a/resources/assets/js/components/search/popovers/CaseTitle.vue b/resources/assets/js/components/search/popovers/CaseTitle.vue
new file mode 100644
index 000000000..68da628be
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/CaseTitle.vue
@@ -0,0 +1,62 @@
+<template>
+    <div id="">
+        <SearchPopover
+            :target="tag"
+            @closePopover="onClose"
+            @savePopover="onOk"
+        >
+            <template v-slot:target-item>
+                <div @click="onClickTag(tag)" :id="tag">
+                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
+                    {{ tagText }}
+                </div>
+            </template>
+            <template v-slot:body>
+                <h6>Filter: Case Title</h6>
+                <input
+                    v-model="title"
+                    type="text"
+                    size="150"
+                    class="form-control"
+                    placeholder="Case Title Name"
+                />
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+|
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info"],
+    data() {
+        return {
+            title: "",
+        };
+    },
+    computed: {
+        tagText: function() {
+            return `Case: ${this.title}`;
+        },
+    },
+    methods: {
+        onClose() {
+        },
+        onOk() {
+            this.$emit("updateSearchTag", {
+                columnSearch: "APP_TITLE",
+                search: this.title,
+            });
+        },
+        onRemoveTag() {},
+        onClickTag(tag) {
+             this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style scoped></style>
diff --git a/resources/assets/js/components/search/popovers/Category.vue b/resources/assets/js/components/search/popovers/Category.vue
new file mode 100644
index 000000000..259dfb582
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/Category.vue
@@ -0,0 +1,51 @@
+<template>
+    <div id="">
+        <SearchPopover
+            :target="tag"
+            @closePopover="onClose"
+            @savePopover="onOk"
+        >
+            <template v-slot:target-item>
+                <div @click="onClickTag(tag)" :id="tag">
+                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
+                    {{ info.tagText }}
+                </div>
+            </template>
+            <template v-slot:body>
+                <h6>Filter: Case Title</h6>
+                <input
+                    type="text"
+                    size="150"
+                    class="form-control"
+                    placeholder="Case Title Name"
+                />
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info"],
+    data() {
+        return {};
+    },
+    computed: {},
+    methods: {
+        onClose() {
+        },
+        onOk() {
+
+        },
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style scoped></style>
diff --git a/resources/assets/js/components/search/popovers/DueDate.vue b/resources/assets/js/components/search/popovers/DueDate.vue
new file mode 100644
index 000000000..1ee28a7f1
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/DueDate.vue
@@ -0,0 +1,78 @@
+<template>
+    <div id="">
+       <SearchPopover
+            :target="tag"
+            @closePopover="onClose"
+            @savePopover="onOk"
+        >
+            <template v-slot:target-item>
+                <div
+                    @click="onClickTag(tag)"
+                    :id="tag"
+                >
+                    <b-icon
+                        icon="tags-fill"
+                        font-scale="1"
+                    ></b-icon>
+                    {{
+                        tagText
+                    }}
+                </div>
+            </template>
+            <template v-slot:body>
+                <div class="row">
+                    <div class="col">
+                          <b-form-datepicker id="from" v-model="from"  placeholder="From Due Date"></b-form-datepicker>
+                    </div>
+                    <div class="col">
+                         <b-form-datepicker id="to" v-model="to"   placeholder="To Due Date"></b-form-datepicker>
+                    </div>  
+                </div>
+                   
+            </template>
+        </SearchPopover>
+       
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+    export default {
+        components: {
+            SearchPopover,
+        },
+        props: ['tag','info'],
+        data() {
+            return {
+                from: "",
+                to: ""
+            };
+        },
+        computed: {
+            tagText: function() {
+                return `From: ${this.from} To:  ${this.to}`;
+            },
+        },
+        methods: {
+            onClose() {
+            // this.popoverShow = false;
+                // this.$emit("closePopover");
+            },
+            onOk() {
+                this.$emit("updateSearchTag", {
+                    columnSearch: "APP_TITLE",
+                    search: null,
+                    dateFrom: this.from,
+                    dateTo: this.to
+                });
+            },
+            onClickTag(tag) {
+                this.$root.$emit("bv::hide::popover");
+            }
+          
+        },
+    };
+</script>
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/search/popovers/ParticipatedLevel.vue b/resources/assets/js/components/search/popovers/ParticipatedLevel.vue
new file mode 100644
index 000000000..c72e5f606
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/ParticipatedLevel.vue
@@ -0,0 +1,73 @@
+<template>
+    <div id="">
+        <SearchPopover
+            :target="tag"
+            @closePopover="onClose"
+            @savePopover="onOk"
+        >
+            <template v-slot:target-item>
+                <div @click="onClickTag(tag)" :id="tag">
+                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
+                    {{ tagText }}
+                </div>
+            </template>
+            <template v-slot:body>
+                <h6>Filter: Participated</h6>
+                <b-form-group
+                    label="Please select the participation for the search"
+                >
+                    <b-form-checkbox
+                        v-for="option in options"
+                        v-model="selected"
+                        :key="option.value"
+                        :value="option.value"
+                        name="flavour-2a"
+                        stacked
+                    >
+                        {{ option.text }}
+                    </b-form-checkbox>
+                </b-form-group>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+|
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+export default {
+    components: {
+        SearchPopover,
+    },
+    props: ["tag", "info"],
+    data() {
+        return {
+            selected: [], // Must be an array reference!
+            options: [
+                { text: "Started By Me", value: "Started By Me" },
+                { text: "Participated", value: "Participated" },
+                { text: "Completed By Me", value: "Completed By Me" },
+            ],
+        };
+    },
+    computed: {
+        tagText: function() {
+            return `Participated Level`;
+        },
+    },
+    methods: {
+        onClose() {},
+        onOk() {
+            this.$emit("updateSearchTag", {
+                columnSearch: "APP_TITLE",
+                search: this.title,
+            });
+        },
+        onRemoveTag() {},
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style scoped></style>
diff --git a/resources/assets/js/components/search/popovers/ProcessName.vue b/resources/assets/js/components/search/popovers/ProcessName.vue
new file mode 100644
index 000000000..fb5ab9b90
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/ProcessName.vue
@@ -0,0 +1,86 @@
+<template>
+    <div id="">
+        <SearchPopover
+            :target="tag"
+            @closePopover="onClose"
+            @savePopover="onOk"
+        >
+            <template v-slot:target-item>
+                <div @click="onClickTag(tag)" :id="tag">
+                    <b-icon icon="tags-fill" font-scale="1"></b-icon>
+                    {{ tagText }}
+                </div>
+            </template>
+            <template v-slot:body>
+                <h6>Filter: Process</h6>
+                <vue-bootstrap-typeahead
+                    class="mb-4"
+                    v-model="query"
+                    :data="process"
+                    :serializer="(item) => item.PRO_TITLE"
+                    @hit="selectedUser = $event"
+                    placeholder="Search GitHub Users"
+                />
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+import VueBootstrapTypeahead from "vue-bootstrap-typeahead";
+
+// OR
+export default {
+    components: {
+        SearchPopover,
+        VueBootstrapTypeahead,
+    },
+    props: ["tag", "info"],
+    data() {
+        return {
+            query: "",
+            process: [],
+        };
+    },
+    computed: {
+        ProcessMaker() {
+            return window.ProcessMaker;
+        },
+        tagText: function() {
+            return `Process: ${this.query}`;
+        },
+    },
+    watch: {
+        query(newQuery) {
+            ProcessMaker.apiClient
+                .post(
+                    `http://localhost:350/sysworkflow/en/neoclassic/cases/casesList_Ajax?actionAjax=processListExtJs&action=search`,
+                    {
+                        query: this.query,
+                    }
+                )
+                .then((response) => {
+                    this.process = response.data;
+                })
+                .catch((err) => {
+                    console.error(err);
+                });
+        },
+    },
+    methods: {
+        onClose() {},
+        onOk() {
+            this.$emit("updateSearchTag", {
+                columnSearch: "APP_TITLE",
+                process_label: this.query,
+                process: _.find(this.process, { PRO_TITLE: this.query }).PRO_ID,
+            });
+        },
+        onClickTag(tag) {
+            this.$root.$emit("bv::hide::popover");
+        },
+    },
+};
+</script>
+<style scoped></style>
diff --git a/resources/assets/js/components/search/popovers/SearchPopover.vue b/resources/assets/js/components/search/popovers/SearchPopover.vue
new file mode 100644
index 000000000..f3f173ebe
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/SearchPopover.vue
@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <slot name="target-item">here component</slot>
+
+        <b-popover
+            :show.sync="popoverShow"
+            :target="target"
+            triggers="click"
+            placement="bottom"
+            class="popovercustom"
+        >
+            <template #title>
+                <b-button @click="onClose" class="close" aria-label="Close">
+                    <span class="d-inline-block" aria-hidden="true"
+                        >&times;</span
+                    >
+                </b-button>
+                &nbsp;
+            </template>
+            <div>
+                <slot name="body">
+                    popover body
+                </slot>
+                <div class="float-right">
+                    <b-button @click="onClose" size="sm" variant="danger">Cancel</b-button>
+                    <b-button @click="onSave" size="sm" variant="primary">Save</b-button>
+                </div>
+            </div>
+        </b-popover>
+    </div>
+</template>
+<script>
+export default {
+    props: ['target'],
+    data() {
+        return {
+           popoverShow: false
+        };
+    },
+    methods: {
+        onClose() {
+            this.popoverShow = false;
+            this.$emit('closePopover');
+        },
+        onSave() {
+            this.$emit('savePopover');
+            this.onClose();
+        },
+    },
+};
+</script>
+</script>
+<style scoped>
+
+.popover {
+    max-width: 650px !important; 
+    min-width: 400px !important;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/search/popovers/SentBy.vue b/resources/assets/js/components/search/popovers/SentBy.vue
new file mode 100644
index 000000000..02c369699
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/SentBy.vue
@@ -0,0 +1,70 @@
+<template>
+    <div id="">
+       <SearchPopover
+            :target="tag"
+            @closePopover="onClose"
+            @savePopover="onOk"
+        >
+            <template v-slot:target-item>
+                <div
+                    @click="onClickTag(tag)"
+                    :id="tag"
+                >
+                    <b-icon
+                        icon="tags-fill"
+                        font-scale="1"
+                    ></b-icon>
+                    {{
+                        tagText
+                    }}
+                </div>
+            </template>
+            <template v-slot:body>
+                <h6>{{ info.title }}</h6>
+                <input v-model="title" type="text" size="150" class="form-control" :placeholder="info.placeHolder">
+            </template>
+        </SearchPopover>
+       
+    </div>
+</template>
+|
+<script>
+import SearchPopover from "./SearchPopover.vue";
+
+    export default {
+        components: {
+            SearchPopover,
+        },
+        props: ['tag','info'],
+        data() {
+            return {
+                title: ''
+            };
+        },
+        computed: {
+            tagText:  function ()  {
+                return `Set By: `;
+            } 
+        },
+        methods: {
+             onClose() {
+            },
+            onOk() {
+                this.$emit("updateSearchTag", {
+                    columnSearch: "APP_TITLE",
+                    search: this.title,
+                });
+            },
+            onRemoveTag() {
+
+            },
+            onClickTag(tag) {
+                this.$root.$emit("bv::hide::popover");
+            }
+          
+        },
+    };
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/utils/Fail.vue b/resources/assets/js/components/utils/Fail.vue
new file mode 100644
index 000000000..0963b8473
--- /dev/null
+++ b/resources/assets/js/components/utils/Fail.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Error</div>
+</template>
\ No newline at end of file
diff --git a/resources/assets/js/components/utils/Loading.vue b/resources/assets/js/components/utils/Loading.vue
new file mode 100644
index 000000000..477bc70eb
--- /dev/null
+++ b/resources/assets/js/components/utils/Loading.vue
@@ -0,0 +1,22 @@
+<template>
+  <div id='loading'></div>
+</template>
+
+<script>
+export default {
+    name: "Loading"
+  
+};
+</script>
+
+<style lang="scss">
+#loading {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  background: url(/images/gears.gif) 50% 50% no-repeat rgba(255, 255, 255, 1);
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/AdvancedSearch.vue b/resources/assets/js/home/AdvancedSearch.vue
new file mode 100644
index 000000000..f9195e6e1
--- /dev/null
+++ b/resources/assets/js/home/AdvancedSearch.vue
@@ -0,0 +1,408 @@
+<template>
+    <div id="v-mycases3" ref="v-mycases2" class="v-container-mycases">
+        <button-fleft :data="newCase"></button-fleft>
+        <GenericFilter/>
+        <modal-new-request ref="newRequest"></modal-new-request>
+
+        <v-server-table
+            :data="tableData"
+            :columns="columns"
+            :options="options"
+            ref="test"
+        >
+            <div slot="info" slot-scope="props">
+                <b-icon
+                    icon="exclamation-circle-fill"
+                    variant="primary"
+                    @click="caseDetail(props)"
+                ></b-icon>
+            </div>
+            <div slot="case_number" slot-scope="props">
+                 {{ props.row.CASE_NUMBER }}
+            </div>
+            <div slot="case_title" slot-scope="props">
+                {{ props.row.CASE_TITLE }}
+            </div>
+            <div slot="process_name" slot-scope="props">
+                {{ props.row.PROCESS_NAME }}
+            </div>
+            <!-- <div slot="pending_taks" slot-scope="props">
+                <GroupedCell :data="props.row.PENDING_TASKS" />
+            </div> -->
+            <div slot="status" slot-scope="props">{{ props.row.STATUS }}</div>
+            <div slot="start_date" slot-scope="props">
+                {{ props.row.START_DATE }}
+            </div>
+            <div slot="finish_date" slot-scope="props">
+                {{ props.row.FINISH_DATE }}
+            </div>
+            <div slot="duration" slot-scope="props">
+                {{ props.row.DURATION }}
+            </div>
+            <div slot="actions" slot-scope="props">
+                <div class="btn-default">
+                    <i class="fas fa-comments"></i>
+                    <span class="badge badge-light">9</span>
+                    <span class="sr-only">unread messages</span>
+                </div>
+            </div>
+        </v-server-table>
+    </div>
+</template>
+<script>
+
+import ButtonFleft from "../components/home/ButtonFleft.vue";
+import ModalNewRequest from "./ModalNewRequest.vue";
+import GenericFilter from "../components/search/GenericFilter"
+import api from "./../api/index";
+
+
+export default {
+    name: "AdvancedSearch",
+    components: {
+        GenericFilter,
+        ButtonFleft,
+        ModalNewRequest
+    },
+    props: {},
+    data() {
+        return {
+            metrics: [],
+            filter: "CASES_INBOX",
+            allView: [],
+            filterHeader: "STARTED_BY_ME",
+            headers: [],
+            newCase: {
+                title: "New Case",
+                class: "btn-success",
+                onClick: () => {
+                    this.$refs["newRequest"].show();
+                },
+            },
+            columns: [
+                "info",
+                "case_number",
+                "case_title",
+                "process_name",
+                "status",
+                "start_date",
+                "finish_date",
+                "duration",
+                "actions",
+            ],
+            tableData: [],
+            options: {
+                filterable: false,
+                headings: {
+                    info: "",
+                    case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
+                    case_title: this.$i18n.t("ID_CASE_TITLE"),
+                    process_name: this.$i18n.t("ID_PROCESS_NAME"),
+                    pending_taks: this.$i18n.t("PENDdING_TASKS"),
+                    status: this.$i18n.t("ID_CASESLIST_APP_STATUS"),
+                    start_date: this.$i18n.t("ID_START_DATE"),
+                    finish_date: this.$i18n.t("ID_FINISH_DATE"),
+                    duration: this.$i18n.t("ID_DURATION"),
+                    actions: "",
+                },
+                selectable: {
+                    mode: "single",
+                    only: function(row) {
+                        return true;
+                    },
+                    selectAllMode: "page",
+                    programmatic: false,
+                },
+                requestFunction(data) {
+                    return this.$parent.$parent.getCasesForVueTable();
+                },
+            },
+            translations: null,
+            pmDateFormat: "Y-m-d H:i:s",
+            apiParams: {
+                action: "todo",
+                list: "inbox",
+                filter: "",
+                search: "",
+                sort: "APP_NUMBER",
+                dir: "DESC",
+                category: "",
+                process: "",
+                filterStatus: "",
+                paged: true,
+                start: 0,
+                limit: 10,
+            },
+        };
+    },
+    mounted() {
+        //  this.$refs.vueTable24.refresh();
+        this.$refs.test.refresh();
+        this.getHeaders();
+    },
+    watch: {},
+    computed: {
+        ProcessMaker() {
+            return window.ProcessMaker;
+        },
+    },
+    updated() {},
+    beforeCreate() {},
+    methods: {
+        /**
+         * Get Cases Headers from BE
+         */
+        getHeaders() {
+            let that = this;
+            api.casesHeader.get().then((response) => {
+                that.headers = that.formatCasesHeaders(response.data);
+            });
+        },
+        /**
+         * Get cases data by header
+         */
+        getCasesForVueTable() {
+            let that = this,
+                dt;
+            return new Promise((resolutionFunc, rejectionFunc) => {
+                api.cases
+                    .search({
+                        type: that.filterHeader,
+                    })
+                    .then((response) => {
+                        dt = that.formatDataResponse(response.data);
+                        resolutionFunc({
+                            data: dt,
+                            count: response.total,
+                        });
+                    })
+                    .catch((e) => {
+                        rejectionFunc(e);
+                    });
+            });
+        },
+        /**
+         * Format Response API TODO to grid inbox and columns
+         */
+        formatDataResponse(response) {
+            let data = [];
+            _.forEach(response, (v) => {
+                data.push({
+                    CASE_NUMBER: v.APP_NUMBER,
+                    CASE_TITLE: v.APP_TITLE,
+                    PROCESS_NAME: v.PRO_TITLE,
+                    STATUS: v.APP_STATUS,
+                    START_DATE: v.DEL_DELEGATE_DATE_LABEL,
+                    FINISH_DATE: v.DEL_DELEGATE_DATE_LABEL,
+                    PENDING_TASKS: v.PENDING_TASKS,
+                    DURATION: v.DURATION_LABEL,
+                });
+            });
+            return data;
+        },
+        /**
+         * Get for user format name configured in Processmaker Environment Settings
+         *
+         * @param {string} name
+         * @param {string} lastName
+         * @param {string} userName
+         * @return {string} nameFormat
+         */
+        nameFormatCases(name, lastName, userName) {
+            let nameFormat = "";
+            if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
+                return nameFormat;
+            }
+            if (this.nameFormat === "@firstName @lastName") {
+                nameFormat = name + " " + lastName;
+            } else if (this.nameFormat === "@firstName @lastName (@userName)") {
+                nameFormat = name + " " + lastName + " (" + userName + ")";
+            } else if (this.nameFormat === "@userName") {
+                nameFormat = userName;
+            } else if (this.nameFormat === "@userName (@firstName @lastName)") {
+                nameFormat = userName + " (" + name + " " + lastName + ")";
+            } else if (this.nameFormat === "@lastName @firstName") {
+                nameFormat = lastName + " " + name;
+            } else if (this.nameFormat === "@lastName, @firstName") {
+                nameFormat = lastName + ", " + name;
+            } else if (
+                this.nameFormat === "@lastName, @firstName (@userName)"
+            ) {
+                nameFormat = lastName + ", " + name + " (" + userName + ")";
+            } else {
+                nameFormat = name + " " + lastName;
+            }
+            return nameFormat;
+        },
+        /**
+         * Convert string to date format
+         *
+         * @param {string} value
+         * @return {date} myDate
+         */
+        convertDate(value) {
+            myDate = new Date(1900, 0, 1, 0, 0, 0);
+            try {
+                if (!isNaN(Date.parse(value))) {
+                    var myArray = value.split(" ");
+                    var myArrayDate = myArray[0].split("-");
+                    if (myArray.length > 1) {
+                        var myArrayHour = myArray[1].split(":");
+                    } else {
+                        var myArrayHour = new Array("0", "0", "0");
+                    }
+                    var myDate = new Date(
+                        myArrayDate[0],
+                        myArrayDate[1] - 1,
+                        myArrayDate[2],
+                        myArrayHour[0],
+                        myArrayHour[1],
+                        myArrayHour[2]
+                    );
+                }
+            } catch (err) {
+                throw new Error(err);
+            }
+            return myDate;
+        },
+        /**
+         * Get a format for specific date
+         *
+         * @param {string} d
+         * @return {string} dateToConvert
+         */
+        dateFormatCases(d) {
+            let dateToConvert = d;
+            const stringToDate = this.convertDate(dateToConvert);
+            if (this.pmDateFormat === "Y-m-d H:i:s") {
+                dateToConvert = dateFormat(stringToDate, "yyyy-mm-dd HH:MM:ss");
+            } else if (this.pmDateFormat === "d/m/Y") {
+                dateToConvert = dateFormat(stringToDate, "dd/mm/yyyy");
+            } else if (this.pmDateFormat === "m/d/Y") {
+                dateToConvert = dateFormat(stringToDate, "mm/dd/yyyy");
+            } else if (this.pmDateFormat === "Y/d/m") {
+                dateToConvert = dateFormat(stringToDate, "yyyy/dd/mm");
+            } else if (this.pmDateFormat === "Y/m/d") {
+                dateToConvert = dateFormat(stringToDate, "yyyy/mm/dd");
+            } else if (this.pmDateFormat === "F j, Y, g:i a") {
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    "mmmm d, yyyy, h:MM tt"
+                );
+            } else if (this.pmDateFormat === "m.d.y") {
+                dateToConvert = dateFormat(stringToDate, "mm.dd.yy");
+            } else if (this.pmDateFormat === "j, n, Y") {
+                dateToConvert = dateFormat(stringToDate, "d,m,yyyy");
+            } else if (this.pmDateFormat === "D M j G:i:s T Y") {
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    "ddd mmm d HH:MM:ss Z yyyy"
+                );
+            } else if (this.pmDateFormat === "M d, Y") {
+                dateToConvert = dateFormat(stringToDate, "mmm dd, yyyy");
+            } else if (this.pmDateFormat === "m D, Y") {
+                dateToConvert = dateFormat(stringToDate, "mm ddd, yyyy");
+            } else if (this.pmDateFormat === "D d M, Y") {
+                dateToConvert = dateFormat(stringToDate, "ddd dd mmm, yyyy");
+            } else if (this.pmDateFormat === "D M, Y") {
+                dateToConvert = dateFormat(stringToDate, "ddd mmm, yyyy");
+            } else if (this.pmDateFormat === "d M, Y") {
+                dateToConvert = dateFormat(stringToDate, "dd mmm, yyyy");
+            } else if (this.pmDateFormat === "d m, Y") {
+                dateToConvert = dateFormat(stringToDate, "dd mm, yyyy");
+            } else if (this.pmDateFormat === "d.m.Y") {
+                dateToConvert = dateFormat(stringToDate, "mm.dd.yyyy");
+            } else {
+                dateToConvert = dateFormat(
+                    stringToDate,
+                    'dd "de" mmmm "de" yyyy'
+                );
+            }
+            return dateToConvert;
+        },
+        /**
+         * Open selected cases in the inbox
+         *
+         * @param {object} item
+         */
+        openCase(item) {
+            const action = "todo";
+            if (this.isIE) {
+                window.open(
+                    "../../../cases/open?APP_UID=" +
+                        item.row.APP_UID +
+                        "&DEL_INDEX=" +
+                        item.row.DEL_INDEX +
+                        "&action=" +
+                        action
+                );
+            } else {
+                window.location.href =
+                    "../../../cases/open?APP_UID=" +
+                    item.row.APP_UID +
+                    "&DEL_INDEX=" +
+                    item.row.DEL_INDEX +
+                    "&action=" +
+                    action;
+            }
+        },
+        /**
+         * Format Response from HEADERS
+         * @param {*} response
+         */
+        formatCasesHeaders(response) {
+            let data = [],
+                that = this,
+                info = {
+                    STARTED_BY_ME: {
+                        icon: "fas fa-inbox",
+                        class: "btn-primary",
+                    },
+                    COMPLETED: {
+                        icon: "fas fa-check-square",
+                        class: "btn-success",
+                    },
+                    IN_PROGRESS: {
+                        icon: "fas fa-tasks",
+                        class: "btn-danger",
+                    },
+                    SUPERVISING: {
+                        icon: "fas fa-binoculars",
+                        class: "btn-warning",
+                    },
+                };
+            _.forEach(response, (v) => {
+                data.push({
+                    title: v.name,
+                    counter: v.count,
+                    item: v.item,
+                    icon: info[v.item].icon,
+                    onClick: (obj) => {
+                        that.filterHeader = obj.item;
+                        that.$refs["vueTable"].getData();
+                    },
+                    class: info[v.item].class,
+                });
+            });
+            return data;
+        },
+        /**
+         * Open case detail
+         * @param {*} item
+         */
+        caseDetail(item) {
+            console.log("CaseDetail");
+            console.log("item");
+        }
+    },
+   
+};
+</script>
+<style>
+.v-container-mycases {
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-left: 50px;
+    padding-right: 50px;
+}
+</style>
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 62691ef5e..75680f173 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -26,12 +26,14 @@ import MyDocuments from "./MyDocuments";
 import BatchRouting from "./BatchRouting";
 import XCase from "./XCase";
 import TaskReassignments from "./TaskReassignments";
+import AdvancedSearch from "./AdvancedSearch"
 
 export default {
   name: "Home",
   components: {
     CustomSidebar,
     MyCases,
+    AdvancedSearch,
     MyDocuments,
     BatchRouting,
     TaskReassignments,
@@ -78,10 +80,10 @@ export default {
     /**
      * Toggle sidebar handler
      * @param {Boolean} collapsed - if sidebar is collapsed true|false
-     *
+     *  
      */
     onToggleCollapse(collapsed) {
-      this.collapsed = collapsed;
+        this.collapsed = collapsed;
     },
   },
 };
diff --git a/resources/assets/js/mocks/menu.json b/resources/assets/js/mocks/menu.json
index ee562a553..09d7651b5 100644
--- a/resources/assets/js/mocks/menu.json
+++ b/resources/assets/js/mocks/menu.json
@@ -11,6 +11,7 @@
   },
   {
     "href": "/advanced-search",
+    "id": "advanced-search",
     "title": "Advanced Search",
     "icon": "fas fa-search"
   },