diff --git a/assets/src/App.js b/assets/src/App.js
index 2950298f..fb54a470 100644
--- a/assets/src/App.js
+++ b/assets/src/App.js
@@ -1,107 +1,103 @@
 /*
 This is the Open Access Check Tool (OACT).
 The publication of scientific articles as Open Access (OA), usually in the variants "Green OA" and "Gold OA", allows free access to scientific research results and their largely unhindered dissemination. Often, however, the multitude of available publication conditions makes the decision in favor of a particular journal difficult: requirements of the funding agencies and publication guidelines of the universities and colleges must be carefully compared with the offers of the publishing houses, and separately concluded publication agreements can also offer additional benefits. The "OA Compliance Check Tool" provides a comprehensive overview of the possible publication conditions for a large number of journals, especially for the Swiss university landscape, and thus supports the decision-making process.
 
 © All rights reserved. ECOLE POLYTECHNIQUE FEDERALE DE LAUSANNE, Switzerland, Scientific Information and Libraries, 2022
 
 See LICENSE.TXT for more details.
 
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 
 This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License along with this program. If not, see
 <https://www.gnu.org/licenses/>. 
 
 */
 
 import React from "react";
 import "./App.css"
 import SearchFilterFields from './pages/SearchFilterFields'
 import Footer from './components/layout/Footer'
 import About from "./pages/About"
 import Help from "./pages/Help"
 import Noresult from "./pages/Noresult"
 
-import {Routes, Route } from "react-router-dom"
+import { Routes, Route } from "react-router-dom"
 
 import Box from '@mui/material/Box'
 import MenuAppBar from "./components/layout/MenuAppBar"
 import { makeStyles } from '@mui/styles'
 import { createTheme } from '@mui/material'
 import { ThemeProvider } from '@mui/styles'
 
 
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
   },
 }));
 
 function RedirectReactRouterApi() {
   window.location.replace('/api/')
 }
 
 function RedirectReactRouterApiDocs() {
   window.location.replace('/docs/api/')
 }
 
 function RedirectReactRouterLogin() {
   window.location.replace('/admin/')
 }
 
 function RedirectReactRouterFrontendDocs() {
   window.location.replace('/styleguide/index.html')
 }
 
 function RedirectReactRouterBackendDocs() {
   window.location.replace('/sphinx/index.html')
 }
 
-function App () {
-const classes = useStyles()
-console.log(classes)
-const theme = createTheme()
+function App() {
+  const classes = useStyles()
+  console.log(classes)
+  const theme = createTheme()
 
-    return(
+  return (
 
     <div className={classes.root}>
   
     <ThemeProvider theme={theme}>  
       <MenuAppBar />
     
  
   
    
     <Routes>
     
         <Route  path="/about" exact elements={<About/>} />
         <Route  path="/help" exact element={<Help/>} />
         <Route  path='/api' exact element={<RedirectReactRouterApi/>}/>
         <Route  path='/docs/api' exact element={<RedirectReactRouterApiDocs/>} />
         <Route  path='/login' exact element={<RedirectReactRouterLogin/>}/>
         <Route  path='/docs/frontend' exact element={<RedirectReactRouterFrontendDocs/>} />
         <Route  path='/docs/backend' exact element={<RedirectReactRouterBackendDocs/>} />
         <Route  path="/" exact element={<SearchFilterFields/>} />
         <Route  path="/check" exact element={<SearchFilterFields/>} />
         <Route  exact element={<Noresult/>} />
-      
-         
-       
-       
         
     </Routes>
     <Box style={{ marginTop: "8rem"}}>
       <Footer />
     </Box>
     
     </ThemeProvider>
     
     </div>
 
-    )
-    
-  
+  )
+
+
 }
 
-export default App
+export default App
\ No newline at end of file
diff --git a/assets/src/components/TermCard.js b/assets/src/components/TermCard.js
index 97657ba0..f96d6e87 100644
--- a/assets/src/components/TermCard.js
+++ b/assets/src/components/TermCard.js
@@ -1,341 +1,347 @@
 /*
 This is the Open Access Check Tool (OACT).
 The publication of scientific articles as Open Access (OA), usually in the variants "Green OA" and "Gold OA", allows free access to scientific research results and their largely unhindered dissemination. Often, however, the multitude of available publication conditions makes the decision in favor of a particular journal difficult: requirements of the funding agencies and publication guidelines of the universities and colleges must be carefully compared with the offers of the publishing houses, and separately concluded publication agreements can also offer additional benefits. The "OA Compliance Check Tool" provides a comprehensive overview of the possible publication conditions for a large number of journals, especially for the Swiss university landscape, and thus supports the decision-making process.
 
 © All rights reserved. ECOLE POLYTECHNIQUE FEDERALE DE LAUSANNE, Switzerland, Scientific Information and Libraries, 2022
 
 See LICENSE.TXT for more details.
 
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
 
 This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License along with this program. If not, see
 <https://www.gnu.org/licenses/>. 
 
 */
 
 import React, {useState, useContext, useEffect} from "react"
 import {Context} from "../ContextProvider"
 import { makeStyles } from '@mui/styles';
 import "./termcard.css"
 import Chip from '@mui/material/Chip';
 import DoneIcon from '@mui/icons-material/Done';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import Typography from '@mui/material/Typography';
 import DateRangeIcon from '@mui/icons-material/DateRange';
 import { FaCoins, FaRegHandshake, FaUserGraduate } from 'react-icons/fa';
 import { RiFilePaper2Line } from 'react-icons/ri';
 import Button from '@mui/material/Button';
 import { HiLink } from "react-icons/hi";
 import { GrInfo } from "react-icons/gr";
 import Container from '@mui/material/Container'
 import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import Tooltip from '@mui/material/Tooltip';
 import { BsNewspaper } from 'react-icons/bs';
 import { FiFlag } from 'react-icons/fi';
 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,
   },
 
 }))
 
 const IDConditionTypeJournal = 3;
 const IDConditionTypeOrganization = 1;
 const IDConditionTypeAgreement = 2;
 
 export default function TermCard({term}) {
 
     const classes = useStyles();
   //call the custom hook to share the state between different level componant 
   const {url} = useContext(Context)
   const [ref, setRef] = useState("")
   console.log(ref)
 
   useEffect(() => {
     // ## Update ref term by creating a specific Reference based on the Condition set ID = C and Term.id = T
     setRef(
       term.map( j=> (
         j[0] &&
         `C${j[0]}/T${term[0].id}`
         
       ))
     )
   },[]); // render once
   
 
 
  function handleClick () {
   // ## Create mail template to report a modification, contain the actual Url and the reference Term Card
   window.open(`mailto:publishsupport@epfl.ch?subject= OACT Modification request for ${encodeURIComponent(url)} Term Card Reference: ${ref[1]} &body=Request Description:`)
   }
   
   
   
 
     console.log(`cost factor data: ${term[0].cost_factor[0].cost_factor_type.name}`)
     
     
     const licenceIcon =
     
     term[0].licence?.map(i=>(
       <>
       {
         (i.website) ?
         <Tooltip disableFocusListener title="Click to learn more about licence" arrow>
           
           <Button href={i.website} target="blank" rel="noopener noreferrer" size="small">
             <Chip
                     size="small"
                     avatar={ <RiFilePaper2Line />}
                     label={i.name_or_abbrev}
                     // clickable={handleClick}
                     // color="secondary"
                     // onDelete={handleDelete}
                     className={classes.chip}
                     style={{ background: "#FFFFFF", textAlign: "left"}}
                     // title="Licence Information"
                 />
 
           </Button>
         </Tooltip>
         :
        (i.name_or_abbrev != 'UNKNOWN') ?
        <Button size="small" disabled>
           <Chip
                   size="small"
                   avatar={ <RiFilePaper2Line />}
                   label={i.name_or_abbrev}
                   // clickable={handleClick}
                   // color="secondary"
                   // onDelete={handleDelete}
                   className={classes.chip}
                   style={{ background: "#FFFFFF", textAlign: "left"}}
                   // title="Licence Information"
           />
         </Button>
           : 
         <Button size="small" disabled>
           <Chip
                   size="small"
                   avatar={ <RiFilePaper2Line />}
                   label={'No licence guidelines'}
                   // clickable={handleClick}
                   // color="secondary"
                   // onDelete={handleDelete}
                   className={classes.chip}
                   style={{ background: "#FFFFFF", textAlign: "left"}}
                   // title="Licence Information"
           />
         </Button>
 
         }
       </>
     ))
   
 
     
         const  cost = term[0].cost_factor?.map( i => (
 
             
               <>
               { (i.cost_factor_type.name != 'UNKNOWN') ?
                 <Tooltip disableFocusListener title={i.comment} arrow>
                   <Button>
                     <Chip
                       key={i.cost_factor_type.id}
                       size="small"
                       avatar={  <FaCoins />}
-                      label={i.cost_factor_type.name + " : " + i.amount +  " " + i.symbol}
+                      label={i.cost_factor_type.name + ": " + i.amount +  " " + i.symbol}
                       // clickable={handleClick}
                       // color="secondary"
                       // onDelete={handleDelete}
                       className={classes.chip}
                       style={{ background: "#FFFFFF"}}
                       // title={i.comment}
                       />
                     </Button>
                   </Tooltip>
               : null
               }
               
               </>
             
           ))
 
         const termArchive = term[0].ir_archiving && term[0].ir_archiving ? (
-        
+
+          <Button size="small" disabled>
           <Chip
                 size="small"
                 avatar={<DoneIcon />}
-                label={"Upload to institutional repository"}
+                label={"Upload to repository"}
                 // variant="outlined"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
-                style={{ background: "#DAF7A6"}}
+                style={{ background: "#DAF7A6", textAlign: "right"}}
                 // title="This is more information"
             />
+            </Button>
            
             
             ): (
-       
+            <Button size="small" disabled>
             <Chip
                 size="small"
                 avatar={<HighlightOffIcon />}
-                label="Upload to institutional repository"
+                label="Upload to repository"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#f50057"}}
                 // title="This is more information"
             />
+            </Button>
             )
 
-            const embargo = ( term[0].embargo_months != null ?         
+            const embargo = ( term[0].embargo_months != null ?
+            
+            <Button size="small" disabled>
             <Chip
                 size="small"
                 avatar={<DateRangeIcon />}
-                label={  ("Embargo: " + term[0].embargo_months + " Month(s)") }
+                label={  ("Embargo: " + term[0].embargo_months + " month(s)") }
                 // variant="outlined"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#FFFFFF"}}
                 // title="This is more information"
             />
+            </Button>
+            
             : null
             )
-        
 
     return (
       <div>
     
       <Card key={term.id} className="term-Card"
       style={{ textAlign: "left"}}
       >
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
         {term.map( j=> (
              j[0] &&
              <>
               <div>{j[2].id === IDConditionTypeJournal &&
               <BsNewspaper />}
               {j[2].id === IDConditionTypeAgreement &&
               <FaRegHandshake />}
               {j[2].id === IDConditionTypeOrganization &&
               <FaUserGraduate />} {j[2].condition_issuer}
               {j[1] ? 
                 <h5>{j[1]}</h5> : ''}</div>
               <p>
               { j[3] &&
               <Button href={j[3]} target="blank" rel="noopener noreferrer" size="small"><HiLink/>Source</Button>
               }
               </p>
               </>
         ))
         }
         
         </Typography>
         <Typography variant="h5" component="h2">
        
           
         </Typography>
         <Typography className={classes.pos} color="textSecondary">
         
      
         
         </Typography>
         <Typography variant="body2" component="p">
         <Container maxWidth="xs" >
          <Grid container>
   
       
           <Grid item xs={6} sm={2}>
           {/* filter Unknow cost factor type to not display */}
          
           {cost}
           
 
           {licenceIcon}
           {termArchive}
           {embargo}
          
           </Grid>
           </Grid>
           </Container>
         
           <div 
           style={{ marginTop: "1rem"}}
           >
           {term[0].comment ?
           <div style={{ textAlign: "left"}}>
          
           <p>
           <small>
           <GrInfo 
           style={{ 
             padding: "0.05rem"
           }}
           />
           {term[0].comment}
           </small>
           </p>
           
          
           </div>
           :null}
          </div>
         <div style={{textAlign: 'right'}}>
          {term.map( j=> (
              j[0] &&
              <small><small>C{j[0]}/T{term[0].id}</small></small>
         ))
         }
         </div>
       </Typography>
       </CardContent>
       <CardActions>
           {term[0].source ?
             <Button href={term[0].source} target="blank" rel="noopener noreferrer" size="small">
                <i style={{fontSize: "70%"}}>
               <HiLink/> More Information
               </i>
               </Button>
           :null}
 
 <Button onClick={handleClick} variant="outlined" color="secondary" size="small" ><FiFlag/>
             <i style={{fontSize: "70%"}}>
             Modification Request
             </i>
 </Button>
       </CardActions>
     </Card>
       
     </div>
     )
 }