diff --git a/frontend/app/components/Session_/Issues/IssueForm.js b/frontend/app/components/Session_/Issues/IssueForm.js
index bedbb2860..b263739f3 100644
--- a/frontend/app/components/Session_/Issues/IssueForm.js
+++ b/frontend/app/components/Session_/Issues/IssueForm.js
@@ -3,17 +3,17 @@ import { connect } from 'react-redux';
 import { Form, Input, Button, CircularLoader } from 'UI';
 //import {  } from 'Duck/issues';
 import { addActivity, init, edit, fetchAssignments, fetchMeta } from 'Duck/assignments';
-import Select from 'Shared/Select'
+import Select from 'Shared/Select';
 
 const SelectedValue = ({ icon, text }) => {
-  return(
+  return (
     <div className="flex items-center">
       {/* <img className="mr-2" src={ icon } width="13" height="13" /> */}
-      { icon }
-      <span>{ text }</span>
+      {icon}
+      <span>{text}</span>
     </div>
-  )
-}
+  );
+};
 
 class IssueForm extends React.PureComponent {
   componentDidMount() {
@@ -21,7 +21,7 @@ class IssueForm extends React.PureComponent {
 
     this.props.init({
       projectId: projects[0] ? projects[0].id : '',
-      issueType: issueTypes[0] ? issueTypes[0].id : ''
+      issueType: issueTypes[0] ? issueTypes[0].id : '',
     });
   }
 
@@ -41,43 +41,46 @@ class IssueForm extends React.PureComponent {
     addActivity(sessionId, instance.toJS()).then(() => {
       const { errors } = this.props;
       if (!errors || errors.length === 0) {
-        this.props.init({projectId: instance.projectId});
+        this.props.init({ projectId: instance.projectId });
         this.props.fetchAssignments(sessionId);
         this.props.closeHandler();
       }
     });
-  }
+  };
 
   write = (e) => {
-    const { target: { name, value } } = e;
-    this.props.edit({ [ name ]: value })
+    const {
+      target: { name, value },
+    } = e;
+    this.props.edit({ [name]: value });
   };
-  writeOption = ({ name, value }) => this.props.edit({ [ name ]: value });
+  writeOption = ({ name, value }) => this.props.edit({ [name]: value.value });
 
   render() {
-    const { creating, projects, users, issueTypes, instance, closeHandler, metaLoading } = this.props;
-    const projectOptions = projects.map(({name, id}) => ({label: name, value: id })).toArray();
-    const userOptions = users.map(({name, id}) => ({label: name, value: id })).toArray();
+    const { creating, projects, users, issueTypes, instance, closeHandler, metaLoading } =
+      this.props;
+    const projectOptions = projects.map(({ name, id }) => ({ label: name, value: id })).toArray();
+    const userOptions = users.map(({ name, id }) => ({ label: name, value: id })).toArray();
 
-    const issueTypeOptions = issueTypes.map(({name, id, iconUrl, color }) => {
-      return { label: name, value: id, iconUrl, color }
+    const issueTypeOptions = issueTypes.map(({ name, id, iconUrl, color }) => {
+      return { label: name, value: id, iconUrl, color };
     });
 
-    const selectedIssueType = issueTypes.filter(issue => issue.id == instance.issueType)[0];
+    const selectedIssueType = issueTypes.filter((issue) => issue.id == instance.issueType)[0];
 
     return (
-      <Form onSubmit={ this.onSubmit } className="text-left">
+      <Form onSubmit={this.onSubmit} className="text-left">
         <Form.Field className="mb-15-imp">
           <label htmlFor="issueType">
             <span className="mr-2">Project</span>
-            <CircularLoader loading={ metaLoading } />
+            <CircularLoader loading={metaLoading} />
           </label>
           <Select
             name="projectId"
-            options={ projectOptions }
-            value={ instance.projectId }
+            options={projectOptions}
+            // value={ instance.projectId }
             fluid
-            onChange={ this.writeOption }
+            onChange={this.writeOption}
             placeholder="Project"
           />
         </Form.Field>
@@ -87,12 +90,18 @@ class IssueForm extends React.PureComponent {
             selection
             name="issueType"
             labeled
-            options={ issueTypeOptions }
-            value={ instance.issueType }
+            options={issueTypeOptions}
+            // value={ instance.issueType }
             fluid
-            onChange={ this.writeOption }
+            onChange={this.writeOption}
             placeholder="Select issue type"
-            text={ selectedIssueType ? <SelectedValue icon={ selectedIssueType.iconUrl } text={ selectedIssueType.name } /> : '' }
+            text={
+              selectedIssueType ? (
+                <SelectedValue icon={selectedIssueType.iconUrl} text={selectedIssueType.name} />
+              ) : (
+                ''
+              )
+            }
           />
         </Form.Field>
 
@@ -101,10 +110,10 @@ class IssueForm extends React.PureComponent {
           <Select
             selection
             name="assignee"
-            options={ userOptions }
-            value={ instance.assignee }
+            options={userOptions}
+            // value={ instance.assignee }
             fluid
-            onChange={ this.writeOption }
+            onChange={this.writeOption}
             placeholder="Select a user"
           />
         </Form.Field>
@@ -113,9 +122,9 @@ class IssueForm extends React.PureComponent {
           <label htmlFor="title">Summary</label>
           <Input
             name="title"
-            value={ instance.title }
-            placeholder='Issue Title / Summary'
-            onChange={ this.write }
+            value={instance.title}
+            placeholder="Issue Title / Summary"
+            onChange={this.write}
           />
         </Form.Field>
 
@@ -127,25 +136,22 @@ class IssueForm extends React.PureComponent {
           <textarea
             name="description"
             rows="2"
-            value={ instance.description }
+            value={instance.description}
             placeholder="E.g. Found this issue at 3:29secs"
-            onChange={ this.write }
+            onChange={this.write}
           />
         </Form.Field>
 
         <Button
-          loading={ creating }
+          loading={creating}
           variant="primary"
-          disabled={ !instance.validate() }
+          disabled={!instance.validate()}
           className="float-left mr-2"
           type="submit"
         >
           {'Create'}
         </Button>
-        <Button
-          type="button"
-          onClick={ closeHandler }
-        >
+        <Button type="button" onClick={closeHandler}>
           {'Cancel'}
         </Button>
       </Form>
@@ -153,12 +159,15 @@ class IssueForm extends React.PureComponent {
   }
 }
 
-export default connect(state => ({
-  creating: state.getIn(['assignments', 'addActivity', 'loading']),
-  projects: state.getIn(['assignments', 'projects']),
-  users: state.getIn(['assignments', 'users']),
-  instance: state.getIn(['assignments', 'instance']),
-  metaLoading: state.getIn(['assignments', 'fetchMeta', 'loading']),
-  issueTypes: state.getIn(['assignments', 'issueTypes']),
-  errors: state.getIn([ 'assignments', 'addActivity', 'errors' ])
-}), { addActivity, init, edit, fetchAssignments, fetchMeta })(IssueForm)
+export default connect(
+  (state) => ({
+    creating: state.getIn(['assignments', 'addActivity', 'loading']),
+    projects: state.getIn(['assignments', 'projects']),
+    users: state.getIn(['assignments', 'users']),
+    instance: state.getIn(['assignments', 'instance']),
+    metaLoading: state.getIn(['assignments', 'fetchMeta', 'loading']),
+    issueTypes: state.getIn(['assignments', 'issueTypes']),
+    errors: state.getIn(['assignments', 'addActivity', 'errors']),
+  }),
+  { addActivity, init, edit, fetchAssignments, fetchMeta }
+)(IssueForm);
diff --git a/frontend/app/components/Session_/Issues/Issues.js b/frontend/app/components/Session_/Issues/Issues.js
index e47ea8fc9..200b5b278 100644
--- a/frontend/app/components/Session_/Issues/Issues.js
+++ b/frontend/app/components/Session_/Issues/Issues.js
@@ -5,6 +5,7 @@ import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import IssuesModal from './IssuesModal';
 import { fetchProjects, fetchMeta } from 'Duck/assignments';
 import stl from './issues.module.css';
+import { Tooltip } from 'react-tippy'
 
 @connect(state => ({
   issues: state.getIn(['assignments', 'list']),
@@ -59,17 +60,17 @@ class Issues extends React.Component {
     return (
         <div className="relative">
           <div className={ stl.buttonWrapper} onClick={this.handleOpen}>
-            <Popup
+            <Tooltip
               open={this.state.showModal}
               position="bottom"
               interactive
-              animation="shift"
+              // animation="shift"
               trigger="click"
               unmountHTMLWhenHide
               // @ts-ignore
               theme='light'
               arrow
-              content={
+              html={
                 <OutsideClickDetectingDiv onClickOutside={this.closeModal}>
                   <IssuesModal
                     provider={provider}
@@ -82,8 +83,8 @@ class Issues extends React.Component {
               <div className="flex items-center" onClick={this.handleOpen} disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}>
                     <Icon name={ `integrations/${ provider === 'jira' ? 'jira' : 'github'}` } size="16" />
                     <span className="ml-2">Create Issue</span>
-                  </div>
-            </Popup>
+                </div>
+            </Tooltip>
           </div>
         </div>
     );