diff --git a/components/match-card.tsx b/components/match-card.tsx
index 78abf3b..8016c2f 100644
--- a/components/match-card.tsx
+++ b/components/match-card.tsx
@@ -25,7 +25,9 @@ function formatDate(d: string) {
 export function MatchCard({ match, compact = false }: { match: Match; compact?: boolean }) {
   const ft = match.scoreFt
   const hasScore = ft != null
-  const winner = ft ? (ft[0] > ft[1] ? 'home' : ft[0] < ft[1] ? 'away' : 'draw') : null
+  // Penalty score determines the winner when present
+  const decisive = match.scoreP ?? ft
+  const winner = decisive ? (decisive[0] > decisive[1] ? 'home' : decisive[0] < decisive[1] ? 'away' : 'draw') : null
 
   if (compact) {
     return (
@@ -41,8 +43,19 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
                 {match.team1.name}
               </span>
             </div>
-            <div className="font-['Bebas_Neue'] text-xl text-[#22c55e] flex-shrink-0 min-w-[44px] text-center">
-              {hasScore ? `${ft![0]} – ${ft![1]}` : match.isLive ? <LiveBadge label="•" /> : '–'}
+            <div className="flex-shrink-0 min-w-[52px] text-center">
+              <div className="font-['Bebas_Neue'] text-xl text-[#22c55e]">
+                {hasScore
+                  ? match.scoreP
+                    ? `${match.scoreP[0]} – ${match.scoreP[1]}`
+                    : `${ft![0]} – ${ft![1]}`
+                  : match.isLive ? <LiveBadge label="•" /> : '–'}
+              </div>
+              {match.scoreP && (
+                <div className="text-[8px] text-[#2a5c35] leading-none">
+                  {ft![0]}–{ft![1]} a.e.t.
+                </div>
+              )}
             </div>
             <div className="flex-1 flex items-center justify-end gap-2 overflow-hidden">
               <span className={`text-sm font-medium truncate ${winner === 'away' ? 'text-[#dff5e8]' : 'text-[#4a7a55]'}`}>
@@ -51,7 +64,9 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
               <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="sm" />
             </div>
           </div>
-          {match.scoreEt && <div className="text-[9px] text-[#2a5c35] mt-1 text-center">AET · {match.scoreP ? `PSO ${match.scoreP[0]}-${match.scoreP[1]}` : ''}</div>}
+          {match.scoreEt && !match.scoreP && (
+            <div className="text-[9px] text-[#2a5c35] mt-1 text-center">a.e.t.</div>
+          )}
         </div>
       </Link>
     )
@@ -68,12 +83,20 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
           </div>
           <div className="text-center flex-shrink-0">
             <div className="font-['Bebas_Neue'] text-[76px] text-[#22c55e] leading-none">
-              {hasScore ? `${ft![0]} – ${ft![1]}` : '? – ?'}
+              {hasScore
+                ? match.scoreP
+                  ? `${match.scoreP[0]} – ${match.scoreP[1]}`
+                  : `${ft![0]} – ${ft![1]}`
+                : '? – ?'}
             </div>
+            {match.scoreP && (
+              <div className="text-[11px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div>
+            )}
             <div className="text-[10px] text-[#2a5c35] tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
             <div className="text-xs text-[#1a3a22] mt-1">{match.date ? formatDate(match.date) : ''}</div>
-            {match.scoreEt && <div className="text-[10px] text-[#2a5c35] mt-1">AET {match.scoreEt[0]}–{match.scoreEt[1]}</div>}
-            {match.scoreP && <div className="text-[10px] text-[#4ade80] mt-0.5">PSO {match.scoreP[0]}–{match.scoreP[1]}</div>}
+            {match.scoreEt && !match.scoreP && (
+              <div className="text-[10px] text-[#2a5c35] mt-1">a.e.t. {match.scoreEt[0]}–{match.scoreEt[1]}</div>
+            )}
           </div>
           <div className="text-center flex-1 min-w-[100px]">
             <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2.5" />