diff --git a/assets/src/components/DetailCard.js b/assets/src/components/DetailCard.js
index c7513d66..a62db350 100644
--- a/assets/src/components/DetailCard.js
+++ b/assets/src/components/DetailCard.js
@@ -1,360 +1,368 @@
 import React, {useContext,useEffect} from "react"
 import {Context} from "../Context"
 import { makeStyles } from '@material-ui/core/styles';
 import "./detailscard.css"
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import { HiLink } from "react-icons/hi";
 import DoneIcon from '@material-ui/icons/Done';
 import WarningIcon from '@material-ui/icons/Warning';
 import "./termcard.css"
 import { BsUnlock } from "react-icons/bs";
 import { GrDiamond } from "react-icons/gr";
 import Chip from '@material-ui/core/Chip';
 import ClearSharpIcon from '@material-ui/icons/ClearSharp';
 
 
 const useStyles = makeStyles((theme) => ({
   root: {
     '& > *': {
 
       margin: theme.spacing(1),
       display: 'grid',
     },
     flexGrow: 1,
   },
 
   formControl: {
     margin: theme.spacing(1),
     width: 200,
   },
   selectEmpty: {
     marginTop: theme.spacing(1),
   },
 
 chip: {
   margin: 0.5,
   
 },
 
 heading: {
   fontSize: theme.typography.pxToRem(15),
   fontWeight: theme.typography.fontWeightRegular,
 },
 
 }));
 
 
 function DetailsCard({details}) {
   
   const { getSelectedInstitId,
     setUrl,
     url
   } 
     = useContext(Context)
 
   
     const classes = useStyles();
 
     useEffect(() => {
       setUrl(window.location.href)
     },)
   
 
   
  
 if (details !== 'null') {
 
   
 
   // // setInstitName(details.name)
   
 
   return (
 
 <div id={details.id}>
 
     <Card className="detail-Card">
       <CardContent>
       {details.end_year && 
       <Typography className={classes.title} color="textSecondary" gutterBottom
       style={{backgroundColor:"lightgrey", text:"white"}}
       >
             <WarningIcon /> Inactive!
 
             {details.starting_year && 
             <div>
               <p>From {details.starting_year} to {details.end_year}</p>
               </div>
             }
             </Typography>
       }
         <Typography className={classes.title} color="textSecondary" gutterBottom>
         <h4>{details.name}</h4>
         <Typography variant="body2" component="p"
         style={{ textAlign: "left"}}
         >
         <ul>
         {details.issn && details.issn.map(item => {
          return (
         
         item.issn_type === "1" ?
       
         <li>Print ISSN: {item.issn}</li>
       
         : item.issn_type === "2" ?
         <li>Electronic ISSN: {item.issn}</li>
         
         : item.issn_type === "3" ?
         <li>Other ISSN: {item.issn}</li>
 
         :null
          )
         })}
         </ul>
         </Typography>
         {details.publisher && details.publisher.map(item => {
         return <div key={item.id}> <div > 
         <Button href={item.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Publisher: {item.name}</Button>
         <Button href={item.oa_policies} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Publisher policies</Button>
       </div></div>
         })}
         </Typography>
         <Typography variant="h5" component="h2">
        
           
         </Typography>
         <Typography className={classes.pos} color="textSecondary">
         
         {details.country && details.country.map(item => {
         return <div key={item.id}>{item.name}</div>;
         })}
         
         {!details.end_year &&
         <div>
           Since {details.starting_year}
         </div>
 
         }
        
         </Typography>
         
         <Typography variant="body2" component="p"
         style={{ textAlign: "left"}}
         >
         {details.oa_status ?
         <div>
           {details.oa_status.status !== "UNKNOWN" ? 
           <div>
             { 
               details.oa_status.status === "Gold" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                    
                    Open Acces Status: 
                             <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <BsUnlock />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#FFD700", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               : details.oa_status.status === "Diamond" ?
                   <>
 
 
                   <abbr title={details.oa_status.description}>
                   Open Acces Status: 
                       <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                           <Chip
                                 size="small"
                                 avatar={ <GrDiamond />}
                                 label={details.oa_status.status}
                                 className={classes.chip}
                                 style={{ background: "#B9F2FF", textAlign: "left"}}
                                 // title="Licence Information"
                             />
                         </Button>
                   
                   {/* {details.oa_status.status}  */}
                   
                   </abbr>
                   </>
               :details.oa_status.status === "Full" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                   Open Acces Status: 
                             <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <BsUnlock />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#ADD8E6", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               :details.oa_status.status === "hybrid" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                   Open Acces Status: 
                             <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <BsUnlock />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#cfcdaa", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               :details.oa_status.status === "Green" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                   Open Acces Status: 
                             <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <BsUnlock />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#DAF7A6", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               :details.oa_status.status === "none" ?
                   <p>
                   <abbr title={details.oa_status.description}>
                   Open Acces Status:
                   <Button href="{i.website}" target="blank" rel="noopener noreferrer" size="small">
                                 <Chip
                                       size="small"
                                       avatar={ <ClearSharpIcon />}
                                       label={details.oa_status.status}
                                       className={classes.chip}
                                       style={{ background: "#FF7F7F", textAlign: "left"}}
                                       // title="Licence Information"
                                   />
                               </Button>
                   </abbr>
                   </p>
               :null
 
             }
           </div>
           
           :null}
         </div>
         :null}
         
         </Typography>
         {details.language && 
           details.language.map(item =>(
 
               <Typography variant="body2" component="p"
               style={{ textAlign: "left"}}
               >
               
               <p><small>Language: {item.name}</small></p>
               </Typography>
 
 
             ))
           
        
         }
 
 
 
         <Typography variant="body2" component="p"
         style={{ textAlign: "left"}}
         >
         {details.doaj_seal && 
         <div >
         <Button href="https://doaj.org/apply/seal/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/> DOAJ seal</Button>
         </div>
         }
         {details.doaj_status && 
         
         <div > 
           <Button 
           href="https://doaj.org/search/journals?source=%7B%22query%22%3A%7B%22match_all%22%3A%7B%7D%7D%2C%22size%22%3A50%2C%22sort%22%3A%5B%7B%22created_date%22%3A%7B%22order%22%3A%22desc%22%7D%7D%5D%7D" 
           target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Listed on DOAJ</Button>
           </div>
         }
         {details.lockss &&
         <div > 
           <Button href="https://www.lockss.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with LOCKSS</Button>
         </div>
         }
         {details.portico && 
         <div > 
         <Button href="https://www.portico.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with Portico</Button>
       </div>
         }
         
         {details.nlch && 
          <div > 
          <Button href="https://consortium.ch/nationallizenzen/?lang=en" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Swiss National licences</Button>
        </div>
         }
         {details.qoam_av_score && 
+        
         <div > 
-        <Button href="https://www.qoam.eu/" target="blank" rel="noopener noreferrer" size="small"><HiLink/>QOAM score : {details.qoam_av_score}</Button>
+          <br />
+        <Button href="https://www.qoam.eu/" target="blank" rel="noopener noreferrer" size="small">QOAM score : {details.qoam_av_score}</Button>
       </div>
         }
          {details.ror ? 
           <div >
-          <Button href={"https://ror.org/"+details.ror} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Ror ID: {details.ror}</Button>
+          <Button href={"https://ror.org/"+details.ror} target="blank" rel="noopener noreferrer" size="small">Ror ID: {details.ror}</Button>
           </div>
         :null}
         {details.fundref ?
           <div>
-          <Button href={"https://search.crossref.org/funding?q="+details.fundref} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Fundref Id: {details.fundref}</Button>
+          <Button href={"https://search.crossref.org/funding?q="+details.fundref} target="blank" rel="noopener noreferrer" size="small">Fundref Id: {details.fundref}</Button>
           </div>
         :null}
+        
 
         </Typography>
          
       </CardContent>
       <CardActions>
       {details.website ?
         <Button href={details.website} target="blank" rel="noopener noreferrer" size="small"><HiLink/> Website </Button>
       :null}
         {details.oa_options ? 
           <Button href={details.oa_options} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Open Access Infos</Button>
         :null}
+        {details.ir_name ?
+          <div>
+          <Button href={details.ir_url} target="blank" rel="noopener noreferrer" size="small"><HiLink/>{details.ir_name}</Button>
+          </div>
+        :null}
       </CardActions>
     </Card>
   
   
     
     
 </div>
       )
       
     }
 
     else {
       return null
     }
 
     
 }
 
 export default DetailsCard
\ No newline at end of file
diff --git a/assets/src/pages/welcome.js b/assets/src/pages/welcome.js
index 95d1bf93..5ba95829 100644
--- a/assets/src/pages/welcome.js
+++ b/assets/src/pages/welcome.js
@@ -1,55 +1,111 @@
 import React from "react"
 import "./welcome.css"
 import Container from '@material-ui/core/Container'
 import Grid from '@material-ui/core/Grid'
+import Paper from '@material-ui/core/Paper';
 import Box from '@material-ui/core/Box'
 import Link from '@material-ui/core/Link'
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+      flexGrow: 1,
+    },
+    paper: {
+      padding: theme.spacing(2),
+      textAlign: 'left',
+      color: 'balck',
+      backgroundColor:"	#F8F8F8",
+    //   height: 400,
+    //   width: 400,
+    },
+    // grid: {
+        
+
+    // }
+  }))
+
 function Welcome () {
+const classes = useStyles();
 
     return (
-<div>
-
-{/* <!-- Page Content--> */}
-        <section class="pt-4">
-            <div class="container px-lg-5">
-                {/* <!-- Page Features--> */}
-                <div class="row gx-lg-5">
-                    <div class="col-lg-6 col-xxl-4 mb-5">
-                        <div class="card bg-light border-0 h-100">
-                            <div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
-                                <div class="feature bg-primary bg-gradient text-white rounded-3 mb-4 mt-n4"><i class="bi bi-collection"></i></div>
-                                <h2 class="fs-4 fw-bold">Welcome!</h2>
-                                <p class="mb-0">Let's try the beta version!</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-lg-6 col-xxl-4 mb-5">
-                        <div class="card bg-light border-0 h-100">
-                            <div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
-                                <div class="feature bg-primary bg-gradient text-white rounded-3 mb-4 mt-n4"><i class="bi bi-cloud-download"></i></div>
-                                <h2 class="fs-4 fw-bold">Free to use!</h2>
-                                <p class="mb-0">Any questions? please contact us!</p>
-								<Link href="https://www.epfl.ch/campus/visitors/buildings/rolex-learning-center/" color="inherit">contact</Link>
-                            </div>
-                        </div>
-                    </div>
-					<div class="col-lg-6 col-xxl-4 mb-5">
-                        <div class="card bg-light border-0 h-100">
-                            <div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
-                                <div class="feature bg-primary bg-gradient text-white rounded-3 mb-4 mt-n4"><i class="bi bi-cloud-download"></i></div>
-                                <h2 class="fs-4 fw-bold">Need help!</h2>
-                                <p class="mb-0">Any questions? please call us?</p>
-								<Link href="https://www.epfl.ch/campus/visitors/buildings/rolex-learning-center/" color="inherit">contact</Link>
-                            </div>
-                        </div>
-                    </div>
-                   
-                    
-                </div>
-            </div>
-        </section>
+
+<div className={classes.root}>
+<Container maxWidth="xl" 
+style={{paddingTop:"2rem"}}
+
+>
+      <Grid container spacing={3}>
+        <Grid item xs >
+        <Box 
+        // px={{ xs:3, sm: 10 }}
+        // py={{ xs:5, sm: 10 }}
+        bgcolor="white" 
+        color="black">
+          <Paper className={classes.paper}>
+              <h2
+              style={{paddingBottom:"1rem"}}
+              >Welcome!</h2>
+              <p style={{textAlign:"left"}}>The OACCT (Open Access Compliance Check Tool) is an online resource, tailored to the Swiss academic community's needs, that gathers the most important information concerning Open-Access publishing.</p>
+          </Paper>
+        </Box>
+        </Grid>
+        <Grid item xs >
+        <Box 
+        // px={{ xs:3, sm: 10 }}
+        // py={{ xs:5, sm: 10 }}
+        bgcolor="white" 
+        color="black">
+        
+          <Paper className={classes.paper} >
+          <h2
+          style={{paddingBottom:"1rem"}}
+          >Mission</h2>
+          <p style={{textAlign:"left"}}>
+
+       Its principal goal is to guide Swiss researchers in deciding where and how to publish their works in compliance with funders’ and institutional Open Access policies</p>
+
+
+          </Paper>
+
+        </Box>
+        </Grid>
+        <Grid item xs>
+
+        <Box 
+        // px={{ xs:3, sm: 10 }}
+        // py={{ xs:5, sm: 10 }}
+        bgcolor="white" 
+        color="black">
+          <Paper className={classes.paper}>
+          <h2
+          style={{paddingBottom:"1rem"}}
+          >Where do our data come from?</h2>
+
+
+          <p class="mb-0" style={{textAlign:"left"}}>OACCT provides a list of journals with information aggregated from several sources on a regular basis:
+                                    </p>
+                                    <br />
+                                    <p>
+                                        <ul >
+                                        <li>Journal ISSNs (source: ISSN International centre)</li>
+                                        <li>Publication conditions (source: Sherpa/Romeo)</li>
+                                        <li>Swiss institutions from swissuniversities</li>
+                                        <li>Funders from…
+                                        To be completed</li>
+                                        </ul>
+                                    </p>
+          </Paper>
+
+          </Box>
+        </Grid>
+      </Grid>
+</Container>
+
+
+
 </div>
     )
 }
 
 export default Welcome
\ No newline at end of file