diff --git a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.css b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.css
deleted file mode 100644
index b928040957..0000000000
--- a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.text {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  pointer-events: none;
-  user-select: none;
-  font-size: 10px;
-  fill: #000;
-}
diff --git a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.js b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.js
index 3d81b13204..c30079e5bf 100644
--- a/plugins/tech-radar/src/components/RadarFooter/RadarFooter.js
+++ b/plugins/tech-radar/src/components/RadarFooter/RadarFooter.js
@@ -16,17 +16,26 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './RadarFooter.css';
+import { withStyles } from '@material-ui/core';
 
-export default class RadarFooter extends React.PureComponent {
+const styles = {
+  text: {
+    pointerEvents: 'none',
+    userSelect: 'none',
+    fontSize: '10px',
+    fill: '#000',
+  },
+};
+
+class RadarFooter extends React.PureComponent {
   render() {
-    const { x, y } = this.props;
+    const { x, y, classes } = this.props;
 
     return (
       <text
         transform={`translate(${x}, ${y})`}
         space="preserve"
-        className={styles.text}
+        className={classes.text}
       >
         {'▲ moved up\u00a0\u00a0\u00a0\u00a0\u00a0▼ moved down'}
       </text>
@@ -37,4 +46,7 @@ export default class RadarFooter extends React.PureComponent {
 RadarFooter.propTypes = {
   x: PropTypes.number.isRequired,
   y: PropTypes.number.isRequired,
+  classes: PropTypes.object.isRequired,
 };
+
+export default withStyles(styles)(RadarFooter);