diff --git a/src/app.html b/src/app.html
index 9120b32..e870dca 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,7 +7,7 @@
     <title>yukiotoko</title>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="bg-dark text-light">
+	<body data-sveltekit-preload-data="hover" class="bg-dark text-text">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/Player.svelte b/src/lib/Player.svelte
index 4c9267c..7be9aa7 100644
--- a/src/lib/Player.svelte
+++ b/src/lib/Player.svelte
@@ -9,13 +9,11 @@
 
 <div class="flex flex-col gap-2">
 	<div class="flex items-center justify-between">
-		<p>{player.name}</p>
+		<p class="font-bold text-light">{player.name}</p>
 		<div class="flex gap-2">
 			<Rating rating={player.rating} />
 			<BattleRank rank={player.battleRank} class="w-16" />
 		</div>
 	</div>
-	{#if player.team}
-		<Team team={player.team} />
-	{/if}
+	<Team team={player?.team ?? { name: 'No Team', rank: 0 }} />
 </div>
diff --git a/src/lib/Room.svelte b/src/lib/Room.svelte
index d1dcefd..1de15bf 100644
--- a/src/lib/Room.svelte
+++ b/src/lib/Room.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { User, Calendar } from 'lucide-svelte';
+	import { onMount } from 'svelte';
 	import Player from './Player.svelte';
 	import BattleRank from './BattleRank.svelte';
 	import GameVersion from './GameVersion.svelte';
@@ -7,7 +8,6 @@
 	import Date from './Date.svelte';
 	import axios from 'axios';
 	import type { Room } from './types';
-	import { onMount } from 'svelte';
 
 	let { room }: { room: Room } = $props();
 
@@ -48,8 +48,8 @@
 		</div>
 
 		<div class="flex flex-col">
-			<p class="flex items-center gap-2 text-sub">game version <Separator /> {room.gameVersion}</p>
-			<p class="flex items-center gap-2 text-sub">
+			<p class="flex items-center gap-2">game version <Separator /> {room.gameVersion}</p>
+			<p class="flex items-center gap-2">
 				room battle rank <Separator />
 				{room.roomBattleRank}
 			</p>
@@ -60,7 +60,7 @@
 	</div>
 
 	<div class="flex flex-col gap-4">
-		<p class="flex items-center gap-2">
+		<p class="flex items-center gap-2 text-light">
 			<User class="inline-block w-6" />
 			{room.players.length} / 4
 			<Separator />
diff --git a/src/lib/Team.svelte b/src/lib/Team.svelte
index d800d9a..daef8aa 100644
--- a/src/lib/Team.svelte
+++ b/src/lib/Team.svelte
@@ -11,7 +11,7 @@
 			? 'team-second'
 			: team.rank == 3
 				? 'team-third'
-				: ''}"
+				: 'text-light'}"
 >
 	<p>
 		{team.name}
