diff --git a/client/src/js/app/components/combo-box.vue b/client/src/js/app/components/combo-box.vue
index 01004048b..588824452 100644
--- a/client/src/js/app/components/combo-box.vue
+++ b/client/src/js/app/components/combo-box.vue
@@ -434,9 +434,6 @@ export default {
   @apply tw-bg-white tw-h-8 tw-rounded tw-border tw-border-content-dark-background tw-flex tw-items-center tw-cursor-pointer
 }
 
-.select-selected-multiple {
-  @apply tw-bg-white tw-h-8 tw-rounded tw-border tw-border-content-dark-background tw-flex tw-items-center tw-cursor-pointer
-}
 .select-selected.disabled {
   @apply tw-bg-content-page-background
 }
@@ -522,6 +519,8 @@ export default {
 .item-multiple-selected {
   @apply tw-bg-content-active tw-text-white;
 }
+
+
 .select-search-input.small {
   @apply tw-h-8;
 }
@@ -531,7 +530,7 @@ export default {
 
 .pill-input {
   white-space: nowrap;
-  @apply tw-rounded-full tw-h-6 tw-max-w-xs tw-ml-1 tw-px-2 tw-py-1 tw-bg-content-active tw-text-sm
+  @apply tw-rounded-md tw-h-6 tw-max-w-xs tw-ml-1 tw-px-2 tw-py-1 tw-bg-gray-300 tw-text-sm
 }
 
 ::-webkit-scrollbar {
diff --git a/client/src/js/app/components/multi-input-dialogue.vue b/client/src/js/app/components/multi-input-dialogue.vue
new file mode 100644
index 000000000..d2f39be40
--- /dev/null
+++ b/client/src/js/app/components/multi-input-dialogue.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="tw-relative tw-w-auto tw-text-xs">
+        <div ref="myElement" class="tw-bg-white tw-rounded-md tw-p-2 tw-flex gap-1 tw-flex-wrap" 
+        @click="$refs.search_input.focus()">
+            <div v-for="(name, id) in selected" :key="id">
+                <div v-if="name" class="tw-bg-gray-300 tw-h-8 tw-m-1 tw-rounded-md tw-flex tw-items-center">
+                    <div class="tw-p-2"> {{ name }}</div>
+                </div>
+            </div>
+            <div class="tw-flex-1">
+                <div type="text" ref="search_input"
+                @click="openDialog" placeholder="Search"
+                    class="tw-w-full tw-h-8 tw-border-0 focus:tw-border-0 focus:tw-outline-none focus:tw-ring-0 tw-py-1 tw-px-0">
+            </div>
+                    <dialog-modal
+                        class="tw-w-full"
+                        v-if="showDialog"
+                        :show-dialog="showDialog"
+                        :title="title"
+                        @cancel="showDialog = false"
+                        >
+                        <slot></slot>
+                    </dialog-modal>
+            </div>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+import DialogModal from 'app/components/dialog-modal.vue'
+
+export default {
+    name: 'multi-input-dia',
+    props: {
+        multInputSelected: Object,
+        index: Number
+    },
+    components: {
+        'dialog-modal': DialogModal,
+    },
+    data() {
+        return {
+        selected: this.multInputSelected,
+        showDialog: false,
+        }
+    },
+    mounted() {
+        document.addEventListener('click', this.handleClickOutside);
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.handleClickOutside);
+    },
+    methods: {
+        openDialog() {
+            this.showDialog = true;
+        }
+    },
+    watch: {
+        multInputSelected: {
+            handler(newValue) {
+                this.selected = newValue;
+            },
+            deep: true
+        }
+    }
+    
+}
+</script>
+
+<style scoped>
+    .pill-input {
+        white-space: nowrap;
+        @apply tw-rounded-full tw-h-6 tw-max-w-xs tw-ml-1 tw-px-2 tw-py-1 tw-bg-content-active tw-text-sm
+    }
+
+</style>
+
+    
diff --git a/client/src/js/modules/summary/styles/_summary.scss b/client/src/js/modules/summary/styles/_summary.scss
index 884d4fca0..8f94fafdb 100644
--- a/client/src/js/modules/summary/styles/_summary.scss
+++ b/client/src/js/modules/summary/styles/_summary.scss
@@ -55,17 +55,15 @@
     @apply tw-text-content-active tw-text-content-active
 }
 
-.filter-grid {
-    @apply tw-grid tw-grid-rows-1 tw-grid-cols-4 tw-grid-flow-col 
-}
-
 .filter-options-grid {
-    @apply tw-grid tw-grid-rows-6 tw-grid-cols-3 tw-grid-flow-col tw-mb-2
+    @apply tw-flex tw-flex-wrap 
 }
 
-.format-options-grid {
-    @apply tw-grid tw-grid-rows-6 tw-grid-cols-1 tw-grid-flow-col tw-mb-2
-
+.flex-thirds {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: row; /* this will make items flow vertically within columns */
+    gap: 1rem; /* for spacing between rows/columns, you can adjust this */
 }
 
 .select-column-button {
diff --git a/client/src/js/modules/summary/views/summary.vue b/client/src/js/modules/summary/views/summary.vue
index e57f83fed..74866392c 100644
--- a/client/src/js/modules/summary/views/summary.vue
+++ b/client/src/js/modules/summary/views/summary.vue
@@ -9,15 +9,6 @@
             
         </div>
 
-        <!-- <div style="position:relative;border:1px solid blue;">
-            <div style="height: 100px; width: 100px; background: red; overflow: auto;">
-                if there is some really long content here, it will cause overflow, but the green box will not
-                <div style="position:absolute; z-index:1; left: 20px; top:0; height: 200px; width: 200px; background: green;">
-                </div>
-            </div>
-        </div> -->
-
-
         <div>
             <i class="tooltip fa fa-info-circle" aria-hidden="true">
                 <span class="tooltiptext">Use the Advanced Filter Search bar to filter your values</span>
@@ -72,120 +63,76 @@
                 </template>
 
                 <template v-slot:filter-bar-content>
-                    <div class="filter-grid tw-divide-x tw-divide-white">
-                        <div class="filter-options-grid tw-col-span-3 ">
-
-                                <div class="tw-flex" v-for="(value, index) in filters.slice(2)" :key="value.id">
-                                    <combo-box
-                                    v-if="value.title!='Proposal'"
-                                    class="combo-box tw-w-7/12 t-mr-1 tw-text-black"
-                                    :data="summaryParameters"
-                                    textField="title"
-                                    valueField="valueField"
-                                    size="small"
-                                    :can-create-new-item="false"
-                                    v-model="value.selected"
-                                    :defaultText="value.title"
-                                    ></combo-box>
-
-                                    <div class="param-options-wrapper">
-                                        <div class="param-options-tooltip">
-                                            Add Values
-                                            <div class="param-preview">
+                    <div class="flex-thirds">
+                        <div class="tw-m-2" v-for="(value, index) in filters.slice(2)" :key="value.id">
+                            <div class="tw-flex">
+                                        <multi-input-dia 
+                                            class="tw-w-full"
+                                            :mult-input-selected="multiInputDicts[index+2]"
+                                            @selected-changed-multiinput="handleSelectedChange"
+                                        > 
+                                        <template v-slot:default>
+                                            <div>
+                                                <combo-box
+                                                    v-if="value.title!='Proposal'"
+                                                        class="combo-box t-mr-1 tw-text-black"
+                                                        :data="summaryParameters"
+                                                        textField="title"
+                                                        valueField="valueField"
+                                                        size="small"
+                                                        :can-create-new-item="false"
+                                                        v-model="value.selected"
+                                                        :defaultText="value.title"
+                                                ></combo-box>
+
                                                 <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
-                                            class="combo-box-description tw-px-4 tw-my-5"
-                                            :data="value.data"
-                                            :textField="value.textField"
-                                            :valueField="value.valueField"
-                                            size="small"
-                                            :can-create-new-item="false"
-                                            v-model="value.selected"
-                                            defaultText='Select Multiple'
-                                            :multiple="true"
-                                            :valueArray="value.selectedArr"
-                                            :searchArray="value.selectedArr"
-                                            ></combo-box>
-
-                                            <combo-box v-if="value.inputtype == 'search-operands'"
-                                            class="combo-box-description tw-px-4 tw-my-5"
-                                            :data="operands"
-                                            textField="title"
-                                            valueField="value"
-                                            size="small"
-                                            :can-create-new-item="false"
-                                            v-model="value.operand"
-                                            defaultText='Select Operand'
-                                            ></combo-box>
-
-                                            <input  v-if="value.inputtype == 'search-operands'"
-                                            v-model="value.value"
-                                            class="input-description tw-mb-4 tw-mx-4"
-                                            placeholder="Enter Value"
-                                            >
-                                                
+                                                    class="combo-box-description tw-my-5"
+                                                    :data="value.data"
+                                                    :textField="value.textField"
+                                                    :valueField="value.valueField"
+                                                    size="small"
+                                                    :can-create-new-item="false"
+                                                    v-model="value.selected"
+                                                    defaultText='Select Multiple'
+                                                    :multiple="true"
+                                                    :valueArray="value.selectedArr"
+                                                    :searchArray="value.selectedArr"
+                                                ></combo-box>
+
+                                                <combo-box v-if="value.inputtype == 'search-operands'"
+                                                    class="combo-box-description tw-my-5"
+                                                    :data="operands"
+                                                    textField="title"
+                                                    valueField="value"
+                                                    size="small"
+                                                    :can-create-new-item="false"
+                                                    v-model="value.operand"
+                                                    defaultText='Select Operand'
+                                                    ></combo-box>
+
+                                                <input v-if="value.inputtype == 'search-operands'"
+                                                    v-model="value.value"
+                                                    class="input-description tw-mb-4"
+                                                    placeholder="Enter Value"
+                                                    @click.stop>
                                             </div>
-                                        </div>
-                                        <button v-if="value.textField != 'PROP'" v-on:click="popArr(filters, index+1)" 
-                                            class="fa fa-times-circle tw-text-red-600 tw-ml-2 tw-mb-3"></button>
-
-                                    </div>
-
-
-                                    <!-- <i class="tooltip tooltip-position-relative fa fa-ellipsis-v tw-ml-1 tw-text-base tw-my-2" aria-hidden="true">
-                                        <div class="description-options">
-  
-                                        </div>
-                                    </i> -->
-
-
-
-      
-                                    
+                                        </template>
+                                    </multi-input-dia>
+                                    <button v-if="value.textField != 'PROP'" v-on:click="popArr(filters, index+1)" 
+                                        class="fa fa-times-circle tw-text-red-600 tw-ml-2">
+                                    </button>
                                 </div>
-                                <div class="button_plus tw-h-3 tw-mt-2" v-if="filters.length < 18" v-on:click="addFilterOption($event)">
-                                <i class="button-plus-icon fa fa-plus"></i>
-                                </div>
-
-                                <i class="tooltip tooltip-position-absolute fa fa-info-circle tw-ml-6" v-if="filters.length < 3" aria-hidden="true">
-                                    <span class="tooltiptext">Click to add filter options</span>
-                                </i>
-
                         </div>
+                    </div>
+                    <div class="button_plus tw-h-3 tw-mt-2 tw-mb-3" v-if="filters.length < 18" v-on:click="addFilterOption($event)">
+                        <i class="button-plus-icon fa fa-plus"></i>
+                        <i class="tooltip tooltip-position-absolute fa fa-info-circle tw-ml-6" v-if="filters.length < 3" aria-hidden="true">
+                            <span class="tooltiptext">Click to add filter options</span>
+                         </i>
+                    </div>
 
-                        <!-- <div class="format-options-grid">
-
-
-                            <div class="tw-flex" v-for="value in format.slice(2)" :key="value.id">
-                                    <combo-box
-                                    v-if="value.title!='Proposal'"
-                                    class="combo-box tw-w-7/12 t-mx-2 tw-text-black"
-                                    :data="summaryParameters.slice(3)"
-                                    textField="title"
-                                    valueField="valueField"
-                                    size="small"
-                                    :can-create-new-item="false"
-                                    v-model="value.selected"
-                                    :defaultText="value.title"
-                                    ></combo-box>
-
-                                    <i class="tooltip fa fa-ellipsis-v tw-ml-1 tw-text-base tw-my-2" aria-hidden="true">
-                                        <div class="description-options">
-                                            <input type="range" min="0" max="100" step="1" v-model="value.maxColor">
-                                            <input v-model="value.maxColor" type="number" class="input" /> 
-                                        </div>
-                                    </i>
-
-                                    <button v-if="value.textField != 'PROP'" v-on:click="popFormat(index+1)" 
-                                            class="fa fa-times-circle tw-text-red-600 tw-ml-2"></button>
-                            </div>
-
-                            <div class="button_plus tw-h-3 tw-mt-2" v-if="format.length < 6" v-on:click="addFormatOption($event)">
-                            <i class="button-plus-icon fa fa-plus"></i>
-                            </div>
-                            
-                        </div> -->
+                <!-- </div> -->
 
-                    </div>
                     
 
                 </template>
@@ -435,8 +382,7 @@
         @page-changed="handlePageChange"
         />
 
-  
-    
+
 
 
     </div>
@@ -460,6 +406,7 @@ import CustomTableRow from 'app/components/custom-table-row.vue'
 import ComboBox from 'app/components/combo-box.vue'
 import DialogModal from 'app/components/dialog-modal.vue'
 import ExpandableSidebar from 'app/components/expandable-sidebar.vue'
+import MultiInputDialogue from 'app/components/multi-input-dialogue.vue'
 
 import { popArr, convertToCSV, exportCSV } from 'modules/summary/utils/utils.js'
 
@@ -475,7 +422,8 @@ export default {
     'expandable-sidebar': ExpandableSidebar,
     'dialog-modal': DialogModal,
     'base-input-select': BaseInputSelect,
-    'base-input-text' : BaseInputText
+    'base-input-text' : BaseInputText,
+    'multi-input-dia' : MultiInputDialogue
     },
     props: {
 
@@ -502,6 +450,7 @@ export default {
             beamLines: [],
             searchedSamplePrefix: [],
             selectedColumns: [],
+            multiInputDicts: [],
             operands: [
                 {   
                     "title": "greater than",
@@ -717,6 +666,7 @@ export default {
         this.addFormatOption()
         this.toggleSidebar()
         this.popSelectedColumns()
+        this.updateMultiInputDicts();
     },
     mounted() {
         window.onerror = (msg) => {
@@ -739,7 +689,8 @@ export default {
                 "operand": "",
                 "value": "",
                 "checked": true,
-                "data": [] };
+                "data": [],           
+             };
         })
         },
         addFilterOption(event) {
@@ -789,6 +740,41 @@ export default {
             } 
 
         },
+        createMultiInputDict(filterItem) {
+            let resultDict = {
+                selected: filterItem.selected,
+                operand: filterItem.operand,
+                value: filterItem.value
+            };
+
+            // Spread values from selectedArr into the result dictionary
+            filterItem.selectedArr.forEach((item, index) => {
+                resultDict[`selectedArr${index + 1}`] = item;
+            });
+
+            return resultDict;
+        },
+        updateMultiInputDicts() {
+            this.multiInputDicts = this.filters.map(filterItem => {
+                let resultDict = {
+                    selected: filterItem.title,
+                    operand: filterItem.operand,
+                    value: filterItem.value
+                };
+
+                // Spread values from selectedArr into the result dictionary
+                filterItem.selectedArr.forEach((item, index) => {
+                    // Check if the item is an object and has a property matching filterItem.valueField
+                    if (typeof item === 'object' && item[filterItem.valueField]) {
+                        resultDict[`selectedArr${index + 1}`] = item[filterItem.valueField];
+                    } else {
+                        resultDict[`selectedArr${index + 1}`] = item;
+                    }
+                });
+
+                return resultDict;
+            });
+        },
         async searchProposal() {
 
             // gets proposal list from proposal endpoint for combo box from proposal collection 
@@ -1286,14 +1272,7 @@ export default {
                 this.$refs.iframeref[index].setAttribute('src', src)
 
             }
-
-        }
-
-
-
-    },
-    computed: {
-
+        },
     },
     watch: {
         windowWidth: {
@@ -1320,6 +1299,8 @@ export default {
                         }
                     }
                 }
+
+                this.updateMultiInputDicts();
             },
             deep: true
         },
@@ -1359,8 +1340,8 @@ export default {
 
     .combo-box {
         font-size: small;
-        position: absolute;
-        width: 15%
+        position: relative;
+        width: 200px;
     }
 
     .combo-box-description {
@@ -1369,7 +1350,7 @@ export default {
     }
 
     .input-description {
-        width: 170px;
+        width: 200px;
         font-size: small;
     }