diff --git a/assets/src/components/DetailCard.js b/assets/src/components/DetailCard.js
index 83a961c8..98c05a05 100644
--- a/assets/src/components/DetailCard.js
+++ b/assets/src/components/DetailCard.js
@@ -1,207 +1,330 @@
 import React, {useContext} from "react"
 
 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 classes = useStyles();
 
 
 
 
   
  
 if (details !== 'null') {
 
   console.log(details)
 
   return (
 
 <div>
 
     <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>
         {details.issn && details.issn.map(item => {
          return (
      
         item.issn_type === 1 ?
       
         
         <p>ISSN Print :{item.issn} </p>
       
         : item.issn_type === 2 ?
         <p>ISSN Electronic: {item.issn}</p>
         :<p>ISSN Other: {item.issn}</p>
          )
         })}
 
         {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>
-            <p>
-            <abbr title={details.oa_status.description}>
-            Open Acces Status: {details.oa_status.status}
-            </abbr>
-            </p>
+            { 
+              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>
       </div>
         }
 
         </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}
       </CardActions>
     </Card>
   
   
   
 
 </div>
       )
 
     }
 
     else {
       return null
     }
 
     
 }
 
 export default DetailsCard
\ No newline at end of file