diff --git a/frontend/src/App.css b/frontend/src/App.css
index 1b8de9a..8069d92 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -499,20 +499,26 @@ html {
 }
 
 .exampleQuery:hover .text-example {
+  margin-right: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: solid #c8c8c8;
   background-color: #c8c8c8;
   color: black;
+  width: -moz-fit-content;
   width: fit-content;
   border-radius: 6px;
-  margin-left: 10px;
-  padding: 1px;
+  margin-left: -98px;
+
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-left: 2px;
+  padding-right: 2px;
 }
 
 .examplesQueriesList {
-  width: 111px;
+  width: fit-content;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -692,7 +698,6 @@ hr {
     sans-serif;
   text-transform: uppercase;
   font-size: 12px;
-  margin-left: 33px;
 }
 
 .exampleQueries:hover {
@@ -700,9 +705,13 @@ hr {
 }
 
 .bulbExample {
+  margin-right: 48px;
+  padding-right: 19px;
+  border-right: 1.7px solid #f1f1f1;
   display: flex;
+  justify-content: center;
   align-items: center;
-  border-left: 1.7px solid #f1f1f1;
+  flex-direction: row-reverse;
 }
 
 .helpButton {
@@ -780,10 +789,10 @@ hr {
 .example {
   display: flex;
   align-items: center;
-  margin-right: -117px;
+  /* margin-right: -117px; */
   margin-top: 22px;
   margin-bottom: 22px;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-content: space-between;
   justify-content: center;
 }
@@ -803,7 +812,7 @@ hr {
   padding: 5px;
   cursor: pointer;
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-content: center;
   justify-content: center;
   align-items: center;
@@ -1063,8 +1072,8 @@ h5 {
     sans-serif;
   text-transform: uppercase;
   font-size: 12px;
-  margin-right: 36px;
-  margin-left: 27px;
+  margin-right: 32px;
+  margin-left: -20px;
 }
 
 .filters:hover {
@@ -1177,7 +1186,7 @@ h5 {
     padding: 5px;
     cursor: pointer;
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: row;
     align-content: center;
     justify-content: center;
     align-items: center;
@@ -1264,10 +1273,8 @@ h5 {
       'Helvetica Neue', sans-serif;
     text-transform: uppercase;
     font-size: 10px;
-    margin-left: 2px !important;
-    margin-right: 7px !important;
-    /* margin-right: 36px; */
-    /* margin-left: 27px; */
+    margin-right: 3px;
+    margin-left: -23px;
   }
 
   .container-fluid {
@@ -1285,7 +1292,7 @@ h5 {
     margin-right: 0px;
     margin-top: 22px;
     margin-bottom: 22px;
-    flex-direction: row-reverse;
+    flex-direction: row;
     align-content: space-between;
     justify-content: center;
   }
@@ -1327,13 +1334,14 @@ h5 {
     height: 27px;
   }
   .bulbExample {
+    margin-right: 48px;
+    padding-right: 19px;
+    border-right: 1.7px solid #f1f1f1;
     display: flex;
-    border-left: 1.7px solid #f1f1f1;
-    flex-direction: column;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-    width: 112px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
+    text-transform: uppercase;
   }
   .searchIcon {
     width: 26px;
@@ -1364,7 +1372,7 @@ h5 {
     justify-content: center;
     align-content: center;
     align-items: flex-start;
-    width: 189px;
+    width: fit-content;
     border-radius: 5px;
     font-size: 9px;
     margin-left: 10px !important;
@@ -1372,12 +1380,14 @@ h5 {
   }
 
   .bulbExample {
+    margin-right: 49px;
     display: flex;
-    border-left: 1.7px solid #f1f1f1;
-    flex-direction: column;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
+    padding-right: 13px;
+    border-right: 1.7px solid #f1f1f1;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
+    text-transform: uppercase;
   }
 
   .NavlinkVerifier {
diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.css b/frontend/src/components/FilteringTerms/FilteringTerms.css
index cf5bf50..025b070 100644
--- a/frontend/src/components/FilteringTerms/FilteringTerms.css
+++ b/frontend/src/components/FilteringTerms/FilteringTerms.css
@@ -35,7 +35,7 @@ thead {
 }
 
 .tableWrapper {
-  height: 70vh;
+  height: 100vh;
   width: 90vw;
   overflow: scroll;
 }
diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
index 60828b3..767e724 100644
--- a/frontend/src/components/Layout/Layout.js
+++ b/frontend/src/components/Layout/Layout.js
@@ -181,125 +181,26 @@ function Layout (props) {
     setIsOpenModal6(true)
   }
 
-  const handleFilteringTerms = async e => {
-    setTimeOut(false)
-    if (props.collection === 'Individuals') {
-      try {
-        let res = await axios.get(
-          configData.API_URL + '/individuals/filtering_terms'
-        )
-        setTimeOut(true)
-
-        if (res.data.response.filteringTerms !== undefined) {
-          setFilteringTerms(res)
-          setResults(null)
-        } else {
-          setError('No filtering terms now available')
-        }
-      } catch (error) {
-        setError('No filtering terms now available for Individuals collection')
-        setTimeOut(true)
-      }
-    } else if (props.collection === 'Cohorts') {
-      try {
-        let res = await axios.get(
-          configData.API_URL + '/cohorts/filtering_terms'
-        )
-        setTimeOut(true)
-        if (res.data.response.filteringTerms !== undefined) {
-          setFilteringTerms(res)
-          setResults(null)
-        } else {
-          setError('No filtering terms now available')
-        }
-      } catch (error) {
-        setError('No filtering terms now available for Cohorts collection')
-        setTimeOut(true)
-      }
-    } else if (props.collection === 'Variant') {
-      try {
-        let res = await axios.get(
-          configData.API_URL + '/g_variants/filtering_terms'
-        )
-        setTimeOut(true)
-        if (res.data.response.filteringTerms !== undefined) {
-          setFilteringTerms(res)
-          setResults(null)
-        } else {
-          setError('No filtering terms now available')
-        }
-      } catch (error) {
-        setError('No filtering terms now available for Variant collection')
-        setTimeOut(true)
-      }
-    } else if (props.collection === 'Analyses') {
-      try {
-        let res = await axios.get(
-          configData.API_URL + '/analyses/filtering_terms'
-        )
-        setTimeOut(true)
-        if (res.data.response.filteringTerms !== undefined) {
-          setFilteringTerms(res)
-          setResults(null)
-        } else {
-          setError('No filtering terms now available')
-        }
-      } catch (error) {
-        setError('No filtering terms now available for Analyses collection')
-        setTimeOut(true)
-      }
-    } else if (props.collection === 'Runs') {
-      try {
-        let res = await axios.get(configData.API_URL + '/runs/filtering_terms')
-        setTimeOut(true)
-        if (res.data.response.filteringTerms !== undefined) {
-          setFilteringTerms(res)
-          setResults(null)
-        } else {
-          setError('No filtering terms now available')
-        }
-      } catch (error) {
-        setError('No filtering terms now available for Runs collection')
-        setTimeOut(true)
-      }
-    } else if (props.collection === 'Biosamples') {
-      try {
-        let res = await axios.get(
-          configData.API_URL + '/biosamples/filtering_terms'
-        )
-        setTimeOut(true)
-        if (res.data.response.filteringTerms !== undefined) {
-          setFilteringTerms(res)
-          setResults(null)
-        } else {
-          setTimeOut(true)
-          setError('No filtering terms now available')
-        }
-      } catch (error) {
-        setError('No filtering terms now available for Biosamples collection')
-        setTimeOut(true)
-      }
-    }
-
+  const handleSeeFilteringTerms = () => {
     setShowFilteringTerms(true)
   }
 
   const handleExQueries = () => {
     if (props.collection === 'Individuals') {
       setExampleQ([
+        ['female', 'NCIT:C16576'],
+        ['African', 'NCIT:C42331'],
+        ['Cardiovascular Neoplasm', 'NCIT:C4784'],
         ['Weight>100'],
-        ['NCIT:C16576', 'female'],
         ['geographicOrigin=%land%'],
-        ['geographicOrigin!England'],
-        ['NCIT:C42331', 'African'],
-        ['NCIT:C4784', 'Cardiovascular Neoplasm']
+        ['geographicOrigin!England']
       ])
     } else if (props.collection === 'Variant') {
       setExampleQ([['GENO:GENO_0000458']])
     } else if (props.collection === 'Biosamples') {
       setExampleQ([
-        ['UBERON:0000178', 'blood'],
-        ['EFO:0009654', 'reference sample'],
+        ['blood', 'UBERON:0000178'],
+        ['reference sample', 'EFO:0009654'],
         ['sampleOriginType:blood']
       ])
     } else if (props.collection === 'Runs') {
@@ -451,22 +352,125 @@ function Layout (props) {
     const fetchData = async () => {
       //for query expansion
       try {
-        let res = await axios.get(
-          configData.API_URL + '/individuals/filtering_terms'
-        )
-        if (res !== null) {
-          res.data.response.filteringTerms.forEach(element => {
-            if (element.type !== 'custom') {
-              arrayFilteringTerms.push(element.id)
-              arrayFilteringTermsQE.push(element)
+        setTimeOut(false)
+        if (props.collection === 'Individuals') {
+          try {
+            let res = await axios.get(
+              configData.API_URL + '/individuals/filtering_terms'
+            )
+            setTimeOut(true)
+
+            if (res.data.response.filteringTerms !== undefined) {
+              setFilteringTerms(res)
+              setResults(null)
+            } else {
+              setError('No filtering terms now available')
             }
-          })
-
-          setstate({
-            query: '',
-            list: arrayFilteringTerms
-          })
+            if (res !== null) {
+              res.data.response.filteringTerms.forEach(element => {
+                if (element.type !== 'custom') {
+                  arrayFilteringTerms.push(element.id)
+                  arrayFilteringTermsQE.push(element)
+                }
+              })
+    
+              setstate({
+                query: '',
+                list: arrayFilteringTerms
+              })
+            }
+          } catch (error) {
+            setError(
+              'No filtering terms now available for Individuals collection'
+            )
+            setTimeOut(true)
+          }
+        } else if (props.collection === 'Cohorts') {
+          try {
+            let res = await axios.get(
+              configData.API_URL + '/cohorts/filtering_terms'
+            )
+            setTimeOut(true)
+            if (res.data.response.filteringTerms !== undefined) {
+              setFilteringTerms(res)
+              setResults(null)
+            } else {
+              setError('No filtering terms now available')
+            }
+          } catch (error) {
+            setError('No filtering terms now available for Cohorts collection')
+            setTimeOut(true)
+          }
+        } else if (props.collection === 'Variant') {
+          try {
+            let res = await axios.get(
+              configData.API_URL + '/g_variants/filtering_terms'
+            )
+            setTimeOut(true)
+            if (res.data.response.filteringTerms !== undefined) {
+              setFilteringTerms(res)
+              setResults(null)
+            } else {
+              setError('No filtering terms now available')
+            }
+          } catch (error) {
+            setError('No filtering terms now available for Variant collection')
+            setTimeOut(true)
+          }
+        } else if (props.collection === 'Analyses') {
+          try {
+            let res = await axios.get(
+              configData.API_URL + '/analyses/filtering_terms'
+            )
+            setTimeOut(true)
+            if (res.data.response.filteringTerms !== undefined) {
+              setFilteringTerms(res)
+              setResults(null)
+            } else {
+              setError('No filtering terms now available')
+            }
+          } catch (error) {
+            setError('No filtering terms now available for Analyses collection')
+            setTimeOut(true)
+          }
+        } else if (props.collection === 'Runs') {
+          try {
+            let res = await axios.get(
+              configData.API_URL + '/runs/filtering_terms'
+            )
+            setTimeOut(true)
+            if (res.data.response.filteringTerms !== undefined) {
+              setFilteringTerms(res)
+              setResults(null)
+            } else {
+              setError('No filtering terms now available')
+            }
+          } catch (error) {
+            setError('No filtering terms now available for Runs collection')
+            setTimeOut(true)
+          }
+        } else if (props.collection === 'Biosamples') {
+          try {
+            let res = await axios.get(
+              configData.API_URL + '/biosamples/filtering_terms'
+            )
+            setTimeOut(true)
+            if (res.data.response.filteringTerms !== undefined) {
+              setFilteringTerms(res)
+              setResults(null)
+            } else {
+              setTimeOut(true)
+              setError('No filtering terms now available')
+            }
+          } catch (error) {
+            setError(
+              'No filtering terms now available for Biosamples collection'
+            )
+            setTimeOut(true)
+          }
         }
+
+   
       } catch (error) {
         console.log(error)
       }
@@ -479,6 +483,8 @@ function Layout (props) {
   }, [])
 
   const onSubmit = async event => {
+    console.log(query)
+    console.log(value)
     event.preventDefault()
 
     setIsSub(true)
@@ -683,8 +689,8 @@ function Layout (props) {
                                 className='exampleQuery'
                                 onClick={() => {
                                   setPlaceholder(`${result[0]}`)
-                                  setQuery(`${result[0]}`)
-                                  setValue(`${result[0]}`)
+                                  setQuery(`${[result[0]]}`)
+                                  setValue(`${result[1]}`)
                                   setExampleQ([])
                                 }}
                               >
@@ -703,9 +709,7 @@ function Layout (props) {
                   </div>
                 )}
               {props.collection !== '' && showBar === true && (
-                <button className='filters' onClick={handleFilteringTerms}>
-                  Filtering Terms
-                </button>
+                <button className='filters' onClick={handleSeeFilteringTerms}>Filtering Terms </button>
               )}
             </div>
           </div>
@@ -732,7 +736,7 @@ function Layout (props) {
                             onClick={() => {
                               setPlaceholder(`${result[0]}`)
                               setQuery(`${result[0]}`)
-                              setValue(`${result[0]}`)
+                              setValue(`${result[1]}`)
                               setExampleQ([])
                             }}
                           >
@@ -748,9 +752,7 @@ function Layout (props) {
                 </div>
               </div>
 
-              <button className='filters' onClick={handleFilteringTerms}>
-                Filtering Terms
-              </button>
+              <button className='filters' onClick={handleSeeFilteringTerms}>Filtering Terms</button>
             </div>
           </div>
         )}
@@ -1583,6 +1585,7 @@ function Layout (props) {
         {isSubmitted && results === 'Individuals' && triggerQuery && (
           <div>
             <IndividualsResults
+              filteringTerms={filteringTerms}
               query={query}
               resultSets={resultSetAux}
               ID={ID}
@@ -1597,6 +1600,7 @@ function Layout (props) {
         {isSubmitted && results === 'Individuals' && !triggerQuery && (
           <div>
             <IndividualsResults
+              filteringTerms={filteringTerms}
               query={query}
               resultSets={resultSetAux}
               ID={ID}
@@ -1611,6 +1615,7 @@ function Layout (props) {
         {isSubmitted && results === 'Analyses' && triggerQuery && (
           <div>
             <AnalysesResults
+              filteringTerms={filteringTerms}
               query={query}
               resultSets={resultSetAux}
               ID={ID}
@@ -1625,6 +1630,7 @@ function Layout (props) {
         {isSubmitted && results === 'Analyses' && !triggerQuery && (
           <div>
             <AnalysesResults
+              filteringTerms={filteringTerms}
               query={query}
               resultSets={resultSetAux}
               ID={ID}
@@ -1639,6 +1645,7 @@ function Layout (props) {
         {isSubmitted && results === 'Runs' && triggerQuery && (
           <div>
             <RunsResults
+              filteringTerms={filteringTerms}
               query={query}
               resultSets={resultSetAux}
               ID={ID}
@@ -1653,6 +1660,7 @@ function Layout (props) {
         {isSubmitted && results === 'Runs' && !triggerQuery && (
           <div>
             <RunsResults
+              filteringTerms={filteringTerms}
               query={query}
               resultSets={resultSetAux}
               ID={ID}
@@ -1667,6 +1675,7 @@ function Layout (props) {
         {isSubmitted && results === 'Variant' && triggerQuery && (
           <div>
             <VariantsResults
+              filteringTerms={filteringTerms}
               geneSubmitted={geneSubmitted}
               sequenceSubmitted={sequenceSubmitted}
               rangeSubmitted={rangeSubmitted}
@@ -1704,6 +1713,7 @@ function Layout (props) {
         {isSubmitted && results === 'Variant' && !triggerQuery && (
           <div>
             <VariantsResults
+              filteringTerms={filteringTerms}
               geneSubmitted={geneSubmitted}
               sequenceSubmitted={sequenceSubmitted}
               rangeSubmitted={rangeSubmitted}
@@ -1741,6 +1751,7 @@ function Layout (props) {
         {!isSubmitted && results === 'Variant' && !triggerQuery && (
           <div>
             <VariantsResults
+              filteringTerms={filteringTerms}
               geneSubmitted={geneSubmitted}
               sequenceSubmitted={sequenceSubmitted}
               rangeSubmitted={rangeSubmitted}
@@ -1778,6 +1789,7 @@ function Layout (props) {
         {isSubmitted && results === 'Biosamples' && triggerQuery && (
           <div>
             <BiosamplesResults
+              filteringTerms={filteringTerms}
               query={query}
               resultSets={resultSetAux}
               descendantTerm={descendantTerm}
@@ -1789,6 +1801,7 @@ function Layout (props) {
         {isSubmitted && results === 'Biosamples' && !triggerQuery && (
           <div>
             <BiosamplesResults
+              filteringTerms={filteringTerms}
               query={query}
               resultSets={resultSetAux}
               descendantTerm={descendantTerm}