diff --git a/awx/ui/src/screens/TopologyView/Legend.js b/awx/ui/src/screens/TopologyView/Legend.js
index 29e0d0516b..2d729e5737 100644
--- a/awx/ui/src/screens/TopologyView/Legend.js
+++ b/awx/ui/src/screens/TopologyView/Legend.js
@@ -56,11 +56,11 @@ const Text = styled(PFText)`
 
 function Legend() {
   return (
-    <Wrapper class="legend" data-cy="legend">
+    <Wrapper className="legend" data-cy="legend">
       <TextContent>
         <Text
           component={TextVariants.small}
-          style={{ 'font-weight': 'bold', color: 'black' }}
+          style={{ fontWeight: 'bold', color: 'black' }}
         >
           Legend
         </Text>
diff --git a/awx/ui/src/screens/TopologyView/Tooltip.js b/awx/ui/src/screens/TopologyView/Tooltip.js
index f294e5a1ed..142f345448 100644
--- a/awx/ui/src/screens/TopologyView/Tooltip.js
+++ b/awx/ui/src/screens/TopologyView/Tooltip.js
@@ -50,12 +50,12 @@ function Tooltip({
   redirectToDetailsPage,
 }) {
   return (
-    <Wrapper class="tooltip" data-cy="tooltip">
+    <Wrapper className="tooltip" data-cy="tooltip">
       {isNodeSelected === false ? (
         <TextContent>
           <Text
             component={TextVariants.small}
-            style={{ 'font-weight': 'bold', color: 'black' }}
+            style={{ fontWeight: 'bold', color: 'black' }}
           >
             Details
           </Text>