diff --git a/pkg/client/src/components/Player.tsx b/pkg/client/src/components/Player.tsx
index 020d9ad..3dff113 100644
--- a/pkg/client/src/components/Player.tsx
+++ b/pkg/client/src/components/Player.tsx
@@ -17,7 +17,9 @@ export default (props: { playerKey: string } & Stylable) => {
 
 	return (
 		<div
-			id={`player-${props.playerKey}`}
+			ref={(e) => {
+				if (table != null) table.playerRefs[props.playerKey] = e;
+			}}
 			style={{
 				...props.style,
 				"background-color": playerColor(props.playerKey),
diff --git a/pkg/client/src/components/Table.tsx b/pkg/client/src/components/Table.tsx
index 6e5d320..f68ee04 100644
--- a/pkg/client/src/components/Table.tsx
+++ b/pkg/client/src/components/Table.tsx
@@ -30,6 +30,7 @@ export const TableContext = createContext<{
 	wsEvents: Stream<TWsOut, any>;
 	playerNames: Store<{ [key: string]: string }>;
 	players: Accessor<string[]>;
+	playerRefs: { [key: string]: HTMLDivElement };
 }>();
 
 export default (props: { tableKey: string }) => {
@@ -94,6 +95,7 @@ export default (props: { tableKey: string }) => {
 				view,
 				playerNames,
 				players,
+				playerRefs: {},
 			}}
 		>
 			{/* Player avatars around the table */}
diff --git a/pkg/client/src/components/games/simple.tsx b/pkg/client/src/components/games/simple.tsx
index 1a3c5ce..28aa804 100644
--- a/pkg/client/src/components/games/simple.tsx
+++ b/pkg/client/src/components/games/simple.tsx
@@ -59,7 +59,7 @@ export default () => {
 				>
 					{([playerKey, handCount], i) => (
 						<Portal
-							mount={document.getElementById(`player-${playerKey}`)!}
+							mount={table.playerRefs[playerKey]}
 							ref={(ref) => {
 								console.log("Setting hand ref");
 								const midOffset =