diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index bcaf9a6..531490b 100644
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -254,6 +254,10 @@ p {
   max-width: 36rem;
   margin-inline: auto;
 
+  @media (min-width: 1024px) {
+      max-width: 50vw;
+    }
+
   .play-stats-header {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 0e55b82..77cd8c4 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -217,6 +217,7 @@ export class HomePage implements OnInit {
         const modal = await this.modalCtrl.create({
             component: ModalPlayStatsComponent,
             componentProps: {stats: this.playStats},
+            cssClass: 'play-stats-modal',
         });
         await modal.present();
         if (this.consentService.current === 'granted') {
diff --git a/src/app/home/modal-play-stats.component.scss b/src/app/home/modal-play-stats.component.scss
index b661c1c..b2772a6 100644
--- a/src/app/home/modal-play-stats.component.scss
+++ b/src/app/home/modal-play-stats.component.scss
@@ -62,7 +62,7 @@ section:first-child h2 {
 .hours {
   margin-top: 0.5rem;
   @include hour-grid;
-  max-width: 40rem;
+  max-width: 58rem;
 
   .hour-label {
     font-size: 0.7rem;
diff --git a/src/global.scss b/src/global.scss
index c7cf5ff..f8c2f90 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -160,6 +160,13 @@ ion-list-header {
   transform: translate(-50%, 0);
 }
 
+@media (min-width: 1024px) {
+    ion-modal.play-stats-modal {
+        --width: 80%;
+        --max-width: 60rem;
+    }
+}
+
 /* video.js adds .vjs-touch-enabled based on touch *capability* (navigator.maxTouchPoints), which
    stays true on touchscreen laptops even when the mouse is the input in use. Gate on
    (hover: none) and (pointer: coarse) too so these rules only kick in when touch is actually the