diff --git a/client/src/PlayerColor.js b/client/src/PlayerColor.js
index a179ef4..c4a669c 100644
--- a/client/src/PlayerColor.js
+++ b/client/src/PlayerColor.js
@@ -2,15 +2,11 @@
 import React from "react";
 import Avatar from '@mui/material/Avatar'
 
-import { useStyles } from './Styles.js';
-
 import "./PlayerColor.css";
 
 const PlayerColor = ({ color }) => {
-  const classes = useStyles();
-
   return (
-    <Avatar className={['PlayerColor', classes[color]].join(' ')}/>
+    <Avatar className={['PlayerColor', color].join(' ')}/>
   );
 };
 
diff --git a/client/src/Styles.js b/client/src/Styles.js
deleted file mode 100644
index 47982c5..0000000
--- a/client/src/Styles.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { makeStyles } from '@mui/material/styles';
-import { orange, lightBlue, red, grey } from '@mui/material/colors';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-  R: {
-    color: theme.palette.getContrastText(red[500]),
-    backgroundColor: red[500],
-  },
-  O: {
-    color: theme.palette.getContrastText(orange[500]),
-    backgroundColor: orange[500],
-  },
-  W: {
-    color: theme.palette.getContrastText(grey[50]),
-    backgroundColor: grey[50],
-  },
-  B: {
-    color: theme.palette.getContrastText(lightBlue[500]),
-    backgroundColor: lightBlue[500],
-  },
-}));
-
-
-export { useStyles };
\ No newline at end of file