diff --git a/src/app/matches/[id]/page.tsx b/src/app/matches/[id]/page.tsx
index 8117d53..1665684 100644
--- a/src/app/matches/[id]/page.tsx
+++ b/src/app/matches/[id]/page.tsx
@@ -85,13 +85,13 @@ export default async function MatchDetailPage({ params }: PageProps) {
             <h2 className="text-xl font-bold text-gray-900 mb-4">Match Setup</h2>
             
             <div className="flex justify-center">
-              <div className="relative">
-                {/* Table Square */}
-                <div className="w-48 h-48 bg-amber-100 border-4 border-amber-600 rounded-lg relative shadow-lg">
+              <div className="relative p-8">
+                {/* Table Square - Larger with more padding */}
+                <div className="w-72 h-72 bg-amber-100 border-4 border-amber-600 rounded-xl relative shadow-lg">
                   {/* Top: Team 1 Player 1 */}
-                  <div className="absolute top-0 left-0 right-0 h-1/2 flex flex-col justify-end items-center pb-2">
-                    <div className="text-center">
-                      <p className="text-sm font-medium text-amber-900">
+                  <div className="absolute top-0 left-0 right-0 h-1/2 flex flex-col justify-end items-center pb-4">
+                    <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm">
+                      <p className="text-base font-semibold text-amber-900">
                         {match.team1P1.name}
                       </p>
                       <p className="text-xs text-amber-700">
@@ -103,14 +103,14 @@ export default async function MatchDetailPage({ params }: PageProps) {
                         )}
                       </p>
                     </div>
-                    <div className="text-xs text-amber-600 mt-1">Team 1</div>
+                    <div className="text-xs text-amber-600 mt-2 font-medium">Team 1</div>
                   </div>
 
                   {/* Bottom: Team 2 Player 2 */}
-                  <div className="absolute bottom-0 left-0 right-0 h-1/2 flex flex-col justify-start items-center pt-2">
-                    <div className="text-xs text-red-600 mb-1">Team 2</div>
-                    <div className="text-center">
-                      <p className="text-sm font-medium text-red-900">
+                  <div className="absolute bottom-0 left-0 right-0 h-1/2 flex flex-col justify-start items-center pt-4">
+                    <div className="text-xs text-red-600 mb-2 font-medium">Team 2</div>
+                    <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm">
+                      <p className="text-base font-semibold text-red-900">
                         {match.team2P2.name}
                       </p>
                       <p className="text-xs text-red-700">
@@ -125,12 +125,12 @@ export default async function MatchDetailPage({ params }: PageProps) {
                   </div>
 
                   {/* Left: Team 1 Player 2 */}
-                  <div className="absolute left-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pl-2">
-                    <div className="text-center rotate-[-90deg]">
-                      <p className="text-xs font-medium text-amber-900">
+                  <div className="absolute left-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pl-4">
+                    <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm rotate-[-90deg]">
+                      <p className="text-sm font-semibold text-amber-900">
                         {match.team1P2.name}
                       </p>
-                      <p className="text-[10px] text-amber-700">
+                      <p className="text-[11px] text-amber-700">
                         Elo: {match.team1P2.currentElo}
                         {eloChanges[match.team1P2.id] !== undefined && (
                           <span className={eloChanges[match.team1P2.id] >= 0 ? "text-green-600" : "text-red-600"}>
@@ -142,12 +142,12 @@ export default async function MatchDetailPage({ params }: PageProps) {
                   </div>
 
                   {/* Right: Team 2 Player 1 */}
-                  <div className="absolute right-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pr-2">
-                    <div className="text-center rotate-[90deg]">
-                      <p className="text-xs font-medium text-red-900">
+                  <div className="absolute right-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pr-4">
+                    <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm rotate-[90deg]">
+                      <p className="text-sm font-semibold text-red-900">
                         {match.team2P1.name}
                       </p>
-                      <p className="text-[10px] text-red-700">
+                      <p className="text-[11px] text-red-700">
                         Elo: {match.team2P1.currentElo}
                         {eloChanges[match.team2P1.id] !== undefined && (
                           <span className={eloChanges[match.team2P1.id] >= 0 ? "text-green-600" : "text-red-600"}>
@@ -160,16 +160,16 @@ export default async function MatchDetailPage({ params }: PageProps) {
 
                   {/* Score in Center */}
                   <div className="absolute inset-0 flex items-center justify-center">
-                    <div className="bg-white border-2 border-gray-300 rounded-lg px-4 py-2 shadow-md">
+                    <div className="bg-white border-2 border-gray-300 rounded-lg px-6 py-3 shadow-md">
                       <div className="text-center">
-                        <p className="text-lg font-bold text-amber-600">
+                        <p className="text-xl font-bold text-amber-600">
                           {match.team1Score}
                         </p>
                         <p className="text-xs text-gray-500">Team 1</p>
                       </div>
-                      <div className="text-center text-gray-400">—</div>
+                      <div className="text-center text-gray-400 text-lg">—</div>
                       <div className="text-center">
-                        <p className="text-lg font-bold text-red-600">
+                        <p className="text-xl font-bold text-red-600">
                           {match.team2Score}
                         </p>
                         <p className="text-xs text-gray-500">Team 2</p>