diff --git a/assets/src/components/TermCard.js b/assets/src/components/TermCard.js
index 86a28c8f..1e352787 100644
--- a/assets/src/components/TermCard.js
+++ b/assets/src/components/TermCard.js
@@ -1,231 +1,235 @@
 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 } 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 InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'
 
 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>
       </>
     ))
   
 
     
         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}
               />
-              </Tooltip>
+              <Tooltip disableFocusListener title={i.comment} arrow>
+                <InfoOutlinedIcon fontSize="small"/>
+                </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} {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>
     )
 }