diff --git a/Dockerfile b/Dockerfile
index ccc89200..754d6a2a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,108 +1,107 @@
 # The first instruction is what image we want to base our container on
 # We Use an official Python runtime as a parent image
 FROM python:3.9
 
 # The enviroment variable ensures that the python output is set straight
 # to the terminal with out buffering it first
 ENV PYTHONUNBUFFERED 1
 
 # Not forcing anybody's hand here, just a bunch of packages that could become useful soon
 RUN apt-get update && \
     apt-get upgrade -y && \     
     apt-get install -y nginx supervisor sqlite3 mariadb-client rsync && \
         pip3 install -U pip setuptools && \
     rm -rf /var/lib/apt/lists/*
 
 
 
 # Set the working directory to /OACCT_checker
 WORKDIR /oacct_checker
 #RUN chown 1001 /oacct_checker
 
 # Copy the current directory contents into the container at /OACCT_checker
 
 
 ADD . /oacct_checker/
 
 # Install any needed packages specified in requirements.txt
 RUN pip install -r requirements.txt
 
 # install Node.JS ansd NPM
 RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
 RUN apt-get install -y nodejs
 
 # frontend with node js 
 RUN npm install
 
 
 # COPY . /oacct_checker/
 #RUN chown -R 1001 /oacct_checker
 #RUN find /oacct_checker -path "*/node_modules/*" ! -path "*/node_modules" -exec chown 1001:0 {} \;
 RUN chown 1001:0 /oacct_checker
 RUN chown -R 1001:0 /oacct_checker/static/ /oacct_checker/styleguide
 # Permissions as per https://docs.openshift.com/container-platform/3.11/creating_images/guidelines.html#openshift-specific-guidelines
 #RUN chgrp -R 0 /oacct_checker && \
 #    chmod -R g=u /oacct_checker
 #RUN find /oacct_checker ! -path "*/node_modules/*" ! -path "*/node_modules" -exec chmod g=u {} \;
 RUN chmod g=u /oacct_checker
 RUN chmod -R g=u /oacct_checker/static/ /oacct_checker/styleguide
 
 # install uwsgi now because it takes a little while
 RUN pip3 install uwsgi
 
 # setup all the configfiles
 COPY conf/supervisord.conf /etc/supervisor/supervisord.conf
 RUN echo "daemon off;" >> /etc/nginx/nginx.conf
 COPY conf/nginx-app.conf /etc/nginx/sites-available/default
 COPY conf/supervisor-app.conf /etc/supervisor/conf.d/
 
 # not really necessary on OpenShift but doesn't hurt
 COPY conf/ssl/nginx-selfsigned.key /etc/ssl/private/
 COPY conf/ssl/nginx-selfsigned.crt /etc/ssl/certs/
 COPY conf/ssl/dhparam.pem /etc/ssl/certs/
 COPY conf/ssl/self-signed.conf /etc/nginx/snippets
 COPY conf/ssl/ssl-params.conf /etc/nginx/snippets
 
 
 # Adjust permissions to allow supervisord & nginx logs on Openshift
 RUN chmod -R a+w  /var/log/
 RUN chmod -R a+w /var/run/
 RUN chmod a+w /var/lib/nginx/ 
 RUN chmod a+rx /etc/ssl/private/
 
 # comment user directive as master process is run as user in OpenShift anyhow
 RUN sed -i.bak 's/^user/#user/' /etc/nginx/nginx.conf
 
 # Redirect nginx logs to stdout and stderr to make them accessible on OpenShift
 #RUN ln -sf /dev/stdout /var/log/nginx/access.log && ln -sf /dev/stderr /var/log/nginx/error.log
 RUN touch /var/log/nginx/access.log /var/log/nginx/error.log
 RUN chmod a+r /var/log/nginx/access.log /var/log/nginx/error.log
 
 RUN touch /var/log/wsgi.log /var/log/wsgi2.log
 RUN chmod a+rw /var/log/wsgi.log /var/log/wsgi2.log
 
+# build styleguide documentation
+RUN npm run styleguide:build
 
 # build app for production
 RUN npm run build
 
-# build styleguide documentation
-RUN npm run styleguide:build
-
 # Collect static files
 RUN python manage.py collectstatic --no-input
 
 #User at the end to avoid access error during building process 
 USER 1001
 
 
 #CMD /bin/bash -c 'python3 manage.py runserver 0.0.0.0:8080'
 CMD supervisord -n -c /etc/supervisor/supervisord.conf
 
 # CMD /bin/bash -c 'python3 manage.py collectstatic --noinput && python3 manage.py runserver 0.0.0.0:8080'
 # test with static files
 # PermissionError: [Errno 13] Permission denied: '/oacct_checker/staticfiles'
 # 15.03.2021 new error PermissionError: [Errno 1] Operation not permitted
 # CMD /bin/bash -c 'python3 manage.py collectstatic --noinput && python3 manage.py runserver 0.0.0.0:8080'
 
 #test with npm run build --> npm not found
 
diff --git a/assets/src/components/TermCard.js b/assets/src/components/TermCard.js
index 7569c09a..edf9f470 100644
--- a/assets/src/components/TermCard.js
+++ b/assets/src/components/TermCard.js
@@ -1,228 +1,247 @@
 import React from "react"
-import { makeStyles } from '@material-ui/core/styles';
+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 } 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';
 
 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);
 
 
 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 => (
 
             
               <>
+              <HtmlTooltip disableFocusListener
+              title={
+                <React.Fragment>
+                  <Typography color="inherit">Cost Factor information</Typography>
+                  {i.comment}
+                </React.Fragment>
+              }
+            >
               <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}
+                // title={i.comment}
               />
+              </HtmlTooltip>
               </>
             
           ))
 
         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"
+                // 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"
+                // 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"
+                // 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>
     )
 }
 
diff --git a/assets/src/components/TermCard.md b/assets/src/components/TermCard.md
index 382e2fde..40795a9d 100644
--- a/assets/src/components/TermCard.md
+++ b/assets/src/components/TermCard.md
@@ -1,186 +1,210 @@
 
 ### Description
 Recieve data for each term and display all the important condition.
 
 ```js
 import React from "react"
-import { makeStyles } from '@material-ui/core/styles';
+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 } from 'react-icons/fa';
+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>
+              }
+            >
               <Chip
                 key="4"
                 size="small"
                 avatar={<FaCoins />}
                 label="100000£"
                 // clickable={handleClick}
                 // color="secondary"
                 // onDelete={handleDelete}
                 className={classes.chip}
                 style={{ background: "#FFFFFF"}}
-                title="this a comment"
               />
-           
+          </HtmlTooltip>
           
 
            <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