diff --git a/package.json b/package.json
index 2c9b4b0..2eb2305 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "5.5.5",
+    "version": "5.5.6",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",
diff --git a/public/manifest.json b/public/manifest.json
index eb85ed3..30468b4 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,7 +1,7 @@
 {
   "short_name": "Cards 110",
   "name": "Cards 110",
-  "version": "5.5.5",
+  "version": "5.5.6",
   "icons": [
     {
       "src": "./assets/favicon.png",
@@ -13,4 +13,4 @@
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"
-}
\ No newline at end of file
+}
diff --git a/src/components/Game/PlayerCard.tsx b/src/components/Game/PlayerCard.tsx
index 1426919..87c4322 100644
--- a/src/components/Game/PlayerCard.tsx
+++ b/src/components/Game/PlayerCard.tsx
@@ -10,8 +10,9 @@ import { Player } from "model/Player"
 
 interface PlayerRowI {
     player: Player
+    className?: string
 }
-const PlayerCard: React.FC<PlayerRowI> = ({ player }) => {
+const PlayerCard: React.FC<PlayerRowI> = ({ player, className }) => {
     const round = useAppSelector(getRound)
     const players = useAppSelector(getGamePlayers)
     const playerProfiles = useAppSelector(getPlayerProfiles)
@@ -48,7 +49,7 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player }) => {
                 <CardImg
                     alt={profile.name}
                     src={profile.picture}
-                    className="img-center avatar"
+                    className={`img-center avatar ${className}`}
                 />
                 <CardImgOverlay>
                     <CardText className="overlay-score">
diff --git a/src/components/Game/PlayersAndCards.tsx b/src/components/Game/PlayersAndCards.tsx
index 2d3c5a2..2451cc5 100644
--- a/src/components/Game/PlayersAndCards.tsx
+++ b/src/components/Game/PlayersAndCards.tsx
@@ -28,10 +28,11 @@ const PlayersAndCards = () => {
                     md={sortedPlayers.length}
                     lg={sortedPlayers.length}
                     xl={sortedPlayers.length}>
-                    {sortedPlayers.map(player => (
+                    {sortedPlayers.map((player, index) => (
                         <PlayerCard
                             key={`playercard_${player.id}`}
                             player={player}
+                            className={`image-team${(index % 3) + 1}-filter`}
                         />
                     ))}
                 </Row>
diff --git a/src/pages/Home/_home.scss b/src/pages/Home/_home.scss
index dea3bab..fce53d4 100644
--- a/src/pages/Home/_home.scss
+++ b/src/pages/Home/_home.scss
@@ -90,6 +90,21 @@
     border-radius: 50%;
 }
 
+.image-team1-filter {
+    border: solid 4px red;
+    filter: saturate(2);
+}
+
+.image-team2-filter {
+    border: solid 4px yellow;
+    filter: sepia(100%);
+}
+
+.image-team3-filter {
+    border: solid 4px blue;
+    // filter: invert(100%);
+}
+
 .clickable:hover {
     cursor: pointer;
 }