diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/ArcNode.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/ArcNode.js
index 79dfa4b18..5512d810b 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/ArcNode.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/ArcNode.js
@@ -1,9 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import {Popover, OverlayTrigger} from 'react-bootstrap';
+import { Popover, OverlayTrigger } from 'react-bootstrap';
 import * as d3 from 'd3'
 
 class ArcNode extends React.Component {
+    
+  handleClick(e_) { this.props.disableHover(this.refs.overlay); }
+  handleOver(e_) { if(this.props.hover) { this.refs.overlay.show(); }  }
+  handleOut(e_) { if(this.props.hover){ this.refs.overlay.hide(); }  }
+    
   render() {
     let {prefix, index, data} = this.props;
 
@@ -11,29 +16,29 @@ class ArcNode extends React.Component {
     let id = prefix + 'Node_' + index;
 
     return (
-      <OverlayTrigger key={prefix + 'arcGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
-                      overlay={<Popover key={prefix + 'ArcTooltip' + index} id={prefix + 'Popover' + index}
-                                        style={{backgroundColor: data.hex}}
-                                        title={data.node.pillar}>{data.tooltip}</Popover>}>
-        <g transform={'rotate(180)'} id={data.node.pillar} key={prefix + 'arcGroup' + index}>
-          <path
+          <g transform={'rotate(180)'} id={data.node.pillar} key={prefix + 'arcGroup' + index}>
+              <OverlayTrigger ref={'overlay'} key={prefix + 'arcOverlayTrigger' + index} trigger={null} placement={data.popover} overlay={<Popover id={prefix + 'ArcPopover' + index} style={{backgroundColor: data.hex}} title={data.node.pillar}>{data.tooltip}</Popover>} rootClose>
+                <path
 
-            id={prefix + 'Node_' + index}
-            className={'arcNode'}
-            data-tooltip={data.tooltip}
-            d={arc()}
-            fill={data.hex}
+                  id={prefix + 'Node_' + index}
+                  className={'arcNode'}
+                  data-tooltip={data.tooltip}
+                  d={arc()}
+                  fill={data.hex}
+                  onClick={this.handleClick.bind(this)}
+                  onMouseEnter={this.handleOver.bind(this)}
+                  onMouseLeave={this.handleOut.bind(this)}
 
-          />
-          <text x={0} dy={data.fontStyle.size * 1.75} fontSize={data.fontStyle.size} fill={'white'} textAnchor='middle'
-                pointerEvents={'none'}>
-            <textPath href={'#' + id} startOffset={'26.4%'}>
-              <tspan fontFamily={'FontAwesome'}>{data.icon + '\u2000'}</tspan>
-              <tspan>{data.label}</tspan>
-            </textPath>
-          </text>
-        </g>
-      </OverlayTrigger>
+                />
+                </OverlayTrigger>
+            <text x={0} dy={data.fontStyle.size * 1.2} fontSize={data.fontStyle.size} fill={'white'} textAnchor='middle'
+                  pointerEvents={'none'}>
+              <textPath href={'#' + id} startOffset={'26.4%'}>
+                <tspan fontFamily={'FontAwesome'}>{data.icon + '\u2000'}</tspan>  
+                <tspan>{data.label}</tspan>
+              </textPath>
+            </text>
+          </g>
     );
   }
 }
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/CircularNode.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/CircularNode.js
index 0c18c9ea8..a74cd74b1 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/CircularNode.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/CircularNode.js
@@ -1,35 +1,38 @@
 import React from 'react'
 import PillarLabel from "../PillarLabel";
-import {Popover, OverlayTrigger} from 'react-bootstrap';
+import { Popover, OverlayTrigger } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 class CircularNode extends React.Component {
+
+  handleClick(e_) { this.props.disableHover(this.refs.overlay); }
+  handleOver(e_) { if(this.props.hover) { this.refs.overlay.show(); }  }
+  handleOut(e_) { if(this.props.hover){ this.refs.overlay.hide(); }  }
+    
   render() {
     let {prefix, index, data} = this.props;
 
     let translate = 'translate(' + data.cx + ',' + data.cy + ')';
     return (
-      <OverlayTrigger key={prefix + 'circularGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
-                      overlay={<Popover key={prefix + 'CircularTooltip' + index} id={prefix + 'Popover' + index}
-                                        style={{backgroundColor: data.hex}}
-                                        title={data.node.pillar}>{data.tooltip}</Popover>}>
-        <g transform={translate} id={data.node.pillar} key={prefix + 'circularGroup' + index}>
-          <circle
-            id={prefix + 'Node_' + index}
-            className={'circularNode'}
-            data-tooltip={data.tooltip}
-            r={data.r}
-            opacity={0.8}
-            fill={data.hex}
-          />
-          <foreignObject style={{fontSize: data.fontStyle.size, pointerEvents: 'none'}}
-                         key={prefix + 'PillarLabel' + index} x={data.offset.x - data.fontStyle.size * 6}
-                         y={data.offset.y - data.fontStyle.size} width={data.fontStyle.size * 12}
-                         height={data.fontStyle.size * 6}>
-            <PillarLabel pillar={data.node.pillar} status={data.status}/>
-          </foreignObject>
-        </g>
-      </OverlayTrigger>
+              <g transform={translate} id={data.node.pillar} key={prefix + 'circularGroup' + index}>
+                  <OverlayTrigger ref={'overlay'} key={prefix + 'CircularOverlay' + index} trigger={null} placement={data.popover} overlay={<Popover id={prefix + 'CircularClickPopover' + index} style={{backgroundColor : data.hex}} title={data.node.pillar}>{data.tooltip}</Popover>} rootClose>
+                    <circle
+                      id={prefix + 'Node_' + index}
+                      className={'circularNode'}
+                      data-tooltip={data.tooltip}
+                      r={data.r}
+                      opacity={0.8}
+                      fill={data.hex}
+                      onClick={this.handleClick.bind(this)}
+                      onMouseEnter={this.handleOver.bind(this)}
+                      onMouseLeave={this.handleOut.bind(this)}
+
+                    />
+                    </OverlayTrigger>
+                <foreignObject style={{fontSize: data.fontStyle.size, pointerEvents: 'none'}} key={prefix + 'PillarLabelOject' + index} x={data.offset.x - data.fontStyle.size * 6} y={data.offset.y - data.fontStyle.size} width={ data.fontStyle.size * 12} height={data.fontStyle.size * 6}>
+                    <PillarLabel key={prefix + 'PillarLabel' + index} pillar={data.node.pillar} status={data.status} /> 
+                </foreignObject>
+              </g>
     );
   }
 }
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/VennDiagram.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/VennDiagram.js
index b4c90e93a..25d36131d 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/VennDiagram.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/VennDiagram.js
@@ -10,44 +10,29 @@ class VennDiagram extends React.Component {
   constructor(props_) {
     super(props_);
 
-    this.state = {tooltip: {top: 0, left: 0, display: 'none', html: ''}};
-
+    this.state = {hover: true, currentPopover: undefined};
+    this._disableHover = this._disableHover.bind(this);
+      
     this.width = this.height = 512;
 
     this.prefix = 'vennDiagram';
-    this.fontStyles = [{size: Math.max(9, this.width / 32), color: 'white'}, {
-      size: Math.max(6, this.width / 80),
-      color: 'black'
-    }];
+    this.fontStyles = [{size: Math.max(9, this.width / 28), color: 'white'}, { size: Math.max(6, this.width / 38), color: 'white'}, { size: Math.max(6, this.width / 48), color: 'white'} ];
     this.offset = this.width / 16;
 
     this.thirdWidth = this.width / 3;
-    this.sixthWidth = this.width / 6;
+    this.width11By2 = this.width / 5.5;
     this.width2By7 = 2 * this.width / 7;
     this.width1By11 = this.width / 11;
     this.width1By28 = this.width / 28;
     this.arcNodesGap = 4;
-
-    this.toggle = false;
-
+      
     this.layout = {
-      Data: {cx: 0, cy: 0, r: this.sixthWidth, offset: {x: 0, y: 0}, popover: 'top'},
-      People: {cx: -this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: this.width1By11, y: 0}, popover: 'right'},
-      Networks: {cx: this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: -this.width1By11, y: 0}, popover: 'left'},
-      Devices: {cx: 0, cy: this.width2By7, r: this.sixthWidth, offset: {x: 0, y: -this.width1By11}, popover: 'top'},
-      Workloads: {
-        cx: 0,
-        cy: -this.width2By7,
-        r: this.sixthWidth,
-        offset: {x: 0, y: this.width1By11},
-        popover: 'bottom'
-      },
-      VisibilityAndAnalytics: {
-        inner: this.thirdWidth - this.width1By28,
-        outer: this.thirdWidth,
-        icon: '\uf070',
-        popover: 'right'
-      },
+      Data: {cx: 0, cy: 0, r: this.width11By2, offset: {x: 0, y: 0}, popover: 'top'},
+      People: {cx: -this.width2By7, cy: 0, r: this.width11By2, offset: {x: this.width1By11 + this.fontStyles[1].size / 5 * 3, y: 0}, popover: 'right'},
+      Networks: {cx: this.width2By7, cy: 0, r: this.width11By2, offset: {x: -this.width1By11 - this.fontStyles[1].size / 5 * 3, y: 0}, popover: 'left'},
+      Devices: {cx: 0, cy: this.width2By7, r: this.width11By2, offset: {x: 0, y: -this.width1By11 + this.fontStyles[1].size / 6 * 3}, popover: 'top'},
+      Workloads: {cx: 0, cy: -this.width2By7, r: this.width11By2, offset: {x: 0, y: this.width1By11}, popover: 'bottom' },
+      VisibilityAndAnalytics: {inner: this.thirdWidth - this.width1By28, outer: this.thirdWidth, icon: '\uf070', popover: 'left'},
       AutomationAndOrchestration: {
         inner: this.thirdWidth - this.width1By28 * 2 - this.arcNodesGap,
         outer: this.thirdWidth - this.width1By28 - this.arcNodesGap,
@@ -68,6 +53,8 @@ class VennDiagram extends React.Component {
              sum(C, I) > 0 and C * I = 0, while C has to be 0
 
     RULE #4: By process of elimination, passed.
+             if the P is bigger by 2 then negative U, first conditional
+             would be true.
 
     */
 
@@ -98,42 +85,51 @@ class VennDiagram extends React.Component {
 
   }
 
-  componentDidMount() {
-    this.parseData();
-  }
-
+  componentDidMount() { this.parseData(); if(this.state.currentPopover !== undefined) { this.state.currentPopover.show(); } }
+    
+  _disableHover(ref_) { this.setState({hover: false, currentPopover: ref_, data: this.state.data });  }
+    
   _onMouseMove(e) {
-
+      
     let self = this;
+    
+    let hidden = 'none';
+    let html = '';
+    let bcolor = '#DEDEDE';
+      
+    if(this.state.currentPopover !== undefined) { this.state.currentPopover.show(); } 
 
-    if (!this.toggle) {
-      let hidden = 'none';
-      let html = '';
-      let bcolor = '#DEDEDE';
+    document.querySelectorAll('circle, path').forEach((d_, i_) => {
+    d_.setAttribute('opacity', "0.8");
+    });
 
-      document.querySelectorAll('circle, path').forEach((d_, i_) => {
-        d_.setAttribute('opacity', "0.8");
-      });
-
-      if (e.target.id.includes('Node')) {
+    if (e.target.id.includes('Node')) {
 
         e.target.setAttribute('opacity', 0.95);
 
         // Set highest z-index
         e.target.parentNode.parentNode.appendChild(e.target.parentNode);
-      } else {
+        
+    } else {
 
         // Return z indices to default
         Object.keys(this.layout).forEach(function (d_, i_) {
-          document.querySelector('#' + self.prefix).appendChild(document.querySelector('#' + self.prefix + 'Node_' + i_).parentNode);
-        })
-      }
-
+          document.querySelector('#' + self.prefix).appendChild(document.querySelector('#' + self.prefix + 'Node_' + i_).parentNode); })
     }
+
   }
-
+    
+  _onClick(e) {
+      
+      if (!e.target.id.includes('Node')) {
+            
+          this.state.currentPopover.hide();
+          this.setState({hover: true, currentPopover: undefined, data: this.state.data });
+      } 
+  }
+    
   parseData() {
-
+      
     let self = this;
     let data = [];
     const omit = (prop, {[prop]: _, ...rest}) => rest;
@@ -158,30 +154,28 @@ class VennDiagram extends React.Component {
 
     });
 
-    this.setState({data: data});
+    this.setState({hover: true, activePopover: undefined, data: data});
     this.render();
   }
-
+    
   buildTooltipHtmlContent(object_) {
 
-    var out = [];
-    Object.keys(object_).forEach(function (d_) {
-      out.push([d_ + ': ' + object_[d_], <br/>]);
-    });
-    return out;
-
+    return Object.keys(object_).map((key_, i_) => { return ( <p key={this.prefix + key_ + i_}>{key_}: {object_[key_]}</p> ) })                                                                              
   }
 
   setLayoutElement(rule_, key_, html_, d_) {
-    if (rule_ == null) {
-      throw Error('The node scores are invalid');
-    }
+   
+    if(rule_ === null) { console.log(Error('The node scores are invalid, please check the data or the rules set.')); }
 
     if (key_ === 'Data') {
       this.layout[key_].fontStyle = this.fontStyles[0];
-    } else {
+    }
+    else if(this.layout[key_].hasOwnProperty('cx')){
       this.layout[key_].fontStyle = this.fontStyles[1];
     }
+    else {
+      this.layout[key_].fontStyle = this.fontStyles[2];
+    }
 
     this.layout[key_].hex = this.rules[rule_].hex;
     this.layout[key_].status = this.rules[rule_].status;
@@ -196,7 +190,6 @@ class VennDiagram extends React.Component {
     } else {
       // equivalent to center translate (width/2, height/2)
       let viewPortParameters = (-this.width / 2) + ' ' + (-this.height / 2) + ' ' + this.width + ' ' + this.height;
-
       let nodes = Object.values(this.layout).map((d_, i_) => {
         if (d_.hasOwnProperty('cx')) {
           return (
@@ -205,6 +198,8 @@ class VennDiagram extends React.Component {
               key={this.prefix + 'CircularNode' + i_}
               index={i_}
               data={d_}
+              hover={this.state.hover}
+              disableHover={this._disableHover}
             />
           );
         } else {
@@ -215,17 +210,19 @@ class VennDiagram extends React.Component {
               key={this.prefix + 'ArcNode' + i_}
               index={i_}
               data={d_}
+              hover={this.state.hover}
+              disableHover={this._disableHover}
             />
           );
         }
       });
 
       return (
-        <div ref={(divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)}>
-          <svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'}
+        <div ref={(divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)} onClick={this._onClick.bind(this)}>
+            <svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'}
                xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
             {nodes}
-          </svg>
+            </svg>
         </div>
       )
     }