diff --git a/frontend/src/App.css b/frontend/src/App.css
index 75c518f..7897306 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -30,6 +30,7 @@ html {
   color: rgba(12, 16, 64, 0.606);
   font-size: 16px;
   font-variant-caps: all-petite-caps;
+  margin-top: 16px;
 }
 
 .modeVariants {
@@ -1101,6 +1102,10 @@ h5 {
     padding: 2px;
   }
 
+  .ReactModal__Overlay{
+    z-index: 3;
+  }
+
   .filters {
     padding: 4px;
     cursor: pointer;
diff --git a/frontend/src/components/Analyses/AnalysesResults.js b/frontend/src/components/Analyses/AnalysesResults.js
new file mode 100644
index 0000000..2445645
--- /dev/null
+++ b/frontend/src/components/Analyses/AnalysesResults.js
@@ -0,0 +1,477 @@
+import '../Individuals/Individuals.css'
+import '../../App.css'
+import TableResultsAnalyses from '../Results/AnalysesResults/TableResultsAnalyses'
+import { useState, useEffect } from 'react'
+import axios from 'axios'
+import { AuthContext } from '../context/AuthContext'
+import { useAuth } from 'oidc-react'
+import configData from '../../config.json'
+import { useContext } from 'react'
+
+function AnalysesResults (props) {
+  const [showLayout, setShowLayout] = useState(false)
+
+  const [beaconsList, setBeaconsList] = useState([])
+
+  const [error, setError] = useState(false)
+
+  const [numberResults, setNumberResults] = useState(0)
+  const [boolean, setBoolean] = useState(false)
+  const [results, setResults] = useState([])
+  const [show1, setShow1] = useState(false)
+  const [show2, setShow2] = useState(false)
+  const [show3, setShow3] = useState(false)
+
+  const [resultsPerDataset, setResultsDataset] = useState([])
+  const [resultsNotPerDataset, setResultsNotPerDataset] = useState([])
+
+  const [timeOut, setTimeOut] = useState(false)
+
+  const [logInRequired, setLoginRequired] = useState(false)
+
+  const [messageLoginFullResp, setMessageLoginFullResp] = useState('')
+
+  const [limit, setLimit] = useState(0)
+  const [skip, setSkip] = useState(0)
+
+  const [skipTrigger, setSkipTrigger] = useState(0)
+  const [limitTrigger, setLimitTrigger] = useState(0)
+
+  const [queryArray, setQueryArray] = useState([])
+  const [arrayFilter, setArrayFilter] = useState([])
+
+  const { getStoredToken, authenticateUser } = useContext(AuthContext)
+  let queryStringTerm = ''
+
+  let res = ''
+
+  const auth = useAuth()
+  let isAuthenticated = auth.userData?.id_token ? true : false
+
+  useEffect(() => {
+    const apiCall = async () => {
+      if (isAuthenticated === false) {
+        authenticateUser()
+        const token = getStoredToken()
+
+        if (token !== 'undefined' && token !== null) {
+          isAuthenticated = true
+        }
+      }
+
+      if (props.query !== null) {
+        if (props.query.includes(',')) {
+          queryStringTerm = props.query.split(',')
+          queryStringTerm.forEach((element, index) => {
+            element = element.trim()
+            if (
+              element.includes('=') ||
+              element.includes('>') ||
+              element.includes('<') ||
+              element.includes('!') ||
+              element.includes('%')
+            ) {
+              if (element.includes('=')) {
+                queryArray[index] = element.split('=')
+                queryArray[index].push('=')
+              } else if (element.includes('>')) {
+                queryArray[index] = element.split('>')
+                queryArray[index].push('>')
+              } else if (element.includes('<')) {
+                queryArray[index] = element.split('<')
+                queryArray[index].push('<')
+              } else if (element.includes('!')) {
+                queryArray[index] = element.split('!')
+                queryArray[index].push('!')
+              } else {
+                queryArray[index] = element.split('%')
+                queryArray[index].push('%')
+              }
+              const alphaNumFilter = {
+                id: queryArray[index][0],
+                operator: queryArray[index][2],
+                value: queryArray[index][1]
+              }
+              arrayFilter.push(alphaNumFilter)
+            } else {
+              const filter2 = {
+                id: element,
+                includeDescendantTerms: props.descendantTerm
+              }
+              arrayFilter.push(filter2)
+            }
+          })
+        } else {
+          if (
+            props.query.includes('=') ||
+            props.query.includes('>') ||
+            props.query.includes('<') ||
+            props.query.includes('!') ||
+            props.query.includes('%')
+          ) {
+            if (props.query.includes('=')) {
+              queryArray[0] = props.query.split('=')
+              queryArray[0].push('=')
+            } else if (props.query.includes('>')) {
+              queryArray[0] = props.query.split('>')
+              queryArray[0].push('>')
+            } else if (props.query.includes('<')) {
+              queryArray[0] = props.query.split('<')
+              queryArray[0].push('<')
+            } else if (props.query.includes('!')) {
+              queryArray[0] = props.query.split('!')
+              queryArray[0].push('!')
+            } else {
+              queryArray[0] = props.query.split('%')
+              queryArray[0].push('%')
+            }
+
+            const alphaNumFilter = {
+              id: queryArray[0][0],
+              operator: queryArray[0][2],
+              value: queryArray[0][1]
+            }
+            arrayFilter.push(alphaNumFilter)
+          } else {
+            const filter = {
+              id: props.query
+            }
+            arrayFilter.push(filter)
+          }
+        }
+      }
+
+      try {
+        let res = await axios.get(configData.API_URL + '/info')
+
+        res.data.responses.forEach(element => {
+          beaconsList.push(element)
+        })
+
+        beaconsList.reverse()
+
+        if (props.query === null) {
+          // show all individuals
+
+          var jsonData1 = {
+            meta: {
+              apiVersion: '2.0'
+            },
+            query: {
+              filters: arrayFilter,
+              includeResultsetResponses: `${props.resultSets}`,
+              pagination: {
+                skip: 0,
+                limit: 0
+              },
+              testMode: false,
+              requestedGranularity: 'record'
+            }
+          }
+          jsonData1 = JSON.stringify(jsonData1)
+
+          let token = null
+          if (auth.userData === null) {
+            token = getStoredToken()
+          } else {
+            token = auth.userData.access_token
+          }
+
+          if (token === null) {
+            res = await axios.post(
+              configData.API_URL + '/analyses',
+              jsonData1
+            )
+          } else {
+            const headers = { Authorization: `Bearer ${token}` }
+
+            res = await axios.post(
+              configData.API_URL + '/analyses',
+              jsonData1,
+              { headers: headers }
+            )
+          }
+          setTimeOut(true)
+
+          if (
+            res.data.responseSummary.numTotalResults < 1 ||
+            res.data.responseSummary.numTotalResults === undefined
+          ) {
+            setError('ERROR. Please check the query and retry')
+            setNumberResults(0)
+            setBoolean(false)
+          } else {
+            res.data.response.resultSets.forEach((element, index) => {
+              if (element.id && element.id !== '') {
+                if (resultsPerDataset.length > 0) {
+                  console.log(resultsPerDataset)
+                  resultsPerDataset.forEach(element2 => {
+                    if (element2[0] === element.beaconId) {
+                      element2[1].push(element.id)
+                      element2[2].push(element.exists)
+                      element2[3].push(element.resultsCount)
+                    } else {
+                      let arrayResultsPerDataset = [
+                        element.beaconId,
+                        [element.id],
+                        [element.exists],
+                        [element.resultsCount]
+                      ]
+                      resultsPerDataset.push(arrayResultsPerDataset)
+                    }
+                  })
+                } else {
+                  let arrayResultsPerDataset = [
+                    element.beaconId,
+                    [element.id],
+                    [element.exists],
+                    [element.resultsCount]
+                  ]
+                  resultsPerDataset.push(arrayResultsPerDataset)
+                }
+              }
+
+              if (element.id === undefined || element.id === '') {
+                let arrayResultsNoDatasets = [element.beaconId]
+                resultsNotPerDataset.push(arrayResultsNoDatasets)
+              }
+
+              if (res.data.response.resultSets[index].results) {
+                res.data.response.resultSets[index].results.forEach(
+                  (element2, index2) => {
+                    let arrayResult = [
+                      res.data.response.resultSets[index].beaconId,
+                      res.data.response.resultSets[index].results[index2]
+                    ]
+                    results.push(arrayResult)
+                  }
+                )
+              }
+            })
+          }
+        } else {
+          var jsonData2 = {
+            meta: {
+              apiVersion: '2.0'
+            },
+            query: {
+              filters: arrayFilter,
+              includeResultsetResponses: `${props.resultSets}`,
+              pagination: {
+                skip: skip,
+                limit: limit
+              },
+              testMode: false,
+              requestedGranularity: 'record'
+            }
+          }
+          jsonData2 = JSON.stringify(jsonData2)
+          let token = null
+          if (auth.userData === null) {
+            token = getStoredToken()
+          } else {
+            token = auth.userData.access_token
+          }
+
+          if (token === null) {
+            console.log('Querying without token')
+            res = await axios.post(
+              configData.API_URL + '/analyses',
+              jsonData2
+            )
+          } else {
+            console.log('Querying WITH token')
+            const headers = { Authorization: `Bearer ${token}` }
+
+            res = await axios.post(
+              configData.API_URL + '/analyses',
+              jsonData2,
+              { headers: headers }
+            )
+          }
+          setTimeOut(true)
+
+          if (
+            res.data.responseSummary.numTotalResults < 1 ||
+            res.data.responseSummary.numTotalResults === undefined
+          ) {
+            setError('ERROR. Please check the query and retry')
+            setNumberResults(0)
+            setBoolean(false)
+          } else {
+            res.data.response.resultSets.forEach((element, index) => {
+              console.log(res.data.response)
+              if (element.id && element.id !== '') {
+                console.log(resultsPerDataset)
+                if (resultsPerDataset.length > 0) {
+                  resultsPerDataset.forEach(element2 => {
+                    console.log(element2[0])
+                    console.log(element.beaconId)
+                    if (element2[0] === element.beaconId) {
+                      element2[1].push(element.id)
+                      element2[2].push(element.exists)
+                      element2[3].push(element.resultsCount)
+                    } else {
+                      console.log('hola')
+
+                      let arrayResultsPerDataset = [
+                        element.beaconId,
+                        [element.id],
+                        [element.exists],
+                        [element.resultsCount]
+                      ]
+                      let found = false
+
+                      console.log(arrayResultsPerDataset)
+                      resultsPerDataset.forEach(element => {
+                        if (element[0] === arrayResultsPerDataset[0]) {
+                          found = true
+                        }
+                        console.log(found)
+                      })
+                      if (found === false) {
+                        resultsPerDataset.push(arrayResultsPerDataset)
+                      }
+                    }
+                  })
+                } else {
+                  let arrayResultsPerDataset = [
+                    element.beaconId,
+                    [element.id],
+                    [element.exists],
+                    [element.resultsCount]
+                  ]
+                  console.log(arrayResultsPerDataset)
+                  resultsPerDataset.push(arrayResultsPerDataset)
+                }
+              }
+
+              if (element.id === undefined || element.id === '') {
+                let arrayResultsNoDatasets = [element.beaconId]
+                resultsNotPerDataset.push(arrayResultsNoDatasets)
+              }
+
+              if (res.data.response.resultSets[index].results) {
+                res.data.response.resultSets[index].results.forEach(
+                  (element2, index2) => {
+                    let arrayResult = [
+                      res.data.response.resultSets[index].beaconId,
+                      res.data.response.resultSets[index].results[index2]
+                    ]
+                    results.push(arrayResult)
+                  }
+                )
+              }
+            })
+          }
+        }
+      } catch (error) {
+        setError('No results. Please check the query and the connection and retry')
+        setTimeOut(true)
+        console.log(error)
+      }
+    }
+    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 && (
+        <div className='loaderLogo'>
+          <div className='loader2'>
+            <div id='ld3'>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div>
+        <div>
+          {' '}
+          {timeOut && error !== 'Connection error. Please retry' && (
+            <div>
+              <div className='selectGranularity'>
+                <h4>Granularity:</h4>
+                <button className='typeResults' onClick={handleTypeResults1}>
+                  <h5>Boolean</h5>
+                </button>
+                <button className='typeResults' onClick={handleTypeResults2}>
+                  <h5>Count</h5>
+                </button>
+                <button className='typeResults' onClick={handleTypeResults3}>
+                  <h5>Full response</h5>
+                </button>
+              </div>
+            </div>
+          )}
+          {timeOut && error === 'Connection error. Please retry' && (
+            <h3>&nbsp; {error} </h3>
+          )}
+          {show3 && logInRequired === false && !error && (
+            <div className='containerTableResults'>
+              <TableResultsAnalyses
+                show={'full'}
+                results={results}
+                resultsPerDataset={resultsPerDataset}
+                beaconsList={beaconsList}
+              ></TableResultsAnalyses>
+            </div>
+          )}
+     
+          {show3 && error && <h3>&nbsp; {error} </h3>}
+          {show2 && !error && (
+            <div className='containerTableResults'>
+              <TableResultsAnalyses
+                show={'count'}
+                resultsPerDataset={resultsPerDataset}
+                resultsNotPerDataset={resultsNotPerDataset}
+                results={results}
+                beaconsList={beaconsList}
+              ></TableResultsAnalyses>
+            </div>
+          )}
+          {show1 && !error && (
+            <div className='containerTableResults'>
+              <TableResultsAnalyses
+                show={'boolean'}
+                resultsPerDataset={resultsPerDataset}
+                resultsNotPerDataset={resultsNotPerDataset}
+                results={results}
+                beaconsList={beaconsList}
+              ></TableResultsAnalyses>
+            </div>
+          )}
+          {show2 && error && <h3>&nbsp; {error} </h3>}
+          {show1 && error && <h3>&nbsp; {error} </h3>}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AnalysesResults
diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js
index c9272ea..3ca7df6 100644
--- a/frontend/src/components/Biosamples/BiosamplesResults.js
+++ b/frontend/src/components/Biosamples/BiosamplesResults.js
@@ -8,7 +8,6 @@ import { useAuth } from 'oidc-react'
 import configData from '../../config.json'
 import { useContext } from 'react'
 
-
 function BiosamplesResults (props) {
   const [showLayout, setShowLayout] = useState(false)
 
@@ -29,7 +28,7 @@ function BiosamplesResults (props) {
   const [timeOut, setTimeOut] = useState(false)
 
   const [logInRequired, setLoginRequired] = useState(false)
- 
+
   const [messageLoginFullResp, setMessageLoginFullResp] = useState('')
 
   const [limit, setLimit] = useState(0)
@@ -203,7 +202,6 @@ function BiosamplesResults (props) {
             setBoolean(false)
           } else {
             res.data.response.resultSets.forEach((element, index) => {
-             
               if (element.id && element.id !== '') {
                 if (resultsPerDataset.length > 0) {
                   console.log(resultsPerDataset)
@@ -213,7 +211,6 @@ function BiosamplesResults (props) {
                       element2[2].push(element.exists)
                       element2[3].push(element.resultsCount)
                     } else {
-                      
                       let arrayResultsPerDataset = [
                         element.beaconId,
                         [element.id],
@@ -447,7 +444,7 @@ function BiosamplesResults (props) {
           )}
           {show3 && logInRequired === true && <h3>{messageLoginFullResp}</h3>}
           {show3 && error && <h3>&nbsp; {error} </h3>}
-          {show2 && (
+          {show2 && !error && (
             <div className='containerTableResults'>
               <TableResultsBiosamples
                 show={'count'}
@@ -458,7 +455,7 @@ function BiosamplesResults (props) {
               ></TableResultsBiosamples>
             </div>
           )}
-          {show1 && (
+          {show1 && !error && (
             <div className='containerTableResults'>
               <TableResultsBiosamples
                 show={'boolean'}
@@ -469,10 +466,12 @@ function BiosamplesResults (props) {
               ></TableResultsBiosamples>
             </div>
           )}
+          {show2 && error && <h3>&nbsp; {error} </h3>}
+          {show1 && error && <h3>&nbsp; {error} </h3>}
         </div>
       </div>
     </div>
   )
 }
 
-export default BiosamplesResults
\ No newline at end of file
+export default BiosamplesResults
diff --git a/frontend/src/components/Cohorts/Cohorts.css b/frontend/src/components/Cohorts/Cohorts.css
index 75fde08..6199fdf 100644
--- a/frontend/src/components/Cohorts/Cohorts.css
+++ b/frontend/src/components/Cohorts/Cohorts.css
@@ -107,107 +107,6 @@
   align-items: center;
 }
 
-.tab-content {
-  display: none;
-}
-
-.tab:target .tab-content,
-.tab:last-of-type .tab-content {
-  display: block;
-}
-
-.tab:target ~ .tab:last-of-type .tab-content {
-  display: none;
-}
-
-.tabs * {
-  box-sizing: border-box;
-}
-
-.tab-container {
-  position: relative;
-  padding-top: var(--tabs-height); /* en esta zona colocaremos las pestañas */
-  margin-left: 40px;
-  margin-right: 40px;
-  margin-top: 0px;
-}
-#tab1 > a {
-  --tabs-position: 0;
-}
-#tab2 > a {
-  --tabs-position: 1;
-}
-#tab3 > a {
-  --tabs-position: 2;
-}
-#tab4 > a {
-  --tabs-position: 3;
-}
-#tab5 > a {
-  --tabs-position: 4;
-}
-#tab6 > a {
-  --tabs-position: 5;
-}
-#tab7 > a {
-  --tabs-position: 6;
-}
-#tab8 > a {
-  --tabs-position: 7;
-}
-#tab9 > a {
-  --tabs-position: 8;
-}
-.tab > a {
-  text-align: center;
-  position: absolute;
-  width: calc(var(--tabs-width));
-  height: calc(var(--tabs-height) + var(--tabs-border-size));
-  top: 0;
-  left: calc(
-    var(--tabs-width) * var(--tabs-position)
-  ); /* posición de cada pestaña */
-}
-:root {
-  --tabs-border-color: #abcdef;
-  --tabs-border-size: 3px;
-  --tabs-text-color: white;
-  --tabs-dark-color: #2768aa;
-  --tabs-lite-color: #adafc2;
-  --tabs-width: 150px;
-  --tabs-height: 60px;
-  font-size: 14px;
-  margin: 10px;
-}
-.tabs {
-  width: 100vw;
-  color: var(--tabs-text-color);
-}
-.tab-content {
-  background-color: var(--tabs-lite-color);
-  padding: 20px;
-  border: var(--tabs-border-size) solid var(--tabs-border-color);
-  border-radius: 0 0 10px 10px;
-  position: relative;
-  z-index: 100;
-}
-.tab > a {
-  background-color: var(--tabs-dark-color);
-  padding: 10px;
-  border: var(--tabs-border-size) solid var(--tabs-border-color);
-  border-radius: 10px 10px 0 0;
-  border-bottom: 0;
-}
-.tab:target > a,
-.tab:last-of-type > a {
-  background-color: var(--tabs-lite-color);
-  z-index: 200;
-}
-.tab:target ~ .tab:last-of-type > a {
-  background-color: var(--tabs-dark-color);
-  z-index: 0;
-}
-
 h2,
 p {
   margin: 0;
diff --git a/frontend/src/components/Cohorts/Cohorts.js b/frontend/src/components/Cohorts/Cohorts.js
index 8f27fbc..785bfb9 100644
--- a/frontend/src/components/Cohorts/Cohorts.js
+++ b/frontend/src/components/Cohorts/Cohorts.js
@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react'
 import Layout from '../Layout/Layout'
 import { NavLink, useNavigate } from 'react-router-dom'
 import configData from '../../config.json'
+import CohortsModule from './CohortsModule'
 
 function Cohorts (props) {
   const API_ENDPOINT = configData.API_URL + '/cohorts'
@@ -58,8 +59,11 @@ function Cohorts (props) {
 
   const [trigger, setTrigger] = useState(false)
 
+  const [trigger2, setTrigger2] = useState(false)
   const [noCollectionEvents, setNoCollectionEvents] = useState(false)
 
+  const [alreadySelectedCohort, setAlreadySelectedCohort] = useState(true)
+
   //const handleSelectedFilter = e => {
   //setSelectedFilter(e.target.value)
   //}
@@ -69,29 +73,33 @@ function Cohorts (props) {
   }
 
   useEffect(() => {
-    const fetchDataCohorts = async () => {
-      try {
-        let res = await axios.get(configData.API_URL + '/cohorts')
-        console.log(res)
-        res.data.response.collections.forEach(element => {
-          let obj = {
-            value: element.id,
-            label: element.id
-          }
-          optionsCohorts.push(obj)
-          arrayCohorts.push(element)
-          const timer = setTimeout(() => {
-            setTriggerLayout(true)
-          }, 2000)
-          return () => clearTimeout(timer)
-        })
-      } catch (error) {
-        setTimeOut(true)
-        console.log(error)
-        setError('Unexpected error. Please retry')
+    if (!props.newSearch) {
+      const fetchDataCohorts = async () => {
+        try {
+          let res = await axios.get(configData.API_URL + '/cohorts')
+          console.log(res)
+          res.data.response.collections.forEach(element => {
+            let obj = {
+              value: element.id,
+              label: element.id
+            }
+            optionsCohorts.push(obj)
+            arrayCohorts.push(element)
+            const timer = setTimeout(() => {
+              setTriggerLayout(true)
+            }, 2000)
+            return () => clearTimeout(timer)
+          })
+        } catch (error) {
+          setTimeOut(true)
+          console.log(error)
+          setError('Unexpected error. Please retry')
+        }
       }
+      fetchDataCohorts().catch(console.error)
+    } else {
+      setTimeOut(true)
     }
-    fetchDataCohorts().catch(console.error)
   }, [])
 
   useEffect(() => {
@@ -528,7 +536,7 @@ function Cohorts (props) {
     if (selectedCohorts) {
       apiCall()
     }
-  }, [showGraphs, trigger])
+  }, [showGraphs, trigger, trigger2])
 
   return (
     <div className='graphsDiv'>
@@ -566,8 +574,132 @@ function Cohorts (props) {
 
       {error !== '' && <h10>{error}</h10>}
 
-      {trigger && !noCollectionEvents && (
+      {trigger && trigger2 && !noCollectionEvents && showGraphs && (
+        <>
+          <CohortsModule
+            optionsCohorts={optionsCohorts}
+            selectedCohorts={selectedCohorts}
+            setSelectedCohorts={setSelectedCohorts}
+            setShowGraphs={setShowGraphs}
+            alreadySelectedCohort={alreadySelectedCohort}
+            response={response}
+            setResponse={setResponse}
+            setTrigger2={setTrigger2}
+            trigger2={trigger2}
+          />
+          {nameCohort !== '' && <h3>{nameCohort}</h3>}
+          {showGraphs === true && (
+            <div className='chartModule'>
+              <div id='chartSex'></div>
+              <div id='chartGeo'></div>
+              <hr></hr>
+              <div className='ethnicity'>
+                {/* <div className='ethFilters'>
+                  <label for='ethnicities'>Filter:</label>
+                  <select
+                    name='filters'
+                    id='filtersSelect'
+                    onChange={handleSelectedFilter}
+                  >
+                    <option value=''></option>
+                    {filterEthSex && (
+                      <option value='eth_sex'>Ethnicities by sex</option>
+                    )}
+                    {filterEthDis && (
+                      <option value='eth_dis'>Ethnicities by disease</option>
+                    )}
+                  </select>
+
+                  <label for='ethnicities'>Select the ethnicity:</label>
+                  <select
+                    name='ethnicities'
+                    id='ethnicitiesSelect'
+                    onChange={handleSelectedValue}
+                  >
+                    <option value=''></option>
+                    {labelsEthnicities.map(element => {
+                      return <option value={element}>{element}</option>
+                    })}
+                  </select>
+                  <button className='buttonSubmit' onClick={submitFilters}>
+                    Submit
+                  </button>
+                </div> */}
+
+                {/* {showEthFiltered && (
+                  <div className='moduleFiltered'>
+                    <div id='chartFilteredEthnicity'></div>
+                  </div>
+                )}
+                {showEthFiltered2 && (
+                  <div className='moduleFiltered'>
+                    <div id='chartFilteredEthnicity2'></div>
+                  </div>
+                )} */}
+                <div id='chartEthnicity'></div>
+              </div>
+              <hr></hr>
+              <div className='diseases'>
+                {/* <div className='diseasesFilters'>
+                  <label for='ethnicities'>Filter:</label>
+                  <select
+                    name='filters'
+                    id='filtersSelect'
+                    onChange={handleSelectedFilter}
+                  >
+                    <option value=''></option>
+                    {filterDisEth && (
+                      <option value='dis_eth'>Diseases by ethnicity</option>
+                    )}
+                    {filterDisSex && (
+                      <option value='dis_sex'>Diseases by sex</option>
+                    )}
+                  </select>
+
+                  <select
+                    name='diseases'
+                    id='diseasesSelect'
+                    onChange={handleSelectedValue}
+                  >
+                    <option value=''></option>
+                    {labelsDiseases.map(element => {
+                      return <option value={element}>{element}</option>
+                    })}
+                  </select>
+                  <button className='buttonSubmit' onClick={submitFilters}>
+                    Submit
+                  </button>
+                </div>
+
+                {showDisFiltered && (
+                  <div className='moduleFiltered'>
+                    <div id='chartFilteredDisease'></div>
+                  </div>
+                )}
+                {showDisFiltered2 && (
+                  <div className='moduleFiltered'>
+                    <div id='chartFilteredDisease2'></div>
+                  </div>
+                )} */}
+                <div id='chartDiseases'></div>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+      {trigger && !trigger2 && !noCollectionEvents && showGraphs && (
         <>
+          <CohortsModule
+            optionsCohorts={optionsCohorts}
+            selectedCohorts={selectedCohorts}
+            setSelectedCohorts={setSelectedCohorts}
+            setShowGraphs={setShowGraphs}
+            alreadySelectedCohort={alreadySelectedCohort}
+            response={response}
+            setResponse={setResponse}
+            setTrigger2={setTrigger2}
+            trigger2={trigger2}
+          />
           {nameCohort !== '' && <h3>{nameCohort}</h3>}
           {showGraphs === true && (
             <div className='chartModule'>
@@ -669,8 +801,8 @@ function Cohorts (props) {
         </>
       )}
 
-      {trigger && noCollectionEvents && (
-        <h10>NO GRAPHICS AVAILABLE FOR THE SELECTED COHORTS</h10>
+      {trigger && noCollectionEvents && showGraphs && (
+        <h10>NO GRAPHICS AVAILABLE FOR THE SELECTED COHORT</h10>
       )}
       {showGraphs === true && dataAvailable === false && timeOut === true && (
         <div>
diff --git a/frontend/src/components/Cohorts/CohortsModule.js b/frontend/src/components/Cohorts/CohortsModule.js
index 2dbe074..46fe51d 100644
--- a/frontend/src/components/Cohorts/CohortsModule.js
+++ b/frontend/src/components/Cohorts/CohortsModule.js
@@ -3,24 +3,33 @@ import './Cohorts.css'
 import React, { useState, useEffect } from 'react'
 import Select from 'react-select'
 import makeAnimated from 'react-select/animated'
+import Cohorts from './Cohorts'
 
 function CohortsModule (props) {
   const [results, setResults] = useState(null)
 
   const animatedComponents = makeAnimated()
   const [selected, setSelected] = useState(null)
+
+  const [trigger, setTrigger] = useState(false)
+  const [newSearch, setNewSearch] = useState(true)
+
   const onSubmitCohorts = () => {
     setResults('Cohorts')
-
     props.setShowGraphs(true)
   }
   const handleChangeCohorts = selectedOption => {
     console.log(selectedOption)
     setSelected(selectedOption)
-
     props.setSelectedCohorts(selectedOption)
   }
 
+  const handleSearchAgain = () => {
+    setTrigger(true)
+    props.setResponse('')
+    props.setTrigger2(!props.trigger2)
+  }
+
   return (
     <div className='cohortsModule'>
       <Select
@@ -29,17 +38,26 @@ function CohortsModule (props) {
         autoFocus={true}
       />
 
-      <form className='d-flex2' onSubmit={onSubmitCohorts}>
-        {results !== 'Cohorts' && (
-          <button className='searchButton2' type='submit'>
-            <img
-              className='forwardIcon'
-              src='./next.png'
-              alt='searchIcon'
-            ></img>
-          </button>
-        )}
-      </form>
+      {!props.alreadySelectedCohort && (
+        <form className='d-flex2' onSubmit={onSubmitCohorts}>
+          {results !== 'Cohorts' && (
+            <button className='searchButton2' type='submit'>
+              <img
+                className='forwardIcon'
+                src='./next.png'
+                alt='searchIcon'
+              ></img>
+            </button>
+          )}
+        </form>
+      )}
+      {props.alreadySelectedCohort && (
+        <button className='searchButton2' onClick={handleSearchAgain}>
+          <img className='forwardIcon' src='./next.png' alt='searchIcon'></img>
+        </button>
+      )}
+
+      {trigger && <Cohorts newSearch={newSearch} setNewSearch={setNewSearch} />}
     </div>
   )
 }
diff --git a/frontend/src/components/CrossQueries/CrossQueries.css b/frontend/src/components/CrossQueries/CrossQueries.css
index d2c567a..a9c08bf 100644
--- a/frontend/src/components/CrossQueries/CrossQueries.css
+++ b/frontend/src/components/CrossQueries/CrossQueries.css
@@ -25,7 +25,7 @@ select {
   border: 2px solid #f3f4ff;
   font-size: medium;
   border-radius: 5px;
-  width: 150px;
+  width: 200px;
   margin-left: 10px;
   height: 22px;
   box-shadow: 1px 2px 2px #cecece;
@@ -33,7 +33,12 @@ select {
 
 .divCrossQueries {
   display: flex;
+  flex-wrap: wrap;
+  align-content: center;
   justify-content: center;
+  align-items: center;
+  width: 100vw;
+  flex-direction: column;
 }
 
 .crossQueriesForm label {
@@ -62,17 +67,17 @@ select {
 h5 {
   color: rgb(209, 66, 66);
   font-weight: bold;
-  width: 150%;
+  width: fit-content;
+  /* width: 150%; */
   display: flex;
   /* align-items: center; */
-  justify-content: flex-start;
+  justify-content: center;
   font-size: 14px;
 }
 
 h5:hover {
   color: rgb(118, 151, 228);
   font-weight: bold;
-  
 }
 
 .preCrossQueries {
@@ -91,7 +96,7 @@ h5:hover {
     font-size: 11px;
     width: 104px;
   }
-  .crossQueriesForm{
+  .crossQueriesForm {
     display: flex;
     flex-direction: column;
     /* justify-content: center; */
@@ -101,4 +106,16 @@ h5:hover {
     align-content: center;
     align-items: flex-start;
   }
+
+.inputId {
+  background: white;
+  border: 2px solid #f3f4ff;
+  font-size: 12px;
+  border-radius: 5px;
+  width: 200px;
+  margin-left: 10px;
+  height: 22px;
+  box-shadow: 1px 2px 2px #cecece;
+}
+
 }
diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css
index e368bcd..ecee78b 100644
--- a/frontend/src/components/Datasets/ResultsDatasets.css
+++ b/frontend/src/components/Datasets/ResultsDatasets.css
@@ -116,9 +116,10 @@
 
 .linksBeacons {
   display: flex;
-  margin-top: -3px;
+  margin-top: 6px;
   margin-bottom: -3px;
 }
+
 .tittle {
   width: 38vw;
   background: #c8d4e6;
diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js
index 1c9a08a..22cbf3f 100644
--- a/frontend/src/components/GenomicVariations/VariantsResults.js
+++ b/frontend/src/components/GenomicVariations/VariantsResults.js
@@ -387,76 +387,120 @@ function VariantsResults (props) {
           //   referenceName={referenceName} start={start} end={end} variantType={variantType} alternateBases={alternateBases} referenceBases={referenceBases} aminoacid={aminoacid} geneID={geneID} />
           //    </div>
 
-          var requestParameters = {}
-
+          var requestParametersSequence = {}
+          var requestParametersRange = {}
+          var requestParametersGene = {}
           if (props.referenceName !== '') {
-            requestParameters['referenceName'] = props.referenceName
+            requestParametersSequence['referenceName'] = props.referenceName
           }
           if (props.referenceName2 !== '') {
-            requestParameters['referenceName'] = props.referenceName2
+            requestParametersRange['referenceName'] = props.referenceName2
           }
           if (props.start !== '') {
-            requestParameters['start'] = props.start
+            requestParametersSequence['start'] = props.start
           }
           if (props.start2 !== '') {
-            requestParameters['start'] = props.start2
+            requestParametersRange['start'] = props.start2
           }
           if (props.end !== '') {
-            requestParameters['end'] = props.end
+            requestParametersRange['end'] = props.end
           }
           if (props.variantType !== '') {
-            requestParameters['variantType'] = props.variantType
+            requestParametersRange['variantType'] = props.variantType
           }
           if (props.variantType2 !== '') {
-            requestParameters['variantType'] = props.variantType2
+            requestParametersGene['variantType'] = props.variantType2
           }
           if (props.alternateBases !== '') {
-            requestParameters['alternateBases'] = props.alternateBases
+            requestParametersSequence['alternateBases'] = props.alternateBases
           }
           if (props.alternateBases2 !== '') {
-            requestParameters['alternateBases'] = props.alternateBases2
+            requestParametersRange['alternateBases'] = props.alternateBases2
           }
           if (props.referenceBases !== '') {
-            requestParameters['referenceBases'] = props.referenceBases
+            requestParametersSequence['referenceBases'] = props.referenceBases
           }
           if (props.referenceBases2 !== '') {
-            requestParameters['referenceBases'] = props.referenceBases2
+            requestParametersRange['referenceBases'] = props.referenceBases2
           }
           if (props.aminoacid !== '') {
-            requestParameters['aminoacidChange'] = props.aminoacid
+            requestParametersSequence['aminoacidChange'] = props.aminoacid
           }
           if (props.aminoacid2 !== '') {
-            requestParameters['aminoacidChange'] = props.aminoacid2
+            requestParametersRange['aminoacidChange'] = props.aminoacid2
           }
           if (props.geneID !== '') {
-            requestParameters['geneId'] = props.geneID
+            requestParametersGene['geneId'] = props.geneID
           }
           if (props.assemblyId !== '') {
-            requestParameters['assemblyId'] = props.assemblyId
+            requestParametersSequence['assemblyId'] = props.assemblyId
           }
           if (props.assemblyId2 !== '') {
-            requestParameters['assemblyId'] = props.assemblyId2
+            requestParametersRange['assemblyId'] = props.assemblyId2
           }
           if (props.assemblyId3 !== '') {
-            requestParameters['assemblyId'] = props.assemblyId3
+            requestParametersGene['assemblyId'] = props.assemblyId3
           }
 
-          var jsonData1 = {
-            meta: {
-              apiVersion: '2.0'
-            },
-            query: {
-              requestParameters: requestParameters,
-              filters: [],
-              includeResultsetResponses: `${props.resultSets}`,
-              pagination: {
-                skip: skip,
-                limit: limit
+          var jsonData1 = {}
+         
+          if (props.sequenceSubmitted) {
+            jsonData1 = {
+              meta: {
+                apiVersion: '2.0'
               },
-              testMode: false,
-              requestedGranularity: 'record'
+              query: {
+                requestParameters: requestParametersSequence,
+                filters: [],
+                includeResultsetResponses: `${props.resultSets}`,
+                pagination: {
+                  skip: skip,
+                  limit: limit
+                },
+                testMode: false,
+                requestedGranularity: 'record'
+              }
             }
           }
+
+          if (props.rangeSubmitted) {
+            jsonData1 = {
+              meta: {
+                apiVersion: '2.0'
+              },
+              query: {
+                requestParameters: requestParametersRange,
+                filters: [],
+                includeResultsetResponses: `${props.resultSets}`,
+                pagination: {
+                  skip: skip,
+                  limit: limit
+                },
+                testMode: false,
+                requestedGranularity: 'record'
+              }
+            }
+          }
+
+          if (props.geneSubmitted) {
+            jsonData1 = {
+              meta: {
+                apiVersion: '2.0'
+              },
+              query: {
+                requestParameters: requestParametersGene,
+                filters: [],
+                includeResultsetResponses: `${props.resultSets}`,
+                pagination: {
+                  skip: skip,
+                  limit: limit
+                },
+                testMode: false,
+                requestedGranularity: 'record'
+              }
+            }
+          }
+
           jsonData1 = JSON.stringify(jsonData1)
 
           let token = null
@@ -591,9 +635,6 @@ function VariantsResults (props) {
                 </button>
               </div>
 
-              {timeOut && error === 'Connection error. Please retry' && (
-                <h3>&nbsp; {error} </h3>
-              )}
               {show3 && logInRequired === false && !error && (
                 <div>
                   <TableResultsVariant
@@ -604,12 +645,10 @@ function VariantsResults (props) {
                   ></TableResultsVariant>
                 </div>
               )}
-              {show3 && logInRequired === true && (
-                <h3>{messageLoginFullResp}</h3>
-              )}
+           
               {show3 && error && <h3>&nbsp; {error} </h3>}
 
-              {show2 && (
+              {show2 && logInRequired === false && !error && (
                 <div>
                   <TableResultsVariant
                     show={'count'}
@@ -621,7 +660,7 @@ function VariantsResults (props) {
                 </div>
               )}
 
-              {show1 && (
+              {show1 && logInRequired === false && !error &&(
                 <div className='containerTableResults'>
                   <TableResultsVariant
                     show={'boolean'}
diff --git a/frontend/src/components/Individuals/IndividualsResults.js b/frontend/src/components/Individuals/IndividualsResults.js
index c6823b0..4fbb422 100644
--- a/frontend/src/components/Individuals/IndividualsResults.js
+++ b/frontend/src/components/Individuals/IndividualsResults.js
@@ -28,7 +28,7 @@ function IndividualsResults (props) {
   const [timeOut, setTimeOut] = useState(false)
 
   const [logInRequired, setLoginRequired] = useState(false)
- 
+
   const [messageLoginFullResp, setMessageLoginFullResp] = useState('')
 
   const [limit, setLimit] = useState(0)
@@ -202,7 +202,6 @@ function IndividualsResults (props) {
             setBoolean(false)
           } else {
             res.data.response.resultSets.forEach((element, index) => {
-             
               if (element.id && element.id !== '') {
                 if (resultsPerDataset.length > 0) {
                   console.log(resultsPerDataset)
@@ -212,7 +211,6 @@ function IndividualsResults (props) {
                       element2[2].push(element.exists)
                       element2[3].push(element.resultsCount)
                     } else {
-                      
                       let arrayResultsPerDataset = [
                         element.beaconId,
                         [element.id],
@@ -284,12 +282,14 @@ function IndividualsResults (props) {
           } else {
             console.log('Querying WITH token')
             const headers = { Authorization: `Bearer ${token}` }
-
+            console.log(headers)
             res = await axios.post(
               configData.API_URL + '/individuals',
               jsonData2,
               { headers: headers }
             )
+            console.log(res)
+            console.log(jsonData2)
           }
           setTimeOut(true)
 
@@ -468,6 +468,8 @@ function IndividualsResults (props) {
               ></TableResultsIndividuals>
             </div>
           )}
+          {show2 && error && <h3>&nbsp; {error} </h3>}
+          {show1 && error && <h3>&nbsp; {error} </h3>}
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
index 7329fee..46adcf8 100644
--- a/frontend/src/components/Layout/Layout.js
+++ b/frontend/src/components/Layout/Layout.js
@@ -22,6 +22,9 @@ import axios from 'axios'
 import ReactModal from 'react-modal'
 
 import IndividualsResults from '../Individuals/IndividualsResults'
+import AnalysesResults from '../Analyses/AnalysesResults'
+import RunsResults from '../Runs/RunsResults'
+
 import CohortsModule from '../Cohorts/CohortsModule'
 
 function Layout (props) {
@@ -99,6 +102,10 @@ function Layout (props) {
   const [assemblyId2, setAssemblyId2] = useState('')
   const [assemblyId3, setAssemblyId3] = useState('')
 
+  const [sequenceSubmitted, setSequenceSub] = useState(false)
+  const [rangeSubmitted, setRangeSub] = useState(false)
+  const [geneSubmitted, setGeneSub] = useState(false)
+
   const [hideForm, setHideForm] = useState(false)
 
   const [state, setstate] = useState({
@@ -286,7 +293,7 @@ function Layout (props) {
         ['sampleOriginType:blood']
       ])
     } else if (props.collection === 'Runs') {
-      setExampleQ([['']])
+      setExampleQ([['OBI:0002048']])
     } else if (props.collection === 'Analyses') {
       setExampleQ([['']])
     }
@@ -487,6 +494,7 @@ function Layout (props) {
   }
 
   const handleSubmit = async e => {
+    setShowVariants(true)
     e.preventDefault()
     setPlaceholder('filtering term comma-separated, ID><=value')
     setIsSub(!isSubmitted)
@@ -529,6 +537,16 @@ function Layout (props) {
             isOpen={popUp}
             onRequestClose={handleCloseModal3}
             shouldCloseOnOverlayClick={true}
+            style={{
+              overlay: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 3,
+                backgroundColor: 'rgba(255, 255, 255, 0.75)'
+              }}}
           >
             <button onClick={handleCloseModal3}>
               <img
@@ -592,13 +610,10 @@ function Layout (props) {
 
         <div className='additionalOptions'>
           <div className='example'>
-            
             {cohorts === false && props.collection !== '' && showBar === true && (
               <div className='bulbExample'>
-            
                 <button className='exampleQueries' onClick={handleExQueries}>
                   Query Examples
-                  
                 </button>
                 <img
                   className='bulbLogo'
@@ -606,7 +621,6 @@ function Layout (props) {
                   alt='bulbIcon'
                 ></img>
                 <div className='examplesQueriesList'>
-                  
                   {exampleQ[0] &&
                     exampleQ.map(result => {
                       return (
@@ -907,6 +921,7 @@ function Layout (props) {
                       className='buttonVariants'
                       type='submit'
                       value='Search'
+                      onClick={() => setSequenceSub(true)}
                     />
                   </div>
                 </section>
@@ -1003,11 +1018,12 @@ function Layout (props) {
                       className='buttonVariants'
                       type='submit'
                       value='Search'
+                      onClick={() => setRangeSub(true)}
                     />
                   </div>
                 </section>
                 <section id='gene' className='tab-panel'>
-                <button
+                  <button
                     className='variantExampleButton'
                     onClick={handleGeneExample}
                     type='button'
@@ -1046,6 +1062,7 @@ function Layout (props) {
                       className='buttonVariants'
                       type='submit'
                       value='Search'
+                      onClick={() => setGeneSub(true)}
                     />
                   </div>
                 </section>
@@ -1060,6 +1077,16 @@ function Layout (props) {
           isOpen={isOpenModal1}
           onRequestClose={handleCloseModal1}
           shouldCloseOnOverlayClick={true}
+          style={{
+            overlay: {
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 3,
+              backgroundColor: 'rgba(255, 255, 255, 0.75)'
+            }}}
         >
           <button onClick={handleCloseModal1}>
             <img
@@ -1075,6 +1102,16 @@ function Layout (props) {
           isOpen={isOpenModal2}
           onRequestClose={handleCloseModal2}
           shouldCloseOnOverlayClick={true}
+          style={{
+            overlay: {
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 3,
+              backgroundColor: 'rgba(255, 255, 255, 0.75)'
+            }}}
         >
           <button onClick={handleCloseModal2}>
             <img
@@ -1136,10 +1173,69 @@ function Layout (props) {
               isSubmitted={isSubmitted}
             />
           </div>
+        )}
+         {isSubmitted && results === 'Analyses' && triggerQuery && (
+          <div>
+            <AnalysesResults
+              query={query}
+              resultSets={resultSet}
+              ID={ID}
+              operator={operator}
+              valueFree={valueFree}
+              descendantTerm={descendantTerm}
+              similarity={similarity}
+              isSubmitted={isSubmitted}
+            />
+          </div>
+        )}
+        {isSubmitted && results === 'Analyses' && !triggerQuery && (
+          <div>
+            <AnalysesResults
+              query={query}
+              resultSets={resultSet}
+              ID={ID}
+              operator={operator}
+              valueFree={valueFree}
+              descendantTerm={descendantTerm}
+              similarity={similarity}
+              isSubmitted={isSubmitted}
+            />
+          </div>
+        )}
+            {isSubmitted && results === 'Runs' && triggerQuery && (
+          <div>
+            <RunsResults
+              query={query}
+              resultSets={resultSet}
+              ID={ID}
+              operator={operator}
+              valueFree={valueFree}
+              descendantTerm={descendantTerm}
+              similarity={similarity}
+              isSubmitted={isSubmitted}
+            />
+          </div>
+        )}
+        {isSubmitted && results === 'Runs' && !triggerQuery && (
+          <div>
+            <RunsResults
+              query={query}
+              resultSets={resultSet}
+              ID={ID}
+              operator={operator}
+              valueFree={valueFree}
+              descendantTerm={descendantTerm}
+              similarity={similarity}
+              isSubmitted={isSubmitted}
+            />
+          </div>
         )}
         {isSubmitted && results === 'Variant' && triggerQuery && (
           <div>
             <VariantsResults
+              geneSubmitted={geneSubmitted}
+              sequenceSubmitted={sequenceSubmitted}
+              rangeSubmitted={rangeSubmitted}
               query={query}
               resultSets={resultSet}
               showResultsVariants={showResultsVariants}
@@ -1170,6 +1266,9 @@ function Layout (props) {
         {isSubmitted && results === 'Variant' && !triggerQuery && (
           <div>
             <VariantsResults
+              geneSubmitted={geneSubmitted}
+              sequenceSubmitted={sequenceSubmitted}
+              rangeSubmitted={rangeSubmitted}
               query={query}
               resultSets={resultSet}
               showResultsVariants={showResultsVariants}
@@ -1200,6 +1299,9 @@ function Layout (props) {
         {!isSubmitted && results === 'Variant' && !triggerQuery && (
           <div>
             <VariantsResults
+              geneSubmitted={geneSubmitted}
+              sequenceSubmitted={sequenceSubmitted}
+              rangeSubmitted={rangeSubmitted}
               query={query}
               resultSets={resultSet}
               showResultsVariants={showResultsVariants}
diff --git a/frontend/src/components/NavBar/Navbar.css b/frontend/src/components/NavBar/Navbar.css
index f21d3ab..644be6b 100644
--- a/frontend/src/components/NavBar/Navbar.css
+++ b/frontend/src/components/NavBar/Navbar.css
@@ -4,7 +4,21 @@
     display: none;
   }
 
-  .userNameSmallScreen{
+  #copydata h1 {
+    text-transform: uppercase;
+    font-size: 10px;
+    margin-left: 7px;
+    margin-top: 5px;
+    width: -moz-fit-content;
+    width: fit-content;
+    margin-bottom: 5px;
+    padding-right: 10px;
+    padding-left: 10px;
+    color: black !important;
+    text-decoration: none !important;
+    font-weight: 400;
+  }
+  .userNameSmallScreen {
     display: none;
   }
   .userName {
@@ -335,7 +349,22 @@
     display: none;
   }
 
-  .userNameSmallScreen{
+  #copydata h1 {
+    text-transform: uppercase;
+    font-size: 10px;
+    margin-left: 7px;
+    margin-top: 5px;
+    width: -moz-fit-content;
+    width: fit-content;
+    margin-bottom: 5px;
+    padding-right: 10px;
+    padding-left: 10px;
+    color: black !important;
+    text-decoration: none !important;
+    font-weight: 400;
+  }
+
+  .userNameSmallScreen {
     display: none;
   }
   .About {
@@ -496,7 +525,6 @@
     justify-content: flex-start;
   }
   .nav4 {
-    
     /* width: 100%; */
     display: flex;
     /* place-content: center flex-start; */
@@ -646,7 +674,7 @@
     margin-top: 21px !important;
   }
 
-  .userNameSmallScreen{
+  .userNameSmallScreen {
     display: flex;
     font-size: 11px;
     width: 100%;
@@ -654,7 +682,7 @@
     color: rgb(138 160 232);
     justify-content: center;
   }
-  .userName{
+  .userName {
     display: none;
   }
   .nav4Container {
@@ -736,10 +764,11 @@
 
   .Individuals2 {
     width: 157px;
-    height: 21px;
+    height: 20px;
     margin-left: 2px;
     background-color: #1abc9c;
     border-radius: 4px;
+    margin-top: 5px;
   }
 
   .Variants2 {
@@ -869,6 +898,20 @@
     display: none;
   }
 
+  #copydata h1 {
+    text-transform: uppercase;
+    font-size: 10px;
+    margin-left: 7px;
+    margin-top: 5px;
+    width: -moz-fit-content;
+    width: fit-content;
+    margin-bottom: 5px;
+    padding-right: 10px;
+    padding-left: 10px;
+    color: black !important;
+    text-decoration: none !important;
+    font-weight: 400;
+  }
   .menuNav2 {
     background-color: #235c94;
     height: 266px;
diff --git a/frontend/src/components/Results/AnalysesResults/TableResultsAnalyses.js b/frontend/src/components/Results/AnalysesResults/TableResultsAnalyses.js
new file mode 100644
index 0000000..4341f66
--- /dev/null
+++ b/frontend/src/components/Results/AnalysesResults/TableResultsAnalyses.js
@@ -0,0 +1,610 @@
+import '../IndividualsResults/TableResultsIndividuals.css'
+import '../../Datasets/ResultsDatasets.css'
+import * as React from 'react'
+import {
+  DataGrid,
+  GridToolbar,
+  selectedGridRowsSelector,
+  gridFilteredSortedRowIdsSelector,
+  GridToolbarContainer,
+  GridToolbarExport
+} from '@mui/x-data-grid'
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+
+function CustomToolbar () {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarExport />
+    </GridToolbarContainer>
+  )
+}
+function TableResultsAnalyses (props) {
+  const [showDatsets, setShowDatasets] = useState(false)
+
+  const [showResults, setShowResults] = useState(false)
+
+  const [arrayBeaconsIds, setArrayBeaconsIds] = useState([])
+  const [rows, setRows] = useState([])
+  const [ids, setIds] = useState([])
+
+  const [beaconsArrayResults, setBeaconsArrayResults] = useState([])
+
+  const [beaconsArrayResultsOrdered, setBeaconsArrayResultsOrdered] = useState(
+    []
+  )
+
+  const [resultsSelected, setResultsSelected] = useState(props.results)
+  const [resultsSelectedFinal, setResultsSelectedFinal] = useState([])
+
+  const [openDatasetArray, setOpenDataset] = useState([])
+
+  const [editable, setEditable] = useState([])
+
+  const [trigger, setTrigger] = useState(false)
+  const [trigger2, setTrigger2] = useState(false)
+
+  const [triggerArray, setTriggerArray] = useState([])
+
+  const getSelectedRowsToExport = ({ apiRef }) => {
+    const selectedRowIds = selectedGridRowsSelector(apiRef)
+    if (selectedRowIds.size > 0) {
+      return Array.from(selectedRowIds.keys())
+    }
+
+    return gridFilteredSortedRowIdsSelector(apiRef)
+  }
+
+  const handleClickDatasets = e => {
+    console.log(e)
+
+    openDatasetArray[e] = true
+    console.log(openDatasetArray)
+    triggerArray[e] = true
+    console.log(triggerArray)
+    setTrigger(!trigger)
+  }
+
+  let columns = [
+    {
+      field: 'id',
+      headerName: 'Row',
+      width: 100,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'analysisId',
+      headerName: 'Analysis ID',
+      width: 150,
+      headerClassName: 'super-app-theme--header',
+      renderCell: params => (
+        <Link to={`cross-queries/${params.row.analysisId}`}>
+          {params.row.analysisId}
+        </Link>
+      )
+    },
+    {
+      field: 'Beacon',
+      headerName: 'Beacon ID',
+      width: 340,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'runId',
+      headerName: 'Run ID',
+      width: 150,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'biosampleId',
+      headerName: 'Biosample ID',
+      width: 150,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'individualId',
+      headerName: 'Individual ID',
+      width: 150,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'analysisDate',
+      headerName: 'Analysis date',
+      width: 240,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'pipelineName',
+      headerName: 'Pipeline name',
+      width: 250,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'pipelineRef',
+      headerName: 'Pipeline Ref',
+      width: 350,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'aligner',
+      headerName: 'Aligner',
+      width: 350,
+      headerClassName: 'super-app-theme--header',
+      cellClass: 'pre'
+    },
+    {
+      field: 'variantCaller',
+      headerName: 'Variant Caller',
+      width: 200,
+      headerClassName: 'super-app-theme--header'
+    }
+  ]
+  const handleSeeResults = e => {
+    resultsSelected.forEach(element => {
+      if (element[0] === e) {
+        resultsSelectedFinal.push(element)
+      }
+    })
+    setShowResults(true)
+    setShowDatasets(false)
+    setTrigger(true)
+  }
+
+  function getOccurrence (array, value) {
+    var count = 0
+    array.forEach(v => v === value && count++)
+    return count
+  }
+
+  useEffect(() => {
+    setRows([])
+    setIds([])
+
+    resultsSelected.forEach((element, index) => {
+      arrayBeaconsIds.push(element[0])
+    })
+    resultsSelectedFinal.forEach((element, index) => {
+      if (element[1] !== undefined) {
+        console.log(element[0])
+
+        let analysisDateJson = []
+        if (
+          element[1].analysisDate !== '' &&
+          element[1].analysisDate !== undefined
+        ) {
+          if (typeof element[1].analysisDate === 'string') {
+            analysisDateJson = element[1].analysisDate
+          } else {
+            analysisDateJson = element[1].analysisDate.toString()
+          }
+        }
+
+        let pipelineNameJson = []
+        if (
+          element[1].pipelineName !== '' &&
+          element[1].pipelineName !== undefined
+        ) {
+          if (typeof element[1].pipelineName === 'string') {
+            pipelineNameJson = element[1].pipelineName
+          }
+        }
+
+        let pipelineRefJson = []
+
+        if (
+          element[1].pipelineRef !== '' &&
+          element[1].pipelineRef !== undefined
+        ) {
+          if (typeof element[1].pipelineRef === 'object') {
+            element[1].pipelineRef.forEach(element2 => {
+              pipelineRefJson.push(
+                JSON.stringify(element2, null, 2)
+                  .replaceAll('[', '')
+                  .replaceAll(']', '')
+                  .replaceAll('{', '')
+                  .replaceAll('}', '')
+                  .replaceAll(',', '')
+                  .replaceAll(' ,', '')
+                  .replaceAll(', ', '')
+                  .replaceAll('"', '')
+              )
+            })
+            pipelineRefJson = pipelineRefJson.toString()
+            pipelineRefJson = pipelineRefJson
+              .replaceAll(', ', ',')
+              .replaceAll(' ,', ',')
+            pipelineRefJson = pipelineRefJson.replaceAll(',', '')
+          } else {
+            pipelineRefJson = JSON.stringify(element[1].pipelineRef, null, 2)
+              .replaceAll('[', '')
+              .replaceAll(']', '')
+              .replaceAll('{', '')
+              .replaceAll('}', '')
+              .replaceAll(',', '')
+              .replaceAll(' ,', '')
+              .replaceAll(', ', '')
+              .replaceAll('"', '')
+            pipelineRefJson = pipelineRefJson.toString()
+            pipelineRefJson = pipelineRefJson
+              .replaceAll(', ', ',')
+              .replaceAll(' ,', ',')
+            pipelineRefJson = pipelineRefJson.replaceAll(',', '')
+          }
+        }
+
+        let alignerJson = []
+
+        if (element[1].aligner !== '' && element[1].aligner !== undefined) {
+          if (typeof element[1].aligner === 'object') {
+            element[1].aligner.forEach(element2 => {
+              alignerJson.push(
+                JSON.stringify(element2, null, 2)
+                  .replaceAll('[', '')
+                  .replaceAll(']', '')
+                  .replaceAll('{', '')
+                  .replaceAll('}', '')
+                  .replaceAll(',', '')
+                  .replaceAll(' ,', '')
+                  .replaceAll(', ', '')
+                  .replaceAll('"', '')
+              )
+            })
+            alignerJson = alignerJson.toString()
+            alignerJson = alignerJson
+              .replaceAll(', ', ',')
+              .replaceAll(' ,', ',')
+            alignerJson = alignerJson.replaceAll(',', '')
+          } else {
+            alignerJson = JSON.stringify(element[1].aligner, null, 2)
+              .replaceAll('[', '')
+              .replaceAll(']', '')
+              .replaceAll('{', '')
+              .replaceAll('}', '')
+              .replaceAll(',', '')
+              .replaceAll(' ,', '')
+              .replaceAll(', ', '')
+              .replaceAll('"', '')
+            alignerJson = alignerJson.toString()
+            alignerJson = alignerJson
+              .replaceAll(', ', ',')
+              .replaceAll(' ,', ',')
+            alignerJson = alignerJson.replaceAll(',', '')
+          }
+        }
+
+        let variantCallerJson = []
+
+        if (
+          element[1].variantCaller !== '' &&
+          element[1].variantCaller !== undefined
+        ) {
+          if (typeof element[1].variantCaller === 'object') {
+            element[1].variantCaller.forEach(element2 => {
+              variantCallerJson.push(
+                JSON.stringify(element2, null, 2)
+                  .replaceAll('[', '')
+                  .replaceAll(']', '')
+                  .replaceAll('{', '')
+                  .replaceAll('}', '')
+                  .replaceAll(',', '')
+                  .replaceAll(' ,', '')
+                  .replaceAll(', ', '')
+                  .replaceAll('"', '')
+              )
+            })
+            variantCallerJson = variantCallerJson.toString()
+            variantCallerJson = variantCallerJson
+              .replaceAll(', ', ',')
+              .replaceAll(' ,', ',')
+            variantCallerJson = variantCallerJson.replaceAll(',', '')
+          } else {
+            variantCallerJson = JSON.stringify(
+              element[1].variantCaller,
+              null,
+              2
+            )
+              .replaceAll('[', '')
+              .replaceAll(']', '')
+              .replaceAll('{', '')
+              .replaceAll('}', '')
+              .replaceAll(',', '')
+              .replaceAll(' ,', '')
+              .replaceAll(', ', '')
+              .replaceAll('"', '')
+            variantCallerJson = variantCallerJson.toString()
+            variantCallerJson = variantCallerJson
+              .replaceAll(', ', ',')
+              .replaceAll(' ,', ',')
+            variantCallerJson = variantCallerJson.replaceAll(',', '')
+          }
+        }
+
+        var myObjRows = new Object()
+        myObjRows.id = index
+        if (element[1].id !== '') {
+          myObjRows.analysisId = element[1].id
+        }
+        if (element[1].runId !== '') {
+          myObjRows.runId = element[1].runId
+        }
+        myObjRows.Beacon = element[0]
+        if (element[1].biosampleId !== '') {
+          myObjRows.biosampleId = element[1].biosampleId
+        }
+        if (element[1].individualId !== '') {
+          myObjRows.individualId = element[1].individualId
+        }
+      
+        if (analysisDateJson !== '') {
+          myObjRows.analysisDate = analysisDateJson
+        }
+        if (pipelineNameJson !== '') {
+          myObjRows.pipelineName = pipelineNameJson
+        }
+        if (pipelineRefJson !== '') {
+          myObjRows.pipelineRef = pipelineRefJson
+        }
+        if (alignerJson !== '') {
+          myObjRows.aligner = alignerJson
+        }
+        if (variantCallerJson !== '') {
+          myObjRows.variantCaller = variantCallerJson
+        }
+
+        rows.push(myObjRows)
+        console.log(rows)
+
+        if (index === resultsSelectedFinal.length - 1) {
+          setEditable(rows.map(o => ({ ...o })))
+
+          setTrigger2(true)
+        }
+      }
+    })
+  }, [trigger, resultsSelectedFinal])
+
+  useEffect(() => {
+    console.log(props.resultsPerDataset)
+    console.log(props.beaconsList)
+    console.log(arrayBeaconsIds)
+    let count = 0
+    props.beaconsList.forEach((element2, index2) => {
+      count = getOccurrence(arrayBeaconsIds, element2.meta.beaconId)
+      if (count > 0) {
+        beaconsArrayResults.push([element2, count, true])
+      } else {
+        beaconsArrayResults.push([element2, count, false])
+      }
+    })
+    beaconsArrayResults.forEach(element => {
+      if (element[2] === true) {
+        beaconsArrayResultsOrdered.push(element)
+      }
+    })
+    beaconsArrayResults.forEach(element => {
+      if (element[2] === false) {
+        beaconsArrayResultsOrdered.push(element)
+      }
+    })
+
+    setShowDatasets(true)
+    console.log(props.resultsNotPerDataset)
+    console.log(props.resultsPerDataset)
+  }, [])
+
+  return (
+    <div className='containerBeaconResults'>
+      {showDatsets === true &&
+        beaconsArrayResultsOrdered.length > 0 &&
+        beaconsArrayResultsOrdered.map(result => {
+          return (
+            <>
+              {props.show !== 'full' && (
+                <>
+                  {props.resultsPerDataset.map((element, index) => {
+                    return (
+                      <>
+                        {element[0] === result[0].meta.beaconId && (
+                          <div className='datasetCardResults'>
+                            <div className='tittleResults'>
+                              <div className='tittle4'>
+                                <img
+                                  className='logoBeacon'
+                                  src={result[0].response.organization.logoUrl}
+                                  alt={result[0].meta.beaconId}
+                                />
+                                <h4>{result[0].response.organization.name}</h4>
+                              </div>
+
+                              {element[1].map((datasetObject, indexDataset) => {
+                                return (
+                                  <div className='resultSetsContainer'>
+                                    <button
+                                      className='resultSetsButton'
+                                      onClick={() =>
+                                        handleClickDatasets([
+                                          index,
+                                          indexDataset
+                                        ])
+                                      }
+                                    >
+                                      <h7>
+                                        {datasetObject.replaceAll('_', ' ')}
+                                      </h7>
+                                    </button>
+                                    {openDatasetArray[[index, indexDataset]] ===
+                                      true &&
+                                      triggerArray[[index, indexDataset]] ===
+                                        true &&
+                                      element[2][indexDataset] === true &&
+                                      props.show === 'boolean' && (
+                                        <h6>FOUND</h6>
+                                      )}
+                                    {openDatasetArray[[index, indexDataset]] ===
+                                      true &&
+                                      triggerArray[[index, indexDataset]] ===
+                                        true &&
+                                      element[2][indexDataset] === false &&
+                                      props.show === 'boolean' && (
+                                        <h5>NOT FOUND</h5>
+                                      )}
+                                    {props.show === 'count' &&
+                                      triggerArray[[index, indexDataset]] ===
+                                        true && (
+                                        <h6>
+                                          {element[3][indexDataset]} RESULTS
+                                        </h6>
+                                      )}
+                                  </div>
+                                )
+                              })}
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    )
+                  })}
+
+                  {props.resultsNotPerDataset.map(element => {
+                    return (
+                      <>
+                        {result[2] === true &&
+                          props.show === 'boolean' &&
+                          element[0] === result[0].meta.beaconId && (
+                            <div className='datasetCardResults'>
+                              <div className='tittleResults'>
+                                <div className='tittle4'>
+                                  <img
+                                    className='logoBeacon'
+                                    src={
+                                      result[0].response.organization.logoUrl
+                                    }
+                                    alt={result[0].meta.beaconId}
+                                  />
+                                  <h4>
+                                    {result[0].response.organization.name}
+                                  </h4>
+                                </div>
+
+                                <div className='resultSetsContainer'>
+                                  <h7>No datasets available</h7>
+                                  <h6>FOUND </h6>
+                                </div>
+                              </div>
+                            </div>
+                          )}
+                        {result[2] === false &&
+                          props.show === 'boolean' &&
+                          element[0] === result[0].meta.beaconId && (
+                            <div className='datasetCardResults'>
+                              <div className='tittleResults'>
+                                <div className='tittle4'>
+                                  <img
+                                    className='logoBeacon'
+                                    src={
+                                      result[0].response.organization.logoUrl
+                                    }
+                                    alt={result[0].meta.beaconId}
+                                  />
+                                  <h4>
+                                    {result[0].response.organization.name}
+                                  </h4>
+                                </div>
+                                <div className='resultSetsContainer'>
+                                  <h7>No datasets available</h7>
+                                  <h5 className='buttonResults'>NOT FOUND</h5>
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                        {props.show === 'count' &&
+                          element[0] === result[0].meta.beaconId && (
+                            <div className='datasetCardResults'>
+                              <div className='tittleResults'>
+                                <div className='tittle4'>
+                                  <img
+                                    className='logoBeacon'
+                                    src={
+                                      result[0].response.organization.logoUrl
+                                    }
+                                    alt={result[0].meta.beaconId}
+                                  />
+                                  <h4>
+                                    {result[0].response.organization.name}
+                                  </h4>
+                                </div>
+                                <div className='resultSetsContainer'>
+                                  <h7>No datasets available</h7>
+                                  <h6 className='buttonResults'>
+                                    {result[1]} results
+                                  </h6>
+                                </div>
+                                <button
+                                  className='buttonResults'
+                                  onClick={() => {
+                                    handleSeeResults(result[0].meta.beaconId)
+                                  }}
+                                >
+                                  {result[2] === true &&
+                                    props.show === 'full' && (
+                                      <h7>See results</h7>
+                                    )}
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                      </>
+                    )
+                  })}
+                </>
+              )}
+              {props.show === 'full' && result[2] === true && (
+                <div className='datasetCardResults'>
+                  <div className='tittleResults'>
+                    <div className='tittle4'>
+                      <img
+                        className='logoBeacon'
+                        src={result[0].response.organization.logoUrl}
+                        alt={result[0].meta.beaconId}
+                      />
+                      <h2>{result[0].response.organization.name}</h2>
+                    </div>
+                    <div className='seeResultsContainer'>
+                      <button
+                        className='buttonResults'
+                        onClick={() => {
+                          handleSeeResults(result[0].meta.beaconId)
+                        }}
+                      >
+                        {result[2] === true && props.show === 'full' && (
+                          <h7>See results</h7>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </>
+          )
+        })}
+
+      {showDatsets === false && showResults === true && trigger2 === true && (
+        <DataGrid
+          getRowHeight={() => 'auto'}
+          checkboxSelection
+          columns={columns}
+          rows={editable}
+          slots={{ toolbar: CustomToolbar }}
+          slotProps={{
+            toolbar: {
+              printOptions: { getRowsToExport: getSelectedRowsToExport }
+            }
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default TableResultsAnalyses
diff --git a/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js b/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js
index fde31f2..de25e47 100644
--- a/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js
+++ b/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js
@@ -233,8 +233,10 @@ function TableResultsBiosamples (props) {
           if (element[1].biosampleStatus.id !== undefined) {
             biosampleStatus_id = element[1].biosampleStatus.id
           }
+          if (element[1].biosampleStatus.label !== undefined) {
+            biosampleStatus_label = element[1].biosampleStatus.label
+          }
 
-          biosampleStatus_label = element[1].biosampleStatus.label
           stringBiosampleStatus = `${biosampleStatus_id} / ${biosampleStatus_label} `
         } else {
           stringBiosampleStatus = ''
@@ -244,7 +246,10 @@ function TableResultsBiosamples (props) {
         let sampleOriginType_label = ''
         let stringSampleOriginType = ''
 
-        if (element[1].sampleOriginType !== '') {
+        if (
+          element[1].sampleOriginType !== '' &&
+          element[1].sampleOriginType !== undefined
+        ) {
           sampleOriginType_id = element[1].sampleOriginType.id
           sampleOriginType_label = element[1].sampleOriginType.label
           stringSampleOriginType = `${element[1].sampleOriginType.label} / ${element[1].sampleOriginType.id}`
@@ -274,6 +279,8 @@ function TableResultsBiosamples (props) {
         ) {
           if (typeof element[1].collectionDate === 'string') {
             collectionDateJson = element[1].collectionDate
+          } else {
+            collectionDateJson = element[1].collectionDate.toString()
           }
         }
 
diff --git a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css
index 558e3af..e5ddd23 100644
--- a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css
+++ b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css
@@ -12,6 +12,11 @@
   overflow-inline: scroll;
 }
 
+.MuiDataGrid-cell--withRenderer a {
+  text-decoration: underline;
+  color: #5c5cb5;
+}
+
 .resultSetsButton {
   display: flex;
   align-items: center;
@@ -182,7 +187,6 @@ h1 {
   height: 100vh;
 }
 
-
 .containerResultsVariants {
   display: flex;
   align-content: center;
@@ -208,9 +212,11 @@ h1 {
 
   .containerResultsVariants {
     display: flex;
-    align-content: center;
+    /* align-content: center; */
     align-items: center;
     justify-content: center;
+    width: 100vw;
+    flex-direction: column;
   }
 
   .containerBeaconResultsVariants {
@@ -259,7 +265,7 @@ h1 {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: 34px;
+    margin-top: 27px;
     font-size: 12px;
     border-radius: 2px;
     padding: 3px;
diff --git a/frontend/src/components/Results/RunsResults/TableResultsRuns.js b/frontend/src/components/Results/RunsResults/TableResultsRuns.js
new file mode 100644
index 0000000..a68d9e2
--- /dev/null
+++ b/frontend/src/components/Results/RunsResults/TableResultsRuns.js
@@ -0,0 +1,535 @@
+import '../IndividualsResults/TableResultsIndividuals.css'
+import '../../Datasets/ResultsDatasets.css'
+import * as React from 'react'
+import {
+  DataGrid,
+  GridToolbar,
+  selectedGridRowsSelector,
+  gridFilteredSortedRowIdsSelector,
+  GridToolbarContainer,
+  GridToolbarExport
+} from '@mui/x-data-grid'
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+
+function CustomToolbar () {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarExport />
+    </GridToolbarContainer>
+  )
+}
+function TableResultsRuns (props) {
+  const [showDatsets, setShowDatasets] = useState(false)
+
+  const [showResults, setShowResults] = useState(false)
+
+  const [arrayBeaconsIds, setArrayBeaconsIds] = useState([])
+  const [rows, setRows] = useState([])
+  const [ids, setIds] = useState([])
+
+  const [beaconsArrayResults, setBeaconsArrayResults] = useState([])
+
+  const [beaconsArrayResultsOrdered, setBeaconsArrayResultsOrdered] = useState(
+    []
+  )
+
+  const [resultsSelected, setResultsSelected] = useState(props.results)
+  const [resultsSelectedFinal, setResultsSelectedFinal] = useState([])
+
+  const [openDatasetArray, setOpenDataset] = useState([])
+
+  const [editable, setEditable] = useState([])
+
+  const [trigger, setTrigger] = useState(false)
+  const [trigger2, setTrigger2] = useState(false)
+
+  const [triggerArray, setTriggerArray] = useState([])
+
+  const getSelectedRowsToExport = ({ apiRef }) => {
+    const selectedRowIds = selectedGridRowsSelector(apiRef)
+    if (selectedRowIds.size > 0) {
+      return Array.from(selectedRowIds.keys())
+    }
+
+    return gridFilteredSortedRowIdsSelector(apiRef)
+  }
+
+  const handleClickDatasets = e => {
+    console.log(e)
+
+    openDatasetArray[e] = true
+    console.log(openDatasetArray)
+    triggerArray[e] = true
+    console.log(triggerArray)
+    setTrigger(!trigger)
+  }
+
+  let columns = [
+    {
+      field: 'id',
+      headerName: 'Row',
+      width: 100,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'runId',
+      headerName: 'Run ID',
+      width: 150,
+      headerClassName: 'super-app-theme--header',
+      renderCell: params => (
+        <Link to={`cross-queries/${params.row.runId}`}>{params.row.runId}</Link>
+      )
+    },
+    {
+      field: 'Beacon',
+      headerName: 'Beacon ID',
+      width: 340,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'biosampleId',
+      headerName: 'Biosample ID',
+      width: 150,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'individualId',
+      headerName: 'Individual ID',
+      width: 150,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'runDate',
+      headerName: 'Run date',
+      width: 240,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'librarySource',
+      headerName: 'Library source',
+      width: 250,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'librarySelection',
+      headerName: 'Library selection',
+      width: 350,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'libraryStrategy',
+      headerName: 'Library strategy',
+      width: 350,
+      headerClassName: 'super-app-theme--header',
+      cellClass: 'pre'
+    },
+    {
+      field: 'libraryLayout',
+      headerName: 'Library layout',
+      width: 200,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'platform',
+      headerName: 'Platform',
+      width: 200,
+      headerClassName: 'super-app-theme--header'
+    },
+    {
+      field: 'platformModel',
+      headerName: 'Platform model',
+      width: 200,
+      headerClassName: 'super-app-theme--header'
+    }
+  ]
+  const handleSeeResults = e => {
+    resultsSelected.forEach(element => {
+      if (element[0] === e) {
+        resultsSelectedFinal.push(element)
+      }
+    })
+    setShowResults(true)
+    setShowDatasets(false)
+    setTrigger(true)
+  }
+
+  function getOccurrence (array, value) {
+    var count = 0
+    array.forEach(v => v === value && count++)
+    return count
+  }
+
+  useEffect(() => {
+    setRows([])
+    setIds([])
+
+    resultsSelected.forEach((element, index) => {
+      arrayBeaconsIds.push(element[0])
+    })
+    resultsSelectedFinal.forEach((element, index) => {
+      if (element[1] !== undefined) {
+        console.log(element[0])
+
+        let runDateJson = []
+        if (element[1].runDate !== '' && element[1].runDate !== undefined) {
+          if (typeof element[1].runDate === 'string') {
+            runDateJson = element[1].runDate
+          } else {
+            runDateJson = element[1].runDate.toString()
+          }
+        }
+
+        let librarySource_id = ''
+        let librarySource_label = ''
+        let stringLibrarySource = ''
+
+        if (element[1].librarySource !== '') {
+          librarySource_id = element[1].librarySource.id
+          librarySource_label = element[1].librarySource.label
+          stringLibrarySource = `${element[1].librarySource.label} / ${element[1].librarySource.id}`
+        } else {
+          stringLibrarySource = ''
+        }
+
+        let librarySelectionJson = []
+        if (
+          element[1].librarySelection !== '' &&
+          element[1].librarySelection !== undefined
+        ) {
+          if (typeof element[1].librarySelection === 'string') {
+            librarySelectionJson = element[1].librarySelection
+          }
+        }
+        let libraryStrategyJson = []
+        if (
+          element[1].libraryStrategy !== '' &&
+          element[1].libraryStrategy !== undefined
+        ) {
+          if (typeof element[1].libraryStrategy === 'string') {
+            libraryStrategyJson = element[1].libraryStrategy
+          }
+        }
+
+        let libraryLayoutJson = []
+
+        if (
+          element[1].libraryLayout !== '' &&
+          element[1].libraryLayout !== undefined
+        ) {
+          if (typeof element[1].libraryLayout === 'string') {
+            libraryLayoutJson = element[1].libraryLayout
+          }
+        }
+
+        let platformJson = []
+
+        if (element[1].platform !== '' && element[1].platform !== undefined) {
+          if (typeof element[1].platform === 'string') {
+            platformJson = element[1].platform
+          }
+        }
+
+        let platformModel_id = ''
+        let platformModel_label = ''
+        let stringPlatformModel = ''
+
+        if (element[1].platformModel !== '') {
+          platformModel_id = element[1].platformModel.id
+          platformModel_label = element[1].platformModel.label
+          stringPlatformModel = `${element[1].platformModel.label} / ${element[1].platformModel.id}`
+        } else {
+          stringPlatformModel = ''
+        }
+        var myObjRows = new Object()
+        myObjRows.id = index
+        if (element[1].id !== '') {
+          myObjRows.runId = element[1].id
+        }
+        myObjRows.Beacon = element[0]
+        if (element[1].biosampleId !== '') {
+          myObjRows.biosampleId = element[1].biosampleId
+        }
+        if (element[1].individualId !== '') {
+          myObjRows.individualId = element[1].individualId
+        }
+
+        if (runDateJson !== '') {
+          myObjRows.runDate = runDateJson
+        }
+        if (stringLibrarySource !== '') {
+          myObjRows.librarySource = stringLibrarySource
+        }
+        if (librarySelectionJson !== '') {
+          myObjRows.librarySelection = librarySelectionJson
+        }
+        if (libraryStrategyJson !== '') {
+          myObjRows.libraryStrategy = libraryStrategyJson
+        }
+        if (libraryLayoutJson !== '') {
+          myObjRows.libraryLayout = libraryLayoutJson
+        }
+        if (platformJson !== '') {
+          myObjRows.platform = platformJson
+        }
+        if (stringPlatformModel !== '') {
+          myObjRows.platformModel= stringPlatformModel
+        }
+
+        rows.push(myObjRows)
+        console.log(rows)
+
+        if (index === resultsSelectedFinal.length - 1) {
+          setEditable(rows.map(o => ({ ...o })))
+
+          setTrigger2(true)
+        }
+      }
+    })
+  }, [trigger, resultsSelectedFinal])
+
+  useEffect(() => {
+    console.log(props.resultsPerDataset)
+    console.log(props.beaconsList)
+    console.log(arrayBeaconsIds)
+    let count = 0
+    props.beaconsList.forEach((element2, index2) => {
+      count = getOccurrence(arrayBeaconsIds, element2.meta.beaconId)
+      if (count > 0) {
+        beaconsArrayResults.push([element2, count, true])
+      } else {
+        beaconsArrayResults.push([element2, count, false])
+      }
+    })
+    beaconsArrayResults.forEach(element => {
+      if (element[2] === true) {
+        beaconsArrayResultsOrdered.push(element)
+      }
+    })
+    beaconsArrayResults.forEach(element => {
+      if (element[2] === false) {
+        beaconsArrayResultsOrdered.push(element)
+      }
+    })
+
+    setShowDatasets(true)
+    console.log(props.resultsNotPerDataset)
+    console.log(props.resultsPerDataset)
+  }, [])
+
+  return (
+    <div className='containerBeaconResults'>
+      {showDatsets === true &&
+        beaconsArrayResultsOrdered.length > 0 &&
+        beaconsArrayResultsOrdered.map(result => {
+          return (
+            <>
+              {props.show !== 'full' && (
+                <>
+                  {props.resultsPerDataset.map((element, index) => {
+                    return (
+                      <>
+                        {element[0] === result[0].meta.beaconId && (
+                          <div className='datasetCardResults'>
+                            <div className='tittleResults'>
+                              <div className='tittle4'>
+                                <img
+                                  className='logoBeacon'
+                                  src={result[0].response.organization.logoUrl}
+                                  alt={result[0].meta.beaconId}
+                                />
+                                <h4>{result[0].response.organization.name}</h4>
+                              </div>
+
+                              {element[1].map((datasetObject, indexDataset) => {
+                                return (
+                                  <div className='resultSetsContainer'>
+                                    <button
+                                      className='resultSetsButton'
+                                      onClick={() =>
+                                        handleClickDatasets([
+                                          index,
+                                          indexDataset
+                                        ])
+                                      }
+                                    >
+                                      <h7>
+                                        {datasetObject.replaceAll('_', ' ')}
+                                      </h7>
+                                    </button>
+                                    {openDatasetArray[[index, indexDataset]] ===
+                                      true &&
+                                      triggerArray[[index, indexDataset]] ===
+                                        true &&
+                                      element[2][indexDataset] === true &&
+                                      props.show === 'boolean' && (
+                                        <h6>FOUND</h6>
+                                      )}
+                                    {openDatasetArray[[index, indexDataset]] ===
+                                      true &&
+                                      triggerArray[[index, indexDataset]] ===
+                                        true &&
+                                      element[2][indexDataset] === false &&
+                                      props.show === 'boolean' && (
+                                        <h5>NOT FOUND</h5>
+                                      )}
+                                    {props.show === 'count' &&
+                                      triggerArray[[index, indexDataset]] ===
+                                        true && (
+                                        <h6>
+                                          {element[3][indexDataset]} RESULTS
+                                        </h6>
+                                      )}
+                                  </div>
+                                )
+                              })}
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    )
+                  })}
+
+                  {props.resultsNotPerDataset.map(element => {
+                    return (
+                      <>
+                        {result[2] === true &&
+                          props.show === 'boolean' &&
+                          element[0] === result[0].meta.beaconId && (
+                            <div className='datasetCardResults'>
+                              <div className='tittleResults'>
+                                <div className='tittle4'>
+                                  <img
+                                    className='logoBeacon'
+                                    src={
+                                      result[0].response.organization.logoUrl
+                                    }
+                                    alt={result[0].meta.beaconId}
+                                  />
+                                  <h4>
+                                    {result[0].response.organization.name}
+                                  </h4>
+                                </div>
+
+                                <div className='resultSetsContainer'>
+                                  <h7>No datasets available</h7>
+                                  <h6>FOUND </h6>
+                                </div>
+                              </div>
+                            </div>
+                          )}
+                        {result[2] === false &&
+                          props.show === 'boolean' &&
+                          element[0] === result[0].meta.beaconId && (
+                            <div className='datasetCardResults'>
+                              <div className='tittleResults'>
+                                <div className='tittle4'>
+                                  <img
+                                    className='logoBeacon'
+                                    src={
+                                      result[0].response.organization.logoUrl
+                                    }
+                                    alt={result[0].meta.beaconId}
+                                  />
+                                  <h4>
+                                    {result[0].response.organization.name}
+                                  </h4>
+                                </div>
+                                <div className='resultSetsContainer'>
+                                  <h7>No datasets available</h7>
+                                  <h5 className='buttonResults'>NOT FOUND</h5>
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                        {props.show === 'count' &&
+                          element[0] === result[0].meta.beaconId && (
+                            <div className='datasetCardResults'>
+                              <div className='tittleResults'>
+                                <div className='tittle4'>
+                                  <img
+                                    className='logoBeacon'
+                                    src={
+                                      result[0].response.organization.logoUrl
+                                    }
+                                    alt={result[0].meta.beaconId}
+                                  />
+                                  <h4>
+                                    {result[0].response.organization.name}
+                                  </h4>
+                                </div>
+                                <div className='resultSetsContainer'>
+                                  <h7>No datasets available</h7>
+                                  <h6 className='buttonResults'>
+                                    {result[1]} results
+                                  </h6>
+                                </div>
+                                <button
+                                  className='buttonResults'
+                                  onClick={() => {
+                                    handleSeeResults(result[0].meta.beaconId)
+                                  }}
+                                >
+                                  {result[2] === true &&
+                                    props.show === 'full' && (
+                                      <h7>See results</h7>
+                                    )}
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                      </>
+                    )
+                  })}
+                </>
+              )}
+              {props.show === 'full' && result[2] === true && (
+                <div className='datasetCardResults'>
+                  <div className='tittleResults'>
+                    <div className='tittle4'>
+                      <img
+                        className='logoBeacon'
+                        src={result[0].response.organization.logoUrl}
+                        alt={result[0].meta.beaconId}
+                      />
+                      <h2>{result[0].response.organization.name}</h2>
+                    </div>
+                    <div className='seeResultsContainer'>
+                      <button
+                        className='buttonResults'
+                        onClick={() => {
+                          handleSeeResults(result[0].meta.beaconId)
+                        }}
+                      >
+                        {result[2] === true && props.show === 'full' && (
+                          <h7>See results</h7>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </>
+          )
+        })}
+
+      {showDatsets === false && showResults === true && trigger2 === true && (
+        <DataGrid
+          getRowHeight={() => 'auto'}
+          checkboxSelection
+          columns={columns}
+          rows={editable}
+          slots={{ toolbar: CustomToolbar }}
+          slotProps={{
+            toolbar: {
+              printOptions: { getRowsToExport: getSelectedRowsToExport }
+            }
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+export default TableResultsRuns
diff --git a/frontend/src/components/Runs/RunsResults.js b/frontend/src/components/Runs/RunsResults.js
new file mode 100644
index 0000000..ef33f15
--- /dev/null
+++ b/frontend/src/components/Runs/RunsResults.js
@@ -0,0 +1,477 @@
+import '../Individuals/Individuals.css'
+import '../../App.css'
+import TableResultsRuns from '../Results/RunsResults/TableResultsRuns'
+import { useState, useEffect } from 'react'
+import axios from 'axios'
+import { AuthContext } from '../context/AuthContext'
+import { useAuth } from 'oidc-react'
+import configData from '../../config.json'
+import { useContext } from 'react'
+
+function RunsResults (props) {
+  const [showLayout, setShowLayout] = useState(false)
+
+  const [beaconsList, setBeaconsList] = useState([])
+
+  const [error, setError] = useState(false)
+
+  const [numberResults, setNumberResults] = useState(0)
+  const [boolean, setBoolean] = useState(false)
+  const [results, setResults] = useState([])
+  const [show1, setShow1] = useState(false)
+  const [show2, setShow2] = useState(false)
+  const [show3, setShow3] = useState(false)
+
+  const [resultsPerDataset, setResultsDataset] = useState([])
+  const [resultsNotPerDataset, setResultsNotPerDataset] = useState([])
+
+  const [timeOut, setTimeOut] = useState(false)
+
+  const [logInRequired, setLoginRequired] = useState(false)
+
+  const [messageLoginFullResp, setMessageLoginFullResp] = useState('')
+
+  const [limit, setLimit] = useState(0)
+  const [skip, setSkip] = useState(0)
+
+  const [skipTrigger, setSkipTrigger] = useState(0)
+  const [limitTrigger, setLimitTrigger] = useState(0)
+
+  const [queryArray, setQueryArray] = useState([])
+  const [arrayFilter, setArrayFilter] = useState([])
+
+  const { getStoredToken, authenticateUser } = useContext(AuthContext)
+  let queryStringTerm = ''
+
+  let res = ''
+
+  const auth = useAuth()
+  let isAuthenticated = auth.userData?.id_token ? true : false
+
+  useEffect(() => {
+    const apiCall = async () => {
+      if (isAuthenticated === false) {
+        authenticateUser()
+        const token = getStoredToken()
+
+        if (token !== 'undefined' && token !== null) {
+          isAuthenticated = true
+        }
+      }
+
+      if (props.query !== null) {
+        if (props.query.includes(',')) {
+          queryStringTerm = props.query.split(',')
+          queryStringTerm.forEach((element, index) => {
+            element = element.trim()
+            if (
+              element.includes('=') ||
+              element.includes('>') ||
+              element.includes('<') ||
+              element.includes('!') ||
+              element.includes('%')
+            ) {
+              if (element.includes('=')) {
+                queryArray[index] = element.split('=')
+                queryArray[index].push('=')
+              } else if (element.includes('>')) {
+                queryArray[index] = element.split('>')
+                queryArray[index].push('>')
+              } else if (element.includes('<')) {
+                queryArray[index] = element.split('<')
+                queryArray[index].push('<')
+              } else if (element.includes('!')) {
+                queryArray[index] = element.split('!')
+                queryArray[index].push('!')
+              } else {
+                queryArray[index] = element.split('%')
+                queryArray[index].push('%')
+              }
+              const alphaNumFilter = {
+                id: queryArray[index][0],
+                operator: queryArray[index][2],
+                value: queryArray[index][1]
+              }
+              arrayFilter.push(alphaNumFilter)
+            } else {
+              const filter2 = {
+                id: element,
+                includeDescendantTerms: props.descendantTerm
+              }
+              arrayFilter.push(filter2)
+            }
+          })
+        } else {
+          if (
+            props.query.includes('=') ||
+            props.query.includes('>') ||
+            props.query.includes('<') ||
+            props.query.includes('!') ||
+            props.query.includes('%')
+          ) {
+            if (props.query.includes('=')) {
+              queryArray[0] = props.query.split('=')
+              queryArray[0].push('=')
+            } else if (props.query.includes('>')) {
+              queryArray[0] = props.query.split('>')
+              queryArray[0].push('>')
+            } else if (props.query.includes('<')) {
+              queryArray[0] = props.query.split('<')
+              queryArray[0].push('<')
+            } else if (props.query.includes('!')) {
+              queryArray[0] = props.query.split('!')
+              queryArray[0].push('!')
+            } else {
+              queryArray[0] = props.query.split('%')
+              queryArray[0].push('%')
+            }
+
+            const alphaNumFilter = {
+              id: queryArray[0][0],
+              operator: queryArray[0][2],
+              value: queryArray[0][1]
+            }
+            arrayFilter.push(alphaNumFilter)
+          } else {
+            const filter = {
+              id: props.query
+            }
+            arrayFilter.push(filter)
+          }
+        }
+      }
+
+      try {
+        let res = await axios.get(configData.API_URL + '/info')
+
+        res.data.responses.forEach(element => {
+          beaconsList.push(element)
+        })
+
+        beaconsList.reverse()
+
+        if (props.query === null) {
+          // show all individuals
+
+          var jsonData1 = {
+            meta: {
+              apiVersion: '2.0'
+            },
+            query: {
+              filters: arrayFilter,
+              includeResultsetResponses: `${props.resultSets}`,
+              pagination: {
+                skip: 0,
+                limit: 0
+              },
+              testMode: false,
+              requestedGranularity: 'record'
+            }
+          }
+          jsonData1 = JSON.stringify(jsonData1)
+
+          let token = null
+          if (auth.userData === null) {
+            token = getStoredToken()
+          } else {
+            token = auth.userData.access_token
+          }
+
+          if (token === null) {
+            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 }
+            )
+          }
+          setTimeOut(true)
+
+          if (
+            res.data.responseSummary.numTotalResults < 1 ||
+            res.data.responseSummary.numTotalResults === undefined
+          ) {
+            setError('ERROR. Please check the query and retry')
+            setNumberResults(0)
+            setBoolean(false)
+          } else {
+            res.data.response.resultSets.forEach((element, index) => {
+              if (element.id && element.id !== '') {
+                if (resultsPerDataset.length > 0) {
+                  console.log(resultsPerDataset)
+                  resultsPerDataset.forEach(element2 => {
+                    if (element2[0] === element.beaconId) {
+                      element2[1].push(element.id)
+                      element2[2].push(element.exists)
+                      element2[3].push(element.resultsCount)
+                    } else {
+                      let arrayResultsPerDataset = [
+                        element.beaconId,
+                        [element.id],
+                        [element.exists],
+                        [element.resultsCount]
+                      ]
+                      resultsPerDataset.push(arrayResultsPerDataset)
+                    }
+                  })
+                } else {
+                  let arrayResultsPerDataset = [
+                    element.beaconId,
+                    [element.id],
+                    [element.exists],
+                    [element.resultsCount]
+                  ]
+                  resultsPerDataset.push(arrayResultsPerDataset)
+                }
+              }
+
+              if (element.id === undefined || element.id === '') {
+                let arrayResultsNoDatasets = [element.beaconId]
+                resultsNotPerDataset.push(arrayResultsNoDatasets)
+              }
+
+              if (res.data.response.resultSets[index].results) {
+                res.data.response.resultSets[index].results.forEach(
+                  (element2, index2) => {
+                    let arrayResult = [
+                      res.data.response.resultSets[index].beaconId,
+                      res.data.response.resultSets[index].results[index2]
+                    ]
+                    results.push(arrayResult)
+                  }
+                )
+              }
+            })
+          }
+        } else {
+          var jsonData2 = {
+            meta: {
+              apiVersion: '2.0'
+            },
+            query: {
+              filters: arrayFilter,
+              includeResultsetResponses: `${props.resultSets}`,
+              pagination: {
+                skip: skip,
+                limit: limit
+              },
+              testMode: false,
+              requestedGranularity: 'record'
+            }
+          }
+          jsonData2 = JSON.stringify(jsonData2)
+          let token = null
+          if (auth.userData === null) {
+            token = getStoredToken()
+          } else {
+            token = auth.userData.access_token
+          }
+
+          if (token === null) {
+            console.log('Querying without token')
+            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 }
+            )
+          }
+          setTimeOut(true)
+
+          if (
+            res.data.responseSummary.numTotalResults < 1 ||
+            res.data.responseSummary.numTotalResults === undefined
+          ) {
+            setError('ERROR. Please check the query and retry')
+            setNumberResults(0)
+            setBoolean(false)
+          } else {
+            res.data.response.resultSets.forEach((element, index) => {
+              console.log(res.data.response)
+              if (element.id && element.id !== '') {
+                console.log(resultsPerDataset)
+                if (resultsPerDataset.length > 0) {
+                  resultsPerDataset.forEach(element2 => {
+                    console.log(element2[0])
+                    console.log(element.beaconId)
+                    if (element2[0] === element.beaconId) {
+                      element2[1].push(element.id)
+                      element2[2].push(element.exists)
+                      element2[3].push(element.resultsCount)
+                    } else {
+                      console.log('hola')
+
+                      let arrayResultsPerDataset = [
+                        element.beaconId,
+                        [element.id],
+                        [element.exists],
+                        [element.resultsCount]
+                      ]
+                      let found = false
+
+                      console.log(arrayResultsPerDataset)
+                      resultsPerDataset.forEach(element => {
+                        if (element[0] === arrayResultsPerDataset[0]) {
+                          found = true
+                        }
+                        console.log(found)
+                      })
+                      if (found === false) {
+                        resultsPerDataset.push(arrayResultsPerDataset)
+                      }
+                    }
+                  })
+                } else {
+                  let arrayResultsPerDataset = [
+                    element.beaconId,
+                    [element.id],
+                    [element.exists],
+                    [element.resultsCount]
+                  ]
+                  console.log(arrayResultsPerDataset)
+                  resultsPerDataset.push(arrayResultsPerDataset)
+                }
+              }
+
+              if (element.id === undefined || element.id === '') {
+                let arrayResultsNoDatasets = [element.beaconId]
+                resultsNotPerDataset.push(arrayResultsNoDatasets)
+              }
+
+              if (res.data.response.resultSets[index].results) {
+                res.data.response.resultSets[index].results.forEach(
+                  (element2, index2) => {
+                    let arrayResult = [
+                      res.data.response.resultSets[index].beaconId,
+                      res.data.response.resultSets[index].results[index2]
+                    ]
+                    results.push(arrayResult)
+                  }
+                )
+              }
+            })
+          }
+        }
+      } catch (error) {
+        setError('No results. Please check the query and the connection and retry')
+        setTimeOut(true)
+        console.log(error)
+      }
+    }
+    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 && (
+        <div className='loaderLogo'>
+          <div className='loader2'>
+            <div id='ld3'>
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div>
+        <div>
+          {' '}
+          {timeOut && error !== 'Connection error. Please retry' && (
+            <div>
+              <div className='selectGranularity'>
+                <h4>Granularity:</h4>
+                <button className='typeResults' onClick={handleTypeResults1}>
+                  <h5>Boolean</h5>
+                </button>
+                <button className='typeResults' onClick={handleTypeResults2}>
+                  <h5>Count</h5>
+                </button>
+                <button className='typeResults' onClick={handleTypeResults3}>
+                  <h5>Full response</h5>
+                </button>
+              </div>
+            </div>
+          )}
+          {timeOut && error === 'Connection error. Please retry' && (
+            <h3>&nbsp; {error} </h3>
+          )}
+          {show3 && logInRequired === false && !error && (
+            <div className='containerTableResults'>
+              <TableResultsRuns
+                show={'full'}
+                results={results}
+                resultsPerDataset={resultsPerDataset}
+                beaconsList={beaconsList}
+              ></TableResultsRuns>
+            </div>
+          )}
+     
+          {show3 && error && <h3>&nbsp; {error} </h3>}
+          {show2 && !error && (
+            <div className='containerTableResults'>
+              <TableResultsRuns
+                show={'count'}
+                resultsPerDataset={resultsPerDataset}
+                resultsNotPerDataset={resultsNotPerDataset}
+                results={results}
+                beaconsList={beaconsList}
+              ></TableResultsRuns>
+            </div>
+          )}
+          {show1 && !error && (
+            <div className='containerTableResults'>
+              <TableResultsRuns
+                show={'boolean'}
+                resultsPerDataset={resultsPerDataset}
+                resultsNotPerDataset={resultsNotPerDataset}
+                results={results}
+                beaconsList={beaconsList}
+              ></TableResultsRuns>
+            </div>
+          )}
+          {show2 && error && <h3>&nbsp; {error} </h3>}
+          {show1 && error && <h3>&nbsp; {error} </h3>}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RunsResults
diff --git a/frontend/src/config.json b/frontend/src/config.json
index d994725..ea6473e 100644
--- a/frontend/src/config.json
+++ b/frontend/src/config.json
@@ -1,5 +1,5 @@
 {
-    "API_URL": "https://beacon-network-backend-test.ega-archive.org/beacon-network/v2.0.0",
+    "API_URL": "https://beacon-network-backend-demo.ega-archive.org/beacon-network/v2.0.0",
     "REDIRECT_URL": "http://localhost:3000/",
     "KEYCLOAK_URL": "https://beacon-network-demo2.ega-archive.org"
   }
\ No newline at end of file