diff --git a/frontend/src/components/Analyses/AnalysesResults.js b/frontend/src/components/Analyses/AnalysesResults.js
index 26bc601..5e25058 100644
--- a/frontend/src/components/Analyses/AnalysesResults.js
+++ b/frontend/src/components/Analyses/AnalysesResults.js
@@ -40,6 +40,10 @@ function AnalysesResults (props) {
   const [queryArray, setQueryArray] = useState([])
   const [arrayFilter, setArrayFilter] = useState([])
 
+  const [isActive1, setIsActive1] = useState(false)
+  const [isActive2, setIsActive2] = useState(false)
+  const [isActive3, setIsActive3] = useState(false)
+  
   const { getStoredToken, authenticateUser } = useContext(AuthContext)
   let queryStringTerm = ''
 
@@ -48,6 +52,33 @@ function AnalysesResults (props) {
   const auth = useAuth()
   let isAuthenticated = auth.userData?.id_token ? true : false
 
+  const handleTypeResults1 = () => {
+    setShow1(true)
+    setShow2(false)
+    setShow3(false)
+    setIsActive1(true)
+    setIsActive2(false)
+    setIsActive3(false)
+  }
+
+  const handleTypeResults2 = () => {
+    setShow2(true)
+    setShow1(false)
+    setShow3(false)
+    setIsActive2(true)
+    setIsActive3(false)
+    setIsActive1(false)
+  }
+
+  const handleTypeResults3 = () => {
+    setShow3(true)
+    setShow1(false)
+    setShow2(false)
+    setIsActive3(true)
+    setIsActive1(false)
+    setIsActive2(false)
+  }
+
   useEffect(() => {
     const apiCall = async () => {
       if (isAuthenticated === false) {
@@ -198,10 +229,7 @@ function AnalysesResults (props) {
           }
 
           if (token === null) {
-            res = await axios.post(
-              configData.API_URL + '/analyses',
-              jsonData1
-            )
+            res = await axios.post(configData.API_URL + '/analyses', jsonData1)
           } else {
             const headers = { Authorization: `Bearer ${token}` }
 
@@ -305,10 +333,7 @@ function AnalysesResults (props) {
 
           if (token === null) {
             console.log('Querying without token')
-            res = await axios.post(
-              configData.API_URL + '/analyses',
-              jsonData2
-            )
+            res = await axios.post(configData.API_URL + '/analyses', jsonData2)
           } else {
             console.log('Querying WITH token')
             const headers = { Authorization: `Bearer ${token}` }
@@ -394,28 +419,12 @@ function AnalysesResults (props) {
     apiCall()
   }, [])
 
-  const handleTypeResults1 = () => {
-    setShow1(true)
-    setShow2(false)
-    setShow3(false)
-  }
-
-  const handleTypeResults2 = () => {
-    setShow2(true)
-    setShow1(false)
-    setShow3(false)
-  }
-
-  const handleTypeResults3 = () => {
-    setShow3(true)
-    setShow1(false)
-    setShow2(false)
-  }
   const onSubmit = () => {
     setSkipTrigger(skip)
     setLimitTrigger(limit)
     setTimeOut(false)
   }
+
   return (
     <div>
       {timeOut === false && (
@@ -435,17 +444,35 @@ function AnalysesResults (props) {
           {' '}
           {timeOut && error !== 'Connection error. Please retry' && (
             <div>
-              <div className='selectGranularity'>
+          <div className='selectGranularity'>
                 <h4>Granularity:</h4>
                 <button className='typeResults' onClick={handleTypeResults1}>
-                  <h5>Boolean</h5>
+                  <h5
+                    className={
+                      isActive1 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Boolean
+                  </h5>
                 </button>
                 <button className='typeResults' onClick={handleTypeResults2}>
-                  <h5>Count</h5>
+                  <h5
+                    className={
+                      isActive2 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Count
+                  </h5>
                 </button>
                 {props.resultSets !== 'MISS' && (
                   <button className='typeResults' onClick={handleTypeResults3}>
-                    <h5>Full response</h5>
+                    <h5
+                      className={
+                        isActive3 ? 'granularityActive' : 'granularityNoActive'
+                      }
+                    >
+                      Full response
+                    </h5>
                   </button>
                 )}
               </div>
diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js
index 67ecd0f..ffe657a 100644
--- a/frontend/src/components/Biosamples/BiosamplesResults.js
+++ b/frontend/src/components/Biosamples/BiosamplesResults.js
@@ -40,6 +40,10 @@ function BiosamplesResults (props) {
   const [queryArray, setQueryArray] = useState([])
   const [arrayFilter, setArrayFilter] = useState([])
 
+  const [isActive1, setIsActive1] = useState(false)
+  const [isActive2, setIsActive2] = useState(false)
+  const [isActive3, setIsActive3] = useState(false)
+
   const { getStoredToken, authenticateUser } = useContext(AuthContext)
   let queryStringTerm = ''
 
@@ -48,6 +52,39 @@ function BiosamplesResults (props) {
   const auth = useAuth()
   let isAuthenticated = auth.userData?.id_token ? true : false
 
+  const handleTypeResults1 = () => {
+    setShow1(true)
+    setShow2(false)
+    setShow3(false)
+    setIsActive1(true)
+    setIsActive2(false)
+    setIsActive3(false)
+  }
+
+  const handleTypeResults2 = () => {
+    setShow2(true)
+    setShow1(false)
+    setShow3(false)
+    setIsActive2(true)
+    setIsActive3(false)
+    setIsActive1(false)
+  }
+
+  const handleTypeResults3 = () => {
+    setShow3(true)
+    setShow1(false)
+    setShow2(false)
+    setIsActive3(true)
+    setIsActive1(false)
+    setIsActive2(false)
+  }
+
+  const onSubmit = () => {
+    setSkipTrigger(skip)
+    setLimitTrigger(limit)
+    setTimeOut(false)
+  }
+
   useEffect(() => {
     const apiCall = async () => {
       if (isAuthenticated === false) {
@@ -394,28 +431,7 @@ function BiosamplesResults (props) {
     apiCall()
   }, [])
 
-  const handleTypeResults1 = () => {
-    setShow1(true)
-    setShow2(false)
-    setShow3(false)
-  }
-
-  const handleTypeResults2 = () => {
-    setShow2(true)
-    setShow1(false)
-    setShow3(false)
-  }
 
-  const handleTypeResults3 = () => {
-    setShow3(true)
-    setShow1(false)
-    setShow2(false)
-  }
-  const onSubmit = () => {
-    setSkipTrigger(skip)
-    setLimitTrigger(limit)
-    setTimeOut(false)
-  }
   return (
     <div>
       {timeOut === false && (
@@ -438,14 +454,34 @@ function BiosamplesResults (props) {
               <div className='selectGranularity'>
                 <h4>Granularity:</h4>
                 <button className='typeResults' onClick={handleTypeResults1}>
-                  <h5>Boolean</h5>
+                  <h5
+                    className={
+                      isActive1 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Boolean
+                  </h5>
                 </button>
                 <button className='typeResults' onClick={handleTypeResults2}>
-                  <h5>Count</h5>
+                  <h5
+                    className={
+                      isActive2 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Count
+                  </h5>
                 </button>
-                {props.resultSets !== 'MISS' && <button className='typeResults' onClick={handleTypeResults3}>
-                  <h5>Full response</h5>
-                </button>}
+                {props.resultSets !== 'MISS' && (
+                  <button className='typeResults' onClick={handleTypeResults3}>
+                    <h5
+                      className={
+                        isActive3 ? 'granularityActive' : 'granularityNoActive'
+                      }
+                    >
+                      Full response
+                    </h5>
+                  </button>
+                )}
               </div>
             </div>
           )}
diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css
index bd519ee..6679051 100644
--- a/frontend/src/components/Datasets/ResultsDatasets.css
+++ b/frontend/src/components/Datasets/ResultsDatasets.css
@@ -382,9 +382,9 @@ p a {
     justify-content: center;
     align-items: center;
     width: -moz-fit-content;
-    width: 100%;
+    width: fit-content;
     background: #c8d4e6;
-    height: 60px;
+    height: fit-content;
     margin-top: 2px;
   }
 }
diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js
index 05313d1..aa37ccc 100644
--- a/frontend/src/components/GenomicVariations/VariantsResults.js
+++ b/frontend/src/components/GenomicVariations/VariantsResults.js
@@ -36,23 +36,38 @@ function VariantsResults (props) {
   const [resultsPerDataset, setResultsDataset] = useState([])
   const [resultsNotPerDataset, setResultsNotPerDataset] = useState([])
 
+  const [isActive1, setIsActive1] = useState(false)
+  const [isActive2, setIsActive2] = useState(false)
+  const [isActive3, setIsActive3] = useState(false)
+
   let queryStringTerm = ''
+ 
+
   const handleTypeResults1 = () => {
     setShow1(true)
     setShow2(false)
     setShow3(false)
+    setIsActive1(true)
+    setIsActive2(false)
+    setIsActive3(false)
   }
 
   const handleTypeResults2 = () => {
     setShow2(true)
     setShow1(false)
     setShow3(false)
+    setIsActive2(true)
+    setIsActive3(false)
+    setIsActive1(false)
   }
 
   const handleTypeResults3 = () => {
     setShow3(true)
     setShow1(false)
     setShow2(false)
+    setIsActive3(true)
+    setIsActive1(false)
+    setIsActive2(false)
   }
 
   const auth = useAuth()
@@ -653,17 +668,35 @@ function VariantsResults (props) {
           )}
           {timeOut && error !== 'Connection error. Please retry' && (
             <div>
-              <div className='selectGranularity'>
+               <div className='selectGranularity'>
                 <h4>Granularity:</h4>
                 <button className='typeResults' onClick={handleTypeResults1}>
-                  <h5>Boolean</h5>
+                  <h5
+                    className={
+                      isActive1 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Boolean
+                  </h5>
                 </button>
                 <button className='typeResults' onClick={handleTypeResults2}>
-                  <h5>Count</h5>
+                  <h5
+                    className={
+                      isActive2 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Count
+                  </h5>
                 </button>
                 {props.resultSets !== 'MISS' && (
                   <button className='typeResults' onClick={handleTypeResults3}>
-                    <h5>Full response</h5>
+                    <h5
+                      className={
+                        isActive3 ? 'granularityActive' : 'granularityNoActive'
+                      }
+                    >
+                      Full response
+                    </h5>
                   </button>
                 )}
               </div>
diff --git a/frontend/src/components/Individuals/IndividualsResults.js b/frontend/src/components/Individuals/IndividualsResults.js
index 3d818af..6cf98d4 100644
--- a/frontend/src/components/Individuals/IndividualsResults.js
+++ b/frontend/src/components/Individuals/IndividualsResults.js
@@ -403,6 +403,8 @@ function IndividualsResults (props) {
     setShow2(false)
     setShow3(false)
     setIsActive1(true)
+    setIsActive2(false)
+    setIsActive3(false)
   }
 
   const handleTypeResults2 = () => {
@@ -410,6 +412,8 @@ function IndividualsResults (props) {
     setShow1(false)
     setShow3(false)
     setIsActive2(true)
+    setIsActive3(false)
+    setIsActive1(false)
   }
 
   const handleTypeResults3 = () => {
@@ -417,6 +421,8 @@ function IndividualsResults (props) {
     setShow1(false)
     setShow2(false)
     setIsActive3(true)
+    setIsActive1(false)
+    setIsActive2(false)
   }
   const onSubmit = () => {
     setSkipTrigger(skip)
diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
index 60cb512..a8ba664 100644
--- a/frontend/src/components/Layout/Layout.js
+++ b/frontend/src/components/Layout/Layout.js
@@ -558,7 +558,7 @@ function Layout (props) {
               alt='impactLogo'
             ></img>
           </a> */}
-          <h1 className='version'>v0.5.0</h1>
+          <h1 className='version'>v0.5.1</h1>
         </div>
       </div>
 
@@ -1826,16 +1826,7 @@ function Layout (props) {
             setQuery={setQuery}
           />
         )}
-            {results !== null && timeOut === true && showFilteringTerms && (
-          <FilteringTerms
-            filteringTerms={filteringTerms}
-            collection={props.collection}
-            setPlaceholder={setPlaceholder}
-            placeholder={placeholder}
-            query={query}
-            setQuery={setQuery}
-          />
-        )}
+      
         {timeOut === true && error && <h5>{error}</h5>}
       </div>
     </div>
diff --git a/frontend/src/components/Runs/RunsResults.js b/frontend/src/components/Runs/RunsResults.js
index 58ffd37..33224c4 100644
--- a/frontend/src/components/Runs/RunsResults.js
+++ b/frontend/src/components/Runs/RunsResults.js
@@ -40,6 +40,10 @@ function RunsResults (props) {
   const [queryArray, setQueryArray] = useState([])
   const [arrayFilter, setArrayFilter] = useState([])
 
+  const [isActive1, setIsActive1] = useState(false)
+  const [isActive2, setIsActive2] = useState(false)
+  const [isActive3, setIsActive3] = useState(false)
+
   const { getStoredToken, authenticateUser } = useContext(AuthContext)
   let queryStringTerm = ''
 
@@ -48,6 +52,33 @@ function RunsResults (props) {
   const auth = useAuth()
   let isAuthenticated = auth.userData?.id_token ? true : false
 
+  const handleTypeResults1 = () => {
+    setShow1(true)
+    setShow2(false)
+    setShow3(false)
+    setIsActive1(true)
+    setIsActive2(false)
+    setIsActive3(false)
+  }
+
+  const handleTypeResults2 = () => {
+    setShow2(true)
+    setShow1(false)
+    setShow3(false)
+    setIsActive2(true)
+    setIsActive3(false)
+    setIsActive1(false)
+  }
+
+  const handleTypeResults3 = () => {
+    setShow3(true)
+    setShow1(false)
+    setShow2(false)
+    setIsActive3(true)
+    setIsActive1(false)
+    setIsActive2(false)
+  }
+
   useEffect(() => {
     const apiCall = async () => {
       if (isAuthenticated === false) {
@@ -198,18 +229,13 @@ function RunsResults (props) {
           }
 
           if (token === null) {
-            res = await axios.post(
-              configData.API_URL + '/runs',
-              jsonData1
-            )
+            res = await axios.post(configData.API_URL + '/runs', jsonData1)
           } else {
             const headers = { Authorization: `Bearer ${token}` }
 
-            res = await axios.post(
-              configData.API_URL + '/runs',
-              jsonData1,
-              { headers: headers }
-            )
+            res = await axios.post(configData.API_URL + '/runs', jsonData1, {
+              headers: headers
+            })
           }
           setTimeOut(true)
 
@@ -305,18 +331,13 @@ function RunsResults (props) {
 
           if (token === null) {
             console.log('Querying without token')
-            res = await axios.post(
-              configData.API_URL + '/runs',
-              jsonData2
-            )
+            res = await axios.post(configData.API_URL + '/runs', jsonData2)
           } else {
             console.log('Querying WITH token')
             const headers = { Authorization: `Bearer ${token}` }
-            res = await axios.post(
-              configData.API_URL + '/runs',
-              jsonData2,
-              { headers: headers }
-            )
+            res = await axios.post(configData.API_URL + '/runs', jsonData2, {
+              headers: headers
+            })
           }
 
           setTimeOut(true)
@@ -394,23 +415,6 @@ function RunsResults (props) {
     apiCall()
   }, [])
 
-  const handleTypeResults1 = () => {
-    setShow1(true)
-    setShow2(false)
-    setShow3(false)
-  }
-
-  const handleTypeResults2 = () => {
-    setShow2(true)
-    setShow1(false)
-    setShow3(false)
-  }
-
-  const handleTypeResults3 = () => {
-    setShow3(true)
-    setShow1(false)
-    setShow2(false)
-  }
   const onSubmit = () => {
     setSkipTrigger(skip)
     setLimitTrigger(limit)
@@ -438,14 +442,32 @@ function RunsResults (props) {
               <div className='selectGranularity'>
                 <h4>Granularity:</h4>
                 <button className='typeResults' onClick={handleTypeResults1}>
-                  <h5>Boolean</h5>
+                  <h5
+                    className={
+                      isActive1 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Boolean
+                  </h5>
                 </button>
                 <button className='typeResults' onClick={handleTypeResults2}>
-                  <h5>Count</h5>
+                  <h5
+                    className={
+                      isActive2 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Count
+                  </h5>
                 </button>
                 {props.resultSets !== 'MISS' && (
                   <button className='typeResults' onClick={handleTypeResults3}>
-                    <h5>Full response</h5>
+                    <h5
+                      className={
+                        isActive3 ? 'granularityActive' : 'granularityNoActive'
+                      }
+                    >
+                      Full response
+                    </h5>
                   </button>
                 )}
               </div>