diff --git a/tournaments/templates/tournaments/broadcast/broadcasted_planning.html b/tournaments/templates/tournaments/broadcast/broadcasted_planning.html
index ee9bff9..54cbf15 100644
--- a/tournaments/templates/tournaments/broadcast/broadcasted_planning.html
+++ b/tournaments/templates/tournaments/broadcast/broadcasted_planning.html
@@ -13,6 +13,11 @@
             .running {
                 background-color: #90ee90 !important;
             }
+            .timeslot {
+                font-family: "Anybody-ExtraBold";
+                font-size: clamp(0.4rem, 1.5vw - 0.2rem, 3rem); /* Adjust these values as needed */
+                color: #1b223a;
+            }
             .match-cell {
                 box-sizing: border-box;
                 padding: 0;
@@ -20,12 +25,13 @@
                 flex-shrink: 0;
             }
             .match-cell .bubble {
-                height: 8rem;
+                height: 14vh;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 box-sizing: border-box;
-                font-size: clamp(0.8rem, 1vw + 0.4rem, 1.2rem);
+                /* Dynamic font size based on viewport width */
+                font-size: clamp(0.4rem, 1.2vw - 0.2rem, 5rem); /* Adjust these values as needed */
                 overflow: hidden;
                 text-overflow: ellipsis;
                 color: black;
@@ -47,7 +53,7 @@
                 flex-shrink: 0;
             }
             .court-label .bubble {
-                height: 4rem;
+                height: 4vh;
                 font-weight: bold;
                 margin: 0;
                 width: 100%;
@@ -55,19 +61,44 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                font-size: 1em;
+                /* Slightly smaller dynamic font size for court labels */
+                font-size: clamp(0.7rem, 0.8vw + 0.1rem, 3rem); /* Adjust these values as needed */
                 color: black;
             }
             .courts-row,
             .matches-row {
                 display: flex;
                 width: 100%;
-                gap: 20px;
+                gap: 10px;
             }
             .grid-x {
                 display: flex;
                 flex-wrap: wrap;
             }
+            .matchtitle {
+                font-size: inherit; /* Inherit the dynamic font size from .bubble */
+                font-weight: bold;
+                margin-bottom: 0.2em;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .minor-info {
+                font-size: inherit; /* Inherit the dynamic font size from .bubble */
+                font-weight: normal;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            .score {
+                font-size: inherit; /* Inherit the dynamic font size from .bubble */
+            }
+            .bold {
+                font-weight: bold;
+            }
+            .ws {
+                white-space: nowrap;
+            }
         </style>
 
         <link rel="icon" type="image/png" href="{% static 'tournaments/images/favicon.png' %}" />
@@ -76,126 +107,126 @@
 
         <script src="{% static 'tournaments/js/alpine.min.js' %}"></script>
         <script>
-          var _paq = window._paq = window._paq || [];
-          /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-          _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
-          _paq.push(["setDoNotTrack", true]);
-          _paq.push(['trackPageView']);
-          _paq.push(['enableLinkTracking']);
-          (function() {
-            var u="//matomo.padelclub.app/";
-            _paq.push(['setTrackerUrl', u+'matomo.php']);
-            _paq.push(['setSiteId', '1']);
-            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-            g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-          })();
+            var _paq = window._paq = window._paq || [];
+            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+            _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+            _paq.push(["setDoNotTrack", true]);
+            _paq.push(['trackPageView']);
+            _paq.push(['enableLinkTracking']);
+            (function() {
+                var u="//matomo.padelclub.app/";
+                _paq.push(['setTrackerUrl', u+'matomo.php']);
+                _paq.push(['setSiteId', '1']);
+                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+            })();
         </script>
-        </head>
+    </head>
 
     <body x-data="{
-            days: [],
-            currentDayIndex: 0,
-            currentPageIndex: 0,
-            matchGroups: [],
-            courtCount: {{ tournament.court_count|default:1 }},
-            groupsPerPage: 6,
+        days: [],
+        currentDayIndex: 0,
+        currentPageIndex: 0,
+        matchGroups: [],
+        courtCount: {{ tournament.court_count|default:1 }},
+        groupsPerPage: 6,
 
-            retrieveData() {
-                fetch('/tournament/{{ tournament.id }}/planning/json/')
-                    .then(res => res.json())
-                    .then((data) => {
-                        this.days = data.days || [];
-                        this.matchGroups = data.match_groups || [];
-                        this.currentPageIndex = 0;
-
-                        if (this.days.length > 0 && this.currentDayIndex >= this.days.length) {
-                            this.currentDayIndex = 0;
-                        }
-                    });
-            },
+        retrieveData() {
+            fetch('/tournament/{{ tournament.id }}/planning/json/')
+                .then(res => res.json())
+                .then((data) => {
+                    this.days = data.days || [];
+                    this.matchGroups = data.match_groups || [];
+                    this.currentPageIndex = 0;
 
-            getMatchGroupsForDay(day) {
-                const formattedDay = day;
-                const filteredGroups = this.matchGroups.filter(group => {
-                    if (!group.matches || group.matches.length === 0) return false;
-                    return group.name && formattedDay && group.name.includes(formattedDay);
+                    if (this.days.length > 0 && this.currentDayIndex >= this.days.length) {
+                        this.currentDayIndex = 0;
+                    }
                 });
+        },
 
-                let groupsPerPageThreshold = this.courtCount >= 5 ? Math.ceil(this.groupsPerPage / 2) : this.groupsPerPage;
+        getMatchGroupsForDay(day) {
+            const formattedDay = day;
+            const filteredGroups = this.matchGroups.filter(group => {
+                if (!group.matches || group.matches.length === 0) return false;
+                return group.name && formattedDay && group.name.includes(formattedDay);
+            });
 
-                const paginatedGroups = [];
-                for (let i = 0; i < Math.ceil(filteredGroups.length / groupsPerPageThreshold); i++) {
-                    paginatedGroups.push(filteredGroups.slice(i * groupsPerPageThreshold, (i + 1) * groupsPerPageThreshold));
-                }
-                return paginatedGroups;
-            },
+            let groupsPerPageThreshold = this.courtCount >= 5 ? Math.ceil(this.groupsPerPage / 2) : this.groupsPerPage;
+
+            const paginatedGroups = [];
+            for (let i = 0; i < Math.ceil(filteredGroups.length / groupsPerPageThreshold); i++) {
+                paginatedGroups.push(filteredGroups.slice(i * groupsPerPageThreshold, (i + 1) * groupsPerPageThreshold));
+            }
+            return paginatedGroups;
+        },
 
-            getCourtNumber(courtName) {
-                if (!courtName) return 999;
-                const match = courtName.match(/(\d+)/);
-                return match ? parseInt(match[1]) : 999;
-            },
+        getCourtNumber(courtName) {
+            if (!courtName) return 999;
+            const match = courtName.match(/(\d+)/);
+            return match ? parseInt(match[1]) : 999;
+        },
 
-            organizeMatchesByCourt(matches) {
-                const courtMatches = Array(this.courtCount).fill(null);
-                if (matches && matches.length > 0) {
-                    matches.forEach(match => {
-                        if (match && match.court) {
-                            const courtNum = this.getCourtNumber(match.court);
-                            if (courtNum > 0 && courtNum <= this.courtCount) {
-                                courtMatches[courtNum - 1] = match;
-                            }
+        organizeMatchesByCourt(matches) {
+            const courtMatches = Array(this.courtCount).fill(null);
+            if (matches && matches.length > 0) {
+                matches.forEach(match => {
+                    if (match && match.court) {
+                        const courtNum = this.getCourtNumber(match.court);
+                        if (courtNum > 0 && courtNum <= this.courtCount) {
+                            courtMatches[courtNum - 1] = match;
                         }
-                    });
-                }
-                return courtMatches;
-            },
+                    }
+                });
+            }
+            return courtMatches;
+        },
 
-            loop() {
-                this.retrieveData();
-                setInterval(() => {
-                    if (this.days.length > 0) {
-                        const currentDay = this.days[this.currentDayIndex];
-                        const pagesForDay = this.getMatchGroupsForDay(currentDay);
+        loop() {
+            this.retrieveData();
+            setInterval(() => {
+                if (this.days.length > 0) {
+                    const currentDay = this.days[this.currentDayIndex];
+                    const pagesForDay = this.getMatchGroupsForDay(currentDay);
 
-                        if (pagesForDay && pagesForDay.length > 1) {
-                            const _currentPageIndex = this.currentPageIndex;
-                            this.currentPageIndex = (this.currentPageIndex + 1) % pagesForDay.length;
-                            if (_currentPageIndex >= 1 && this.currentPageIndex === 0) {
-                                this.currentDayIndex = (this.currentDayIndex + 1) % this.days.length;
-                            }
-                        } else {
-                            this.currentPageIndex = 0;
+                    if (pagesForDay && pagesForDay.length > 1) {
+                        const _currentPageIndex = this.currentPageIndex;
+                        this.currentPageIndex = (this.currentPageIndex + 1) % pagesForDay.length;
+                        if (_currentPageIndex >= 1 && this.currentPageIndex === 0) {
                             this.currentDayIndex = (this.currentDayIndex + 1) % this.days.length;
                         }
                     } else {
-                        this.currentDayIndex = 0;
                         this.currentPageIndex = 0;
+                        this.currentDayIndex = (this.currentDayIndex + 1) % this.days.length;
                     }
-                }, 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})`;
+                    this.currentDayIndex = 0;
+                    this.currentPageIndex = 0;
                 }
+            }, 2000);
+        },
+
+        calculateFractionWidth() {
+            if (this.courtCount >= 5) {
+                const reductionFactor = 0.95; // Adjust this value
+                return `calc((100% / ${this.courtCount}) * ${reductionFactor})`;
+            } else {
+                const reductionFactor = 0.90; // Adjust this value
+                return `calc((100% / (${this.courtCount})) * ${reductionFactor})`;
             }
-        }" x-init="loop()">
+        }
+    }" x-init="loop()">
 
         <header>
             <div id="header">
-                <div class="left-content bubble-header">
+                <div class="left-content bubble-header" style="max-height: 20vh;">
                     <img src="{% static 'tournaments/images/PadelClub_logo_512.png' %}" alt="logo" class="logo">
                     <div class="left-margin">
                         <h1 class="club">{{ tournament.broadcast_event_display_name }}</h1>
                         <h1 class="event" x-text="days[currentDayIndex]"></h1>
                     </div>
                 </div>
-                <div class="right-content">{% qr_from_text qr_code_url options=qr_code_options %}</div>
+                <div class="right-content" style="max-height: 20vh;">{% qr_from_text qr_code_url options=qr_code_options %}</div>
             </div>
         </header>
 
@@ -203,9 +234,25 @@
             <main>
                 <div class="grid-x">
                     <div class="cell" :class="{'large-12': courtCount >= 5, 'large-6': courtCount < 5}">
-                        <div style="display: flex; margin-bottom: 20px;">
-                            <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 style="display: flex; margin-bottom: 10px;">
+                            <div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
+                                <h1 class="timeslot">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" :style="{'width': calculateFractionWidth()}">
+                                        <div class="bubble">
+                                            <div class="score ws bold">Terrain <span x-text="courtNum"></span></div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </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: 10px;">
+                            <div class="bubble-footer" style="visibility: hidden; align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
+                                <h1 class="timeslot">00:00</h1>
                             </div>
                             <div class="courts-row">
                                 <template x-for="courtNum in Array.from({length: courtCount || 1}, (_, i) => i + 1)" :key="courtNum">
@@ -227,9 +274,9 @@
                                 <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 style="display: flex; margin-bottom: 20px;">
-                                                <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 style="display: flex; margin-bottom: 10px;">
+                                                <div class="bubble-footer" style="align-items: center; justify-content: center; margin-right: 10px; width: 6vw;">
+                                                    <h1 class="timeslot" x-text="group.name.slice(-5)"></h1>
                                                 </div>
 
                                                 <div class="matches-row">
@@ -237,7 +284,7 @@
                                                         <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>
+                                                                    <div class="bold" x-text="match.group_stage_name ? match.group_stage_name : match.title"></div>
                                                                     <template x-if="match.tournament_title">
                                                                         <div class="minor-info semibold" x-text="match.tournament_title"></div>
                                                                     </template>
@@ -263,11 +310,11 @@
 
         <footer class="footer-broadcast">
             {% if tournament.event.images.exists %}
-            <div class="bubble-footer">
+            <div class="bubble-footer" style="max-height: 16vh;">
                 <div class="bubble-sponsor">
                     {% for image in tournament.event.images.all %}
                         <img src="{{ image.image.url }}" alt="{{ image.title|default:'Sponsor' }}"
-                            class="sponsor-logo-broadcast">
+                             class="sponsor-logo-broadcast">
                     {% endfor %}
                 </div>
             </div>