diff --git a/web/src/components/Hand.vue b/web/src/components/Hand.vue
index f5abf56..a682d50 100644
--- a/web/src/components/Hand.vue
+++ b/web/src/components/Hand.vue
@@ -184,7 +184,8 @@ export default {
 @import "../css/style.css";
 
 #PlayerHand {
-	background-color: var(--hand-background);
+	background: var(--hand-background);
+	color: var(--hand-text);
 	margin: 0 auto;
 	padding: 0px;
 	width: 95%;
diff --git a/web/src/css/theme.css b/web/src/css/theme.css
index 35dd22b..f0f416a 100644
--- a/web/src/css/theme.css
+++ b/web/src/css/theme.css
@@ -39,6 +39,7 @@
 
 	/* Hand colours */
 	--hand-background: rgba(255, 255, 255, 0.2);
+	--hand-text: var(--dark-font-colour);
 
 	/*
 		The colours for the cards in the hands of the players