diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_planning.html b/tournaments/templates/tournaments/broadcast/broadcasted_planning.html
index 46397b1..b253302 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_planning.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_planning.html
@@ -4,6 +4,7 @@
 <html>
     <head>
         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <link rel="stylesheet" href="{% static 'tournaments/css/foundation.min.css' %}" />
         <link rel="stylesheet" href="{% static 'tournaments/css/basics.css' %}" />
         <link rel="stylesheet" href="{% static 'tournaments/css/style.css' %}" />
@@ -12,17 +13,38 @@
             .running {
                 background-color: #90ee90 !important;
             }
-            .bubble-footer.score, .match-cell .bubble {
+            .match-cell {
+                box-sizing: border-box;
+                padding: 0;
+                flex-grow: 0;
+                flex-shrink: 0;
+            }
+            .match-cell .bubble {
                 height: 8rem;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 box-sizing: border-box;
-                font-size: 1.2em;
+                font-size: clamp(0.8rem, 1vw + 0.4rem, 1.2rem);
                 overflow: hidden;
                 text-overflow: ellipsis;
-                width: 100%;
                 color: black;
+                background-color: white;
+                margin: 0;
+                width: 100%;
+            }
+            .match-cell .bubble.even {
+                background-color: white;
+            }
+            .match-cell .bubble.empty {
+                background-color: rgba(173, 216, 230, 0.3);
+                color: white;
+            }
+            .court-label {
+                box-sizing: border-box;
+                padding: 0;
+                flex-grow: 0;
+                flex-shrink: 0;
             }
             .court-label .bubble {
                 height: 4rem;
@@ -36,46 +58,16 @@
                 font-size: 1em;
                 color: black;
             }
-            .match-cell .bubble {
-                background-color: white; /* Light blue */
-            }
-            .match-cell .bubble.even {
-                background-color: white; /* Light mint */
-            }
-            .match-cell .bubble.empty {
-                background-color: rgba(173, 216, 230, 0.3); /* Light blue */
-                color: white;
-            }
-            .match-cell, .court-label {
-                width: 165px;
+            .courts-row,
+            .matches-row {
                 display: flex;
-            }
-            /* Adjust width when court count is 5 or more */
-            .court-label .bubble,
-            .match-cell .bubble {
-                width: 100%;
-                margin: 0;
-            }
-            .court-label .bubble,
-            .cell.large-6 {
-                width: 50%;
-                padding: 0px;
-            }
-            .court-label .bubble,
-            .cell.large-12 {
                 width: 100%;
-                padding: 0px;
+                gap: 20px;
             }
             .grid-x {
                 display: flex;
                 flex-wrap: wrap;
             }
-            .courts-row,
-            .matches-row {
-                display: flex;
-                width: 100%;
-                gap: 20px;
-            }
         </style>
 
         <link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" />
@@ -83,7 +75,6 @@
         <title>Programmation</title>
 
         <script src="{% static 'tournaments/js/alpine.min.js' %}"></script>
-        <!-- Matomo -->
         <script>
           var _paq = window._paq = window._paq || [];
           /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
@@ -99,8 +90,7 @@
             g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
           })();
         </script>
-        <!-- End Matomo Code -->
-    </head>
+        </head>
 
     <body x-data="{
             days: [],
@@ -108,7 +98,7 @@
             currentPageIndex: 0,
             matchGroups: [],
             courtCount: {{ tournament.court_count|default:1 }},
-            groupsPerPage: 8,
+            groupsPerPage: 6,
 
             retrieveData() {
                 fetch('/tournament/{{ tournament.id }}/planning/json/')
@@ -131,7 +121,6 @@
                     return group.name && formattedDay && group.name.includes(formattedDay);
                 });
 
-                // If court count is 5 or more, show fewer groups per page
                 let groupsPerPageThreshold = this.courtCount >= 5 ? Math.ceil(this.groupsPerPage / 2) : this.groupsPerPage;
 
                 const paginatedGroups = [];
@@ -148,9 +137,7 @@
             },
 
             organizeMatchesByCourt(matches) {
-                // Create an array of court positions, each containing the match or null
                 const courtMatches = Array(this.courtCount).fill(null);
-
                 if (matches && matches.length > 0) {
                     matches.forEach(match => {
                         if (match && match.court) {
@@ -161,7 +148,6 @@
                         }
                     });
                 }
-
                 return courtMatches;
             },
 
@@ -186,7 +172,17 @@
                         this.currentDayIndex = 0;
                         this.currentPageIndex = 0;
                     }
-                }, 15000);
+                }, 2000);
+            },
+
+            calculateFractionWidth() {
+                if (this.courtCount >= 5) {
+                    const reductionFactor = 0.9; // Adjust this value (e.g., 0.8 for more reduction)
+                    return `calc((100% / ${this.courtCount}) * ${reductionFactor})`;
+                } else {
+                    const reductionFactor = 0.8; // Adjust this value (e.g., 0.8 for more reduction)
+                    return `calc((100% / (${this.courtCount} * 2)) * ${reductionFactor})`;
+                }
             }
         }" x-init="loop()">
 
@@ -206,14 +202,14 @@
         <div class="wrapper">
             <main>
                 <div class="grid-x">
-                    <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
+                    <div class="cell large-12">
                         <div style="display: flex; margin-bottom: 20px;">
-                            <div class="bubble-footer score ws bold" style="visibility: hidden; display: flex; align-items: center; justify-content: center; margin: 0; width: 7em; margin-right: 15px; height: 40px;">
-                                <h1 class="score ws bold" style="margin: 0; padding: 0;">00:00</h1>
+                            <div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 20px; width: 8rem;">
+                                <h1 class="event">00:00</h1>
                             </div>
                             <div class="courts-row">
                                 <template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum">
-                                    <div class="court-label">
+                                    <div class="court-label" :style="{'width': calculateFractionWidth()}">
                                         <div class="bubble">
                                             <div class="score ws bold">Terrain <span x-text="courtNum"></span></div>
                                         </div>
@@ -222,24 +218,6 @@
                             </div>
                         </div>
                     </div>
-                    <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}" x-show="courtCount < 5">
-                        <div style="display: flex; margin-bottom: 20px;">
-                            <div class="bubble-footer score ws bold" style="visibility: hidden; display: flex; align-items: center; justify-content: center; margin: 0; width: 7em; margin-right: 15px; height: 40px;">
-                                <h1 class="score ws bold" style="margin: 0; padding: 0;">00:00</h1>
-                            </div>
-                            <div class="courts-row">
-                                <template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum">
-                                    <div class="court-label">
-                                        <div class="bubble">
-                                            <div class="score ws bold">Terrain <span x-text="courtNum"></span></div>
-                                        </div>
-                                    </div>
-                                </template>
-                            </div>
-                        </div>
-                    </div>
-
-
                 </div>
 
                 <template x-for="(day, dayIndex) in days" :key="day">
@@ -248,17 +226,15 @@
                             <div x-show="currentPageIndex === pageIndex">
                                 <div class="grid-x">
                                     <template x-for="(group, groupIndex) in groupPage" :key="groupIndex">
-                                        <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
+                                        <div class="cell large-12">
                                             <div style="display: flex; margin-bottom: 20px;">
-                                                <!-- Group name container -->
-                                                <div class="bubble-footer score ws bold" style="display: flex; align-items: center; justify-content: center; margin: 0; width: 7em; margin-right: 15px;">
-                                                    <h1 class="score ws bold" style="margin: 0; padding: 0;" x-text="group.name.slice(-5)"></h1>
+                                                <div class="bubble-footer" style="align-items: center; justify-content: center; margin-right: 20px; width: 8rem;">
+                                                    <h1 class="event" x-text="group.name.slice(-5)"></h1>
                                                 </div>
 
-                                                <!-- Matches container -->
                                                 <div class="matches-row">
                                                     <template x-for="(match, courtIndex) in organizeMatchesByCourt(group.matches)" :key="courtIndex">
-                                                        <div class="match-cell">
+                                                        <div class="match-cell" :style="{'width': calculateFractionWidth()}">
                                                             <template x-if="match">
                                                                 <div class="bubble" :class="{'running': !match.ended && match.started, 'even': courtIndex % 2 === 1}" style="text-align: center;">
                                                                     <div class="matchtitle" x-text="match.group_stage_name ? match.group_stage_name : match.title"></div>
