diff --git a/assets/src/components/TermCard.js b/assets/src/components/TermCard.js
index 49bae0f5..7cd59426 100644
--- a/assets/src/components/TermCard.js
+++ b/assets/src/components/TermCard.js
@@ -1,238 +1,242 @@
 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 Typography from '@material-ui/core/Typography';
 import DateRangeIcon from '@material-ui/icons/DateRange';
 import { FaCoins, FaRegHandshake, FaUserGraduate } from 'react-icons/fa';
 import { RiFilePaper2Line } from 'react-icons/ri';
 import Button from '@material-ui/core/Button';
 import { HiLink } from "react-icons/hi";
 import { GrInfo } from "react-icons/gr";
 import Container from '@material-ui/core/Container'
 import Grid from '@material-ui/core/Grid'
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Tooltip from '@material-ui/core/Tooltip';
 import { BsNewspaper } from 'react-icons/bs';
 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,
   },
 
 }))
 
 
 
 export default function TermCard({term}) {
 
     const classes = useStyles();
 
     console.log(`cost factor data: ${term[0].cost_factor[0].cost_factor_type.name}`)
     
     
     const licenceIcon =
     
     term[0].licence?.map(i=>(
-      <> 
-      <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 disableFocusListener title="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>
       </>
     ))
   
 
     
         const  cost = term[0].cost_factor?.map( i => (
 
             
               <>
               <Tooltip disableFocusListener title={i.comment} arrow>
-              <Chip
-                key={i.cost_factor_type.id}
-                size="small"
-                avatar={  <FaCoins />}
-                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>
+                  <Chip
+                    key={i.cost_factor_type.id}
+                    size="small"
+                    avatar={  <FaCoins />}
+                    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>
               
               </>
             
           ))
 
         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: "#DAF7A6"}}
                 // 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>
     
       <Card key={term.id} className="term-Card"
       style={{ textAlign: "left"}}
       >
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
         {term.map( j=> (
              j[0] &&
              <>
               <p>{j[2].condition_issuer === "Journal-only" &&
               <BsNewspaper />}
               {j[2].condition_issuer === "Journal-organization agreement" &&
               <FaRegHandshake />}
               {j[2].condition_issuer === "Organization-only" &&
               <FaUserGraduate />} {j[2].condition_issuer}
               {j[1] ? ': ' + j[1] : ''}</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"><HiLink/> More Information </Button>
           :null}
       </CardActions>
     </Card>
       
     </div>
     )
 }
 
diff --git a/assets/src/components/TermCard.md b/assets/src/components/TermCard.md
index 40795a9d..14da8498 100644
--- a/assets/src/components/TermCard.md
+++ b/assets/src/components/TermCard.md
@@ -1,210 +1,203 @@
 
 ### Description
 Recieve data for each term and display all the important condition.
 
 ```js
 import React from "react"
 import { makeStyles, withStyles } 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 Typography from '@material-ui/core/Typography';
 import DateRangeIcon from '@material-ui/icons/DateRange';
 import { FaCoins, FaHandshake, FaRegHandshake, FaUserGraduate} from 'react-icons/fa';
 import { GoLaw } from 'react-icons/go';
 import { BsNewspaper } from 'react-icons/bs'
 import { RiFilePaper2Line } from 'react-icons/ri';
 import Button from '@material-ui/core/Button';
 import { HiLink } from "react-icons/hi";
 import { GrInfo } from "react-icons/gr";
 import Container from '@material-ui/core/Container'
 import Grid from '@material-ui/core/Grid'
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Tooltip from '@material-ui/core/Tooltip';
 
 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 HtmlTooltip = withStyles((theme) => ({
   tooltip: {
     backgroundColor: 'lightGrey',
     color: 'rgba(0, 0, 0, 0.87)',
     maxWidth: 220,
     fontSize: theme.typography.pxToRem(12),
     border: '1px solid #dadde9',
   },
 }))(Tooltip);
 
  const classes = useStyles();
 
 
      
   
     
  
   
 
     
       <Card key="3" className="term-Card"
       style={{ textAlign: "left"}}
       >
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
        
         Term ID: 4
         <p><small>Condition type: <FaUserGraduate />Organization only</small></p>
         <p><small>Condition type: <FaRegHandshake />Organization/journal</small></p>
         <p><small>Condition type: <BsNewspaper />Journal Only</small></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 */}
-         
-          <HtmlTooltip disableFocusListener
-              title={
-                <React.Fragment>
-                  <Typography color="inherit">Cost Factor information</Typography>
-                  {"It's very engaging. Right?"}
-                </React.Fragment>
-              }
-            >
+         <Tooltip disableFocusListener title="{i.comment}" arrow>
+          <Button>
               <Chip
                 key="4"
                 size="small"
                 avatar={<FaCoins />}
                 label="100000£"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 className={classes.chip}
                 style={{ background: "#FFFFFF"}}
               />
-          </HtmlTooltip>
-          
+          </Button>
+          </Tooltip>
 
            <Button href="www.google.com" target="blank" rel="noopener noreferrer" size="small">
         <Chip
               size="small"
               avatar={ <RiFilePaper2Line />}
               label="ABR"
               // clickable={handleClick}
               // color="secondary"
               // onDelete={handleDelete}
               className={classes.chip}
               style={{ background: "#FFFFFF", textAlign: "left"}}
               title="Licence Information"
           />
         </Button>
           <Chip
                 size="small"
                 avatar={<DoneIcon />}
                 label={"IR Archiving"}
                 // variant="outlined"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#DAF7A6"}}
                 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"
             />
           <Chip
                 size="small"
                 avatar={<DateRangeIcon />}
                 label="embargo month"
                 // variant="outlined"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 style={{ background: "#FFFFFF"}}
                 title="This is more information"
             />
          
           </Grid>
           </Grid>
           </Container>
         
           <div 
           style={{ marginTop: "1rem"}}
           >
           
           <div style={{ textAlign: "left"}}>
          
           <p>
           <small>
           <GrInfo 
           style={{ 
             padding: "0.05rem"
           }}
           />
           comment
           </small>
           </p>
           
          
           </div>
        
          </div>
         
 
       </Typography>
       </CardContent>
       <CardActions>
           
             <Button href="thisisasource.com" target="blank" rel="noopener noreferrer" size="small"><HiLink/> More Information </Button>
        
       </CardActions>
     </Card>
       
 
  
 ```
\ No newline at end of file