diff --git a/assets/src/App.css b/assets/src/App.css
index 65d9d3e2..2e247549 100644
--- a/assets/src/App.css
+++ b/assets/src/App.css
@@ -1,151 +1,105 @@
 
 
 .App-logo {
   height: 40vmin;
   pointer-events: none;
 }
 
-
-  
-
-
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
   }
 }
 
 .App-header {
   /* background-color: #D9523B; */
   background-color: white;
   /* min-height: 100vh; */
   display: flex;
   /* flex-direction: column;
   align-items: center; */
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: black;
   padding: 1rem 2rem;
 }
 
 .cardheader {
   background-color: #3771C8 !important;
   color: white !important;
   padding: 0rem 0rem;
 }
 
-.App-btn {
-  background-color: #3771C8 !important;
-  color: white !important;
-  width: 99% ;
-   
-}
-.term{
-   /* background-color: blueviolet;   */
-  padding: 1rem;
-
-}
 
-.App-btn:hover {
-  background-color: #D40000;
-}
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
 }
 
 
 @media only screen and (min-width: 768px) {
   section.dashboard .slick-list .slick-track {
     display: flex;
   }
   section.dashboard .slick-list .slide {
     opacity: 1;
   }
   header .wrapper .article h1 span.arrow {
     display:none;
   }
 
   header .wrapper .article .description {
     max-height: 300px
   }
 
-  .App-btn {
-    width: 99%;
-    background-color: #3771C8 !important;
-    color: white !important;
-  }
-  .App-btn:hover {
-    background-color: #D40000 !important;
-  }
+ 
+
+  
 
-  .term{
-    /* background-color: blueviolet;   */
-   padding: 0.7rem;
  
- }
  
 } 
 
 @media only screen and (min-width: 1024px) {
 
   /* .container header .wrapper {
     text-align:left;
     margin-left:5%;
     width:480px;
   } */
 
   .container header .header-nav-area #nav_container  {
     display:flex;
   }
 
   .container header form {
     display:block;
   }
 
   .container header .menu-icon {
     display:none;
   }
 
   header .wrapper .article footer {
     display: block;
   }
 
   section.dashboard .slick-list .slick-track {
     display: flex;
     min-width: 309px;
     padding: 20px;
   }
   
   section.dashboard .slick-list .slick-track[index="2"] {
     display: flex;
   }
 
   section.dashboard .slick-list .slide {
     opacity: 1;
   }
-  .term{
-    /* background-color: blueviolet;   */
-   padding: 0rem;
-   
- 
- }
-
- 
-
-  .App-btn {
-    width: 99%;
-    background-color: #3771C8 ;
-    color: white;
-    bottom: -5px;
-  }
-  .App-btn:hover {
-    background-color: #D40000;
-  }
-  
   
 } 
\ No newline at end of file
diff --git a/assets/src/components/ResultCard.css b/assets/src/components/ResultCard.css
new file mode 100644
index 00000000..2734f8af
--- /dev/null
+++ b/assets/src/components/ResultCard.css
@@ -0,0 +1,3 @@
+.term-version {
+margin-bottom: 0.5rem !important;
+}
\ No newline at end of file
diff --git a/assets/src/components/ResultCard.js b/assets/src/components/ResultCard.js
index 4b3f21ce..8f403477 100644
--- a/assets/src/components/ResultCard.js
+++ b/assets/src/components/ResultCard.js
@@ -1,179 +1,171 @@
 import React from "react"
 import { makeStyles } from '@material-ui/core/styles';
+import "./ResultCard.css"
 import TermCard from  "../components/TermCard"
 
 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 Badge from '@material-ui/core/Badge';
 
-import DescriptionIcon from '@material-ui/icons/Description'
+
 import { HiOutlineDocumentDuplicate } from "react-icons/hi";
 import { HiOutlineDocument } from "react-icons/hi";
-
+import Grid from '@material-ui/core/Grid'
+import Box from '@material-ui/core/Box'
+import Container from '@material-ui/core/Container';
 const useStyles = makeStyles((theme) =>({
   
-  card: {
-      width: '100%',
-      marginTop: "1rem",
-      
-      
-  },
+  
   root: {
     flexGrow: 1,
   },
 
   chip: {
     margin: 0.5,
     
   },
-  
-  heading: {
-    fontSize: theme.typography.pxToRem(15),
-    fontWeight: theme.typography.fontWeightRegular,
-  },
 
 }))
 
 
 
 function ResultCard({result}) {
 const classes = useStyles();
 //create one array to organize the frontend output 
 const termresult = []
 
 
 
 const termArray = result?.map(i=>(
   // get condition details
     i.term?.map(j =>(
     // termresult.push([j, i.id, i.comment, i.condition_type])
     termresult.push([j, [i.id, i.comment, i.condition_type]])
   ))
 ))
 
 
 //groupyBy array
 function groupBy(objectArray, property) {
   // console.log(objectArray)
   return objectArray.reduce((acc, obj) => {
     // console.log(obj[0])
 
      const key = obj[0][property][0].description;
      
      if (!acc[key]) {
         acc[key] = [];
      }
      // Add object to list for given key's value
      acc[key].push(obj);
      return acc;
   }, {});
 }
 
 
 const groupedTerm = groupBy(termresult, 'version')
 
 //first version
 // console.log(groupedTerm[1])
 
 
 //convert object into array
 const termItem = Object.entries(groupedTerm)
 //manage the display order
 
 function orderVersion (version) {
   if (version[0] ==="Submitted version") {
     
     version.unshift(3)
   }
   else if (version[0] === "Published version") {
     version.unshift(1)
   }
   else if (version[0] === "Accepted version") {
     version.unshift(2)
   }
 }
 //apply the function for each version
 termItem?.map(i=>(
     orderVersion(i)
     ))
 
 termItem.sort()
 
 console.log(termItem)
 
 
 const displayVersion =
 
 
 termItem?.map(item =>(
-<div className={classes.root}>
 
-
-<Accordion >
+<div className={classes.root} >
+<Accordion className="term-version">
 <AccordionSummary
  expandIcon={<ExpandMoreIcon />}
  aria-controls="panel1a-content"
  id="panel1a-header"
 
 >
-
-
-
-
+<Typography className={classes.heading}>
 {item?.map(i => (
  <Badge  anchorOrigin={{
          vertical: 'top',
          horizontal: 'right',
          }}
          style={{ 
-           padding: "1px",
+           padding: "0.05rem",
            color: "black",
            
              
          }}
          
          badgeContent={typeof i === "object" && i.length} >{typeof i === "string" && i} {typeof i === "object" && i.length > 1 ? <HiOutlineDocumentDuplicate />: typeof i === "object" && <HiOutlineDocument/>}</Badge>
          ))   
         }    
-</AccordionSummary>
-{item?.map(j => (
-
-<AccordionDetails>
-<Typography>
-{typeof j ===  "object" && 
-  j?.map(k => (
-  <TermCard term={k}/>
-  ))
-  
-}
 </Typography>
-</AccordionDetails>
-
-))
-}
+</AccordionSummary>
+        <AccordionDetails>
+        <Typography>
+        <Container maxWidth="xl" >
+        <Grid container spacing={0.5} direction="row">
+          {item?.map(j => (
+          typeof j ===  "object" && 
+            j?.map(k => (
+              
+            <TermCard term={k}/>
+            ))
+            
+          
+          ))
+          }
+        </Grid>
+        </Container>
+        </Typography>
+        </AccordionDetails>  
 </Accordion>
 </div>
 
 ))
 
 
 
   
 return (
         
   
     //level 0
 
-    <div key={result.id}>
+    <div className={classes.root} >
     {displayVersion}
 
-    
       </div>
   
   
   )
 }
 export default ResultCard
\ No newline at end of file
diff --git a/assets/src/components/TermCard.js b/assets/src/components/TermCard.js
index 6351ed58..991d1233 100644
--- a/assets/src/components/TermCard.js
+++ b/assets/src/components/TermCard.js
@@ -1,247 +1,237 @@
 import React from "react"
 import { makeStyles } from '@material-ui/core/styles';
+import "./termcard.css"
 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 { FaCoins } from 'react-icons/fa';
 import { RiFilePaper2Line } from 'react-icons/ri';
 
-
-
-import "./termcard.css"
-
+import Grid from '@material-ui/core/Grid'
+import Box from '@material-ui/core/Box'
+import Container from '@material-ui/core/Container';
 
 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"}}>
+      <Accordion key={term.id} className="term-Card">
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >
           <Typography className={classes.heading}  >
+        Term ID: {term[0].id}
+         {term.map( j=> (
+             j[0] &&
+              <p>From condition set Id: {j[0]}</p>
+            ))
+        }
          
           {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}
           
           
           </Typography>
         </AccordionDetails>
       </Accordion>
-       
-       
-      </div>
+
+      
+     
     )
 }
 
 export default TermCard
\ No newline at end of file
diff --git a/assets/src/components/layout/Footer.js b/assets/src/components/layout/Footer.js
index 1177c5e3..6481d389 100644
--- a/assets/src/components/layout/Footer.js
+++ b/assets/src/components/layout/Footer.js
@@ -1,55 +1,54 @@
 import React from "react"
 import "./FooterStyles.css"
 import Container from '@material-ui/core/Container'
 import Grid from '@material-ui/core/Grid'
 import Box from '@material-ui/core/Box'
 import Link from '@material-ui/core/Link'
  function Footer ()  { 
     return (
       <footer className="footer">
         <Container maxWidth="xl" >
         <Box 
         px={{ xs:3, sm: 10 }}
         py={{ xs:5, sm: 10 }}
-        pb={{xs: 5, sm: 0}}
         bgcolor="text.secondary" 
         color="white">
         <Container maxWidth="xl" >
          <Grid container spacing={5}>
           <Grid item xs={12} sm={4}>
             <Box borderBottom={1}>Sponsor</Box>
             <Box>
               <Link href="https://www.swissuniversities.ch/" color="inherit">Home - swissuniversities</Link>
             </Box>
             <Box>
               <Link href="https://www.swissuniversities.ch/en/topics/digitalisation/p-5-scientific-information" color="inherit">P5 - scientific-information</Link>
             </Box>
           </Grid>
           <Grid item xs={12} sm={4}>
             <Box borderBottom={1}>OACCT Creators</Box>
             <Box>
               <Link href="https://www.epfl.ch/en/" color="inherit">Ecole polytechnique fédérale de Lausanne (EPFL)</Link>
             </Box>
             <Box>
               <Link href="https://www.unige.ch/" color="inherit">Université de Genève</Link>
             </Box>
           </Grid>
           <Grid item xs={12} sm={4}>
             <Box borderBottom={1}>Contact</Box>
             <Box>
               <Link href="https://www.epfl.ch/campus/visitors/buildings/rolex-learning-center/" color="inherit">contact</Link>
             </Box>
           </Grid>
          </Grid>
          <Box textAlign="center" pt={{xs: 5, sm: 10}} pb={{xs: 5, sm: 0}}>
 
            Open Access Check Tools &reg; {new Date().getFullYear()}
 
          </Box>
       </Container>
       </Box>
       </Container>
       </footer>
     )
   }
   export default Footer
diff --git a/assets/src/components/termcard.css b/assets/src/components/termcard.css
index f45da039..4d4cf13e 100644
--- a/assets/src/components/termcard.css
+++ b/assets/src/components/termcard.css
@@ -1,5 +1,27 @@
-.version {
-    background-color: #c83743;
+.term-Card {
+  /* background-color: #37c83e !important ; */
+  margin-bottom: 1rem;
+  max-width: 20rem ; 
+
+}
+  
+  
+  @media only screen and (min-width: 768px) {
+
+    .term-Card {
+      /* background-color: #3739c8 !important ; */
+      margin-right: 1rem;
+      max-width: 20rem ;
     
-     
+    }
+  
   }
+
+  @media only screen and (min-width: 1024px) {
+    .term-Card {
+      /* background-color: #c8377f !important ; */
+      margin-right: 1rem;
+      max-width: 20rem ;
+    
+    }
+  }
\ No newline at end of file
diff --git a/assets/src/pages/SearchFilterFields.css b/assets/src/pages/SearchFilterFields.css
new file mode 100644
index 00000000..edd2e4f8
--- /dev/null
+++ b/assets/src/pages/SearchFilterFields.css
@@ -0,0 +1,48 @@
+
+.form-input {
+    margin-bottom: 1rem !important;
+  }
+  .App-btn {
+    background-color: #3771C8 !important;
+    color: white !important;
+    width: 99% ;
+     
+  }
+ 
+  
+  .App-btn:hover {
+    background-color: #D40000;
+  }
+  
+
+  @media only screen and (min-width: 768px) {
+    .form-input {
+        margin-right: 1rem !important;
+      }
+      .App-btn {
+        width: 99%;
+        background-color: #3771C8 !important;
+        color: white !important;
+      }
+      .App-btn:hover {
+        background-color: #D40000 !important;
+      }
+     
+  }
+
+  @media only screen and (min-width: 1024px) {
+    .form-input {
+        margin-right: 1rem !important;
+      }
+     
+    
+      .App-btn {
+        width: 99%;
+        background-color: #3771C8 ;
+        color: white;
+        bottom: -5px;
+      }
+      .App-btn:hover {
+        background-color: #D40000;
+      }
+  }
\ No newline at end of file
diff --git a/assets/src/pages/SearchFilterFields.js b/assets/src/pages/SearchFilterFields.js
index 6762c5bf..23638f35 100644
--- a/assets/src/pages/SearchFilterFields.js
+++ b/assets/src/pages/SearchFilterFields.js
@@ -1,726 +1,721 @@
 import React, {useContext, useState, useEffect} from 'react';
+import "./SearchFilterFields.css"
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 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 Box from '@material-ui/core/Box'
 import Container from '@material-ui/core/Container';
 
 
 import {Context} from "../Context"
 
 
 import ResultCard from  "../components/ResultCard"
 import DetailCard from  "../components/DetailCard"
 
 
 import CircularProgress from '@material-ui/core/CircularProgress'
 
 
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
   },
   // 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 container className={classes.root} spacing={2} >
                   <Grid item xs={12}>
-                  <Grid container justify="center" spacing="2">
+                  <Grid container justify="center">
        
                   
                   {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"}}>
+    <div className={classes.root} >
     {conditions?.map(i=> (
 
     
      <ResultCard  result={i}/>
    
     ))}
     </div>
   )
 
 }
   return (
-    <Box
-   
-  
-    >
+    <Box>
     <div className={classes.root}>
     <Container maxWidth="xl" >
     <Grid container spacing={1} direction="row">
       
         <form className={classes.root} style={{ marginTop: "8rem"}}  noValidate autoComplete="on" onSubmit={handleSubmit} color="inherit">
         
         
-            <FormControl style={{ width: 340}}>
+            <FormControl  className="form-input" style={{ width: 340}}>
               <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 style={{ width: 340}}>
+            <FormControl className="form-input" style={{ width: 340}}>
               <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 style={{ width: 340}}>
+            <FormControl className="form-input" style={{ width: 340}}>
             
               <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 style={{ width: 340}}>
+            <FormControl className="form-input" style={{ width: 340}}>
             
                         {!loading && 
                       
                       
                             <Button
                             className="App-btn"
                             variant="contained" 
                             type="submit"
                             >
                                     Check
                               </Button>
                           }
                         {loading && 
                       <Button
                       className="App-btn"
                       variant="contained" 
                       type="submit"
                       disabled
                       >
-                        < CircularProgress color="white"/>
+                        < CircularProgress />
                               Checking...
                         </Button>
                     }
             </FormControl>
           
            
           
           </form>
           </Grid>
           </Container>
         
       <Container maxWidth="xl" >
-      <Grid container direction="row" spacing={48} style={{ marginTop: "4rem"}}>
-     
-        
             
               {detailsResult()}
             
-      </Grid>
-
-      <Grid container direction="row" spacing={48} style={{ marginTop: "4rem"}}>
+      
+      
  
               {conditionResults()}
              
-        </Grid>
+      
       </Container>
     
    </div>
    </Box>
   );
 }
\ No newline at end of file