diff --git a/assets/src/components/TermCard.js b/assets/src/components/TermCard.js
index 0bc9a676..1a0ebbad 100644
--- a/assets/src/components/TermCard.js
+++ b/assets/src/components/TermCard.js
@@ -1,247 +1,247 @@
 import React from "react"
 import { makeStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
 import DoneIcon from '@material-ui/icons/Done';
 import HighlightOffIcon from '@material-ui/icons/HighlightOff';
 
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 
 import DateRangeIcon from '@material-ui/icons/DateRange';
 import InfoIcon from '@material-ui/icons/Info';
 import DescriptionIcon from '@material-ui/icons/Description';
 
 import Grid from '@material-ui/core/Grid';
 import { FaCoins } from 'react-icons/fa';
 import { RiFilePaper2Line } from 'react-icons/ri';
 
 
 
 import "./termcard.css"
 
 
 const useStyles = makeStyles((theme) =>({
   
   card: {
       width: '100%',
       marginTop: "1rem",
       textAlign:'left'
       
       
   },
   root: {
     flexGrow: 1,
     textAlign:'left',
   },
 
   chip: {
     margin: 0.5,
     
   },
   
   heading: {
     fontSize: theme.typography.pxToRem(15),
     fontWeight: theme.typography.fontWeightRegular,
   },
 
 }))
 
 
 
 
 function TermCard({term}) {
 
     const classes = useStyles();
 
     term[0].licence?.map(i=>(
       <div key={i.id}>
       <h4>Licence Details</h4>
       {i.name}
      
       {i.name_or_abbrev}
       <br />
       <a href={i.website} target="_blank" rel="noopener noreferrer">{i.website}</a>
      
      
       </div>
     ))
   
 
     function licence (){
     const lockstatus = 
  
     term[0].licence?.map(i=>(
       i.name_or_abbrev
     ))
       
       
       if (lockstatus[0] === "CC-BY") {
 
         return (
       <Chip
             size="small"
             avatar={ <RiFilePaper2Line />}
             label={lockstatus}
             // clickable={handleClick}
             // color="secondary"
             // onDelete={handleDelete}
             className={classes.chip}
             style={{ background: "#FFFFFF"}}
             title="This is more information"
         />
         )
       }
       else {
         return(
           <Chip
             size="small"
             avatar={ <RiFilePaper2Line />}
             label={lockstatus}
             // clickable={handleClick}
             // color="secondary"
             // onDelete={handleDelete}
             className={classes.chip}
             style={{ background: "#FFFFFF"}}
             title="This is more information"
         />
 
         )
         }
 }
         function cost() {
           
             
           const price = term[0].cost_factor?.map(i => (
             i.amount
           ))
           const price_symbol = term[0].cost_factor?.map(j => (
             j.symbol
           ))
           const cost_name = term[0].cost_factor?.map(k => (
 
             k.cost_factor_type.name
           ))
 
           const id = term[0].cost_factor?.map(k => (
 
             k.cost_factor_type.id
           ))
           
             return (
               <Chip
                 key={id[0]}
                 size="small"
                 avatar={  <FaCoins />}
                 label={cost_name[0] + " : " + price[0] +  " " + price_symbol}
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 className={classes.chip}
                 style={{ background: "#FFFFFF"}}
                 title="This is more information"
               />
           
             )
             
       
   
         }
 
         const termArchive = term[0].ir_archiving && term[0].ir_archiving ? (
         
           <Chip
                 size="small"
                 avatar={<DoneIcon />}
                 label={"IR Archiving"}
                 // variant="outlined"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#FFFFFF"}}
                 title="This is more information"
             />
            
             
             ): (
        
             <Chip
                 size="small"
                 avatar={<HighlightOffIcon />}
                 label="IR Archiving"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#f50057"}}
                 title="This is more information"
             />
             )
             const embargo = term[0].ir_archiving && term[0].ir_archiving ? (
             
             <Chip
                 size="small"
                 avatar={<DateRangeIcon />}
                 label={"Embargo: " + term[0].embargo_months + " Month(s)"}
                 // variant="outlined"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#FFFFFF"}}
                 title="This is more information"
             />
             ):
             (<a />)
         
 
     return (
 
       <div className={classes.root}>
    
        
       
       
    
       <Accordion key={term.id} style={{ maxWidth: "20rem", height:"auto"}}>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >
           <Typography className={classes.heading}  >
          
           {cost()}
           {licence()}
           {termArchive}
           {embargo}
           term ID: {term[0].id}
          {term.map( j=> (
              j[0] &&
               <p>Condition Set Id: {j[0]}</p>
             ))
         }
         
           
           </Typography>
         </AccordionSummary>
         <AccordionDetails >
           
         <Typography>
         
           {/* {term[1]} */}
-          {/* {term[0].comment}
-          {term[0].source} */}
+          {term[0].comment}
+          {term[0].source}
           
           
           </Typography>
         </AccordionDetails>
       </Accordion>
        
        
       </div>
     )
 }
 
 export default TermCard
\ No newline at end of file
diff --git a/assets/src/pages/SearchFilterFields.js b/assets/src/pages/SearchFilterFields.js
index 3dbde8eb..7837cb98 100644
--- a/assets/src/pages/SearchFilterFields.js
+++ b/assets/src/pages/SearchFilterFields.js
@@ -1,722 +1,727 @@
 import React, {useContext, useState, useEffect} from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import { Container, Row, Col } from 'react-bootstrap';
 import FormControl from '@material-ui/core/FormControl';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { searchCondi, searchorganizationonly, searchjournalonly, searchInstitFunder, searchCondi3 } from '../services/requests/Condition'
 import {getJournal} from '../services/requests/Journal'
 import {getFunder} from '../services/requests/Funder'
 import {getInstitution} from '../services/requests/Institution'
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Typography from '@material-ui/core/Typography';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Grid from '@material-ui/core/Grid';
 
 
 import {Context} from "../Context"
 
 
 import ResultCard from  "../components/ResultCard"
 import DetailCard from  "../components/DetailCard"
 
 import TestQuery from "./TestQuery"
 
 import { useQuery } from "react-query"
 import CircularProgress from '@material-ui/core/CircularProgress'
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
 const useStyles = makeStyles((theme) => ({
   root: {
     '& > *': {
 
       margin: theme.spacing(1),
       display: 'grid',
     },
     flexGrow: 1
   },
 
   formControl: {
     margin: theme.spacing(0.7),
     width: 340,
   },
   selectEmpty: {
     marginTop: theme.spacing(2),
   },
 
   card: {
     width: '100%',
     marginTop: "1rem",
     
     
 },
 
 chip: {
   margin: 0.5,
   
 },
 
 heading: {
   fontSize: theme.typography.pxToRem(15),
   fontWeight: theme.typography.fontWeightRegular,
 },
 
 }));
 
 export default function SearchFilterFields() {
   const classes = useStyles();
 
   //call the custom hook for listing field with api
 
   const { getSelectedInstitId,
           getSelectedJournalId,
           getSelectedFunderId,
           institList, 
           journalList,
           funderList,
           institId,
           journalId,
           funderId,
           setInstitId, 
           setJournalId,
           setFunderId,
           institName,
           journalName,
           funderName,
         } 
           = useContext(Context)
   
 
   //responses
   const [conditions, setConditions] = useState([]);
   const [details, setDetails] = useState([]);
   const [result, updateResult] = useState([]);
   const [loading, setLoading] = useState(false);
   
   useEffect(() => {
    setDetails('null')
   }, [])
   
   // clear teh usestate
   // const clear = () => {
   //   setState((prev) => new Map(prev.clear()));
   // }
  
 
   
   function handleInstit(e, newInputValue) { 
   
    if (newInputValue){
     getSelectedInstitId(newInputValue)
     return
 
    }
    setInstitId("")
 
   }
   
   function handleFunder(e, newInputValue) {
     console.log(newInputValue)
     if (newInputValue){
     getSelectedFunderId(newInputValue)
     return
     }
     setFunderId("")
   }
 
   function handleJournal(e, newInputValue) {
     
     if (newInputValue){
       getSelectedJournalId(newInputValue)
       return
      }
      setJournalId("")     
   }
 
 function handleSubmit(e) {
   setLoading(true)
   e.preventDefault()
   
   //reset precedent results
   setConditions([])
   setDetails([])
   updateResult([])
 
 
+  if (!institId && !journalId && !funderId){
+    setLoading(false)
+    
+  }
+
   if (institId && !journalId && !funderId){
   //get organizations conditions
   // alert(`get api organization Condition only: ${institId}`)
   //condtion type is not journal only = 1
   // Get the user
   
     const sendSearchInstitOnly =
     async () => {
       
           try {
             
             
               const resp = await searchorganizationonly(institId,1)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
               
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     
           
     }
     
     console.log(details)
 
     const sendGetrequest =
     async () => {
           try {
               const resp = await getInstitution(institId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
               // if (details === "null") {
               //   setDetails(resp.data)
               // }
               // else {
               //   setDetails(prevArray => [...prevArray, resp.data])
               // }
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           
     }
       sendSearchInstitOnly().then(
         sendGetrequest()
       )
 
   }
 
   else if (!institId && !journalId && funderId){
     //get funder conditions
     // alert(`get api funder Condition only: ${funderId}`)
     //condtion type is not journal only = 1
 
     const sendSearchOrgaOnly =
     async () => {
           try {
               const resp = await searchorganizationonly(funderId,1)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     
     const sendGetrequest =
     async () => {
           try {
               const resp = await getFunder(funderId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
   
   sendSearchOrgaOnly().then(
     sendGetrequest()
   )
   
   }
   else if (!funderId && !institId && journalId){
     //get journals conditions
     // alert(`get api journal Condition only: ${journalId}`)
     //condtion type is not institution only = 2
     //get journal detail
 
     const sendSearchJournalOnly =
     async () => {
           try {
               const resp = await searchjournalonly(journalId,2)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
               // setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
 
     }
     
     const sendGetrequest =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           
     }
 
   sendSearchJournalOnly().then(
     sendGetrequest()
   )
      
   }
   
   else if (institId && funderId && !journalId) {
     //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
     //condtion type journal/condition = 3
     const sendSearchCondi =
     async () => {
           try {
               const resp = await searchInstitFunder(institId, funderId, 1)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
    
     const sendGetInstit =
     async () => {
           try {
               const resp = await getInstitution(institId)
               console.log(resp.data)
               // detailArray.push(resp.data)
               // setDetails(detailArray)
               updateResult(arr => [...arr, resp.data])
              
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             
             updateResult(arr => [...arr, resp.data])
             
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
         
       }
     sendSearchCondi().then(
       sendGetInstit().then(sendGetFunder())
     )
 
   
   }
   else if (institId && journalId && !funderId) {
     //alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${institId}`)
     //condtion type journal/condition = 3
     const sendSearchCondi =
     async () => {
           try {
               const resp = await searchCondi(journalId,institId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
    
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               // detailArray.push(resp.data)
               // setDetails(detailArray)
               updateResult(arr => [...arr, resp.data])
              
               
               
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     const sendGetInstit =
       async () => {
         try {
             const resp = await getInstitution(institId)
             console.log(resp.data)
             
             updateResult(arr => [...arr, resp.data])
             
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
         
       }
     sendSearchCondi().then(
       sendGetJournal().then(sendGetInstit())
     )
 
   
   }
   else if (!institId && journalId && funderId) {
     // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
     //condtion type journal/institution/funder conditions = 3
 
     const sendGetCondi =
     async () => {
           try {
               const resp = await searchCondi(journalId,funderId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
 
 
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
     
     
     sendGetCondi().then(
       sendGetJournal().then(
         sendGetFunder()
       )
     )
   }
   else if (institId && journalId && funderId) {
     // alert(`get api Filter Conditions SET--> Journal: ${journalId} VS Institution: ${funderId}`)
     //condtion type journal/institution/funder conditions = 3
     console.log("main check !")
     //(institution + journal)
     const detailArray = []
 
     const sendGetCondi =
     async () => {
           try {
               const resp = await searchCondi3(institId,journalId,funderId)
               console.log(resp.data)
               setConditions(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
           setLoading(false)
     }
     const sendGetJournal =
     async () => {
           try {
               const resp = await getJournal(journalId)
               console.log(resp.data)
               updateResult(arr => [...arr, resp.data])
           } catch (err) {
               // Handle Error Here
               console.error(err);
           }
     }
     const sendGetFunder =
       async () => {
         try {
             const resp = await getFunder(funderId)
             console.log(resp.data)
             updateResult(arr => [...arr, resp.data])
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
 
       const sendGetInstit =
       async () => {
         try {
             const resp = await getInstitution(institId)
             console.log(resp.data)
             detailArray.push(resp.data)
             updateResult(arr => [...arr, resp.data])
             
         } catch (err) {
             // Handle Error Here
             console.error(err);
         }
       }
     
     
     // sendGetCondi1().then(sendGetCondi2())
 
     sendGetCondi()
       sendGetJournal().then(
         sendGetFunder().then(
           sendGetInstit()
         )
       )
     
   }
   
   
   // alert(`Submit Institution: ID: ${institId} , Submit Funder: ${fund}, Submit Journal ID: ${journalId}`)
 }
 
 // const conditionIdArray = []
 // conditions.map((item) =>(
 // conditionIdArray.push(item.id)
 //     ))
 
 // console.log(conditionIdArray)
 
 console.log(`all conditions SET: ${conditions}`)
 console.log(details)
 
 console.log(`Selected Institution ID: ${institId} , Selected Funder: ${funderId}, Selected Journal ID: ${journalId}`)
 
 
 
 function detailsResult() {
 
   
 
 if (details !== 'null') {
 
   return (
     <div className={classes.root}>
       
  
 
                   <Accordion >
                   <AccordionSummary
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel1a-content"
                     id="panel1a-header"
                   >
                  
                     <Typography className={classes.heading}>
                       
                     <p>Selected option(s)</p>
                     
                     </Typography>
                   
                    
                   </AccordionSummary>
                   <Grid container className={classes.root} spacing="2" >
                   <Grid item xs={12}>
                   <Grid container justify="center" spacing="2">
        
                   
                   {result?.map(i => (
                   
                   <Grid key={i.id} item>
                  
                    <AccordionDetails>
                    
                   
                   <DetailCard  details={i}/>
                  
                   </AccordionDetails>
                
                   </Grid>
     
                   ))}
                   </Grid>
                   </Grid>
                   </Grid>
               
                 
                   </Accordion>
                   
           
   </div>
   )
   }
 }
 
 function conditionResults () {
 
   return (
     <div className={classes.root} style={{ maxWidth: "auto", height:"auto"}}>
     {conditions?.map(i=> (
 
     
      <ResultCard  result={i}/>
    
     ))}
     </div>
   )
 
 }
   return (
 
     <div className="searchfilter">    
           <Container className= "App-check-form" fluid>
           <Row >
          <Col>
           <form className="check-form" style={{ marginTop: "8rem"}}  noValidate autoComplete="on" onSubmit={handleSubmit} color="inherit">
           
 
     
             <FormControl className={classes.formControl} >
               <Autocomplete
                   freeSolo
                   selectOnFocus
                   clearOnBlur
                   id="institution"
                   options={institList.map((option) => option.name)}
                   renderOption={(params) => (
                     <a style={{ textAlign: "left"}}>{params}</a>
                   )}
                   
                   // getOptionLabel={(option) => option.name}
                   // filterOptions={filterOptions}
                   onInputChange={handleInstit}
                   renderInput={(params) => (
                     <TextField
                         {...params}
                         label="Swiss Institutions"
                         // margin="normal"
                         value={institId}
                         variant="outlined"
         
                         
                     />
                     )}
               />
             </FormControl>
        
             <FormControl className={classes.formControl}>
               <Autocomplete
                 freeSolo
                 id="funder"
                 options={funderList.map((option) => option.name)}
                 renderOption={(params) => (
                   <a style={{ textAlign: "left"}}>{params}</a>
                 )}
                 onInputChange={handleFunder}
                 renderInput={(params) => (
                   <TextField
                       {...params}
                       label="Funder"
                       // margin="normal"
                       value={funderId}
                       variant="outlined"
                   />
                   )}
             />
           </FormControl>
 
           <FormControl className={classes.formControl}>
           
              <Autocomplete
               freeSolo
               id="journal"
               options={journalList.map((option) => option.name)}
               renderOption={(params) => (
                 <a style={{ textAlign: "left"}}>{params}</a>
               )}
               onInputChange={handleJournal}
               renderInput={(params) => (
                 <TextField
                     {...params}
                     label="Journal"
                     // margin="normal"
                     value={journalId}
                     variant="outlined"
                 />
                 )}
       />
             </FormControl>
        
             <FormControl className={classes.formControl}>
             
           {!loading && 
          
         
               <Button
               className="App-btn"
               variant="contained" 
               type="submit"
               >
                       Check
                 </Button>
             }
           {loading && 
          <Button
          className="App-btn"
          variant="contained" 
          type="submit"
          disabled
          >
            < CircularProgress color="white"/>
                  Checking...
            </Button>
        }
             </FormControl>
               </form>
               </Col>
             </Row>
           </Container>
 
           <Container className="details" fluid>   
           <Row>
           <Col>
   
             {detailsResult()}
        
           </Col>
           </Row>
           </Container> 
           <Container className="term" fluid>
             
           <Row>
           <Col>
             
          
            {conditionResults()}
         
             
           </Col>
           </Row>
        
           </Container>
     </div>  
   );
 }
\ No newline at end of file