diff --git a/public/pages/Correlations/components/CorrelationGraph.tsx b/public/pages/Correlations/components/CorrelationGraph.tsx
index 4de34e6fc..dcbfe6eca 100644
--- a/public/pages/Correlations/components/CorrelationGraph.tsx
+++ b/public/pages/Correlations/components/CorrelationGraph.tsx
@@ -27,7 +27,7 @@ export const CorrelationGraph: React.FC<CorrelationGraphProps> = ({
   getNetwork,
 }) => {
   return loadingData ? (
-    <div style={{ margin: '75px 47%' }}>
+    <div style={{ margin: '0px 47%', height: 800, paddingTop: 384 }}>
       <EuiLoadingChart size="xl" className="chart-view-container-loading" />
     </div>
   ) : (
diff --git a/public/pages/Correlations/components/FindingCard.tsx b/public/pages/Correlations/components/FindingCard.tsx
index fe1d3698c..2305c1de8 100644
--- a/public/pages/Correlations/components/FindingCard.tsx
+++ b/public/pages/Correlations/components/FindingCard.tsx
@@ -8,7 +8,6 @@ import {
   EuiPanel,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiText,
   EuiButtonIcon,
   EuiSpacer,
   EuiBadge,
@@ -42,78 +41,84 @@ export const FindingCard: React.FC<FindingCardProps> = ({
   finding,
   findings,
 }) => {
-  const correlationHeader = correlationData ? (
-    <>
-      <EuiFlexGroup className={'finding-card-header'}>
-        <EuiFlexItem grow={true}>
-          <EuiText style={{ fontSize: 22, fontWeight: 300 }}>{correlationData.score}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+  const list = [
+    {
+      title: 'Detection rule',
+      description: detectionRule.name,
+    },
+  ];
+
+  if (finding.correlationRule) {
+    list.unshift({
+      title: 'Correlation score',
+      description: finding.correlationRule.name,
+    });
+  }
+
+  const badgePadding = '2px 7px';
+  const { text: severityText, background } = getSeverityColor(detectionRule.severity);
+
+  const header = (
+    <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="s">
+      <EuiFlexItem grow={false}>
+        <div>
+          <EuiBadge color={background} style={{ padding: badgePadding, color: severityText }}>
+            {getSeverityLabel(detectionRule.severity)}
+          </EuiBadge>
+          <EuiBadge color="hollow" style={{ padding: '3px 10px' }}>
+            {getLabelFromLogType(logType)}
+          </EuiBadge>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <div>
           <EuiToolTip content={'View finding details'}>
             <EuiButtonIcon
               aria-label={'View finding details'}
               data-test-subj={`view-details-icon`}
-              iconType={'expand'}
+              iconType={'inspect'}
               onClick={() => DataStore.findings.openFlyout(finding, findings, false)}
             />
           </EuiToolTip>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
           <EuiButtonIcon
-            iconType={'inspect'}
-            onClick={() => correlationData.onInspect(id, logType)}
+            iconType={correlationData ? 'pin' : 'pinFilled'}
+            onClick={() => correlationData?.onInspect(id, logType)}
+            disabled={!correlationData}
           />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiText size="s">Correlation score</EuiText>
-      <EuiSpacer size="m" />
-    </>
-  ) : null;
+        </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
 
-  const list = [
-    {
-      title: 'Generated',
-      description: timestamp,
-    },
-    {
-      title: 'Detection rule',
-      description: detectionRule.name,
-    },
-  ];
+  const attrList = <EuiDescriptionList type="column" textStyle="reverse" listItems={list} />;
 
-  return (
+  const relatedFindingCard = (
     <EuiPanel>
-      {correlationHeader}
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="s">
+      {header}
+      <EuiSpacer size="s" />
+      <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" alignItems="center">
         <EuiFlexItem grow={false}>
-          <div>
-            <EuiBadge
-              color={getSeverityColor(detectionRule.severity).background}
-              style={{ padding: '3px 10px' }}
-            >
-              {getSeverityLabel(detectionRule.severity)}
-            </EuiBadge>
-            <EuiBadge color="hollow" style={{ padding: '3px 10px' }}>
-              {getLabelFromLogType(logType)}
-            </EuiBadge>
-          </div>
+          <p>Correlation score</p>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <b>{correlationData?.score}</b>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <span>{timestamp}</span>
         </EuiFlexItem>
-        {!correlationData && (
-          <EuiFlexItem grow={false}>
-            <EuiToolTip content={'View finding details'}>
-              <EuiButtonIcon
-                aria-label={'View finding details'}
-                data-test-subj={`view-details-icon`}
-                iconType={'expand'}
-                onClick={() => DataStore.findings.openFlyout(finding, findings, false)}
-              />
-            </EuiToolTip>
-          </EuiFlexItem>
-        )}
       </EuiFlexGroup>
-      {correlationHeader ? <EuiHorizontalRule margin="s" /> : null}
+      <EuiHorizontalRule margin="s" />
+      {attrList}
+    </EuiPanel>
+  );
+
+  return correlationData ? (
+    relatedFindingCard
+  ) : (
+    <EuiPanel>
+      {header}
       <EuiSpacer size="m" />
-      <EuiDescriptionList type="column" textStyle="reverse" listItems={list} />
+      {attrList}
     </EuiPanel>
   );
 };
diff --git a/public/pages/Correlations/containers/CorrelationsContainer.tsx b/public/pages/Correlations/containers/CorrelationsContainer.tsx
index 3ef67cfe0..55dcbf747 100644
--- a/public/pages/Correlations/containers/CorrelationsContainer.tsx
+++ b/public/pages/Correlations/containers/CorrelationsContainer.tsx
@@ -33,6 +33,7 @@ import {
   EuiButton,
   EuiBadge,
   EuiFilterGroup,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { FilterItem, FilterGroup } from '../components/FilterGroup';
 import { CoreServicesContext } from '../../../components/core_services';
@@ -112,7 +113,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
 
   async componentDidMount(): Promise<void> {
     this.context.chrome.setBreadcrumbs([BREADCRUMBS.SECURITY_ANALYTICS, BREADCRUMBS.CORRELATIONS]);
-    this.updateState();
+    this.updateState(true /* onMount */);
     this.props.onMount();
   }
 
@@ -130,8 +131,8 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
     }
   }
 
-  private async updateState() {
-    if (this.props.location.state) {
+  private async updateState(onMount: boolean = false) {
+    if (onMount && this.props.location.state) {
       const state = this.props.location.state;
 
       const specificFindingInfo: SpecificFindingCorrelations = {
@@ -204,7 +205,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
         createdEdges.add(possibleCombination1);
       });
 
-      this.setState({ graphData });
+      this.setState({ graphData, specificFindingInfo: undefined });
     }
   }
 
@@ -307,19 +308,23 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
   private createNodeTooltip = ({ detectionRule, timestamp, logType }: CorrelationFinding) => {
     const { text, background } = getSeverityColor(detectionRule.severity);
     const tooltipContent = (
-      <div style={{ backgroundColor: '#535353', color: '#ffffff', padding: '8px' }}>
-        <EuiFlexGroup alignItems="center">
+      <div style={{ backgroundColor: '#535353', color: '#ffffff', padding: '15px' }}>
+        <EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="s">
           <EuiFlexItem grow={false}>
             <EuiBadge style={{ color: text }} color={background}>
               {getSeverityLabel(detectionRule.severity)}
             </EuiBadge>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <strong>{getLabelFromLogType(logType)}</strong>
+            <EuiBadge>{getLabelFromLogType(logType)}</EuiBadge>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="s" />
         <EuiText>{timestamp}</EuiText>
+        <EuiHorizontalRule margin="xs" />
+        <strong>Detection rule</strong>
+        <EuiSpacer size="s" />
+        <p>{detectionRule.name}</p>
       </div>
     );
 
@@ -385,6 +390,7 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
         ...option,
         checked: 'on',
       })),
+      specificFindingInfo: undefined,
     });
   };
 
@@ -435,7 +441,8 @@ export class Correlations extends React.Component<CorrelationsProps, Correlation
             onClose={this.closeFlyout}
             ownFocus={true}
             type="push"
-            maxWidth="300px"
+            maxWidth="400px"
+            key={findingCardsData.finding.id}
           >
             <EuiFlyoutHeader hasBorder>
               <EuiFlexGroup>