diff --git a/awx/ui/src/screens/TopologyView/Legend.js b/awx/ui/src/screens/TopologyView/Legend.js
index 3ecc5492d5..29e0d0516b 100644
--- a/awx/ui/src/screens/TopologyView/Legend.js
+++ b/awx/ui/src/screens/TopologyView/Legend.js
@@ -23,7 +23,8 @@ const Wrapper = styled.div`
   top: -20px;
   left: 0;
   padding: 10px;
-  width: 190px;
+  width: 150px;
+  background-color: rgba(255, 255, 255, 0.85);
 `;
 const Button = styled(PFButton)`
   width: 20px;
@@ -88,7 +89,7 @@ function Legend() {
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button variant="primary" isSmall>
-              H
+              Hy
             </Button>
           </DescriptionListTerm>
           <DescriptionListDescription>Hybrid node</DescriptionListDescription>
diff --git a/awx/ui/src/screens/TopologyView/Tooltip.js b/awx/ui/src/screens/TopologyView/Tooltip.js
index 2026525260..f294e5a1ed 100644
--- a/awx/ui/src/screens/TopologyView/Tooltip.js
+++ b/awx/ui/src/screens/TopologyView/Tooltip.js
@@ -24,6 +24,7 @@ const Wrapper = styled.div`
   right: 0;
   padding: 10px;
   width: 20%;
+  background-color: rgba(255, 255, 255, 0.85);
 `;
 const Button = styled(PFButton)`
   width: 20px;