some more styling to the frontend

discord_verificiation/playtime-frontend/app/countries/[code]/page.tsx

@@ -1,8 +1,13 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import { getPlayersByCountry } from '@/lib/queries';
+import { attachAvatars } from '@/lib/steamApi';
 import { countryCodeToFlag, countryCodeToName, formatMinutes } from '@/lib/steam';
 
+// Direct DB query, no dynamic route data needed at build time — same
+// reasoning as the /countries listing page.
+export const dynamic = 'force-dynamic';
+
 export default async function CountryPlayersPage({
   params,
   searchParams,
@@ -11,15 +16,20 @@ export default async function CountryPlayersPage({
   searchParams: Promise<{ sort?: string }>;
 }) {
   const { code: rawCode } = await params;
-  const code = decodeURIComponent(rawCode).toUpperCase();
+  const decoded = decodeURIComponent(rawCode);
+  const isUnknown = decoded.toLowerCase() === 'unknown';
+  const code = isUnknown ? null : decoded.toUpperCase();
 
   const { sort: rawSort } = await searchParams;
   const sort = rawSort === 'playtime' ? 'playtime' : 'recent';
 
-  const players = await getPlayersByCountry(code, sort);
-  if (players.length === 0) {
+  const rows = await getPlayersByCountry(code, sort);
+  if (rows.length === 0) {
     notFound();
   }
+  const players = await attachAvatars(rows);
+
+  const linkBase = isUnknown ? '/countries/unknown' : `/countries/${encodeURIComponent(code!)}`;
 
   return (
     <div className="space-y-6">
@@ -40,7 +50,7 @@ export default async function CountryPlayersPage({
 
         <div className="flex gap-2 text-sm">
           <Link
-            href={`/countries/${encodeURIComponent(code)}?sort=recent`}
+            href={`${linkBase}?sort=recent`}
             className={`px-3 py-1.5 rounded border transition-colors ${
               sort === 'recent'
                 ? 'border-accent/50 text-accent bg-accent-dim/20'
@@ -50,7 +60,7 @@ export default async function CountryPlayersPage({
             Most recently played
           </Link>
           <Link
-            href={`/countries/${encodeURIComponent(code)}?sort=playtime`}
+            href={`${linkBase}?sort=playtime`}
             className={`px-3 py-1.5 rounded border transition-colors ${
               sort === 'playtime'
                 ? 'border-accent/50 text-accent bg-accent-dim/20'
@@ -69,7 +79,15 @@ export default async function CountryPlayersPage({
             href={`/players/${encodeURIComponent(p.steamid)}`}
             className="flex items-center justify-between px-4 py-3 hover:bg-base transition-colors"
           >
-            <div className="text-ink text-sm">{p.current_name}</div>
+            <div className="flex items-center gap-3">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={p.avatarUrl}
+                alt=""
+                className="w-9 h-9 rounded-full object-cover ring-1 ring-base-border shrink-0"
+              />
+              <div className="text-ink text-sm">{p.current_name}</div>
+            </div>
             <div className="flex items-center gap-4 text-xs">
               <span className="text-ink-faint mono">{p.steamid}</span>
               <span className="text-ink-muted mono w-16 text-right">

discord_verificiation/playtime-frontend/app/countries/page.tsx

@@ -30,8 +30,8 @@ export default async function CountriesPage() {
           </div>
           {countries.map((c) => (
             <Link
-              key={c.current_country}
-              href={`/countries/${encodeURIComponent(c.current_country)}`}
+              key={c.current_country ?? 'unknown'}
+              href={`/countries/${c.current_country ? encodeURIComponent(c.current_country) : 'unknown'}`}
               className="grid grid-cols-[1fr_auto_auto] gap-6 items-center px-4 py-3 hover:bg-base transition-colors"
             >
               <div className="flex items-center gap-3 min-w-0">
@@ -39,7 +39,9 @@ export default async function CountriesPage() {
                   {countryCodeToFlag(c.current_country)}
                 </span>
                 <span className="text-ink text-sm truncate">{countryCodeToName(c.current_country)}</span>
-                <span className="text-ink-faint text-xs mono shrink-0">{c.current_country}</span>
+                {c.current_country && (
+                  <span className="text-ink-faint text-xs mono shrink-0">{c.current_country}</span>
+                )}
                 <span className="text-ink-muted text-xs mono shrink-0">
                   {c.player_count} player{c.player_count === 1 ? '' : 's'}
                 </span>